refactor(prose): use `_partial/all` to replace a lot of components
This commit is contained in:
parent
61079f3627
commit
ebac47e0d7
GPG Key ID:
FD846A0A797B0D75
|
|
@ -0,0 +1,440 @@
|
|||
@charset "UTF-8";
|
||||
:root {
|
||||
--xm-font-sans: Open Sans, Inter, Roboto, Helvetica, Arial, Sarasa Gothic TC, Sarasa Gothic SC, Noto Sans TC, Noto Sans SC, Microsoft JhengHei, Microsoft YaHei, -apple-system, sans-serif;
|
||||
--xm-font-mono: DM Mono, Fira Code, Jetbrains Mono, Input Mono, Menlo, MesloLGS NF, Ubuntu, monospace;
|
||||
--xm-c-shiki-light: #f8f8f8;
|
||||
--xm-c-shiki-dark: #0e0e0e;
|
||||
--xm-c-link-border: hsla(0, 0%, 50%, 0.3);
|
||||
--xm-c-code: #111827;
|
||||
--xm-c-ol-counter: #6b7280;
|
||||
--xm-c-ul-counter: #d1d5db;
|
||||
--xm-c-hr-border: hsla(0, 0%, 50%, 0.3);
|
||||
--xm-c-blockquote-border: hsla(0, 0%, 50%, 0.3);
|
||||
--xm-c-figcaption: #6b7280;
|
||||
--xm-c-pre: #e5e7eb;
|
||||
--xm-c-thead: #111827;
|
||||
--xm-c-thead-border: #d1d5db;
|
||||
--xm-c-tr-border: #e5e7eb;
|
||||
}
|
||||
|
||||
.markdown-body {
|
||||
--xm-c-general: #555;
|
||||
--xm-c-dark: #222;
|
||||
--xm-c-darker: #000;
|
||||
}
|
||||
|
||||
.dark .markdown-body {
|
||||
--xm-c-general: #bbb;
|
||||
--xm-c-dark: #ddd;
|
||||
--xm-c-darker: #fff;
|
||||
}
|
||||
|
||||
.markdown-body {
|
||||
font-family: Open Sans, Inter, Roboto, Helvetica, Arial, Sarasa Gothic TC, Sarasa Gothic SC, Noto Sans TC, Noto Sans SC, Microsoft JhengHei, Microsoft YaHei, -apple-system, sans-serif !important;
|
||||
font-family: var(--xm-font-sans) !important;
|
||||
}
|
||||
|
||||
.markdown-body {
|
||||
color: var(--xm-c-general);
|
||||
}
|
||||
.markdown-body pre:not(.shiki):not(.highlight) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
.markdown-body .shiki,
|
||||
.markdown-body .highlight {
|
||||
font-family: DM Mono, Fira Code, Jetbrains Mono, Input Mono, Menlo, MesloLGS NF, Ubuntu, monospace !important;
|
||||
font-family: var(--xm-font-mono) !important;
|
||||
}
|
||||
.markdown-body .shiki,
|
||||
.markdown-body .highlight {
|
||||
margin: 0.5rem 0;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.markdown-body .shiki.shiki-light,
|
||||
.markdown-body .highlight.shiki-light {
|
||||
background: #f8f8f8 !important;
|
||||
background: var(--xm-c-shiki-light) !important;
|
||||
}
|
||||
.markdown-body .shiki.shiki-dark,
|
||||
.markdown-body .highlight.shiki-dark {
|
||||
background: #0e0e0e !important;
|
||||
background: var(--xm-c-shiki-dark) !important;
|
||||
}
|
||||
.markdown-body img {
|
||||
width: 100%;
|
||||
}
|
||||
.markdown-body a {
|
||||
font-weight: inherit;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid hsla(0, 0%, 50%, 0.3);
|
||||
border-bottom: 1px solid var(--xm-c-link-border);
|
||||
-webkit-transition: border 0.3s ease-in-out;
|
||||
-o-transition: border 0.3s ease-in-out;
|
||||
-moz-transition: border 0.3s ease-in-out;
|
||||
transition: border 0.3s ease-in-out;
|
||||
}
|
||||
.markdown-body a:hover {
|
||||
border-bottom: 1px solid var(--xm-c-general);
|
||||
}
|
||||
.markdown-body a code {
|
||||
color: inherit;
|
||||
}
|
||||
.markdown-body hr {
|
||||
margin: 2rem auto;
|
||||
width: 50px;
|
||||
}
|
||||
.markdown-body blockquote {
|
||||
padding: 0.6rem 1.2rem;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
line-height: 1.5rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.markdown-body blockquote > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.markdown-body blockquote > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.markdown-body blockquote p:first-of-type::before {
|
||||
content: none;
|
||||
}
|
||||
.markdown-body blockquote p:first-of-type::after {
|
||||
content: none;
|
||||
}
|
||||
.markdown-body:first-child {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.dark .shiki-light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html:not(.dark) .shiki-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
opacity: 0.6;
|
||||
-webkit-transition: 0.2s all ease-out;
|
||||
-o-transition: 0.2s all ease-out;
|
||||
-moz-transition: 0.2s all ease-out;
|
||||
transition: 0.2s all ease-out;
|
||||
}
|
||||
.item:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.header-anchor {
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.header-anchor {
|
||||
float: left;
|
||||
margin-top: 0.125rem;
|
||||
margin-left: -1.2rem;
|
||||
padding-right: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
opacity: 0;
|
||||
}
|
||||
.header-anchor:hover {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
.header-anchor:focus {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1:hover .header-anchor, h1:focus .header-anchor,
|
||||
h2:hover .header-anchor,
|
||||
h2:focus .header-anchor,
|
||||
h3:hover .header-anchor,
|
||||
h3:focus .header-anchor,
|
||||
h4:hover .header-anchor,
|
||||
h4:focus .header-anchor,
|
||||
h5:hover .header-anchor,
|
||||
h5:focus .header-anchor,
|
||||
h6:hover .header-anchor,
|
||||
h6:focus .header-anchor {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.prose {
|
||||
max-width: -webkit-fit-content;
|
||||
max-width: -moz-fit-content;
|
||||
max-width: fit-content;
|
||||
font-size: 1rem;
|
||||
color: var(--xm-c-general);
|
||||
line-height: 1.75;
|
||||
}
|
||||
.prose h1 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.8889rem;
|
||||
font-size: 2.25rem;
|
||||
font-weight: 800;
|
||||
color: var(--xm-c-darker);
|
||||
line-height: 1.1111;
|
||||
}
|
||||
.prose h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--xm-c-dark);
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.3334;
|
||||
}
|
||||
.prose h2 code {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.prose h2 + * {
|
||||
margin-top: 0;
|
||||
}
|
||||
.prose h3 {
|
||||
margin-top: 1.6rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: inherit;
|
||||
margin-bottom: 0.6rem;
|
||||
line-height: 1.6;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.prose h3 code {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.prose h3 + * {
|
||||
margin-top: 0;
|
||||
}
|
||||
.prose h4 {
|
||||
margin-top: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: inherit;
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.prose h4 + * {
|
||||
margin-top: 0;
|
||||
}
|
||||
.prose h5,
|
||||
.prose h6 {
|
||||
text-transform: uppercase;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 500;
|
||||
opacity: 0.5;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.prose hr {
|
||||
margin-top: 3rem;
|
||||
border-color: hsla(0, 0%, 50%, 0.3);
|
||||
border-color: var(--xm-c-hr-border);
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.prose hr + * {
|
||||
margin-top: 0;
|
||||
}
|
||||
.prose p {
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
.prose strong {
|
||||
font-weight: 600;
|
||||
color: var(--xm-c-dark);
|
||||
}
|
||||
.prose b {
|
||||
color: var(--xm-c-dark);
|
||||
}
|
||||
.prose em {
|
||||
color: inherit;
|
||||
}
|
||||
.prose a {
|
||||
font-weight: 500;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
color: var(--xm-c-darker);
|
||||
}
|
||||
.prose a code {
|
||||
color: #111827;
|
||||
color: var(--xm-c-code);
|
||||
}
|
||||
.prose code {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--xm-c-dark);
|
||||
}
|
||||
.prose code::before, .prose code::after {
|
||||
content: "`";
|
||||
}
|
||||
.prose pre {
|
||||
overflow-x: auto;
|
||||
margin-top: 1.7143rem;
|
||||
padding-top: 0.8571rem, 1.1429rem;
|
||||
font-size: 0.875rem;
|
||||
color: #e5e7eb;
|
||||
color: var(--xm-c-pre);
|
||||
line-height: 1.7143;
|
||||
margin-bottom: 1.7143rem;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
.prose pre code {
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
font-weight: 400;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
border-width: 0;
|
||||
border-radius: 0;
|
||||
line-height: inherit;
|
||||
}
|
||||
.prose pre code::before {
|
||||
content: none;
|
||||
}
|
||||
.prose pre code::after {
|
||||
content: none;
|
||||
}
|
||||
.prose blockquote,
|
||||
.prose q {
|
||||
margin-top: 1.6rem;
|
||||
padding-left: 1rem;
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
color: inherit;
|
||||
border-color: hsla(0, 0%, 50%, 0.3);
|
||||
border-color: var(--xm-c-blockquote-border);
|
||||
border-left-width: 0.25rem;
|
||||
quotes: "“" "”" "‘" "’";
|
||||
margin-bottom: 1.6rem;
|
||||
}
|
||||
.prose blockquote p:first-of-type::before,
|
||||
.prose q p:first-of-type::before {
|
||||
content: open-quote;
|
||||
}
|
||||
.prose blockquote p:last-of-type::after,
|
||||
.prose q p:last-of-type::after {
|
||||
content: close-quote;
|
||||
}
|
||||
.prose figure {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.prose figure figcaption {
|
||||
margin-top: 0.8571rem;
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
color: var(--xm-c-figcaption);
|
||||
line-height: 1.4286;
|
||||
}
|
||||
.prose figure > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.prose li {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.prose ol {
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
list-style-type: none;
|
||||
}
|
||||
.prose ol > li {
|
||||
position: relative;
|
||||
padding-left: 1.75rem;
|
||||
}
|
||||
.prose ol > li::before {
|
||||
content: counter(list-item, decimal) ".";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
font-weight: 400;
|
||||
color: #6b7280;
|
||||
color: var(--xm-c-ol-counter);
|
||||
}
|
||||
.prose ul {
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
list-style-type: none;
|
||||
}
|
||||
.prose ul > li {
|
||||
position: relative;
|
||||
padding-left: 1.75rem;
|
||||
}
|
||||
.prose ul > li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0.6875rem;
|
||||
left: 0.25rem;
|
||||
width: 0.375rem;
|
||||
height: 0.375rem;
|
||||
background-color: #d1d5db;
|
||||
background-color: var(--xm-c-ul-counter);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.prose ul ul,
|
||||
.prose ul ol,
|
||||
.prose ol ul,
|
||||
.prose ol ol {
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.prose table {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
width: 100%;
|
||||
table-layout: auto;
|
||||
font-size: 0.875rem;
|
||||
text-align: left;
|
||||
line-height: 1.7143;
|
||||
}
|
||||
.prose thead {
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
color: var(--xm-c-thead);
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: #d1d5db;
|
||||
border-bottom-color: var(--xm-c-thead-border);
|
||||
}
|
||||
.prose thead th {
|
||||
vertical-align: bottom;
|
||||
padding-right: 0.5714rem;
|
||||
padding-bottom: 0.5714rem;
|
||||
padding-left: 0.5714rem;
|
||||
}
|
||||
.prose thead th:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
.prose thead th:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
.prose tbody tr {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: #e5e7eb;
|
||||
border-bottom-color: var(--xm-c-tr-border);
|
||||
}
|
||||
.prose tbody tr:last-child {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
.prose tbody td {
|
||||
vertical-align: top;
|
||||
padding: 0.5714rem;
|
||||
}
|
||||
.prose tbody td:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
.prose tbody td:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
.prose img,
|
||||
.prose video {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
/*# sourceMappingURL=bundle.css.map */
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
@import 'title', 'text', 'link', 'code', 'quote', 'figure', 'list', 'table', 'media';
|
||||
|
|
@ -2,13 +2,5 @@
|
|||
|
||||
.prose {
|
||||
@include container;
|
||||
@import '_partial/title';
|
||||
@import '_partial/text';
|
||||
@import '_partial/link';
|
||||
@import '_partial/code';
|
||||
@import '_partial/quote';
|
||||
@import '_partial/figure';
|
||||
@import '_partial/list';
|
||||
@import '_partial/table';
|
||||
@import '_partial/media';
|
||||
@import '_partial/all';
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue