Use nested scss in nav and footer styles (#4006)

_Extracted from #3942 for
easier review._

Utilize's sass's support for nesting for easier maintainability and
readability of styles. No functional changes.

Author: parlough

lib/resources/styles.css

@@ -1 +1 @@
-318ACAF85024D323F3F60B8D63B1EC23
+FBB2C1241F0FD138D012004E4AA98F0E

web/sig.txt

@@ -20,9 +20,7 @@ body {
   display: flex;
   flex-direction: column;
   -webkit-overflow-scrolling: touch;
-}
 
-body {
   -webkit-text-size-adjust: 100%;
   overflow-x: hidden;
   font-family: Roboto, sans-serif;

web/styles/_base.scss

@@ -6,27 +6,25 @@ footer {
   flex: 0 0 16px;
   text-align: center;
   padding: 16px 20px;
-}
 
-footer {
   color: #fff;
   background-color: var(--main-footer-background);
   width: 100%;
-}
 
-footer p {
-  margin: 0;
-}
+  p {
+    margin: 0;
+  }
 
-footer .no-break {
-  white-space: nowrap;
-}
+  .no-break {
+    white-space: nowrap;
+  }
 
-footer .container {
-  padding-left: 0;
-  padding-right: 0;
-}
+  .container {
+    padding-left: 0;
+    padding-right: 0;
+  }
 
-footer a, footer a:hover {
-  color: #fff;
+  a, a:hover {
+    color: #fff;
+  }
 }

web/styles/_footer.scss

@@ -10,25 +10,25 @@ header {
   padding-left: 30px;
   padding-right: 30px;
   background-color: var(--main-header-color);
-}
 
-header ol {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
+  ol {
+    list-style: none;
+    margin: 0;
+    padding: 0;
 
-header ol li {
-  display: inline;
-}
+    li {
+      display: inline;
+    }
+  }
 
-header form {
-  display: flex;
-  flex: 1;
-  justify-content: flex-end;
-}
+  form {
+    display: flex;
+    flex: 1;
+    justify-content: flex-end;
+  }
 
-header#header-search-sidebar {
-  height: 50px;
-  margin-bottom: 25px;
+  #header-search-sidebar {
+    height: 50px;
+    margin-bottom: 25px;
+  }
 }

web/styles/_header.scss

@@ -2,22 +2,22 @@
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
-nav.navbar {
-  background-color: inherit;
-  min-height: 50px;
-  border: 0;
-}
+nav {
+  .navbar {
+    background-color: inherit;
+    min-height: 50px;
+    border: 0;
 
-nav.navbar .row {
-  padding-top: 8px;
-}
+    .row {
+      padding-top: 8px;
+    }
+  }
 
-nav .container {
-  white-space: nowrap;
-}
+  .container {
+    white-space: nowrap;
 
-@media(max-width: 840px) {
-  nav .container {
-    width: 100%
+    @media(max-width: 840px) {
+      width: 100%;
+    }
   }
 }