X-Git-Url: https://vcs.fsf.org/?p=fsf-giving-guide.git;a=blobdiff_plain;f=stylesheet.css;h=54c841c1ee3bbf96c77a97de7b199c66b3d9eb2d;hp=5bac547bda4582c09b05f0acb16d3e358a60ae4e;hb=e24e7e82f619a73da67dcdd3f43e3e6e6c2c7a30;hpb=afb35b89eaf68a374e7362aa5c4ea96851e8a177

diff --git a/stylesheet.css b/stylesheet.css
index 5bac547..54c841c 100755
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -1,135 +1,352 @@
 /*Typography*/
 
+@font-face {
+    font-family: 'Signika Regular';
+    src: local('Signika Regular'), url('fonts/Signika-Regular.ttf') format('truetype');
+}
+
 @font-face {
     font-family: 'Signika Light';
     src: local('Signika Light'), url('fonts/Signika-Light.ttf') format('truetype');
 }
 
+@font-face {
+    font-family: 'Signika Bold';
+    src: local('Signika Bold'), url('fonts/Signika-Bold.ttf') format('truetype');
+}
+
 @font-face {
     font-family: 'Open Sans';
     src: local('Open Sans'), url('fonts/OpenSans-Regular.ttf') format('truetype');
 }
 
+@font-face {
+    font-family: 'Open Sans Bold';
+    src: local('Open Sans Bold'), url('fonts/OpenSans-Bold.ttf') format('truetype');
+}
+
 /*Style common HTML tags*/
 
 html {
-    line-height: 1.4em;
     font-family: 'Open Sans', 'DejaVu Sans', Arial, sans-serif;
-    font-size: 1em;
+    font-size: 14px;
+    line-height: 1.4;
     color: #363636;
+    background-color: #fff;
     width: 100%;
 }
 
-a { color: #b495d3;}
-a:link { text-decoration: none; }
-a:visited { text-decoration: none; }
-a:hover { text-decoration: underline; }
-a:active { text-decoration: underline; }
+/* Type something: */
 
+a { color: #1F8A70; border-bottom: 1px solid #dbd145; text-decoration: none; }
 
-p { line-height: 1.4em; margin-bottom: 1.2em; }
+p { line-height: 1.4; margin-bottom: 1.5em; font-size: 1em; }
 
 i { font-style: italic; }
 b { font-style: oblique; }
 
-li {list-style-type: circle; padding: 0.4em 0.2em; line-height: 1.4em; }
-ul {margin: 1em 2em 0em 4em;}
+li {list-style-type: circle; padding: 0.4em 0.2em; line-height: 1.4; }
+/* ul {margin: 1em 2em 0em 4em;} */
 
-br {margin-bottom: 20em; margin-top: 20em;}
+br {margin-bottom: 0.5em; margin-top: 0.5em;}
 
-h1 {  font-size: 2.75em;  font-family: 'Signika Light'; margin-bottom: 0.5em; margin-top: 1em; }
-h2 {  font-size: 1.75em;  font-family: 'Signika Light';	color: #6c6c6c; margin-bottom: 0.5em; margin-top: 1em; }
-h3 {  font-size: 1.625em; font-family: 'Signika Light';	color: #b495d3; margin-bottom: 0.5em; margin-top: 1em; }
-h4 {  font-size: 1.375em; font-family: 'Signika Light'; color: #4d4d4d;	margin-bottom: 0.5em; margin-top: 1em; }
-h5 {  font-size: 1.25em;  font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 1em; }
-h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 1em; }
+h1 {  font-size: 2.20em;  font-family: 'Signika Light'; color: #2CAF8F; margin-bottom: 0.5em; margin-top: 1em; }
+h2 {  font-size: 1.75em;  font-family: 'Signika Light';	color: #2CAF8F; margin-bottom: 0.5em; margin-top: 2em; }
+h3 {  font-size: 1.625em; font-family: 'Signika Bold';	color: #484848; margin-bottom: 0.5em; margin-top: 2em; }
+h4 {  font-size: 1.375em; font-family: 'Signika Light'; color: #4d4d4d;	margin-bottom: 0.5em; margin-top: 2em; }
+h5 {  font-size: 1.25em;  font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
+h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
 
 /*Site-specific*/
 
-#banner > img {
-  width: 100%;
+  /* Header */
+
+.header {
 }
 
-#wrapper {
-  margin: auto 5em;
+/* Navbar */
+
+.header_wrapper {
+  background-color: #2CAF8F;
+  height: 486px;
 }
 
-#comparisons {
-  /* padding-top: 10em; */
-  background-color: #fbfbfb;
-  position: absolute;
-  width: 100%;
-  max-width: 1150px;
+.header a {
+  border-bottom: 0;
 }
 
-.main_title {
-  margin-left: 2em;
-  margin-bottom: 3em;
+.navbar_wrapper {
+  max-width: 1300px;
+  min-width: 1110px;
+  margin: auto;
+  text-align: center;
 }
 
-.section_wrapper {
-  margin-bottom: 4em;
+.logo_wrapper {
+  padding: 1.3em;
+  float: left;
 }
 
-.title {
-  text-align: center;
-  font-size: 1.5em;
+.join_wrapper {
+  padding: 1.2em;
+  float: right;
+  display: inline-block;
+}
+
+.logo, .join {
+  max-width: 200px;
+  min-width: 200px;
+}
+
+.share_wrapper {
 }
 
-#free {
+.share {
   position: relative;
-  /* background-color: red; */
+  bottom: 0.8em;
+  text-align: center;
+}
+
+.share a{
+  background-color: #FDD53A;
+  border-bottom: 0;
+  padding: .6em 2em;
+  font-family: 'Signika Bold';
+  font-size: 1.4em;
+  color: #2CAF8F;
+  border-radius: 50em;
+}
+
+.share a:hover {
+  background-color: #FDDE56;
+}
+
+.navbar {
+  width: 537px;
+  padding: 1em;
+  height: 2.55556em;
+  display: inline-block;
+/*   float: left; */
+}
+
+.navbar li {
+  font-family: 'Signika Regular';
+  font-size: 1em;
+  background-color: white;
+  list-style-type: none;
+  border-right: 1px #9BD2BF solid;
+  padding: 0 30px 0 30px;
+  line-height: 2.6;
   float: left;
-  width: 45%;
-  max-width: 450px;
 }
 
-#sign {
-  position: relative;
-  /* background-color: green; */
-  width: 240px;
+.navbar li:first-child {
+  border-radius: 100px 0 0 100px;
+}
+
+.navbar li:last-child {
+  border-right: 0;
+  border-radius: 0 100px 100px 0;
+}
+
+.navbar li:hover {
+  background-color: #FFDD55;
+}
+
+.navbar li a {
+  display: block;
+  text-decoration: none;
+}
+
+.navbar li a:hover {
+  color: #4B423B;
+}
+
+.intro,
+.share {
+  max-width: 1300px;
+  min-width: 1170px;
+}
+
+.intro_wrapper,
+.intro_img {
+  max-width: 500px;
+  min-width: 00px;
+}
+
+.intro_wrapper {
+  float: right;
+  color: white;
+  padding-right: 4em;
+}
+
+.intro_img{
   float: left;
+  padding-left: 4em;
+}
+
+.intro_wrapper h2 {
+  color: #FFDD55;
+}
+
+.intro_wrapper a {
+  border-bottom: 1px solid #FDD53A;
+  color: #FDD53A;
+}
+
+.intro_img img{
+  padding-top: 1.7em;
+  width: 100%;
+}
+
+/* Comparisons */
+
+.wrapper,
+.section_wrapper,
+.buy_avoid,
+.recommended,
+.licenses {
+  max-width: 750px;
+  min-width: 750px;
+  margin: auto;
+}
+
+.main_title {
+  width: 100%;
+  text-align: left;
+  border-bottom: 1px solid lightgray;
   margin-top: 3em;
+  margin-bottom: 2em;
+  display: inline-block;
 }
 
-#proprietary {
-  position: relative;
-  /* background-color: blue; */
-  width: 45%;
-  max-width: 450px;
-  float: right;
+.buy a {
+  border-bottom: none;
+}
+
+.product_img {
+  margin: auto;
+/*   max-width: 168px; */
+  max-height: 168px;
 }
 
 .product {
+  margin: auto;
   display: block;
+  /* margin-bottom: 8em; */
+/*   max-height: 168px; */
+}
+
+.good,
+.bad {
+  display: none; /* FIXME: This is temporary until I fix the sizes*/
+  position: relative;
+  top: 175px;
+  left: 84px;
+  width: 60px;
+}
+
+.free, .proprietary {
+  text-align: center;
+}
+
+.free li,
+.proprietary li {
+  text-align: left;
+}
+
+.buy img,
+.avoid img {
+  max-width: 151px;
+  height: 42px;
+}
+
+.buy_avoid_wrapper {
+  margin-top: 2em;
+  min-width: 100%;
+  max-width: 100%;
+  display: inline-block;
+}
+
+.buy {
+  text-align: center;
   margin: auto;
-  width: 250px;
-  height: 250px;
+  width: 45.555555%;
+  float: left;
+
 }
 
-.sign  {
-  display: block;
+.avoid {
+  text-align: center;
   margin: auto;
-  width: 149px;
-  height: 149px;
+  width: 45.555555%;
+  float: right;
+}
+
+.free {
+  float: left;
+  width: 45.555555%;
+}
+
+.proprietary {
+  float: right;
+  width: 45.555555%;
+}
+
+/* Recommended Section */
+
+.topic_title {
+  border-bottom: 1px solid #2CAF8F;
+  width: 100%;
+  text-align: left;
+  margin-top: 3em;
+  display: inline-block;
 }
 
-.separator {
-  width: 1px;
-  height: 324px;
+.recommend_wrapper {
+  padding-top: 1em;
   margin: auto;
-  margin-left: 7.5em;
+  width: 750px;
+}
+
+.recommended_product {
+  text-align: center;
+  width: 29%;
+  margin: 1em;
+  display: inline-block
+}
+
+.recommended_product_img {
+  width: 120px;
+}
+
+.recommend_wrapper .buy {
+  float: none;
+  text-align: center;
+  width: 100%;
+}
+
+.remark {
   margin-top: 3em;
+  font-weight: bold;
 }
 
-#section_wrapper {
-  position: relative;
+/* Licenses */
+
+.licenses h1 {
+  margin-top: 0.6em;
 }
 
-/* #test {
-  height: 10em;
-  position: relative;
-  background-color: white;
+/* Footer */
+
+footer {
   display: block;
-  float: left;
-} */
+  background-color: #1a1a1a;
+}
+
+.footer_wrapper {
+  width: 750px;
+  margin: auto;
+  padding: 2em;
+  color: white;
+}