*/
body, button, input, select, label, textarea {
- font-family: $text;
+ font-family: var(--font-body);
}
-.Codemirror, pre, #markdown-editor-input, .editor-toolbar, .code-base {
- font-family: $mono;
+pre, #markdown-editor-input, .text-mono, .code-base {
+ font-family: var(--font-code);
}
/*
font-weight: 400;
position: relative;
display: block;
+ font-family: var(--font-heading, var(--font-body));
@include lightDark(color, #222, #BBB);
.subheader {
font-size: 0.5em;
* Link styling
*/
a {
- color: var(--color-primary);
+ color: var(--color-link);
fill: currentColor;
cursor: pointer;
text-decoration: none;
display: inline-block;
}
&:focus img:only-child {
- outline: 2px dashed var(--color-primary);
+ outline: 2px dashed var(--color-link);
outline-offset: 2px;
}
}
pre {
font-size: 12px;
border: 1px solid #DDD;
- @include lightDark(background-color, #f5f5f5, #2B2B2B);
+ @include lightDark(background-color, #FFF, #2B2B2B);
@include lightDark(border-color, #DDD, #111);
- padding-left: 31px;
+ border-radius: 4px;
+ padding-left: 26px;
position: relative;
padding-top: 3px;
padding-bottom: 3px;
- &:after {
+ &:before {
content: '';
display: block;
position: absolute;
top: 0;
- width: 29px;
+ width: 22.4px;
left: 0;
height: 100%;
@include lightDark(background-color, #f5f5f5, #313335);
pre {
padding-left: 12px;
}
- pre:after {
+ pre:before {
display: none;
}
}
blockquote {
display: block;
position: relative;
- border-left: 4px solid var(--color-primary);
+ border-left: 4px solid transparent;
+ border-left-color: var(--color-primary);
@include lightDark(background-color, #f8f8f8, #333);
padding: $-s $-m $-s $-xl;
overflow: auto;
}
.text-mono {
- font-family: $mono;
+ font-family: var(--font-code);
}
.text-uppercase {
* Lists
*/
ul, ol {
+ padding-left: $-m * 2.0;
+ padding-right: $-m * 2.0;
+ display: flow-root;
p {
margin: 0;
}
list-style: decimal;
}
-ol, ul {
- padding-left: $-m * 2.0;
- padding-right: $-m * 2.0;
-}
-
li > ol, li > ul {
margin-top: 0;
margin-bottom: 0;
}
.break-text {
+ white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
}