projects / fsf-giving-guide.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 82460b0)
Fix the navbar once and for all
authorReda Lazri <the.red.shortcut@gmail.com>
Mon, 17 Nov 2014 17:14:53 +0000 (18:14 +0100)
committerReda Lazri <the.red.shortcut@gmail.com>
Mon, 17 Nov 2014 17:14:53 +0000 (18:14 +0100)
givingguide.html patch | blob | blame | history
stylesheet.css patch | blob | blame | history

diff --git a/givingguide.html b/givingguide.html
index 6c257a5a32be1b5427bc51b50721cf33329d9dd5..00382baefdcbce78187c3c460093fa62365db5c3 100755 (executable)
--- a/givingguide.html
+++ b/givingguide.html
@@ -18,23 +18,26 @@
 
        <body>
                <div class="header">
-                       <div class="navbar">
-                                       <span class="logo_wrapper">
-                                       <a href="https://www.fsf.org/"><img class="logo" src="images/logo.png" alt="Logo" /></a>
-                               </span>
-
-                               <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 class="header_wrapper">
+                                       <div class="navbar_wrapper">
+                                               <span class="logo_wrapper">
+                                                       <a href="https://www.fsf.org/"><img class="logo" src="images/logo.png" alt="Logo" /></a>
+                                               </span>
+
+                                               <div class="navbar">
+                                                       <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>
+
+                                               <span class="join_wrapper">
+                                                       <a href="http://fsf.org/jfb"><img class="join" src="images/join.png" alt="Logo" /></a>
+                                               </span>
+                                       </div>
 
-                               <span class="join_wrapper">
-                                       <a href="http://fsf.org/jfb"><img class="join" src="images/join.png" alt="Logo" /></a>
-                               </span>
                                <div class="intro">
 
                                        <div class="intro_img">
@@ -57,7 +60,7 @@
                                                        Integer luctus neque non magna aliquam congue. Nullam gravida
                                                        lectus urna, ut vulputate elit lobortis non.
                                                </p>
-                                               
+
                                                </div>
                                </div>
                        </div>
diff --git a/stylesheet.css b/stylesheet.css
index 7968f86369de602fa33e43b84ed4e28f1ccf656f..839ce1eab8ccd0b5124fc5d16950cf843eecc22b 100755 (executable)
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -36,7 +36,6 @@ html {
     width: 100%;
 }
 
-
 /* Type something: */
 
 a { color: #1F8A70; border-bottom: 1px solid #dbd145; text-decoration: none; }
@@ -73,7 +72,7 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
 
 /* Navbar */
 
-.navbar {
+.header_wrapper {
   background-color: #2CAF8F;
   height: 500px;
 }
@@ -82,24 +81,35 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
   border-bottom: 0;
 }
 
+.navbar_wrapper {
+  max-width: 1300px;
+  min-width: 1000px;
+  margin: auto;
+  text-align: center;
+}
+
 .logo_wrapper {
   padding: 1.3em;
-  float: left
+  float: left;
 }
 
 .join_wrapper {
   padding: 1.2em;
   float: right;
+  display: inline-block;
 }
 
 .logo, .join {
-  width: 210px;
+  max-width: 200px;
+  min-width: 200px;
 }
 
-.nav_wrapper {
-  padding: 1em 5em 1em 9em;
+.navbar {
+  width: 537px;
+  padding: 1em;
   height: 2.55556em;
-  float: left;
+  display: inline-block;
+/*   float: left; */
 }
 
 .navbar li {
@@ -157,8 +167,14 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
   color: #bababa;
 }
 
+.intro {
+  margin: auto;
+  max-width: 1300px;
+}
+
 .intro_wrapper {
   width: 40%;
+  max-width: 600px;
   float: right;
   color: white !important;
   padding-top: 2em;
@@ -171,6 +187,7 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
 
 .intro_img img{
   width: 40%;
+  max-width: 700px;
   float: left;
   padding: 2em;
   padding-left: 6em;