Merge pull request #2 from OptimaiNetwork/ui

anonsyn · web-flow · commit 66e251b36cb4 · 2025-03-14T11:44:27.000+07:00
Imrove UI
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -37,14 +37,14 @@
 
 .heroTitle {
   font-size: 3rem;
-  font-weight: 700;
+  font-weight: 600;
   color: white;
   margin-bottom: 0.5rem;
 }
 
 .heroSubtitle {
   font-size: 1.75rem;
-  font-weight: 500;
+  font-weight: 400;
   color: #a6e22e;
   margin-bottom: 1rem;
 }
@@ -68,7 +68,7 @@
   padding: 0.8rem 2rem;
   border-radius: 12px;
   font-size: 1rem;
-  font-weight: bold;
+  font-weight: 600;
   text-transform: uppercase;
   text-decoration: none;
   transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
diff --git a/src/styles/admonition.scss b/src/styles/admonition.scss
@@ -9,6 +9,7 @@
   overflow: hidden;
   color: rgba(white, 0.8);
   --border-color: rgba(255, 255, 255, 0.3);
+  --ifm-heading-line-height: 1.63;
 
   &::before {
     content: '';
diff --git a/src/styles/footer.scss b/src/styles/footer.scss
@@ -4,6 +4,7 @@
 .footer {
   background-color: $background;
   padding: 2.4rem 2rem;
+  position: relative;
 
   @include xl {
     padding: 3.2rem 4rem;
@@ -56,7 +57,7 @@
   font-size: 1.6rem;
   line-height: 1.5;
   color: white;
-  font-weight: 700;
+  font-weight: 600;
 
   @include xl {
     font-size: 1.8rem;
@@ -72,7 +73,7 @@
 .footer__link-item {
   font-size: 1.6rem;
   line-height: 1.5;
-  font-weight: 500;
+  font-weight: 400;
   width: 100%;
   display: flex;
   align-items: center;
@@ -91,7 +92,7 @@
 .footer__copyright {
   font-size: 1.4rem;
   line-height: 1.5;
-  font-weight: 500;
+  font-weight: 400;
   color: white;
   opacity: 0.5;
 
diff --git a/src/styles/markdown.scss b/src/styles/markdown.scss
@@ -2,16 +2,18 @@
 @use '@site/src/styles/common/media.scss' as *;
 
 .markdown {
-  --ifm-heading-line-height: 1.5;
+  --ifm-heading-line-height: 2;
   --ifm-leading-desktop: 1.5;
   color: rgba(white, 0.8);
+  line-height: var(--ifm-heading-line-height);
 
   h1,
   h2,
   h3,
   h4,
   h5 {
     color: white;
+    line-height: 1.5;
   }
 
   h1 {
@@ -34,7 +36,13 @@
   }
 
   li + li {
-    margin-top: 0.4rem;
+    margin-top: 0.6rem;
+  }
+
+  li {
+    ul {
+      margin-top: 0.4rem;
+    }
   }
 
   p:has(+ h2) {
diff --git a/src/styles/nav.scss b/src/styles/nav.scss
@@ -54,7 +54,7 @@
     color: black;
     font-size: 1.6rem;
     line-height: 2rem;
-    font-weight: 600;
+    font-weight: 500;
     border-radius: 0.8rem;
     display: flex;
     align-items: center;
@@ -116,7 +116,7 @@
   .DocSearch-Button-Placeholder {
     font-size: 1.6rem;
     line-height: 1.63;
-    font-weight: 500;
+    font-weight: 400;
     color: $muted-background;
   }
 
diff --git a/src/styles/pagination.scss b/src/styles/pagination.scss
@@ -40,7 +40,7 @@
 
   span {
     font-size: 1.4rem;
-    font-weight: 500;
+    font-weight: 400;
     line-height: 1.5;
   }
 
@@ -62,7 +62,7 @@
 
   span {
     font-size: 1.6rem;
-    font-weight: 600;
+    font-weight: 500;
     line-height: 1.5;
   }
 
diff --git a/src/styles/search-modal.scss b/src/styles/search-modal.scss
@@ -43,7 +43,7 @@
   .DocSearch-Input {
     font-size: 1.6rem;
     line-height: 1.63;
-    font-weight: 500;
+    font-weight: 400;
     color: white;
 
     &::placeholder {
@@ -112,7 +112,7 @@
   .DocSearch-HitsFooter {
     a {
       border: none;
-      font-weight: 600;
+      font-weight: 500;
       font-size: 1.6rem;
       line-height: 150%;
     }
diff --git a/src/styles/search-page.scss b/src/styles/search-page.scss
@@ -5,7 +5,7 @@
   .searchQueryInput_u2C7 {
     font-size: 1.6rem;
     line-height: 1.63;
-    font-weight: 500;
+    font-weight: 400;
     color: white;
     height: 4.4rem;
     background-color: rgba($accent, 0.8);
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
@@ -38,7 +38,7 @@
   .menu__link {
     font-size: 1.6rem;
     line-height: 1.5;
-    font-weight: 500;
+    font-weight: 400;
     color: white !important;
   }
 
@@ -79,7 +79,22 @@
   }
 
   .menu__list {
+    position: relative;
     padding-left: 2.4rem;
+    margin: 0;
+
+    &::before {
+      content: '';
+      position: absolute;
+      display: block;
+      width: 1px;
+      height: 100%;
+      top: 0;
+      left: 2.4rem;
+      transform: translateX(-100%);
+      background-color: rgba(white, 0.2);
+    }
+
     .menu__link {
       border: none;
       background-color: transparent;
diff --git a/src/styles/toc.scss b/src/styles/toc.scss
@@ -20,10 +20,11 @@
       &::before {
         content: '';
         position: absolute;
-        top: 0.6rem;
+        top: 1.1rem;
         left: 0;
         width: 0.4rem;
         height: 1.2rem;
+        transform: translateY(-50%);
         background: #f6f655;
         border-radius: 0.4rem;
         opacity: 0;
@@ -38,9 +39,9 @@
     }
 
     a {
-      font-size: 1.6rem;
+      font-size: 1.4rem;
       font-weight: normal;
-      line-height: normal;
+      line-height: 1.5;
       color: white;
       opacity: 0.5;
       transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.2s ease-in-out;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -20,6 +20,11 @@
   ---ifm-link-color: white;
   --docsearch-highlight-color: #{$accent};
   --ifm-h1-font-size: 2.4rem;
+
+  --ifm-font-weight-light: 200;
+  --ifm-font-weight-normal: 300;
+  --ifm-font-weight-semibold: 500;
+  --ifm-font-weight-bold: 600;
 }
 
 @include lg {
diff --git a/src/theme/Admonition/Layout/styles.module.scss b/src/theme/Admonition/Layout/styles.module.scss
@@ -5,7 +5,7 @@
 .admonitionHeading {
   font-size: 1.6rem;
   line-height: 150%;
-  font-weight: 600;
+  font-weight: 500;
   display: flex;
   align-items: center;
   gap: 0.4rem;
diff --git a/src/theme/Details/styles.module.scss b/src/theme/Details/styles.module.scss
@@ -28,7 +28,7 @@
     padding: 2rem;
     font-size: 1.6rem;
     line-height: 1.5;
-    font-weight: 500;
+    font-weight: 400;
     color: white;
     display: flex;
     justify-content: space-between;
diff --git a/src/theme/DocBreadcrumbs/styles.module.css b/src/theme/DocBreadcrumbs/styles.module.css
@@ -1,5 +1,5 @@
 .breadcrumbsContainer {
   --ifm-breadcrumb-size-multiplier: 0.8;
-  --margin-bottom: 2rem;
+  --margin-bottom: 2.4rem;
   margin-bottom: var(--margin-bottom);
 }
diff --git a/src/theme/DocRoot/Layout/Main/index.tsx b/src/theme/DocRoot/Layout/Main/index.tsx
@@ -11,6 +11,7 @@ export default function DocRootLayoutMain({ hiddenSidebarContainer, children }:
     <main
       className={clsx(styles.docMainContainer, (hiddenSidebarContainer || !sidebar) && styles.docMainContainerEnhanced)}
     >
+      <div className={styles.docBackground} />
       <div className={clsx(styles.docItemWrapper)}>{children}</div>
     </main>
   )
diff --git a/src/theme/DocRoot/Layout/Main/styles.module.scss b/src/theme/DocRoot/Layout/Main/styles.module.scss
@@ -3,13 +3,34 @@
 .docMainContainer {
   display: flex;
   width: 100%;
+  position: relative;
+}
+
+.docBackground {
+  position: fixed;
+  top: var(--ifm-navbar-height);
+  left: var(--doc-sidebar-width);
+  width: calc(100vw - var(--doc-sidebar-width));
+  height: calc(100vh - var(--ifm-navbar-height));
+  opacity: 0.5;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%),
+    linear-gradient(
+      138deg,
+      rgba(90, 92, 10, 0.01) -22.01%,
+      rgba(113, 115, 13, 0.15) 10.21%,
+      rgba(94, 138, 133, 0.2) 39.44%,
+      rgba(12, 14, 11, 0.5) 111.64%
+    ),
+    radial-gradient(105.48% 59.33% at -6.41% 111.39%, rgba(246, 246, 85, 0.1) 0%, rgba(246, 246, 85, 0) 100%),
+    radial-gradient(108.78% 60.14% at 102.97% -4.95%, rgba(94, 237, 135, 0.1) 0%, rgba(94, 237, 135, 0) 100%);
 }
 
 .docItemWrapper {
   width: 100%;
   max-width: 1440px;
   margin: 0 auto;
   padding: 1.6rem;
+  position: relative;
 }
 
 @media (min-width: 997px) {
diff --git a/src/theme/SearchPage/styles.module.scss b/src/theme/SearchPage/styles.module.scss
@@ -6,7 +6,7 @@
   width: 100%;
   font-size: 1.6rem;
   line-height: 1.63;
-  font-weight: 500;
+  font-weight: 400;
   color: white;
   height: 4.4rem;
   background-color: rgba($accent, 0.8);
@@ -58,7 +58,7 @@
     color: rgba(white, 0.5);
     font-size: 1.6rem;
     line-height: 1.5;
-    font-weight: 400;
+    font-weight: 300;
     gap: 0.4rem;
     &:after {
       margin: 0 !important;
@@ -68,7 +68,7 @@
 }
 
 .searchResultItemHeading {
-  font-weight: 600;
+  font-weight: 500;
   font-size: 2rem;
   line-height: 1.5;
   margin-bottom: 0;
diff --git a/src/theme/TOCCollapsible/CollapseButton/styles.module.scss b/src/theme/TOCCollapsible/CollapseButton/styles.module.scss
@@ -9,7 +9,7 @@
   span {
     font-size: 1.6rem;
     line-height: normal;
-    font-weight: 600;
+    font-weight: 500;
   }
 
   svg {
diff --git a/src/theme/TOCCollapsible/styles.module.scss b/src/theme/TOCCollapsible/styles.module.scss
@@ -23,8 +23,8 @@
 
 .tocCollapsibleContent ul li {
   margin: 0;
-  font-size: 1.6rem;
-  line-height: normal;
+  font-size: 1.4rem;
+  line-height: 1.63;
   color: white;
 
   ul {

Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@`
`40`	`40`
`41`	`41`	`span {`
`42`	`42`	`font-size: 1.4rem;`
`43`		`- font-weight: 500;`
	`43`	`+ font-weight: 400;`
`44`	`44`	`line-height: 1.5;`
`45`	`45`	`}`
`46`	`46`
`@@ -62,7 +62,7 @@`
`62`	`62`
`63`	`63`	`span {`
`64`	`64`	`font-size: 1.6rem;`
`65`		`- font-weight: 600;`
	`65`	`+ font-weight: 500;`
`66`	`66`	`line-height: 1.5;`
`67`	`67`	`}`
`68`	`68`