Look & feel overhaul 2

anegg0 · Sep 26, 2022 · 479d28c · 479d28c
1 parent 41970f3
commit 479d28c
Show file tree

Hide file tree

Showing 10 changed files with 134 additions and 113 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -45,7 +45,7 @@ module.exports = {
       title: null,
       logo: {
         alt: 'Gr0wing logo',
-        src: 'img/gr0wingLogo.svg',
+        src: 'img/stone-egg-gr0wing.png',
       },
       hideOnScroll: true,
       items: [
@@ -61,7 +61,7 @@ module.exports = {
       style: 'dark',
       logo: {
         alt: 'Gr0wing logo',
-        src: 'img/gr0wingLogo.svg',
+        src: 'img/stone-egg-gr0wing.png',
         href: 'https://gr0wing.io/',
       },
       copyright: `Copyright: © ${new Date().getFullYear()} The Gr0wing Network. All rights reserved.`,

diff --git a/src/css/_article.scss b/src/css/_article.scss
@@ -29,11 +29,11 @@
   --ifm-code-color: var(--black);
 }
 
-html[data-theme="dark"] {
+html[data-theme='dark'] {
   --ifm-menu-color: var(--white);
-  --ifm-menu-color-active: #829EF0;
-  --ifm-menu-color-background-active: #181D27;
-  --ifm-menu-color-background-hover: #181D27;
+  --ifm-menu-color-active: #829ef0;
+  --ifm-menu-color-background-active: #181d27;
+  --ifm-menu-color-background-hover: #181d27;
   --ifm-toc-border-color: #676768;
   --ifm-toc-link-color: var(--white);
   --ifm-code-color: var(--white);
@@ -99,7 +99,7 @@ hr {
       color: $purple;
 
       @include dark {
-        color: #829EF0;
+        color: #829ef0;
       }
 
       &:before {
@@ -112,14 +112,14 @@ hr {
         content: '';
 
         @include dark {
-          background-color: #829EF0;
+          background-color: #829ef0;
         }
       }
     }
 
     &:hover {
       @include dark {
-        color: #829EF0;
+        color: #829ef0;
       }
     }
 
@@ -132,11 +132,11 @@ hr {
     }
   }
 
-  >li>ul>li>.table-of-contents__link--active:before {
+  > li > ul > li > .table-of-contents__link--active:before {
     left: -33px;
   }
 
-  >li>ul>li>ul>li>.table-of-contents__link--active:before {
+  > li > ul > li > ul > li > .table-of-contents__link--active:before {
     left: -48px;
   }
 }
@@ -153,13 +153,13 @@ blockquote {
 main:not(.home-main) {
   a {
     text-decoration: none;
-    transition: all .2s ease-in-out;
+    transition: all 0.2s ease-in-out;
 
     &:hover {
       color: $purple-hover;
 
       @include dark {
-        color: #829EF0;
+        color: #829ef0;
       }
     }
   }
@@ -254,20 +254,19 @@ main:not(.home-main) {
     }
   }
 
-  >img,
-  >p>img,
-  div[role="tabpanel"]>img,
-  div[role="tabpanel"]>p>img {
+  > img,
+  > p > img,
+  div[role='tabpanel'] > img,
+  div[role='tabpanel'] > p > img {
     display: block;
     margin-left: auto;
     margin-right: auto;
-    box-shadow: 0 2px 20px rgba($black, .17);
+    box-shadow: 0 2px 20px rgba($black, 0.17);
   }
 
   .has-small-images {
-
-    >img,
-    >p>img {
+    > img,
+    > p > img {
       max-width: 50%;
     }
   }
@@ -288,12 +287,12 @@ main:not(.home-main) {
 .pagination-nav {
   &__link {
     border: none;
-    background-color: $purple;
+    background-color: $grey-dark;
     color: $white;
-    transition: background-color .2s ease-in-out;
+    transition: background-color 0.2s ease-in-out;
 
     &:hover {
-      background-color: $purple-hover;
+      background-color: $grey;
     }
   }
 
@@ -319,7 +318,7 @@ main:not(.home-main) {
     border-radius: 0;
     line-height: 1;
     font-size: 17px;
-    transition: color .2s ease-in-out;
+    transition: color 0.2s ease-in-out;
 
     @include dark {
       color: $white;
@@ -334,7 +333,7 @@ main:not(.home-main) {
       color: $purple-hover !important;
 
       @include dark {
-        color: #829EF0 !important;
+        color: #829ef0 !important;
       }
     }
 
@@ -350,7 +349,7 @@ main:not(.home-main) {
       padding-top: 2.5rem;
       position: relative;
       &:before {
-        background: url("/img/orchestrating-icon-black.svg") no-repeat;
+        background: url('/img/orchestrating-icon-black.svg') no-repeat;
         background-size: contain;
         content: '';
         height: 40px;
@@ -359,8 +358,8 @@ main:not(.home-main) {
         top: 0;
         width: 40px;
 
-        html[data-theme="dark"] & {
-          background: url("/img/orchestrating-icon.svg") no-repeat;
+        html[data-theme='dark'] & {
+          background: url('/img/orchestrating-icon.svg') no-repeat;
           background-size: contain;
         }
       }
@@ -374,11 +373,11 @@ main:not(.home-main) {
   .ri-container {
     .ri-detail {
       &:before {
-        background: url("/img/provisioning-icon-black.svg") no-repeat;
+        background: url('/img/provisioning-icon-black.svg') no-repeat;
         background-size: contain;
 
-        html[data-theme="dark"] & {
-          background: url("/img/provisioning-icon.svg") no-repeat;
+        html[data-theme='dark'] & {
+          background: url('/img/provisioning-icon.svg') no-repeat;
           background-size: contain;
         }
       }
@@ -392,11 +391,11 @@ main:not(.home-main) {
   .ri-container {
     .ri-detail {
       &:before {
-        background: url("/img/observability-icon-black.svg") no-repeat;
+        background: url('/img/observability-icon-black.svg') no-repeat;
         background-size: contain;
 
-        html[data-theme="dark"] & {
-          background: url("/img/observability-icon.svg") no-repeat;
+        html[data-theme='dark'] & {
+          background: url('/img/observability-icon.svg') no-repeat;
           background-size: contain;
         }
       }
@@ -410,11 +409,11 @@ main:not(.home-main) {
   .ri-container {
     .ri-detail {
       &:before {
-        background: url("/img/ci-cd-icon-black.svg") no-repeat;
+        background: url('/img/ci-cd-icon-black.svg') no-repeat;
         background-size: contain;
 
-        html[data-theme="dark"] & {
-          background: url("/img/ci-cd-icon.svg") no-repeat;
+        html[data-theme='dark'] & {
+          background: url('/img/ci-cd-icon.svg') no-repeat;
           background-size: contain;
         }
       }
@@ -427,9 +426,9 @@ main:not(.home-main) {
   margin-bottom: 30px;
   padding: 20px;
   height: calc(100% - 30px);
-  border: 2px solid #E5E5E5;
-  box-shadow: 0px 4px 7px rgba(196, 196, 196, .5);
-  transition: border-color .2s ease-in-out;
+  border: 2px solid #e5e5e5;
+  box-shadow: 0px 4px 7px rgba(196, 196, 196, 0.5);
+  transition: border-color 0.2s ease-in-out;
 
   @include dark {
     background-color: #2a2c2d;
@@ -479,7 +478,7 @@ main:not(.home-main) {
         color: $white;
 
         &:hover {
-          color: #829EF0;
+          color: #829ef0;
         }
       }
     }
@@ -509,13 +508,13 @@ code {
   background-color: $purple-light;
 
   @include dark {
-    background-color: #3E44AC;
+    background-color: #3e44ac;
   }
 }
 
 iframe {
   max-width: 100%;
-  box-shadow: 0 2px 20px rgba($black, .17);
+  box-shadow: 0 2px 20px rgba($black, 0.17);
 }
 
 .sidebar-logo {

diff --git a/src/css/_config.scss b/src/css/_config.scss
@@ -1,50 +1,47 @@
-$primary-blue: #161F31;
-$secondary-blue: #0565FF;
-$red: #DC382C;
-$white: #FFFFFF;
+$primary-blue: #161f31;
+$secondary-blue: #0a152a;
+$red: #dc382c;
+$white: #ffffff;
 $black: #000000;
-$primary-black: #0C0E10;
-$secondary-black: #2E2E2E;
-$zircon: #F8FAFF;
+$primary-black: #0c0e10;
+$secondary-black: #2e2e2e;
+$zircon: #f8faff;
 $grey: #707070;
-$grey-light: #E0DFDF;
-$grey-dark: #C2C0C0;
-$purple: #5961FF;
-$purple-hover: #3F41A0;
-$purple-light: #F2F5FE;
-$purple-lighter: #F9FAFF;
+$grey-light: #e0dfdf;
+$grey-dark: #c2c0c0;
+$purple: #5961ff;
+$purple-hover: #3f41a0;
+$purple-light: #f2f5fe;
+$purple-lighter: #f9faff;
 
-$lato: 'Lato',
-sans-serif;
-
-$roboto: 'Roboto Mono',
-monospace;
+$lato: 'Lato', sans-serif;
+$roboto: 'Roboto Mono', monospace;
 
 :root {
   --chill: #e3ebed;
   --ui: #dfdfdf;
-  --primary-blue: #161F31;
-  --secondary-blue: #0565FF;
-  --red: #DC382C;
-  --white: #FFFFFF;
+  --primary-blue: #161f31;
+  --secondary-blue: #0a152a;
+  --red: #dc382c;
+  --white: #ffffff;
   --black: #000000;
-  --primary-black: #0C0E10;
-  --secondary-black: #2E2E2E;
-  --zircon: #F8FAFF;
+  --primary-black: #0c0e10;
+  --secondary-black: #2e2e2e;
+  --zircon: #f8faff;
   --grey: #707070;
-  --grey-light: #E0DFDF;
-  --grey-dark: #C2C0C0;
+  --grey-light: #e0dfdf;
+  --grey-dark: #c2c0c0;
   --violet: #3e41a0;
-  --purple: #5961FF;
-  --purple-hover: #3F41A0;
-  --purple-light: #F2F5FE;
-  --purple-lighter: #F9FAFF;
+  --purple: #5961ff;
+  --purple-hover: #3f41a0;
+  --purple-light: #f2f5fe;
+  --purple-lighter: #f9faff;
 }
 
 /* dark mode */
 
 @mixin dark {
-  html[data-theme="dark"] & {
+  html[data-theme='dark'] & {
     @content;
   }
 }

diff --git a/src/css/_typography.scss b/src/css/_typography.scss
@@ -4,7 +4,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: $roboto;
+  font-family: $roboto mono;
 }
 
 // section-title

diff --git a/src/css/components/_hero.scss b/src/css/components/_hero.scss
@@ -59,6 +59,22 @@
     }
   }
 
+  .hero-title {
+    margin: 0;
+    line-height: 1.1;
+    font-size: 50px;
+    font-weight: 500;
+
+    @include tablet-mobile {
+      text-align: center;
+    }
+
+    @include mobile {
+      line-height: 1.25;
+      font-size: 32px;
+    }
+  }
+
   .hero-subtitle {
     margin: 17px 0 0 0;
     line-height: 2;

diff --git a/src/css/components/_navbar.scss b/src/css/components/_navbar.scss
@@ -1,13 +1,13 @@
 .navbar-sidebar--show .navbar-sidebar {
-  box-shadow: 0 5px 40px rgba($primary-black, .5);
+  box-shadow: 0 5px 40px rgba($primary-black, 0.5);
 }
 
 .navbar-sidebar {
   background-color: $primary-black;
   box-shadow: none;
 
   &__backdrop {
-    background-color: rgba($primary-blue, .5);
+    background-color: rgba($primary-blue, 0.5);
   }
 
   &__brand {
@@ -42,7 +42,7 @@
   padding: 14px 15px;
   height: auto;
   border-radius: 0 0 10px 10px;
-  background-color: $primary-blue;
+  background-color: $secondary-blue;
   box-shadow: none;
 
   &__toggle {
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,7 +4,7 @@ h3, @@
     h4,
     h5,
     h6 {
-      font-family: $roboto;
+      font-family: $roboto mono;
     }
     // section-title
@@ Expand Down @@