tweak general appearance of website

* Decreased margins between sections to make it "less of a scroll fest" (I might need to tweak them a bit more to be more on small screens again) * Added border lines to navigation and footer to separate them from the content * Added the cool link hover effect to all links in the navigation, not just the dropdown menu * Made the mobile navigation bar menu button bigger Signed-off-by: Alexander Trost <[email protected]>
koor-tech · Mar 7, 2024 · 0d1796c · 0d1796c
1 parent ae7e444
commit 0d1796c
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 162 deletions.
diff --git a/_includes/navigation.html b/_includes/navigation.html
@@ -3,9 +3,9 @@
     <div class="logo">
       <a href="{{ "/" | relative_url }}"><img src="{{ "/images/rook-logo.svg" | relative_url }}"/></a>
     </div>
-    <div 
+    <div
       class="hamburger-controls"
-      onclick="if (document.body.classList.contains('menu-open')) { document.body.classList.remove('menu-open') } else { document.body.classList.add('menu-open') }; return false;">
+      onclick="if (document.getElementById('navigation').classList.contains('menu-open')) { document.getElementById('navigation').classList.remove('menu-open') } else { document.getElementById('navigation').classList.add('menu-open') }; return false;">
       <span></span> <span></span> <span></span>
     </div>
     <ul class="links">

diff --git a/css/index.scss b/css/index.scss
@@ -9,7 +9,7 @@
   align-items: center;
 
   #holder {
-    margin: 120px 0 60px;
+    margin: 60px 0 60px;
 
     @media (max-width: $smWidth) {
       margin: 45px 0 25px;
@@ -55,7 +55,7 @@
   }
 
   .hero {
-    margin-bottom: 140px;
+    margin-bottom: 100px;
 
     @media (max-width: $smWidth) {
       margin-bottom: 50px;
@@ -127,39 +127,13 @@
     }
   }
 
-  .storage {
-    margin: 120px 0 140px;
-
-    @media (max-width: $smWidth) {
-      margin: 40px 0 70px;
-    }
-  }
-
-  .providers {
-    margin-top: 50px;
-
-    span {
-      font-family: $fontHeader;
-      font-size: 18px;
-      font-weight: 500;
-      color: $textLight;
-      position: relative;
-      display: -ms-inline-flexbox;
-      display: inline-flex;
-      -ms-flex-align: center;
-      align-items: center;
-      padding-left: 15px;
-      margin-bottom: 15px;
+  .header-section {
+    margin-top: 20px;
+    width: 100%;
 
-      &:before {
-        content: '';
-        position: absolute;
-        left: 0;
-        height: 12px;
-        width: 12px;
-        background-color: $blue;
-        border-radius: 50%;
-      }
+    h1 {
+      text-align: center;
+      margin-bottom: 20px;
     }
   }
 
@@ -203,54 +177,10 @@
         color: $white !important;
       }
     }
-
-    .terminal-buttons {
-      margin-bottom: -15px;
-
-      button {
-        border-radius: 5px;
-        background-color: $purpleLight;
-        color: $white;
-        border: none;
-        box-shadow: none;
-        cursor: pointer;
-        display: -ms-flexbox;
-        display: flex;
-        width: 100%;
-        height: 32px;
-        -ms-flex-align: center;
-        align-items: center;
-        -ms-flex-pack: center;
-        justify-content: center;
-        font-family: $fontHeader;
-        font-size: 13px;
-        font-weight: 500;
-        transition: all $timingFast ease-in-out;
-
-        &:focus,
-        &:active,
-        &:visited {
-          outline: 0;
-          background-color: $purpleLight;
-        }
-
-        &:hover {
-          background-color: $purpleDark;
-        }
-
-        &.active {
-          background-color: $blue;
-        }
-      }
-    }
   }
 
   .affiliates {
-    margin: 60px 0 140px;
-
-    @media (max-width: $smWidth) {
-      margin: 40px 0 70px;
-    }
+    margin: 30px 0 30px;
 
     [class*='col-'] {
       text-align: center;
@@ -485,4 +415,24 @@
       }
     }
   }
+
+  a:not(.button) {
+    color: $blue;
+    &:visited {
+      text-decoration: none;
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: $blueDarker;
+      text-decoration: underline;
+    }
+  }
+
+  .providers {
+    h2 {
+      text-align: center;
+    }
+  }
 }
diff --git a/css/main.scss b/css/main.scss
@@ -150,6 +150,7 @@ p {
   -ms-flex-negative: 0;
   flex-shrink: 0;
   overflow: visible;
+  border-bottom: 1px solid $footerDelimiter;
 
   & > div {
     display: -ms-flexbox;
@@ -173,24 +174,20 @@ p {
     display: none;
     cursor: pointer;
 
-    width: 16px;
-    height: 16px;
+    height: 24px;
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
-    transition: 0.5s ease-in-out;
+    transition: all $timingFast ease-in-out;
 
     span {
       display: block;
-      position: absolute;
+      position: relative;
       height: 2px;
-      width: 14px;
+      width: 32px;
       background: $textDark;
       border-radius: 1px;
       opacity: 1;
       left: 0;
-      -webkit-transform: rotate(0deg);
-      transform: rotate(0deg);
-      transition: 0.25s ease-in-out;
       margin: 0 1px;
     }
 
@@ -211,26 +208,17 @@ p {
       -webkit-transform-origin: left center;
       transform-origin: left center;
     }
+  }
 
-    body.menu-open & {
-      span:nth-child(1) {
-        -webkit-transform: rotate(45deg);
-        transform: rotate(45deg);
-        top: 2px;
-        left: 2px;
-      }
-
-      span:nth-child(2) {
-        width: 0%;
-        opacity: 0;
-      }
+  &.menu-open {
+    .hamburger-controls {
+      -webkit-transform: rotate(90deg);
+      transform: rotate(90deg);
+      transition: all $timingFast ease-in-out;
+    }
 
-      span:nth-child(3) {
-        -webkit-transform: rotate(-45deg);
-        transform: rotate(-45deg);
-        top: 12px;
-        left: 2px;
-      }
+    .links {
+      display: block;
     }
   }
 
@@ -246,6 +234,7 @@ p {
     justify-content: flex-end;
     -ms-flex-align: center;
     align-items: center;
+    background-color: $white;
 
     li {
       display: -ms-inline-flexbox;
@@ -261,6 +250,7 @@ p {
     }
 
     a:not(.button) {
+      position: relative;
       text-decoration: none;
       color: $textDark;
       font-family: $fontHeader;
@@ -277,6 +267,28 @@ p {
       &:active {
         color: $black;
       }
+
+      &:before {
+        content: '';
+        position: absolute;
+        bottom: -4px;
+        height: 4px;
+        width: 0;
+        border-radius: 3px;
+        background-color: transparent;
+        transition: all $timingFastest ease-in-out;
+      }
+
+      &:hover,
+          &:focus,
+          &:active {
+            color: $textDark;
+
+            &:before {
+              width: 100%;
+              background-color: $blue;
+            }
+          }
     }
 
     .dropdown {
@@ -314,31 +326,9 @@ p {
           font-size: 17px;
           position: relative;
 
-          &:before {
-            content: '';
-            position: absolute;
-            bottom: -4px;
-            height: 4px;
-            width: 0;
-            border-radius: 3px;
-            background-color: transparent;
-            transition: all $timingFastest ease-in-out;
-          }
-
           + a {
             margin-top: 24px;
           }
-
-          &:hover,
-          &:focus,
-          &:active {
-            color: $textDark;
-
-            &:before {
-              width: 100%;
-              background-color: $blue;
-            }
-          }
         }
       }
     }
@@ -358,10 +348,10 @@ p {
       bottom: 0;
       padding-left: $pagePadding;
       text-align: left;
-
-      .menu-open & {
-        display: block;
-      }
+      margin-top: 24px;
+      padding-bottom: 20px;
+      border-bottom: 1px solid $footerDelimiter;
+      height: fit-content;
 
       li {
         display: -ms-flexbox;
@@ -409,13 +399,14 @@ p {
 #content {
   -ms-flex: 1 0 auto;
   flex: 1 0 auto;
-  margin-bottom: 50px;
+  margin-bottom: 10;
 }
 
 #footer {
   -ms-flex-negative: 0;
   flex-shrink: 0;
-  padding: 0 0 50px;
+  padding: 0 0 40px;
+  border-top: 1px solid $footerDelimiter;
 
   .top,
   .middle,
@@ -437,8 +428,12 @@ p {
     height: 39px;
   }
 
+  .top {
+    margin: 20px auto 30px;
+  }
+
   .middle {
-    margin: 104px auto 30px;
+    margin: 20px auto 10px;
 
     [class*='col'] {
       -ms-flex-positive: 0;