kuohuanhuan
/
x-markdown-css
mirror of https://github.com/kuohuanhuan/x-markdown-css.git
1
0
Fork 0
Code Releases Wiki Activity

refactor(_partial): sepreate SCSS files into several partials

This commit is contained in:
郭桓桓 2023-02-28 23:14:32 +08:00
parent 1bb7e502ac
commit d95065f5d2
Signed by: kuohuanhuan
GPG Key ID: FD846A0A797B0D75
11 changed files with 279 additions and 264 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/scss/_partial/code.scss Normal file
View File

@ -0,0 +1,35 @@
code {
font-size: .875rem;
font-weight: 600;
color: var(--xm-c-dark);
&::before, &::after {
content: '`';
}
}
pre {
overflow-x: auto;
margin-top: 1.7143rem;
padding-top: .8571rem, 1.1429rem;
font-size: .875rem;
color: var(--xm-c-pre);
line-height: 1.7143;
margin-bottom: 1.7143rem;
border-radius: .375rem;
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;
&::before {
content: none;
}
&::after {
content: none;
}
}
}

13
src/scss/_partial/container.scss Normal file
View File

@ -0,0 +1,13 @@
.markdown-body,
.prose {
max-width: fit-content;
font-size: 1rem;
color: var(--xm-c-general);
line-height: 1.75;
> :first-child {
margin-top: 0;
}
> :last-child {
margin-bottom: 0;
}
}

14
src/scss/_partial/figure.scss Normal file
View File

@ -0,0 +1,14 @@
figure {
margin-top: 2rem;
margin-bottom: 2rem;
figcaption {
margin-top: .8571rem;
font-size: .875rem;
color: var(--xm-c-figcaption);
line-height: 1.4286;
}
> * {
margin-top: 0;
margin-bottom: 0;
}
}

8
src/scss/_partial/link.scss Normal file
View File

@ -0,0 +1,8 @@
a {
font-weight: 500;
text-decoration: none;
color: var(--xm-c-darker);
code {
color: var(--xm-c-code);
}
}

46
src/scss/_partial/list.scss Normal file
View File

@ -0,0 +1,46 @@
li {
margin-top: .5rem;
margin-bottom: .5rem;
}
ol {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
list-style-type: none;
> li {
position: relative;
padding-left: 1.75rem;
&::before {
content: counter(list-item, decimal) '.';
position: absolute;
left: 0;
font-weight: 400;
color: var(--xm-c-ol-counter);
}
}
}
ul {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
list-style-type: none;
> li {
position: relative;
padding-left: 1.75rem;
&::before {
content: '';
position: absolute;
top: calc(.875rem - .1875rem);
left: .25rem;
width: .375rem;
height: .375rem;
background-color: var(--xm-c-ul-counter);
border-radius: 50%;
}
}
}
ul ul,
ul ol,
ol ul,
ol ol {
margin-top: .75rem;
margin-bottom: .75rem;
}

8
src/scss/_partial/media.scss Normal file
View File

@ -0,0 +1,8 @@
img {
margin-top: 2rem;
margin-bottom: 2rem;
}
video {
margin-top: 2rem;
margin-bottom: 2rem;
}

20
src/scss/_partial/quote.scss Normal file
View File

@ -0,0 +1,20 @@
blockquote,
q {
margin-top: 1.6rem;
padding-left: 1rem;
font-weight: 500;
font-style: italic;
color: inherit;
border-color: var(--xm-c-blockquote-color);
border-left-width: .25rem;
quotes: '\201C''\201D''\2018''\2019';
margin-bottom: 1.6rem;
p {
&:first-of-type::before {
content: open-quote;
}
&:last-of-type::after {
content: close-quote;
}
}
}

46
src/scss/_partial/table.scss Normal file
View File

@ -0,0 +1,46 @@
table {
margin-top: 2rem;
margin-bottom: 2rem;
width: 100%;
table-layout: auto;
font-size: .875rem;
text-align: left;
line-height: 1.7143;
}
thead {
font-weight: 600;
color: var(--xm-c-thead);
border-bottom-width: 1px;
border-bottom-color: var(--xm-c-thead-border);
th {
vertical-align: bottom;
padding-right: .5714rem;
padding-bottom: .5714rem;
padding-left: .5714rem;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}
tbody {
tr {
border-bottom-width: 1px;
border-bottom-color: var(--xm-c-tr-border);
&:last-child {
border-bottom-width: 0;
}
}
td {
vertical-align: top;
padding: .5714rem;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}

14
src/scss/_partial/text.scss Normal file
View File

@ -0,0 +1,14 @@
p {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
strong {
font-weight: 600;
color: var(--xm-c-dark);
}
b {
color: var(--xm-c-dark);
}
em {
color: inherit;
}

64
src/scss/_partial/title.scss Normal file
View File

@ -0,0 +1,64 @@
h1 {
margin-top: 0;
margin-bottom: .8889rem;
font-size: 2.25rem;
font-weight: 800;
color: var(--xm-c-darker);
line-height: 1.1111;
}
h2 {
margin-top: 2rem;
font-size: 1.5rem;
font-weight: 700;
color: var(--xm-c-dark);
margin-bottom: 1rem;
line-height: 1.3334;
code {
font-size: .875rem;
}
+ * {
margin-top: 0;
}
}
h3 {
margin-top: 1.6rem;
font-size: 1.25rem;
font-weight: 600;
color: inherit;
margin-bottom: .6rem;
line-height: 1.6;
opacity: .7;
code {
font-size: .9rem;
}
+ * {
margin-top: 0;
}
}
h4 {
margin-top: 1.5rem;
font-weight: 600;
color: inherit;
margin-bottom: .5rem;
line-height: 1.5;
+ * {
margin-top: 0;
}
}
h5,
h6 {
text-transform: uppercase;
margin-top: 20px;
margin-bottom: 10px;
font-weight: 500;
opacity: .5;
letter-spacing: 2px;
}
hr {
margin-top: 3rem;
border-color: var(--xm-c-hr-border);
margin-bottom: 3rem;
+ * {
margin-top: 0;
}
}

275
src/scss/prose.scss
View File

@ -1,267 +1,14 @@
@use '_partial/container' as *;
.markdown-body,
.prose {
max-width: fit-content;
font-size: 1rem;
color: var(--xm-c-general);
line-height: 1.75;
code {
font-size: .875rem;
font-weight: 600;
color: var(--xm-c-dark);
&::before, &::after {
content: '`';
}
}
a {
font-weight: 500;
text-decoration: none;
color: var(--xm-c-darker);
code {
color: var(--xm-c-code);
}
}
strong {
font-weight: 600;
color: var(--xm-c-dark);
}
li {
margin-top: .5rem;
margin-bottom: .5rem;
}
ol {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
list-style-type: none;
> li {
position: relative;
padding-left: 1.75rem;
&::before {
content: counter(list-item, decimal) '.';
position: absolute;
left: 0;
font-weight: 400;
color: var(--xm-c-ol-counter);
}
}
}
ul {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
list-style-type: none;
> li {
position: relative;
padding-left: 1.75rem;
&::before {
content: '';
position: absolute;
top: calc(.875rem - .1875rem);
left: .25rem;
width: .375rem;
height: .375rem;
background-color: var(--xm-c-ul-counter);
border-radius: 50%;
}
}
}
hr {
margin-top: 3rem;
border-color: var(--xm-c-hr-border);
margin-bottom: 3rem;
+ * {
margin-top: 0;
}
}
p {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
blockquote,
q {
margin-top: 1.6rem;
padding-left: 1rem;
font-weight: 500;
font-style: italic;
color: inherit;
border-color: var(--xm-c-blockquote-color);
border-left-width: .25rem;
quotes: '\201C''\201D''\2018''\2019';
margin-bottom: 1.6rem;
p {
&:first-of-type::before {
content: open-quote;
}
&:last-of-type::after {
content: close-quote;
}
}
}
h1 {
margin-top: 0;
margin-bottom: .8889rem;
font-size: 2.25rem;
font-weight: 800;
color: var(--xm-c-darker);
line-height: 1.1111;
}
h2 {
margin-top: 2rem;
font-size: 1.5rem;
font-weight: 700;
color: var(--xm-c-dark);
margin-bottom: 1rem;
line-height: 1.3334;
code {
font-size: .875rem;
}
+ * {
margin-top: 0;
}
}
h3 {
margin-top: 1.6rem;
font-size: 1.25rem;
font-weight: 600;
color: inherit;
margin-bottom: .6rem;
line-height: 1.6;
opacity: .7;
code {
font-size: .9rem;
}
+ * {
margin-top: 0;
}
}
h4 {
margin-top: 1.5rem;
font-weight: 600;
color: inherit;
margin-bottom: .5rem;
line-height: 1.5;
+ * {
margin-top: 0;
}
}
figure {
margin-top: 2rem;
margin-bottom: 2rem;
figcaption {
margin-top: .8571rem;
font-size: .875rem;
color: var(--xm-c-figcaption);
line-height: 1.4286;
}
> * {
margin-top: 0;
margin-bottom: 0;
}
}
pre {
overflow-x: auto;
margin-top: 1.7143rem;
padding-top: .8571rem, 1.1429rem;
font-size: .875rem;
color: var(--xm-c-pre);
line-height: 1.7143;
margin-bottom: 1.7143rem;
border-radius: .375rem;
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;
&::before {
content: none;
}
&::after {
content: none;
}
}
}
table {
margin-top: 2rem;
margin-bottom: 2rem;
width: 100%;
table-layout: auto;
font-size: .875rem;
text-align: left;
line-height: 1.7143;
}
thead {
font-weight: 600;
color: var(--xm-c-thead);
border-bottom-width: 1px;
border-bottom-color: var(--xm-c-thead-border);
th {
vertical-align: bottom;
padding-right: .5714rem;
padding-bottom: .5714rem;
padding-left: .5714rem;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}
tbody {
tr {
border-bottom-width: 1px;
border-bottom-color: var(--xm-c-tr-border);
&:last-child {
border-bottom-width: 0;
}
}
td {
vertical-align: top;
padding: .5714rem;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}
img {
margin-top: 2rem;
margin-bottom: 2rem;
}
video {
margin-top: 2rem;
margin-bottom: 2rem;
}
h6 {
text-transform: uppercase;
margin-top: 20px;
margin-bottom: 10px;
font-weight: 500;
opacity: .5;
letter-spacing: 2px;
}
> :first-child {
margin-top: 0;
}
> :last-child {
margin-bottom: 0;
}
b {
color: var(--xm-c-dark);
}
em {
color: inherit;
}
ul ul,
ul ol,
ol ul,
ol ol {
margin-top: .75rem;
margin-bottom: .75rem;
}
@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';
}