Commit 34d97b6

HPCesia <me@hpcesia.com>
2025-01-24 11:40:28
style: resort css rules
1 parent 01effbd
Changed files (1)
src
src/styles/markdown.scss
@@ -1,4 +1,18 @@
 article {
+  // 标题通用样式
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    display: inline;
+    width: 100%;
+    margin: 1rem 0 0.5rem;
+    scroll-margin-top: 4rem;
+    font-weight: bold;
+  }
+
+  // 各级标题特殊样式
   h1 {
     @apply text-2xl;
   }
@@ -11,51 +25,40 @@ article {
     @apply text-lg;
   }
 
-  h4 {
-    @apply text-base;
-  }
-
-  h5 {
-    @apply text-base;
-  }
-
-  h1,
-  h2,
-  h3,
   h4,
   h5 {
-    display: inline;
-    width: 100%;
-    scroll-margin-top: 4rem;
-    font-weight: bold;
-    margin: 1rem 0 0.5rem;
+    @apply text-base;
   }
 
+  // 基础文本元素
   p {
     margin: 0.5rem 0;
   }
 
-  img {
-    @apply rounded-md;
+  a {
+    @apply text-[var(--theme-color-light-darken)] dark:text-[var(--theme-color-dark-lighten)];
+
+    &:not(sup a, sub a) {
+      @apply underline decoration-dashed;
+    }
+  }
 
+  // 媒体元素
+  img {
+    position: relative;
     margin: 1rem auto;
     max-width: 75%;
     max-height: 40rem;
+
+    @apply rounded-md;
   }
 
   hr {
-    border: 1px dashed;
     margin: 1.5rem 0.25rem;
+    border: 1px dashed;
   }
 
-  a {
-    @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;
@@ -66,14 +69,14 @@ article {
     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;
+      content: '';
+      border: 0.25em solid;
+      border-radius: 9999px;
 
       @apply border-[var(--theme-color-light-trans-3d4)];
       @apply dark:border-[var(--theme-color-dark-trans-3d4)];
@@ -88,53 +91,51 @@ article {
       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;
+        margin-top: 0.25em;
+        width: 1.5em;
+        height: 1.5em;
+        content: counter(li);
+        counter-increment: li 1;
         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;
     counter-reset: line;
+    border-radius: 0.375rem;
 
     code {
       white-space: pre-wrap;
       overflow-wrap: break-word;
       word-break: break-word;
 
-      // 代码块行号显示
       > span {
         position: relative;
         padding-left: 1.2em;
 
         &::before {
-          content: counter(line);
-          counter-increment: line;
           position: absolute;
           left: 0.1em;
           top: 0;
+          content: counter(line);
+          counter-increment: line;
           font-size: 0.85em;
         }
       }
@@ -142,19 +143,20 @@ article {
   }
 
   code:not(pre code) {
+    padding: 0 0.25rem;
+
     @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 {
+    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
+
     @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;
   }
 }