From dd2b94f02feaf471e56e4d327c8a146f7b46df6c Mon Sep 17 00:00:00 2001 From: "mimo.oyn" Date: Fri, 29 Nov 2024 11:43:57 +0800 Subject: [PATCH] fix: update blog docs styles --- src/components/layout/docLayout/index.tsx | 2 +- src/components/share/index.module.less | 8 ++- src/pages/blog/[id].jsx | 5 +- src/styles/blogDetail.module.less | 5 ++ src/styles/docsStyle.less | 64 +++++++++++++++++------ src/styles/variables.module.less | 2 +- 6 files changed, 65 insertions(+), 21 deletions(-) diff --git a/src/components/layout/docLayout/index.tsx b/src/components/layout/docLayout/index.tsx index 4a1daa95..d49b8824 100644 --- 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 index 5aba55ae..d758451f 100644 --- 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 index 3c5015c4..28f9a92e 100644 --- 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) {

- { homeIcon } + {/* { homeIcon } */} + Home { sepIcon } Blogs diff --git a/src/styles/blogDetail.module.less b/src/styles/blogDetail.module.less index baa6f0b1..ba3ddd27 100644 --- 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 index 29b9a5be..230b4e60 100644 --- 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 index 17caca78..199ef64d 100644 --- 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;