Commit 34d97b6
Changed files (1)
src
styles
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;
}
}