From ecd383b53c528a28ff4ff6646c471f7b25785b61 Mon Sep 17 00:00:00 2001
From: SiddharthVarshney <siddharth.98varshney@gmail.com>
Date: Wed, 27 May 2020 04:13:36 +0530
Subject: [PATCH] css: Use SCSS nesting for `nav`.

---
 static/styles/portico/landing-page.scss | 424 ++++++++++++------------
 1 file changed, 213 insertions(+), 211 deletions(-)

diff --git a/static/styles/portico/landing-page.scss b/static/styles/portico/landing-page.scss
index 49c17c716d..d75e384183 100644
--- a/static/styles/portico/landing-page.scss
+++ b/static/styles/portico/landing-page.scss
@@ -207,140 +207,139 @@ nav {
     padding: 40px;
 
     z-index: 4;
-}
 
-nav .brand.logo {
-    text-decoration: none;
-}
+    .brand.logo {
+        text-decoration: none;
+    }
 
-nav.white {
-    background-color: hsl(0, 0%, 100%);
+    &.white {
+        background-color: hsl(0, 0%, 100%);
 
-    li {
-        a,
-        a:hover,
-        a:visited {
-            color: hsl(0, 0%, 27%);
+        li {
+            a,
+            a:hover,
+            a:visited {
+                color: hsl(0, 0%, 27%);
+            }
+        }
+
+        ul {
+            li {
+                &.active {
+                    &::after {
+                        color: hsl(0, 0%, 27%);
+                    }
+                }
+            }
+        }
+
+        .brand.logo {
+            span {
+                color: hsl(0, 0%, 27%);
+            }
+
+            circle {
+                fill: hsl(0, 0%, 27%) !important;
+            }
+
+            path {
+                fill: hsl(0, 0%, 100%) !important;
+                stroke: hsl(0, 0%, 100%) !important;
+            }
+        }
+
+        .hamburger {
+            fill: hsl(0, 0%, 27%);
         }
     }
 
+    .hamburger {
+        display: none;
+        fill: hsl(0, 0%, 100%);
+        cursor: pointer;
+        margin-top: 3px;
+    }
+
+    .content {
+        margin: 0 5px 0 10px;
+        position: relative;
+        z-index: 2;
+    }
+
+    .logo {
+        top: 7px;
+
+        span {
+            position: relative;
+            left: 5px;
+            top: 1px;
+            color: hsl(0, 0%, 100%);
+            font-weight: 600;
+            vertical-align: top;
+            text-transform: uppercase;
+            font-size: 1.2rem;
+            letter-spacing: 0.1em;
+        }
+    }
+
+    .brand-logo {
+        width: 25px;
+    }
+
     ul {
+        float: right;
+        list-style-type: none;
+        font-weight: 400;
+        margin: 0;
+        padding: 0;
+
+        outline: 1000px solid;
+        outline-color: transparent;
+
+        cursor: pointer;
+        transition: outline-color 0.2s ease;
+
+        .exit {
+            display: none;
+            user-select: none;
+        }
+
         li {
+            position: relative;
+            display: inline-block;
+            margin: 10px;
+
+            color: hsl(0, 0%, 100%);
+
+            opacity: 0.7;
+            transition: all 0.2s ease;
+
+            &.active,
+            &:hover {
+                opacity: 1;
+            }
+
             &.active {
                 &::after {
-                    color: hsl(0, 0%, 27%);
+                    content: "v";
+                    position: absolute;
+                    bottom: -15px;
+                    left: calc(50% - 4px);
+                    font-weight: 100;
+                    transform: scaleX(2) scaleY(0.5);
                 }
             }
         }
     }
 
-    .brand.logo {
-        span {
-            color: hsl(0, 0%, 27%);
-        }
-
-        circle {
-            fill: hsl(0, 0%, 27%) !important;
-        }
-
-        path {
-            fill: hsl(0, 0%, 100%) !important;
-            stroke: hsl(0, 0%, 100%) !important;
-        }
-    }
-
-    .hamburger {
-        fill: hsl(0, 0%, 27%);
-    }
-}
-
-
-nav .hamburger {
-    display: none;
-    fill: hsl(0, 0%, 100%);
-    cursor: pointer;
-    margin-top: 3px;
-}
-
-nav .content {
-    margin: 0 5px 0 10px;
-    position: relative;
-    z-index: 2;
-}
-
-nav .logo {
-    top: 7px;
-
-    span {
-        position: relative;
-        left: 5px;
-        top: 1px;
-        color: hsl(0, 0%, 100%);
-        font-weight: 600;
-        vertical-align: top;
-        text-transform: uppercase;
-        font-size: 1.2rem;
-        letter-spacing: 0.1em;
-    }
-}
-
-nav .brand-logo {
-    width: 25px;
-}
-
-nav ul {
-    float: right;
-    list-style-type: none;
-    font-weight: 400;
-    margin: 0;
-    padding: 0;
-
-    outline: 1000px solid;
-    outline-color: transparent;
-
-    cursor: pointer;
-    transition: outline-color 0.2s ease;
-
-    .exit {
-        display: none;
-        user-select: none;
-    }
-
     li {
-        position: relative;
-        display: inline-block;
-        margin: 10px;
-
-        color: hsl(0, 0%, 100%);
-
-        opacity: 0.7;
-        transition: all 0.2s ease;
-
-        &.active,
-        &:hover {
-            opacity: 1;
+        a,
+        a:hover,
+        a:visited {
+            text-decoration: none;
+            color: hsl(0, 0%, 100%);
+            font-size: 1.05em;
         }
-
-        &.active {
-            &::after {
-                content: "v";
-                position: absolute;
-                bottom: -15px;
-                left: calc(50% - 4px);
-                font-weight: 100;
-                transform: scaleX(2) scaleY(0.5);
-            }
-        }
-    }
-}
-
-nav li {
-    a,
-    a:hover,
-    a:visited {
-        text-decoration: none;
-        color: hsl(0, 0%, 100%);
-        font-size: 1.05em;
     }
 }
 
@@ -2949,36 +2948,38 @@ nav li {
         padding-top: 170px;
     }
 
-    nav.white {
-        padding-bottom: 40px;
-    }
-
-    nav .logo {
-        float: none;
-        display: block;
-        margin: 0 auto;
-        text-align: center;
-
-        span {
-            color: hsl(0, 0%, 100%);
+    nav {
+        &.white {
+            padding-bottom: 40px;
         }
-    }
 
-    nav ul {
-        display: block;
-        margin: 20px auto 0 auto;
-        float: none;
-        text-align: center;
-    }
+        .logo {
+            float: none;
+            display: block;
+            margin: 0 auto;
+            text-align: center;
 
-    nav svg.brand-logo circle {
-        fill: hsl(0, 0%, 100%) !important;
-        stroke: hsl(0, 0%, 100%) !important;
-    }
+            span {
+                color: hsl(0, 0%, 100%);
+            }
+        }
 
-    nav svg.brand-logo path {
-        fill: hsl(182, 34%, 47%) !important;
-        stroke: hsl(182, 34%, 47%) !important;
+        ul {
+            display: block;
+            margin: 20px auto 0 auto;
+            float: none;
+            text-align: center;
+        }
+
+        svg.brand-logo circle {
+            fill: hsl(0, 0%, 100%) !important;
+            stroke: hsl(0, 0%, 100%) !important;
+        }
+
+        svg.brand-logo path {
+            fill: hsl(182, 34%, 47%) !important;
+            stroke: hsl(182, 34%, 47%) !important;
+        }
     }
 
     .portico-landing.features-app section .headliner .image {
@@ -3190,11 +3191,11 @@ nav li {
         padding-left: 50px;
         padding-right: 50px;
         width: calc(100% - 100px);
-    }
 
-    nav .hamburger {
-        position: relative;
-        z-index: 10;
+        .hamburger {
+            position: relative;
+            z-index: 10;
+        }
     }
 
     .portico-landing.features-app section.hero {
@@ -3379,79 +3380,80 @@ nav li {
         height: 450px;
     }
 
-    nav ul {
-        margin-top: 0px;
-        text-align: left;
-    }
-
-    nav .content {
-        display: inline-block;
-        z-index: 11;
-    }
-
-    nav .hamburger {
-        display: inline-block;
-        float: right;
-    }
-
-    nav .content {
-        > ul.show {
-            outline-color: hsla(203, 43%, 22%, 0.7);
-        }
-    }
-
-    nav ul {
-        position: fixed;
-        float: none;
-        top: 0;
-        left: 0;
-        height: 100vh;
-        width: 300px;
-        padding-left: 30px;
-
-        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;
-
-        &.show {
-            transform: translate(0px, 0px);
+    nav {
+        ul {
+            margin-top: 0px;
+            text-align: left;
         }
 
-        .exit {
-            display: block;
-            position: absolute;
-            top: 10px;
-            right: 25px;
-
-            font-weight: 100;
-            font-size: 3em;
-            color: initial;
+        .content {
+            display: inline-block;
+            z-index: 11;
         }
 
-        li {
-            display: block;
-            font-size: 1.5em;
-            font-weight: 300;
-            line-height: 1.5;
+        .hamburger {
+            display: inline-block;
+            float: right;
+        }
 
-            &:first-of-type {
-                margin-top: 20px;
+        .content {
+            > ul.show {
+                outline-color: hsla(203, 43%, 22%, 0.7);
+            }
+        }
+
+        ul {
+            position: fixed;
+            float: none;
+            top: 0;
+            left: 0;
+            height: 100vh;
+            width: 300px;
+            padding-left: 30px;
+
+            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;
+
+            &.show {
+                transform: translate(0px, 0px);
             }
 
-            &.active {
-                &::after {
-                    content: ">";
-                    transform: scale(1, 1);
-                    bottom: auto;
-                    left: -25px;
-                    font-weight: 400;
+            .exit {
+                display: block;
+                position: absolute;
+                top: 10px;
+                right: 25px;
+
+                font-weight: 100;
+                font-size: 3em;
+                color: initial;
+            }
+
+            li {
+                display: block;
+                font-size: 1.5em;
+                font-weight: 300;
+                line-height: 1.5;
+
+                &:first-of-type {
+                    margin-top: 20px;
                 }
 
-                font-weight: 400;
+                &.active {
+                    &::after {
+                        content: ">";
+                        transform: scale(1, 1);
+                        bottom: auto;
+                        left: -25px;
+                        font-weight: 400;
+                    }
+
+                    font-weight: 400;
+                }
             }
         }
     }