Commit b740854

HPCesia <me@hpcesia.com>
2025-01-23 08:18:31
perf: article style
master
1 parent 34805f9
Changed files (6)
src
components
widgets
MetaIcon.astro
ReadMoreButton.astro
layouts
MainLayout.astro
styles
article.scss
globals.scss
variables.scss
src/components/widgets/MetaIcon.astro
@@ -19,7 +19,7 @@ const { class: className, ...rest } = Astro.props;
     justify-content: center;
 
     @apply text-[var(--theme-color-light-darken)] dark:text-[var(--theme-color-dark-lighten)];
-    @apply bg-[var(--theme-color-light-transparent)] dark:bg-[var(--theme-color-dark-transparent)];
+    @apply bg-[var(--theme-color-light-trans-1d2)] dark:bg-[var(--theme-color-dark-trans-1d2)];
     @apply rounded-md;
   }
 </style>
src/components/widgets/ReadMoreButton.astro
@@ -23,6 +23,6 @@ const { href, title, ...rest } = Astro.props;
   svg {
     @apply h-full min-h-48 w-12 rounded-md;
     @apply text-[var(--theme-color-light-darken)] dark:text-[var(--theme-color-dark-lighten)];
-    @apply bg-[var(--theme-color-light-transparent)] dark:bg-[var(--theme-color-dark-transparent)];
+    @apply bg-[var(--theme-color-light-trans-1d2)] dark:bg-[var(--theme-color-dark-trans-1d2)];
   }
 </style>
src/layouts/MainLayout.astro
@@ -18,7 +18,7 @@ const { title, description, lang } = Astro.props;
   <Sidebar />
   <SideToolBar />
   <Navbar />
-  <div id="body-wrap" class="w-full items-center">
+  <div id="body-wrap" class="w-full items-center md:px-4">
     <!-- Main content -->
     <div id="content-wrapper" class="mx-auto flex max-w-screen-xl gap-4">
       <slot />
src/styles/article.scss
@@ -32,19 +32,103 @@ article {
   }
 
   p {
-    @apply my-2;
+    margin: 0.5rem 0;
   }
 
   img {
-    @apply mx-auto my-4 rounded-md;
+    @apply rounded-md;
+
+    margin: 1rem auto;
+    max-width: 75%;
+    max-height: 40rem;
   }
 
   hr {
-    @apply border-2 border-dashed;
-    @apply mx-2 my-4;
+    border: 1px dashed;
+    margin: 1.5rem 0.25rem;
   }
 
   a {
-    @apply text-[var(--theme-color-light)] dark:text-[var(--theme-color-dark)];
+    @apply text-[var(--theme-color-light-darken)] dark:text-[var(--theme-color-dark-lighten)];
+
+    &:not(sup a, sub a) {
+      @apply underline decoration-dashed;
+    }
+  }
+
+  ul,
+  ol {
+    margin-top: 0.5rem;
+  }
+
+  ul > li {
+    position: relative;
+    padding: 0.25rem 0.25rem 0.25rem 1.4em;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0.6em;
+      left: 0.25em;
+      border-radius: 9999px;
+      border: 0.25em solid;
+      width: 0.75em;
+      height: 0.75em;
+
+      @apply border-[var(--theme-color-light-trans-3d4)];
+      @apply dark:border-[var(--theme-color-dark-trans-3d4)];
+    }
+  }
+
+  ol > li {
+    position: relative;
+    padding: 0.25rem 0.25rem 0.25rem 1.8em;
+
+    &::before {
+      content: counter(li);
+      counter-increment: li 1;
+      position: absolute;
+      margin-top: 0.25em;
+      left: 0;
+      font-size: 0.75em;
+      line-height: 1.5em;
+      text-align: center;
+      border-radius: 9999px;
+      width: 1.5em;
+      height: 1.5em;
+
+      @apply bg-[var(--theme-color-light-trans-1d2)];
+      @apply dark:bg-[var(--theme-color-dark-trans-1d2)];
+      @apply text-[var(--theme-color-light-darken)] dark:text-[var(--theme-color-dark-lighten)];
+    }
+
+    // 解决错位问题
+    p:first-child {
+      margin-top: 0;
+    }
+  }
+
+  pre {
+    @apply rounded-md;
+
+    padding: 0.5rem;
+    margin: 0.5rem 0.25rem;
+  }
+
+  code:not(pre code) {
+    @apply bg-[var(--theme-color-light-trans-1d2)];
+    @apply dark:bg-[var(--theme-color-dark-trans-1d2)];
+    @apply rounded-md;
+    @apply text-[var(--theme-color-light-darken)] dark:text-[var(--theme-color-dark-lighten)];
+
+    padding: 0 0.25rem;
+  }
+
+  blockquote {
+    @apply border-[var(--theme-color-light)] dark:border-[var(--theme-color-dark)];
+    @apply bg-[var(--theme-color-light-trans-1d8)] dark:bg-[var(--theme-color-dark-trans-1d8)];
+    @apply rounded-sm border-l-4;
+
+    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
   }
 }
src/styles/globals.scss
@@ -24,6 +24,10 @@ html {
     @apply bg-[var(--theme-color-light)] dark:bg-[var(--theme-color-dark)];
   }
 
+  .theme-card-bg-hl-trans {
+    @apply bg-[var(--theme-color-light-trans-1d2)] dark:bg-[var(--theme-color-dark-trans-1d2)];
+  }
+
   .theme-text {
     @apply text-[var(--theme-text-color-light)] dark:text-[var(--theme-text-color-dark)];
   }
@@ -32,6 +36,10 @@ html {
     @apply text-[var(--theme-color-light)] dark:text-[var(--theme-color-dark)];
   }
 
+  .theme-text-hl-contrast {
+    @apply text-[var(--theme-color-light-darken)] dark:text-[var(--theme-color-dark-lighten)];
+  }
+
   .theme-text-second {
     @apply text-[var(--theme-text-color-second-light)] dark:text-[var(--theme-text-color-second-dark)];
   }
src/styles/variables.scss
@@ -20,8 +20,28 @@ $theme-border-color-dark: theme('colors.neutral.800');
   --theme-color-dark-lighten: #{color.adjust($theme-color-dark, $lightness: 20%)};
   --theme-color-light-darken: #{color.adjust($theme-color-light, $lightness: -20%)};
   --theme-color-dark-darken: #{color.adjust($theme-color-dark, $lightness: -20%)};
-  --theme-color-light-transparent: #{color.adjust($theme-color-light, $alpha: -0.5)};
-  --theme-color-dark-transparent: #{color.adjust($theme-color-dark, $alpha: -0.5)};
+
+  @for $i from 1 through 8 {
+    $numerator: $i;
+    $denominator: 8;
+
+    @while $numerator % 2 == 0 and $denominator % 2 == 0 {
+      $numerator: calc($numerator / 2);
+      $denominator: calc($denominator / 2);
+    }
+
+    $alpha: calc($i / 8 - 1);
+
+    --theme-color-light-trans-#{$numerator}d#{$denominator}: #{color.adjust(
+        $theme-color-light,
+        $alpha: $alpha
+      )};
+    --theme-color-dark-trans-#{$numerator}d#{$denominator}: #{color.adjust(
+        $theme-color-dark,
+        $alpha: $alpha
+      )};
+  }
+
   --theme-bg-color-light: #{$theme-bg-color-light};
   --theme-bg-color-dark: #{$theme-bg-color-dark};
   --theme-card-bg-color-light: #{$theme-card-bg-color-light};