Merge pull request #1703 from milvus-io/fix/blog-style

fix: update blog docs styles
milvus-io · Nov 29, 2024 · e8c62d2 · e8c62d2
2 parents aafb5ff + dd2b94f
commit e8c62d2
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 21 deletions.
diff --git a/src/components/layout/docLayout/index.tsx b/src/components/layout/docLayout/index.tsx
@@ -5,7 +5,7 @@ import FlexibleSectionContainer from '../../flexibleSection';
 import Header from '../../header';
 import Footer from '../../footer';
 import InkeepChatButtonContainer from '@/components/inkeep/InkeepChatButton';
-import 'highlight.js/styles/atom-one-light.css';
+import 'highlight.js/styles/atom-one-dark.css';
 import { LanguageEnum } from '@/components/language-selector';
 
 const MENU_MINIMUM_WIDTH = 22;

diff --git a/src/components/share/index.module.less b/src/components/share/index.module.less
@@ -1,7 +1,11 @@
 .share {
   display: flex;
-  gap: 10px;
+  gap: 16px;
 }
 .icon {
-  width: 24px;
+  width: 32px;
+
+  &:hover {
+    opacity: 0.7;
+  }
 }
diff --git a/src/pages/blog/[id].jsx b/src/pages/blog/[id].jsx
@@ -14,7 +14,7 @@ import BlogAnchorSection from '../../parts/blogs/blogAnchors';
 import pageClasses from '../../styles/responsive.module.less';
 import { ABSOLUTE_BASE_URL } from '@/consts';
 import { useCopyCode } from '../../hooks/enhanceCodeBlock';
-import 'highlight.js/styles/atom-one-light.css';
+import 'highlight.js/styles/atom-one-dark.css';
 
 export default function Template(props) {
   const {
@@ -91,7 +91,8 @@ export default function Template(props) {
             <section className={styles.blogHeader}>
               <p className={styles.breadcrumb}>
                 <a href="https://milvus.io">
-                  { homeIcon }
+                  {/* { homeIcon } */}
+                  Home
                 </a>
                 { sepIcon }
                 <a href="/blog">Blogs</a>

diff --git a/src/styles/blogDetail.module.less b/src/styles/blogDetail.module.less
@@ -27,6 +27,11 @@
         text-decoration: none;
         cursor: pointer;
         font-weight: 500;
+
+        &:hover {
+          text-decoration: underline;
+          text-underline-position: from-font;
+        }
       }
 
       svg {

diff --git a/src/styles/docsStyle.less b/src/styles/docsStyle.less
@@ -14,6 +14,10 @@
 
   color: var(--color-default-text);
 
+  & > *:first-child {
+    margin-top: 0;
+  }
+
   details {
     margin-bottom: 24px;
   }
@@ -104,6 +108,11 @@
     color: @color-black1;
     text-decoration: underline;
     text-underline-position: from-font;
+    transition: background-color 0.1s linear;
+
+    &:hover {
+      background-color: @color-black4;
+    }
 
     p {
       display: inline;
@@ -196,14 +205,15 @@
     background-color: @color-black1;
     margin: 20px 0 40px;
     position: relative;
-    padding: 24px;
+    white-space: pre-wrap;
 
     &:has(code[class*='active']) {
       border: 1px solid @color-grey-04;
     }
 
     code {
-      color: @color-black3;
+      padding: 24px;
+      color: @color-white1;
       display: block;
       font-size: 14px;
       line-height: 20px;
@@ -220,10 +230,14 @@
     }
   }
 
+  p + pre {
+    margin-top: calc(20px - @block-margin);
+  }
+
   li {
     //styleName: Body/Body2.Small;
     font-size: 16px;
-    line-height: 24px;
+    line-height: 1.7;
     text-align: left;
     color: #000;
     position: relative;
@@ -242,7 +256,12 @@
     margin: @block-margin 0;
     padding-left: 24px;
 
+    & > li {
+      padding-left: 6px;
+    }
+
     & > li::marker {
+      color: @color-grey-03;
       font-size: 16px;
       display: inline-block;
       margin-right: 16px;
@@ -254,6 +273,10 @@
     padding-left: 24px;
     margin: 8px 0;
 
+    & > li {
+      padding-left: 6px;
+    }
+
     & > li::marker {
       font-size: 16px;
       line-height: 1.4em;
@@ -416,11 +439,12 @@
   }
 
   table {
-    margin-bottom: 24px;
-    background-color: var(--pre-bg-color);
+    margin: 24px 0;
+    // background-color: var(--pre-bg-color);
     overflow-x: auto;
     width: 100%;
-    border-radius: 4px;
+    border-radius: 12px;
+    border: 1px solid @color-black4;
     display: block;
     hyphens: none;
 
@@ -434,12 +458,16 @@
       font-size: 16px;
       line-height: 22px;
       text-align: left;
-      background-color: #e8e8e8;
+      // background-color: #e8e8e8;
       min-width: 100%;
       width: calc(100vw - 32px);
 
       th {
-        text-align: left;
+        text-align: left!important;
+
+        &:not(:last-child) {
+          border-right: 1px solid @color-black4;
+        }
       }
     }
 
@@ -455,20 +483,26 @@
       }
 
       tr {
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid @color-black4;
 
         &:hover {
-          background-color: #e8e8e8;
+          background-color: @color-white1;
         }
       }
 
       td {
-        padding: 12px;
-        text-align: left;
-        font-size: 16px;
-        line-height: 1.4em;
+        padding: 10px 20px;
+        text-align: left!important;
+        font-size: 14px;
+        line-height: 1.5;
         width: calc(100vw - 32px);
         vertical-align: text-top;
+        font-weight: 500;
+        color: @color-black2;
+
+        &:not(:last-child) {
+          border-right: 1px solid @color-black4;
+        }
 
         @media @tablet {
           font-size: 14px;
@@ -483,7 +517,7 @@
     th {
       font-size: 16px;
       line-height: 1.5;
-      padding: 12px;
+      padding: 10px 20px;
       font-weight: 600;
     }
 

diff --git a/src/styles/variables.module.less b/src/styles/variables.module.less
@@ -19,7 +19,7 @@
 @color-warning: #d51f00;
 @color-black: #000000;
 @color-white: #ffffff;
-@color-white1: #f9f9f9f9;
+@color-white1: #f9f9f9;
 @color-black1: #00131a;
 @color-black1-5: #2E373B;
 @color-black2: #667176;