refactor!: deprecate `.prose` class and lint
This commit is contained in:
parent
e54282e5f8
commit
63a6fc2072
|
@ -2,7 +2,7 @@
|
|||
|
||||
@use 'partials/container';
|
||||
|
||||
.prose {
|
||||
.markdown-body {
|
||||
@include container.container;
|
||||
@include meta.load-css('partials/all');
|
||||
}
|
|
@ -14,6 +14,7 @@
|
|||
--xm-c-#{$name}: #{$val};
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-body {
|
||||
@each $name, $val in meta.module-variables('light') {
|
||||
--xm-c-#{$name}: #{$val};
|
|
@ -1,4 +1,2 @@
|
|||
@use 'scss/vars';
|
||||
|
||||
@use 'scss/markdown';
|
||||
@use 'scss/prose';
|
||||
@use 'vars';
|
||||
@use 'content';
|
||||
|
|
|
@ -2,5 +2,9 @@
|
|||
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;
|
||||
}
|
||||
}
|
|
@ -32,4 +32,21 @@ pre {
|
|||
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;
|
||||
}
|
||||
}
|
|
@ -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);
|
||||
}
|
||||
}
|
|
@ -1,5 +1,6 @@
|
|||
img,
|
||||
video {
|
||||
width: 100%;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
|
@ -2,12 +2,14 @@ blockquote,
|
|||
q {
|
||||
margin-top: 1.65rem;
|
||||
margin-bottom: 1.65rem;
|
||||
padding-left: 1rem;
|
||||
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;
|
||||
|
@ -16,4 +18,12 @@ q {
|
|||
content: close-quote;
|
||||
}
|
||||
}
|
||||
> * {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -55,10 +55,35 @@ h6 {
|
|||
opacity: .5;
|
||||
}
|
||||
hr {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 3rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,102 +0,0 @@
|
|||
.markdown-body {
|
||||
color: var(--xm-c-regular);
|
||||
font-family: var(--xm-font-display) !important;
|
||||
pre: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;
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
a {
|
||||
border-bottom: 1px solid var(--xm-c-link-border);
|
||||
font-weight: inherit;
|
||||
text-decoration: none;
|
||||
transition: border .3s ease-in-out;
|
||||
&:hover {
|
||||
border-bottom: 1px solid var(--xm-c-regular);
|
||||
}
|
||||
code {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
hr {
|
||||
width: 50px;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
blockquote,
|
||||
q {
|
||||
padding: .6rem 1.2rem;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
line-height: 1.5rem;
|
||||
opacity: .8;
|
||||
> * {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
p:first-of-type {
|
||||
&::before,
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:first-child {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
html:not(.dark) .shiki-dark,
|
||||
.dark .shiki-light {
|
||||
display: none;
|
||||
}
|
||||
.item {
|
||||
text-decoration: none;
|
||||
opacity: .6;
|
||||
transition: .2s all ease-out;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,8 +0,0 @@
|
|||
a {
|
||||
color: var(--xm-c-deeper);
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
code {
|
||||
color: var(--xm-c-code);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue