css: Use SCSS nesting for `nav`.

static/styles/portico/landing-page.scss

@@ -207,13 +207,12 @@ nav {
     padding: 40px;
 
     z-index: 4;
-}
 
-nav .brand.logo {
+    .brand.logo {
         text-decoration: none;
     }
 
-nav.white {
+    &.white {
         background-color: hsl(0, 0%, 100%);
 
         li {
@@ -254,21 +253,20 @@ nav.white {
         }
     }
 
-
-nav .hamburger {
+    .hamburger {
         display: none;
         fill: hsl(0, 0%, 100%);
         cursor: pointer;
         margin-top: 3px;
     }
 
-nav .content {
+    .content {
         margin: 0 5px 0 10px;
         position: relative;
         z-index: 2;
     }
 
-nav .logo {
+    .logo {
         top: 7px;
 
         span {
@@ -284,11 +282,11 @@ nav .logo {
         }
     }
 
-nav .brand-logo {
+    .brand-logo {
         width: 25px;
     }
 
-nav ul {
+    ul {
         float: right;
         list-style-type: none;
         font-weight: 400;
@@ -334,7 +332,7 @@ nav ul {
         }
     }
 
-nav li {
+    li {
         a,
         a:hover,
         a:visited {
@@ -343,6 +341,7 @@ nav li {
             font-size: 1.05em;
         }
     }
+}
 
 /* -- main panel styling -- */
 .portico-landing {
@@ -2949,11 +2948,12 @@ nav li {
         padding-top: 170px;
     }
 
-    nav.white {
+    nav {
+        &.white {
             padding-bottom: 40px;
         }
 
-    nav .logo {
+        .logo {
             float: none;
             display: block;
             margin: 0 auto;
@@ -2964,22 +2964,23 @@ nav li {
             }
         }
 
-    nav ul {
+        ul {
             display: block;
             margin: 20px auto 0 auto;
             float: none;
             text-align: center;
         }
 
-    nav svg.brand-logo circle {
+        svg.brand-logo circle {
             fill: hsl(0, 0%, 100%) !important;
             stroke: hsl(0, 0%, 100%) !important;
         }
 
-    nav svg.brand-logo path {
+        svg.brand-logo path {
             fill: hsl(182, 34%, 47%) !important;
             stroke: hsl(182, 34%, 47%) !important;
         }
+    }
 
     .portico-landing.features-app section .headliner .image {
         width: 200px;
@@ -3190,12 +3191,12 @@ nav li {
         padding-left: 50px;
         padding-right: 50px;
         width: calc(100% - 100px);
-    }
 
-    nav .hamburger {
+        .hamburger {
             position: relative;
             z-index: 10;
         }
+    }
 
     .portico-landing.features-app section.hero {
         padding: 50px;
@@ -3379,28 +3380,29 @@ nav li {
         height: 450px;
     }
 
-    nav ul {
+    nav {
+        ul {
             margin-top: 0px;
             text-align: left;
         }
 
-    nav .content {
+        .content {
             display: inline-block;
             z-index: 11;
         }
 
-    nav .hamburger {
+        .hamburger {
             display: inline-block;
             float: right;
         }
 
-    nav .content {
+        .content {
             > ul.show {
                 outline-color: hsla(203, 43%, 22%, 0.7);
             }
         }
 
-    nav ul {
+        ul {
             position: fixed;
             float: none;
             top: 0;
@@ -3412,7 +3414,6 @@ nav li {
             background-color: hsl(0, 0%, 100%);
             transform: translate(-350px, 0px);
 
-
             box-shadow: 0px 0px 80px hsla(0, 0%, 0%, 0.12);
 
             transition: all 0.5s ease;
@@ -3455,6 +3456,7 @@ nav li {
                 }
             }
         }
+    }
 
     .portico-header .content > ul::before {
         content: "Zulip";