refactor(mobile): Extract ul styles from nav mixin

chocolatenetwork · Jul 16, 2022 · d7195e8 · d7195e8
1 parent 868cf66
commit d7195e8
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 15 deletions.
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -9,7 +9,7 @@
             <p>Chocolate Network © 2021 - 2022</p>
         </div>
         <div class="nav nav--flex" aria-label="social links">
-            <ul>
+            <ul class="nav_ul">
                 <li>
                     <a href="{{discord.link}}" class="link link--dark " target="_blank"><i
                             class="fab light fa-discord fa-fw"></i></a>

diff --git a/_includes/nav.html b/_includes/nav.html
@@ -5,7 +5,7 @@
 
 <!-- maintain .nav .nav_social order for display override. -->
 <nav class="nav nav_social" aria-label="social links">
-  <ul>
+  <ul class="nav_ul">
     <li>
       <a href="{{discord.link}}" class="link link--dark " target="_blank"><i class="fab light fa-discord fa-fw"></i></a>
     </li>
@@ -31,7 +31,7 @@
     <button type="button" data-state="closed" class="button--transparent nav_burger">
       {% include burger-menu.svg %}
     </button>
-    <ul >
+    <ul class="nav_ul" >
       <li><a href={{'/#home' | relative_url}} class="link link--light main-nav_link">home</a></li>
       <li><a href={{'/#about' | relative_url}} class="link link--light main-nav_link">about</a></li>
       <li><a href={{'/#footer' | relative_url}} class="link link--light main-nav_link">contact</a></li>

diff --git a/_sass/_molecules.scss b/_sass/_molecules.scss
@@ -29,15 +29,6 @@
   & > .logo {
     @include nav-logo;
   }
-
-  & > ul {
-    @include hr-list-of-links;
-
-    & > li {
-      font-size: $smaller-text;
-      @include nav-li;
-    }
-  }
 }
 @mixin flex-end-center {
   display: flex;
@@ -56,7 +47,7 @@
   @media (min-width: $grid-media-size) {
     &[data-state="closed"],
     &[data-state="opened"] {
-      ul {
+      .nav_ul {
         display: flex;
         align-items: center;
         flex-direction: row;
@@ -88,15 +79,15 @@
 }
 @mixin main-nav-state {
   &[data-state="closed"] {
-    ul {
+    .nav_ul {
       display: none;
     }
     .nav_burger {
       @include burger-closed();
     }
   }
   &[data-state="opened"] {
-    ul {
+    .nav_ul {
       flex-direction: column;
       align-items: initial;
       text-align: center;
@@ -203,6 +194,15 @@
     padding: initial;
   }
 }
+.nav_ul{
+  @include hr-list-of-links;
+
+  & > li {
+    font-size: $smaller-text;
+    @include nav-li;
+  }
+}
+
 //footer
 .foot_copyright {
   @include foot-cp;