mirror of
https://github.com/kuohuanhuan/x-markdown-css.git
synced 2024-11-25 06:18:19 +00:00
refactor!: deprecate .prose class and lint
This commit is contained in:
9
src/partials/_all.scss
Normal file
9
src/partials/_all.scss
Normal file
@ -0,0 +1,9 @@
|
||||
@use 'title';
|
||||
@use 'text';
|
||||
@use 'link';
|
||||
@use 'code';
|
||||
@use 'quote';
|
||||
@use 'figure';
|
||||
@use 'list';
|
||||
@use 'table';
|
||||
@use 'media';
|
||||
10
src/partials/_container.scss
Normal file
10
src/partials/_container.scss
Normal file
@ -0,0 +1,10 @@
|
||||
@mixin container {
|
||||
max-width: fit-content;
|
||||
color: var(--xm-c-regular);
|
||||
font-size: 1rem;
|
||||
font-family: var(--xm-font-display) !important;
|
||||
line-height: 1.75;
|
||||
&:first-child {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
52
src/partials/code.scss
Normal file
52
src/partials/code.scss
Normal file
@ -0,0 +1,52 @@
|
||||
code {
|
||||
color: var(--xm-c-deep);
|
||||
font-weight: 600;
|
||||
font-size: .875rem;
|
||||
font-family: var(--xm-font-code);
|
||||
&::before,
|
||||
&::after {
|
||||
content: '`';
|
||||
}
|
||||
}
|
||||
pre {
|
||||
overflow-x: auto;
|
||||
margin-top: 1.75rem;
|
||||
margin-bottom: 1.75rem;
|
||||
padding-top: .875rem, 1.15rem;
|
||||
border-radius: .375rem;
|
||||
color: var(--xm-c-pre);
|
||||
font-size: .875rem;
|
||||
line-height: 1.75;
|
||||
code {
|
||||
padding: 0;
|
||||
border-width: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font-weight: 400;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
line-height: inherit;
|
||||
&::before,
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
&:not(.shiki) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
.shiki {
|
||||
margin: .5rem 0;
|
||||
font-size: 1.05rem;
|
||||
font-family: var(--xm-font-code) !important;
|
||||
line-height: 1.4;
|
||||
&.shiki-light {
|
||||
background: var(--xm-c-shiki-light) !important;
|
||||
}
|
||||
&.shiki-dark {
|
||||
background: var(--xm-c-shiki-dark) !important;
|
||||
}
|
||||
}
|
||||
14
src/partials/figure.scss
Normal file
14
src/partials/figure.scss
Normal file
@ -0,0 +1,14 @@
|
||||
figure {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
figcaption {
|
||||
margin-top: .875rem;
|
||||
color: var(--xm-c-figcaption);
|
||||
font-size: .875rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
> * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
13
src/partials/link.scss
Normal file
13
src/partials/link.scss
Normal file
@ -0,0 +1,13 @@
|
||||
a {
|
||||
border-bottom: 1px solid var(--xm-c-link-border);
|
||||
color: var(--xm-c-deeper);
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: border .3s ease-in-out;
|
||||
code {
|
||||
color: var(--xm-c-code);
|
||||
}
|
||||
&:hover {
|
||||
border-bottom: 1px solid var(--xm-c-regular);
|
||||
}
|
||||
}
|
||||
46
src/partials/list.scss
Normal file
46
src/partials/list.scss
Normal 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;
|
||||
color: var(--xm-c-ol-counter);
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
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: .675rem;
|
||||
left: .25rem;
|
||||
width: .375rem;
|
||||
height: .375rem;
|
||||
border-radius: 50%;
|
||||
background-color: var(--xm-c-ul-counter);
|
||||
}
|
||||
}
|
||||
}
|
||||
ul ul,
|
||||
ul ol,
|
||||
ol ul,
|
||||
ol ol {
|
||||
margin-top: .75rem;
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
6
src/partials/media.scss
Normal file
6
src/partials/media.scss
Normal file
@ -0,0 +1,6 @@
|
||||
img,
|
||||
video {
|
||||
width: 100%;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
29
src/partials/quote.scss
Normal file
29
src/partials/quote.scss
Normal file
@ -0,0 +1,29 @@
|
||||
blockquote,
|
||||
q {
|
||||
margin-top: 1.65rem;
|
||||
margin-bottom: 1.65rem;
|
||||
padding: .6rem 1.2rem;
|
||||
border-left: .25rem solid var(--xm-c-quote-border);
|
||||
color: inherit;
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
line-height: 1.5rem;
|
||||
quotes: '\201C''\201D''\2018''\2019';
|
||||
opacity: .8;
|
||||
p {
|
||||
&:first-of-type::before {
|
||||
content: open-quote;
|
||||
}
|
||||
&:last-of-type::after {
|
||||
content: close-quote;
|
||||
}
|
||||
}
|
||||
> * {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
44
src/partials/table.scss
Normal file
44
src/partials/table.scss
Normal file
@ -0,0 +1,44 @@
|
||||
table {
|
||||
width: 100%;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
table-layout: auto;
|
||||
font-size: .875rem;
|
||||
line-height: 1.75;
|
||||
text-align: left;
|
||||
}
|
||||
thead {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: var(--xm-c-thead-border);
|
||||
color: var(--xm-c-thead);
|
||||
font-weight: 600;
|
||||
th {
|
||||
vertical-align: bottom;
|
||||
padding-left: auto .575rem .575rem;
|
||||
&: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: .575rem;
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
14
src/partials/text.scss
Normal file
14
src/partials/text.scss
Normal file
@ -0,0 +1,14 @@
|
||||
p {
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
strong {
|
||||
color: var(--xm-c-deep);
|
||||
font-weight: 600;
|
||||
}
|
||||
b {
|
||||
color: var(--xm-c-deep);
|
||||
}
|
||||
em {
|
||||
color: inherit;
|
||||
}
|
||||
89
src/partials/title.scss
Normal file
89
src/partials/title.scss
Normal file
@ -0,0 +1,89 @@
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
margin-bottom: .875rem;
|
||||
color: var(--xm-c-deeper);
|
||||
font-weight: 800;
|
||||
font-size: 2.25rem;
|
||||
line-height: 1.15;
|
||||
}
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--xm-c-deep);
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.35;
|
||||
code {
|
||||
font-size: .875rem;
|
||||
}
|
||||
+ * {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
margin-top: 1.6rem;
|
||||
margin-bottom: .6rem;
|
||||
color: inherit;
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.6;
|
||||
opacity: .7;
|
||||
code {
|
||||
font-size: .9rem;
|
||||
}
|
||||
+ * {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: .5rem;
|
||||
color: inherit;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
+ * {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
opacity: .5;
|
||||
}
|
||||
hr {
|
||||
width: 50px;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
border-color: var(--xm-c-hr-border);
|
||||
+ * {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.header-anchor {
|
||||
float: left;
|
||||
margin-top: .125rem;
|
||||
margin-left: -1.25rem;
|
||||
padding-right: .5rem;
|
||||
border: 0 !important;
|
||||
font-size: .875rem;
|
||||
text-decoration: none;
|
||||
opacity: 0;
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@for $i from 1 through 6 {
|
||||
h#{$i} {
|
||||
&:hover,
|
||||
&:focus {
|
||||
.header-anchor {
|
||||
opacity: .35 + $i * .025;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user