feat(mobile): Replace hrs with borders, use prettier as formatter

chocolatenetwork · Jul 12, 2022 · be10967 · be10967
1 parent 82b2540
commit be10967
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 63 deletions.
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -3,7 +3,6 @@
 {%assign twitter = site.data.siteconfig[2] %}
 {%assign github = site.data.siteconfig[3] %}
 
-<hr class="nav_hr">
 <div class="footer_content">
     <section class="foot_copyright">
         <div class="foot_copyright-text">

diff --git a/_includes/nav.html b/_includes/nav.html
@@ -9,28 +9,31 @@
       <a href="{{discord.link}}" class="link link--dark " target="_blank"><i class="fab light fa-discord fa-fw"></i></a>
     </li>
     <li>
-      <a href="https://www.linkedin.com/company/{{linkedin.company}}" class="link link--dark " target="_blank"><i class="fab fa-linkedin fa-fw"></i></a>
+      <a href="https://www.linkedin.com/company/{{linkedin.company}}" class="link link--dark " target="_blank"><i
+          class="fab fa-linkedin fa-fw"></i></a>
     </li>
     <li>
-      <a href="https://twitter.com/{{twitter.user}}" class="link link--dark " target="_blank"><i class="fab fa-twitter fa-fw"></i></a>
+      <a href="https://twitter.com/{{twitter.user}}" class="link link--dark " target="_blank"><i
+          class="fab fa-twitter fa-fw"></i></a>
     </li>
     <li>
-      <a href="https://github.com/{{github.user}}" class="link link--dark " target="_blank"><i class="fab fa-github fa-fw"></i></a>
+      <a href="https://github.com/{{github.user}}" class="link link--dark " target="_blank"><i
+          class="fab fa-github fa-fw"></i></a>
     </li>
   </ul>
 </nav>
-<hr class="nav_hr">
-<nav class="nav nav_main" aria-label="Site menu">
-  <a class="logo link" href={{'/#home' | relative_url}}
-    ><i class="chocolate"></i><span class="text--light">chocolate <b>network</b></span></a
-  >
-  <ul>
-    <li><a href={{'/#home' | relative_url}} class="link link--light">home</a></li>
-    <li><a href={{'/#about' | relative_url}} class="link link--light">about</a></li>
-    <li><a href={{'/#footer' | relative_url}} class="link link--light">contact</a></li>
-  </ul>
-</nav>
-<hr class="nav_hr">
+<div class="nav--highlight">
+  <nav class="nav nav_main" aria-label="Site menu">
+    <a class="logo link" href={{'/#home' | relative_url}}><i class="chocolate"></i><span class="text--light">chocolate
+        <b>network</b></span></a>
+    <ul>
+      <li><a href={{'/#home' | relative_url}} class="link link--light">home</a></li>
+      <li><a href={{'/#about' | relative_url}} class="link link--light">about</a></li>
+      <li><a href={{'/#footer' | relative_url}} class="link link--light">contact</a></li>
+    </ul>
+  </nav>
+</div>
+
 <script>
   // make link active if url matches
   const links = document.querySelectorAll('.nav_main ul li a');
@@ -46,4 +49,4 @@
   };
   hashChange();
   window.addEventListener('hashchange', hashChange);
-</script>
+</script>
diff --git a/_sass/_molecules.scss b/_sass/_molecules.scss
@@ -3,10 +3,8 @@
 // i.e inputs using multiple atoms, etc.
 //  Think of actual classes here. Small structure of layout in parents like how do you place els in an input box.
 // specials
-@import 'primitives';
-@import 'molecule_utils';
-
-
+@import "primitives";
+@import "molecule_utils";
 
 @mixin nav-li {
   margin-left: 1rem;
@@ -41,16 +39,17 @@
     }
   }
 }
-@mixin foot-cp-nav{
+@mixin foot-cp-nav {
   width: fit-content;
   padding: ($body-padding / 2) 0;
 }
-@mixin foot-cp-p{
-  & > .foot_copyright-text > p{
-      margin-bottom:0; // center.
+
+@mixin foot-cp-p {
+  & > .foot_copyright-text > p {
+    margin-bottom: 0; // center.
   }
-  @media(min-width: 430px){
-    & > *{
+  @media (min-width: 430px) {
+    & > * {
       flex-grow: 1;
     }
   }
@@ -65,42 +64,50 @@
   font-size: $tiny-text;
   flex-wrap: wrap;
   @include foot-cp-p;
-  & > .nav{
+  & > .nav {
     @include foot-cp-nav;
   }
 }
-@mixin footer-content-pad{
+@mixin footer-content-pad {
   // Solid.
   padding: 3 * $body-padding $body-padding $body-padding;
   // Writing mode compatibility
   padding-block: 3 * $body-padding $body-padding;
   padding-inline: $body-padding; // l-r.
 }
-.nav{
+
+//<nav>
+.nav {
   @include nav;
   box-sizing: border-box;
 }
 .nav_social {
   height: 36px;
   padding: $body-padding / 2 $body-padding;
-  @include rem-body-pad(false); 
+  @include rem-body-pad(false);
 }
 
 .nav_main {
   height: 75px;
   padding: 0 $body-padding;
   @include rem-body-pad(false);
 }
-
+.nav--highlight {
+  width: 100%;
+  @include border;
+  @include grid-h-center;
+}
 .nav .link {
   @include nav_link;
 }
+
+//footer
 .foot_copyright {
   @include foot-cp;
 }
-.footer_content{
+.footer_content {
   width: 100%;
-  &>*{  
+  & > * {
     max-width: $grid-size;
   }
   box-sizing: border-box;
@@ -111,6 +118,8 @@
   align-items: center;
   row-gap: $body-padding;
 }
+
+// home page--land card
 .land_links > ul {
   @include hr-list-of-links;
   align-items: start;

diff --git a/_sass/_organisms.scss b/_sass/_organisms.scss
@@ -1,5 +1,5 @@
 // think of larger layouts , include overarching grids and the like here.
-@import 'molecules';
+@import "molecules";
 
 @mixin head {
   width: 100%;
@@ -9,7 +9,7 @@
 }
 
 // Body layout
-@mixin body-grid($header-width: 100px, $footer-width: 100px){
+@mixin body-grid($header-width: 100px, $footer-width: 100px) {
   display: grid;
   grid-template-rows: fit-content($header-width) auto fit-content($footer-width);
 }
@@ -28,25 +28,25 @@
   // defaults, and size limits
   grid-auto-columns: 1fr;
   grid-template-areas:
-    'one'
-    'two'
-    'three';
+    "one"
+    "two"
+    "three";
   @media (min-width: $grid-media-size) {
     grid-template-areas:
       //  7 - 5
 
-      'one one one one one one one  three three three three three'
-      'one one one one one one one  three three three three three'
-      'two two two two two bla bla  three three three three three';
+      "one one one one one one one  three three three three three"
+      "one one one one one one one  three three three three three"
+      "two two two two two bla bla  three three three three three";
   }
-  & h1{
+  & h1 {
     margin-bottom: 0.64rem; // for p.
   }
   & p {
     margin-bottom: 0.5 * $body-padding; // To complete spacing with links.
   }
 }
-@mixin last-splash{
+@mixin last-splash {
   padding-bottom: $body-padding * 2;
 }
 body {
@@ -56,6 +56,7 @@ body {
 
 footer {
   width: 100%;
+  @include border(1px, 0);
 }
 .head {
   @include head;
@@ -73,7 +74,7 @@ footer {
   // ---Remove this when we have more content -- the container should be at least this big but should also allow for stretching
   min-height: calc(100vh - 152px);
 }
-.container_last{
+.container_last {
   @include last-splash;
 }
 //               Card1   ---- landing image and text.
@@ -105,6 +106,6 @@ footer {
   justify-self: center;
   align-self: end;
 }
-//            Card2  ----  About section 
+//            Card2  ----  About section
 //            Card3  ----  Team section
 // -----------------End infinite scroll section ------------------------\\
diff --git a/_sass/primitives/_atoms.scss b/_sass/primitives/_atoms.scss
@@ -113,23 +113,6 @@ $transition-style: ease;
   border-style: $style;
   border-color: $greyish;
 }
-// Currently used only for the nav's usecase.
-@mixin hor-rule($thickness) {
-  // Remove extra space
-  margin: 0;
-  padding: 0;
-  // Removing sizing issue and fix height in place of border
-  width: 100%;
-  box-sizing: border-box;
-  height: $thickness;
-  border: 0px;
-  // Same color as prev iter.
-  background-color: $greyish;
-}
-
-.nav_hr {
-  @include hor-rule(1px);
-}
 ::selection {
   @include transparent-highlight;
 }