feat: update home page style and design

Signed-off-by: Raman Yasel <[email protected]>
cilium · Apr 25, 2024 · 94595af · 94595af
1 parent e3b299a
commit 94595af
Show file tree

Hide file tree

Showing 56 changed files with 3,474 additions and 541 deletions.
diff --git a/docs/assets/scss/_styles_project.scss b/docs/assets/scss/_styles_project.scss
@@ -1,3 +1,4 @@
+@import "button";
 @import "home";
 @import "header";
 @import "footer";
@@ -10,3 +11,4 @@
 @import "banner";
 @import "toc";
 @import "page-card";
+@import "social";
diff --git a/docs/assets/scss/_variables_project.scss b/docs/assets/scss/_variables_project.scss
@@ -0,0 +1,6 @@
+$google_font_name: "Manrope";
+$google_font_family: "Manrope:400,500,600,700";
+
+$desktop: 1279px;
+$tablet: 1023px;
+$mobile: 767px;
diff --git a/docs/assets/scss/button.scss b/docs/assets/scss/button.scss
@@ -0,0 +1,51 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  padding: 1rem 1.75rem;
+  border-radius: 9999px;
+
+  text-align: center;
+  font-weight: 700;
+  font-size: 15px;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  color: #fff;
+  background-color: #253737;
+
+  cursor: pointer;
+  white-space: nowrap;
+  text-decoration: none;
+  box-shadow: none;
+  border: none;
+  transition: all 0.33s ease;
+  user-select: none;
+  touch-action: manipulation;
+  -webkit-appearance: button;
+
+  @media (max-width: $mobile) {
+    padding: 1rem 1.5rem;
+  }
+
+  &--text {
+    gap: 8px;
+    padding: 0;
+    background-color: transparent;
+    color: #253737;
+
+    &:focus,
+    &:hover,
+    &:active {
+      color: #5C6D70 !important;
+      background-color: transparent !important;
+    }
+  }
+
+  &:focus,
+  &:hover,
+  &:active {
+    color: #fff;
+    background-color: #415559;
+    text-decoration: none;
+    outline: 0;
+  }
+}
diff --git a/docs/assets/scss/footer.scss b/docs/assets/scss/footer.scss
@@ -5,33 +5,90 @@
   right: 50%;
   margin-left: -50vw;
   margin-right: -50vw;
-  padding: 38px 80px;
+  padding: 60px 0 20px 0;
   min-height: auto;
-  background-color: #FAFAFA;
+  background-color: #fff;
 
-  @media screen and (max-width: 767px) {
-    padding: 38px 30px;
+  .container {
+    padding: 0 52px;
+
+    @media (max-width: $desktop) {
+      padding: 0 8px;
+    }
   }
 
   &__inner {
-    display: flex;
-    justify-content: space-between;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
     align-items: center;
 
-    @media screen and (max-width: 767px) {
-      flex-direction: column;
-      gap: 20px;
+    @media (max-width: $tablet) {
+      row-gap: 55px;
+    }
+
+    @media (max-width: $mobile) {
+      grid-template-columns: 1fr;
+      text-align: center;
+      row-gap: 34px;
+    }
+  }
+
+  &__logo {
+    &-name {
+      font-size: 0;
+    }
+
+    svg {
+      height: 48px;
+    }
+
+    @media (max-width: $mobile) {
+      grid-row: 1 / 1;
     }
   }
 
-  p {
+  &__nav {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     margin: 0;
-    color: #253737;
+    padding: 0;
+    column-gap: 45px;
+    list-style: none;
+
+    @media (max-width: $tablet) {
+      grid-row: 2 / 3;
+      grid-column: 1 / -1;
+    }
+
+    @media (max-width: $mobile) {
+      grid-row: 2 / 2;
+      flex-direction: column;
+      row-gap: 22px;
+    }
+
+    &-item {
+      font-size: 15px;
+      font-weight: 500;
+
+      a {
+        color: #253737;
+
+        &:hover,
+        &:focus {
+          color: #5c6d70;
+        }
+      }
+
+      &:last-of-type {
+        display: none;
+      }
+    }
   }
 
   &__socials {
     display: flex;
-    gap: 1.25rem;
+    column-gap: 20px;
 
     a {
       display: flex;
@@ -40,7 +97,7 @@
       border-radius: 100%;
       width: 40px;
       height: 40px;
-      background-color: #2b383b;
+      background-color: #253737;
       transition: all 0.2s ease;
 
       svg {
@@ -49,16 +106,65 @@
 
       &:hover,
       &:focus {
-        background-color: #415559;
+        background-color: #5c6d70;
       }
     }
+
+    @media (max-width: $tablet) {
+      justify-content: right;
+    }
+
+    @media (max-width: $mobile) {
+      grid-row: 3 / 3;
+      justify-content: center;
+      column-gap: 12px;
+    }
   }
 
   &__copyright {
-	  p {
-	   font-size: small;
-	   color: gray;
-	   margin-top: 1em;
-	  }
+    margin-top: 47px;
+    padding-top: 24px;
+    display: flex;
+    justify-content: space-between;
+    color: #253737;
+    opacity: 0.7;
+    border-top: 1px solid #e6e6e6;
+
+    &-links {
+      display: flex;
+      column-gap: 32px;
+
+      a {
+        color: #253737;
+        opacity: 0.7;
+
+        &:hover,
+        &:focus {
+          color: #5c6d70;
+        }
+      }
+    }
+
+    p {
+      margin-top: 12px;
+      font-size: 14px;
+    }
+
+    @media (max-width: $tablet) {
+      margin-top: 60px;
+      padding-top: 22px;
+    }
+
+    @media (max-width: $mobile) {
+      flex-direction: column;
+      row-gap: 10px;
+      margin-top: 40px;
+      padding-top: 30px;
+
+      > p {
+        max-width: 80%;
+        margin: 0 auto;
+      }
+    }
   }
 }
diff --git a/docs/assets/scss/header.scss b/docs/assets/scss/header.scss
@@ -1,9 +1,14 @@
 .td-navbar {
   height: 64px;
-  padding: 20px;
+  padding: 20px 0;
   background-color: #fff;
   border-bottom: 1px solid #E5E7E7;
 
+  .td-home & {
+    background-color: #f7fdfd;
+    border-bottom-color: #f7fdfd;
+  }
+
   @media screen and (max-width: 991.98px) {
     .td-navbar-nav-scroll {
       height: auto;
@@ -16,26 +21,25 @@
 
   @media screen and (max-width: 767px) {
     height: auto;
+    padding: 8px 0;
 
     .td-navbar-nav-scroll {
       width: 100%;
       height: auto;
 
       .navbar-nav {
         width: 100%;
-        display:flex;
+        display: flex;
         justify-content: space-evenly;
+        column-gap: 12px;
+        overflow-x: auto;
 
-        // only display "documentation" and "Github" links
-        .nav-item {
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+
+        &::-webkit-scrollbar {
           display: none;
         }
-        .nav-item:first-child {
-          display: block;
-        }
-        .nav-item:last-child {
-          display: block;
-        }
       }
     }
   }
@@ -44,7 +48,7 @@
     height: 48px;
 
     @media screen and (max-width: 767px) {
-      height: 72px;
+      height: 36px;
     }
   }
 
@@ -80,6 +84,11 @@
         color: #5C6D70;
         border-color: #5C6D70;
       }
+
+      @media screen and (max-width: 767px) {
+        font-size: 14px;
+        padding: 14px 2px;
+      }
     }
   }