Merge pull request #73 from okp4/feat/enhance-layout

feat: improve global layout

src/scss/custom.scss

@@ -15,17 +15,32 @@
   src: url("/static/fonts/Barlow/Barlow-Bold.ttf");
 }
 
+@font-face {
+  font-family: "Norse regular";
+  src: url("/static/fonts/Norse/Norse.woff");
+}
+
+@font-face {
+  font-family: "Norse bold";
+  src: url("/static/fonts/Norse/Norse-Bold.woff");
+}
+
 :root {
   --ifm-code-font-size: 95%;
   --ifm-heading-color: #181c49;
   --ifm-color-primary: #0f1e3d;
-  --ifm-background-color: #dfe4e9;
+  --ifm-hover-overlay: #ff95001f;
+  --ifm-background-color: #0000 linear-gradient(180deg, #faf8f46c, #fff 0) 0% 0%
+    no-repeat padding-box;
   --ifm-navbar-background-color: #f2f6f9;
   --ifm-font-family-base: "Barlow Regular", sans-serif;
-  --ifm-heading-font-family: "Barlow Regular", sans-serif;
+  --ifm-heading-font-family: "Norse regular", sans-serif;
   --ifm-font-family-base-bold: "Barlow Bold", sans-serif;
+  --ifm-h1-font-family: "Norse bold", sans-serif;
   --ifm-font-color-base: #0f1e3d;
-  --ifm-footer-background-color: #dfe4e9;
+  --ifm-footer-background-color-main: transparent
+    linear-gradient(212deg, #181c49 0%, #343869 100%) 0% 0% no-repeat
+    padding-box;
   --ifm-menu-background-color: #f2f6f9;
   --ifm-menu-color: #0f1e3d;
   --ifm-navbar-search-input-background-color: rgba(15, 30, 61, 0.04);
@@ -41,12 +56,15 @@ html[data-theme="dark"] {
   --ifm-code-font-size: 95%;
   --ifm-color-primary: white;
   --ifm-heading-color: white;
+  --ifm-hover-overlay: #ffffff0d;
   --ifm-background-color: #0d1933;
   --ifm-navbar-background-color: #0f1e3d;
   --ifm-font-color-base: white;
   --ifm-menu-background-color: #0f1e3d;
   --ifm-menu-color: white;
-  --ifm-footer-background-color: #0d1933;
+  --ifm-footer-background-color-main: transparent
+    linear-gradient(180deg, #102040 0%, #061126 100%) 0% 0% no-repeat
+    padding-box;
   --ifm-navbar-search-input-background-color: rgba(255, 255, 255, 0.04);
   --ifm-navbar-search-input-color: rgba(255, 255, 255, 0.4);
   --search-local-modal-shadow: var(var(--ifm-color-primary));

src/scss/main.scss

@@ -2,38 +2,91 @@
   display: none;
 }
 
-.navbar__link,
-.menu__link {
-  font-weight: 500;
-  font-size: 16px;
-  font-family: var(--ifm-heading-font-family);
-  color: var(--ifm-menu-color);
-}
+html {
+  .navbar--fixed-top {
+    height: 80px;
+  }
 
-.navbar__link--active,
-.menu__link--active {
-  font-weight: 700;
-}
+  .menu__link--active,
+  .menu__link:hover {
+    border-color: #ff9500;
+    border-radius: 0;
+    border-right: 2px solid;
+    color: #ff9500;
+  }
 
-.navbar__items {
-  .navbar__search {
-    input {
-      font-family: var(--ifm-font-family-base);
-      font-weight: 500;
-      font-size: 16px;
-      line-height: 72px;
+  .navbar__items {
+    .navbar__search {
+      input {
+        font-family: var(--ifm-font-family-base);
+        font-weight: var(--ifm-font-weight-semibold);
+        font-size: 16px;
+        line-height: 72px;
 
-      svg {
-        path {
-          fill: var(--ifm-color-primary);
+        svg {
+          path {
+            fill: var(--ifm-color-primary);
+          }
         }
       }
+
+      > button {
+        cursor: pointer;
+      }
     }
 
-    > button {
-      cursor: pointer;
+    .navbar__link--active,
+    .navbar__link:hover {
+      -webkit-text-fill-color: #0000;
+      background: #f79413;
+      -webkit-background-clip: text;
+      background-clip: text;
     }
   }
+
+  .navbar__link,
+  .menu__link {
+    font-weight: var(--ifm-font-weight-semibold);
+    font-size: 18px;
+    font-family: var(--ifm-font-family-base);
+  }
+
+  .navbar__link--active,
+  .menu__link--active {
+    font-weight: var(--ifm-font-weight-bold);
+  }
+
+  .footer {
+    background: var(--ifm-footer-background-color-main);
+
+    .footer__title {
+      color: white;
+    }
+
+    .footer__link-item {
+      color: #ced2d9;
+
+      &:hover {
+        color: white;
+      }
+    }
+
+    .footer__copyright {
+      color: white;
+    }
+  }
+}
+
+h2,
+html .footer__title {
+  font-family: var(--ifm-heading-font-family);
+}
+
+h3,
+h4,
+h5,
+h6 {
+  font-family: inherit;
 }
 
 .menu {
@@ -57,10 +110,10 @@
 }
 
 h1 {
-  font-weight: 700;
-  font-size: 28px;
+  font-size: 3rem;
   margin-top: 56px;
   margin-bottom: 40px;
+  font-family: var(--ifm-h1-font-family);
 }
 
 p,
@@ -80,3 +133,18 @@ pre code {
   background-color: var(--ifm-navbar-background-color);
   text-align: left;
 }
+
+.menu__link--sublist {
+  &.menu__link--active {
+    border: none;
+    color: var(--ifm-font-color-base);
+  }
+}
+
+.menu a:hover {
+  background-color: #ff95001f;
+}
+
+iframe {
+  max-width: 100%;
+}