Make header/footer padding consistent (#951)

* Make header/footer padding consistent #947 - update footer styles to use 60px same as header content for non-mobile viewports * - fix lint error with multi line * - make footer content flow consistent with header for internal and home page - update styles for footer to align center for mobile and tablet viewports * update 2020.json - add dsadhanala to contributors list
HTTPArchive · Jul 5, 2020 · 51eca3a · 51eca3a
1 parent c6b0681
commit 51eca3a
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 65 deletions.
diff --git a/src/config/2020.json b/src/config/2020.json
@@ -207,6 +207,16 @@
       "github": "obto",
       "twitter": "theobto"
     },
+    "dsadhanala": {
+      "name": "Durga Prasad Sadhanala",
+      "teams": [
+        "developers"
+      ],
+      "avatar_url": "https:\/\/avatars3.githubusercontent.com\/u\/5795823?s=200&v=4",
+      "website": "https:\/\/web-ui.dev",
+      "github": "dsadhanala",
+      "twitter": "dsadhanala"
+    },
     "rviscomi": {
       "name": "Rick Viscomi",
       "teams": [

diff --git a/src/static/css/2019.css b/src/static/css/2019.css
@@ -740,16 +740,13 @@ blockquote::before {
 }
 
 /* Footer */
-footer {
+footer .container {
   display: grid;
   grid-template-areas:
     'home-logo nav-items nav-items nav-items'
     'hr hr hr hr'
     'copyright copyright ha-logo social-media';
   grid-template-columns: 280px 1fr 1fr 120px 0 0;
-  /* 20px same as .container padding */
-  padding-left: 20px;
-  padding-right: 20px;
 }
 
 footer .home-logo {
@@ -875,10 +872,11 @@ p.copyright a {
     display: inline;
   }
 
-  footer {
+  footer .container {
     display: grid;
     grid-template-areas:
-      'home-logo home-logo language-switcher language-switcher'
+      'home-logo home-logo home-logo home-logo'
+      'language-switcher language-switcher language-switcher language-switcher'
       'hr hr hr hr'
       'nav-items nav-items nav-items nav-items'
       'hr-last hr-last hr-last hr-last'
@@ -887,6 +885,10 @@ p.copyright a {
     grid-template-rows: 60px auto auto;
   }
 
+  footer .home-logo {
+    justify-content: center;
+  }
+
   footer .nav-items {
     grid-area: nav-items;
     display: flex;
@@ -1013,7 +1015,7 @@ p.copyright a {
   }
 
   /* Footer */
-  footer {
+  footer .container {
     grid-template-areas:
       'home-logo'
       'hr'
@@ -1028,6 +1030,7 @@ p.copyright a {
   footer .home-logo {
     grid-area: home-logo;
     margin: 20px 0;
+    justify-content: center;
   }
 
   footer .mobile-ha-social-media {
@@ -1079,6 +1082,7 @@ p.copyright a {
     justify-content: center;
     align-items: center;
     margin-top: 20px;
+    text-align: center;
   }
 
   footer .social-media {

diff --git a/src/static/css/index.css b/src/static/css/index.css
@@ -30,7 +30,8 @@ header::after {
   z-index: -1;
 }
 
-header .container {
+header .container,
+footer .container {
   max-width: none;
   padding-left: 60px;
   padding-right: 60px;
@@ -516,8 +517,9 @@ p {
   header::after {
     bottom: 200px;
   }
-
-  header .container {
+
+  header .container,
+  footer .container {
     padding-left: 20px;
     padding-right: 20px;
   }

diff --git a/src/templates/base/2019/base.html b/src/templates/base/2019/base.html
@@ -184,79 +184,81 @@
 
   {% block footer %}
     <footer class="alt-bg">
-      <div class="home-logo">
-        <a class="navigation-logo" href="{{ url_for('home', year=year, lang=lang) }}">
-          {{ self.web_almanac_logo() }}
-        </a>
-      </div>
-      <hr>
-      <nav aria-label="{{ self.footer_title() }}" class="nav-items">
-        <ul>
-          {{ self.non_chapter_nav_links() }}
-          <li>
-            {{ year_switcher('footer') }}
-          </li>
-          <li>
-            {{ language_switcher('footer') }}
-          </li>
-        </ul>
-      </nav>
-      <div class="mobile-ha-social-media">
-        <a class="ha-logo" href="https://httparchive.org/" aria-labelledby="httparchive-logo-footer-mobile">
+      <div class="container">
+        <div class="home-logo">
+          <a class="navigation-logo" href="{{ url_for('home', year=year, lang=lang) }}">
+            {{ self.web_almanac_logo() }}
+          </a>
+        </div>
+        <hr>
+        <nav aria-label="{{ self.footer_title() }}" class="nav-items">
+          <ul>
+            {{ self.non_chapter_nav_links() }}
+            <li>
+              {{ year_switcher('footer') }}
+            </li>
+            <li>
+              {{ language_switcher('footer') }}
+            </li>
+          </ul>
+        </nav>
+        <div class="mobile-ha-social-media">
+          <a class="ha-logo" href="https://httparchive.org/" aria-labelledby="httparchive-logo-footer-mobile">
+            <svg width="70" height="35" role="img">
+              <title id="httparchive-logo-footer-mobile">{{ self.http_archive_link() }}</title>
+              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ha"></use>
+            </svg>
+          </a>
+          <ul class="social-media">
+            <li>
+              <a href="https://twitter.com/HTTPArchive" aria-labelledby="twitter-logo-footer-mobile">
+                <svg width="20" height="20" role="img">
+                  <title id="twitter-logo-footer-mobile">Twitter</title>
+                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"></use>
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a href="https://github.com/HTTPArchive/almanac.httparchive.org" aria-labelledby="github-logo-footer-mobile">
+                <svg width="20" height="20" role="img">
+                  <title id="github-logo-footer-mobile">GitHub</title>
+                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"></use>
+                </svg>
+              </a>
+            </li>
+          </ul>
+        </div>
+        <hr>
+        <p class="copyright">
+          <span>{{ self.copyright() }}</span>
+          <br>
+          <a href="{{ url_for('accessibility_statement', lang=lang) }}">{{ self.accessibility_statement() }}</a>
+        </p>
+        <a class="ha-logo not-mobile" href="https://httparchive.org/" aria-labelledby="ha-logo-footer">
           <svg width="70" height="35" role="img">
-            <title id="httparchive-logo-footer-mobile">{{ self.http_archive_link() }}</title>
+            <title id="ha-logo-footer">{{ self.http_archive_link() }}</title>
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ha"></use>
           </svg>
         </a>
-        <ul class="social-media">
+        <ul class="social-media not-mobile">
           <li>
-            <a href="https://twitter.com/HTTPArchive" aria-labelledby="twitter-logo-footer-mobile">
+            <a href="https://twitter.com/HTTPArchive" aria-labelledby="twitter-logo-footer">
               <svg width="20" height="20" role="img">
-                <title id="twitter-logo-footer-mobile">Twitter</title>
+                <title id="twitter-logo-footer">Twitter</title>
                 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"></use>
               </svg>
             </a>
           </li>
           <li>
-            <a href="https://github.com/HTTPArchive/almanac.httparchive.org" aria-labelledby="github-logo-footer-mobile">
+            <a href="https://github.com/HTTPArchive/almanac.httparchive.org" aria-labelledby="github-logo-footer">
               <svg width="20" height="20" role="img">
-                <title id="github-logo-footer-mobile">GitHub</title>
+                <title id="github-logo-footer">GitHub</title>
                 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"></use>
               </svg>
             </a>
           </li>
         </ul>
       </div>
-      <hr>
-      <p class="copyright">
-        <span>{{ self.copyright() }}</span>
-        <br>
-        <a href="{{ url_for('accessibility_statement', lang=lang) }}">{{ self.accessibility_statement() }}</a>
-      </p>
-      <a class="ha-logo not-mobile" href="https://httparchive.org/" aria-labelledby="ha-logo-footer">
-        <svg width="70" height="35" role="img">
-          <title id="ha-logo-footer">{{ self.http_archive_link() }}</title>
-          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ha"></use>
-        </svg>        
-      </a>
-      <ul class="social-media not-mobile">
-        <li>
-          <a href="https://twitter.com/HTTPArchive" aria-labelledby="twitter-logo-footer">
-            <svg width="20" height="20" role="img">
-              <title id="twitter-logo-footer">Twitter</title>
-              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"></use>
-            </svg>
-          </a>
-        </li>
-        <li>
-          <a href="https://github.com/HTTPArchive/almanac.httparchive.org" aria-labelledby="github-logo-footer">
-            <svg width="20" height="20" role="img">
-              <title id="github-logo-footer">GitHub</title>
-              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"></use>
-            </svg>
-          </a>
-        </li>
-      </ul>
     </footer>
   {% endblock %}
   {% block scripts %}