projects / fsf-giving-guide.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 508d076)
Updated lots of styles
authorReda Lazri <the.red.shortcut@gmail.com>
Thu, 13 Nov 2014 16:12:50 +0000 (17:12 +0100)
committerReda Lazri <the.red.shortcut@gmail.com>
Thu, 13 Nov 2014 16:12:50 +0000 (17:12 +0100)
givingguide.html patch | blob | blame | history
images/join.png patch | blob | blame | history
images/logo.png patch | blob | blame | history
stylesheet.css patch | blob | blame | history

diff --git a/givingguide.html b/givingguide.html
index d11ec2484fa1dbfd85a0fb3969c140c29080cebe..d54eb2c87495d3b25b3ccd9345db352a323bd4aa 100755 (executable)
--- a/givingguide.html
+++ b/givingguide.html
@@ -4,8 +4,8 @@
 
                <title> 2014 Holiday Giving Guide | Free Software Foundation | Working together for free software</title>
 
 
                <title> 2014 Holiday Giving Guide | Free Software Foundation | Working together for free software</title>
 
-                <meta charset="UTF-8">
-               
+               <meta charset="UTF-8">
+
                <!--FIXME: Is this necessary?-->
                <link rel="copyright" title="Copyright information" href="http://creativecommons.org/licenses/by-nd/3.0/rdf">
                <link rel="author" title="Author information" href="http://www.fsf.org/about/staff/">
                <!--FIXME: Is this necessary?-->
                <link rel="copyright" title="Copyright information" href="http://creativecommons.org/licenses/by-nd/3.0/rdf">
                <link rel="author" title="Author information" href="http://www.fsf.org/about/staff/">
@@ -18,15 +18,11 @@
 
        <body>
                <div class="header">
 
        <body>
                <div class="header">
-                       <div class="top">
-                               <span class="logo_wrapper">
+                       <div class="navbar">
+                                       <span class="logo_wrapper">
                                        <a href="https://www.fsf.org/"><img class="logo" src="images/logo.png" alt="Logo" /></a>
                                </span>
                                        <a href="https://www.fsf.org/"><img class="logo" src="images/logo.png" alt="Logo" /></a>
                                </span>
-                               <span class="join_wrapper">
-                                       <a href="http://fsf.org/jfb"><img class="join" src="images/join.png" alt="Logo" /></a>
-                               </span>
-                       </div>
-                       <div class="navbar">
+
                                <div class="nav_wrapper">
                                        <ul>
                                                <li><a href="https://www.fsf.org/about/">About the FSF</a></li>
                                <div class="nav_wrapper">
                                        <ul>
                                                <li><a href="https://www.fsf.org/about/">About the FSF</a></li>
@@ -35,8 +31,33 @@
                                                <li><a href="http://shop.fsf.org/">Shop</a></li>
                                        </ul>
                                </div>
                                                <li><a href="http://shop.fsf.org/">Shop</a></li>
                                        </ul>
                                </div>
+
+                               <span class="join_wrapper">
+                                       <a href="http://fsf.org/jfb"><img class="join" src="images/join.png" alt="Logo" /></a>
+                               </span>
+                       </div>
+               </div>
+
+       <!--    <div class="header">
+               <div class="top">
+                       <span class="logo_wrapper">
+                               <a href="https://www.fsf.org/"><img class="logo" src="images/logo.png" alt="Logo" /></a>
+                       </span>
+                       <span class="join_wrapper">
+                               <a href="http://fsf.org/jfb"><img class="join" src="images/join.png" alt="Logo" /></a>
+                       </span>
+               </div>
+               <div class="navbar">
+                       <div class="nav_wrapper">
+                               <ul>
+                                       <li><a href="https://www.fsf.org/about/">About the FSF</a></li>
+                                       <li><a href="https://www.fsf.org/campaigns/">Campaigns</a></li>
+                                       <li><a href="https://www.fsf.org/licensing/">Software Licensing</a></li>
+                                       <li><a href="http://shop.fsf.org/">Shop</a></li>
+                               </ul>
                        </div>
                </div>
                        </div>
                </div>
+       </div> -->
                <div class="wrapper">
 
                        <div>
                <div class="wrapper">
 
                        <div>
@@ -110,10 +131,10 @@
 
                <!--We compare different products from here-->
 
 
                <!--We compare different products from here-->
 
-               <!--                    <div id="comparisons">
+                                       <div id="comparisons">
                        <div class="section_wrapper">
                                <h3 class="main_title">Operating System: Give the gift of free, flexible, and ethical computing</h3>
                        <div class="section_wrapper">
                                <h3 class="main_title">Operating System: Give the gift of free, flexible, and ethical computing</h3>
-
+<!--
                                <div id="free">
                                        <img class="product" src="images/linux.png" alt="Windows"/>
 
                                <div id="free">
                                        <img class="product" src="images/linux.png" alt="Windows"/>
 
diff --git a/images/join.png b/images/join.png
index 663249823a1f8617da4c085b2959f2a6fc97e64f..9eb26a497cb1278d0a040ea01ee8f902255dacc5 100644 (file)
Binary files a/images/join.png and b/images/join.png differ
diff --git a/images/logo.png b/images/logo.png
index b456b0d85a74c4b1e9a4efb938b5e5497e4e9413..d1afc3da40dda1575b1511d2a918cb5deac5b10f 100644 (file)
Binary files a/images/logo.png and b/images/logo.png differ
diff --git a/stylesheet.css b/stylesheet.css
index 2e961da35da191d06858a042001953fef05fca0c..3fee7ebffa83af68e927746baebfb17bad73d0b2 100755 (executable)
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -1,5 +1,10 @@
 /*Typography*/
 
 /*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 Light';
     src: local('Signika Light'), url('fonts/Signika-Light.ttf') format('truetype');
@@ -25,7 +30,7 @@
 html {
     font-family: 'Open Sans', 'DejaVu Sans', Arial, sans-serif;
     font-size: 14px;
 html {
     font-family: 'Open Sans', 'DejaVu Sans', Arial, sans-serif;
     font-size: 14px;
-    line-height: 1.4em;
+    line-height: 1.4;
     color: #363636;
     background-color: #fffefb;
     width: 100%;
     color: #363636;
     background-color: #fffefb;
     width: 100%;
@@ -34,21 +39,21 @@ html {
 
 /* Type something: */
 
 
 /* Type something: */
 
-a { color: #1F8A70; border-bottom: 1px solid #dbd145; text-decoration: none;}
+a { color: #1F8A70; border-bottom: 1px solid #dbd145; text-decoration: none; }
 
 
-p { line-height: 1.4em; margin-bottom: 1.5em; font-size: 1em;}
+p { line-height: 1.4; margin-bottom: 1.5em; font-size: 1em; }
 
 i { font-style: italic; }
 b { font-style: oblique; }
 
 
 i { font-style: italic; }
 b { font-style: oblique; }
 
-li {list-style-type: circle; padding: 0.4em 0.2em; line-height: 1.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;}
 
 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: #2CAF8F; margin-bottom: 0.5em; margin-top: 2em; }
 /* ul {margin: 1em 2em 0em 4em;} */
 
 br {margin-bottom: 20em; margin-top: 20em;}
 
 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: #2CAF8F; margin-bottom: 0.5em; margin-top: 2em; }
-h3 {  font-size: 1.625em; font-family: 'Signika Light';        color: #b495d3; 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; }
 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; }
@@ -61,164 +66,82 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
   background-image: url("images/banner.png");
   background-color: #2CAF8F;
   background-repeat: no-repeat;
   background-image: url("images/banner.png");
   background-color: #2CAF8F;
   background-repeat: no-repeat;
-  height: 776px;
+  height: 710px;
   background-size: 1200px;
   background-position: bottom;
 }
 
   background-size: 1200px;
   background-position: bottom;
 }
 
-.logo {
-  width: 247px;
-  height: 29px;
-  padding: 1.3em;
+.header a {
+  border-bottom: 0;
 }
 
 .logo_wrapper {
 }
 
 .logo_wrapper {
-}
-
-.join {
-  width: 172px;
-  height: 29px;
   padding: 1.3em;
   padding: 1.3em;
-  float: right;
+  float: left
 }
 
 }
 
-.top {
-  position: relative;
+.join_wrapper {
+  padding: 1.2em;
+  float: right;
 }
 
 }
 
-.top a {
-  border-bottom: 0;
+.logo, .join {
+  width: 210px;
 }
 
 }
 
-.navbar ul {
-  background-color: white;
-  border-radius: 100px;
-  text-align: center;
-  width: 663px;
+.nav_wrapper {
+  padding: 1em 5em 1em 9em;
   height: 2.55556em;
   height: 2.55556em;
-  margin: auto;
+  float: left;
 }
 
  .navbar li {
 }
 
  .navbar li {
-  font-size: 0.9em;
-  font-weight: bold;
+  font-family: 'Signika Regular';
+  font-size: 1em;
+  background-color: white;
   list-style-type: none;
   border-right: 1px #9BD2BF solid;
   list-style-type: none;
   border-right: 1px #9BD2BF solid;
-  padding: 0 45px 0 45px;
-  line-height: 2.9;
+  padding: 0 30px 0 30px;
+  line-height: 2.6;
   float: left;
   float: left;
-/*   width: 170px; */
-  height: 2.85556em;
 }
 
 .navbar li:first-child {
   border-radius: 100px 0 0 100px;
 }
 
 .navbar li:first-child {
   border-radius: 100px 0 0 100px;
-/*   width: 160px; */
 }
 
 .navbar li:last-child {
   border-right: 0;
   border-radius: 0 100px 100px 0;
 }
 
 .navbar li:last-child {
   border-right: 0;
   border-radius: 0 100px 100px 0;
-/*   width: 92px; */
 }
 }
+
 .navbar li:hover {
   background-color: #FFDD55;
 .navbar li:hover {
   background-color: #FFDD55;
-
 }
 
 .navbar li a {
   display: block;
   text-decoration: none;
 }
 
 .navbar li a {
   display: block;
   text-decoration: none;
-  border: 0;
-
 }
 
 .navbar li a:hover {
   color: #4B423B;
 }
 
 }
 
 .navbar li a:hover {
   color: #4B423B;
 }
 
-.wrapper {
-  width: 700px;
+.wrapper,
+.section_wrapper {
+  width: 750px;
   margin: auto;
 }
 
   margin: auto;
 }
 
+.main_title {
+  text-align: center;
+}
+
 .wrapper .intro_phrase {
   width: 450px;
   text-align: center;
   font-family: Signika Bold;
   margin: 1.2em auto;
   color: #bababa;
 .wrapper .intro_phrase {
   width: 450px;
   text-align: center;
   font-family: Signika Bold;
   margin: 1.2em auto;
   color: #bababa;
-
 }
 }
-
-/* #comparisons {
-  padding-top: 100px;
-  background-color: #fbfbfb;
-  background-size: cover;
-  position: absolute;
-  width: 100%;
-  max-width: 1150px;
-}
-
-.main_title {
-  margin-left: 2em;
-  margin-bottom: 3em;
-}
-
-.section_wrapper {
-  margin-bottom: 4em;
-}
-
-.title {
-  text-align: center;
-  font-size: 1.5em;
-}
-
-#free {
-  position: relative;
-  background-color: red;
-  float: left;
-  width: 45%;
-  max-width: 450px;
-}
-
-#sign {
-  position: relative;
-  background-color: green;
-  width: 240px;
-  float: left;
-  margin-top: 3em;
-}
-
-#proprietary {
-  position: relative;
-  background-color: blue;
-  width: 45%;
-  max-width: 450px;
-  float: right;
-}
-
-.product {
-  display: block;
-  margin: auto;
-  width: 250px;
-  height: 250px;
-}
-
-.sign  {
-  display: block;
-  margin: auto;
-  width: 149px;
-  height: 149px;
-}
-
-.separator {
-  width: 1px;
-  height: 324px;
-  margin: auto;
-  margin-left: 7.5em;
-  margin-top: 3em;}
-
-#section_wrapper {
-  position: relative;
-} */