e9cfcaf94c
Fixes 2 issues: 1. In Firefox, overflow: scroll puts an ugly unscrollable scrollbar on the page. With auto it behaves as normal but the scrollbar only appears when needed. 2. When using code highlighting, the generated Hugo styles replace the <pre> background color, making the page look ugly (only the text has a background, not the entire <pre> block). Setting the background !important fixes this. This is not ideal, but the styles are applied directly to the element when using the internal highlight shortcode, so this is the only way to override them. Tested on Firefox and Chrome.
155 lines
1.9 KiB
CSS
155 lines
1.9 KiB
CSS
/* Fonts */
|
||
:root {
|
||
--font-monospace: "Fira Mono", monospace;
|
||
}
|
||
|
||
body {
|
||
font-family: var(--font-monospace);
|
||
font-size: 16px;
|
||
line-height: 1.5rem;
|
||
}
|
||
|
||
/* Headings */
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
font-size: 1rem;
|
||
margin: 1.5rem 0 0 0;
|
||
font-weight: 600;
|
||
}
|
||
|
||
h1+h2,
|
||
h1+h3,
|
||
h1+h4,
|
||
h1+h5,
|
||
h1+h6,
|
||
h2+h3,
|
||
h2+h4,
|
||
h2+h5,
|
||
h2+h6,
|
||
h3+h4,
|
||
h3+h5,
|
||
h3+h6,
|
||
h4+h5,
|
||
h4+h6,
|
||
h5+h6 {
|
||
margin: 0;
|
||
}
|
||
|
||
h1:before { content: "# "; }
|
||
h2:before { content: "## "; }
|
||
h3:before { content: "### "; }
|
||
h4:before { content: "#### "; }
|
||
h5:before { content: "##### "; }
|
||
h6:before { content: "###### "; }
|
||
|
||
h1:before,
|
||
h2:before,
|
||
h3:before,
|
||
h4:before,
|
||
h5:before,
|
||
h6:before {
|
||
color: var(--bright-bg);
|
||
}
|
||
|
||
h1:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
/* Paragraphs */
|
||
p {
|
||
margin: 0 0 1.5rem 0;
|
||
}
|
||
|
||
/* Links */
|
||
|
||
a:link, a:visited {
|
||
color: var(--fg);
|
||
}
|
||
|
||
a:hover, a:active {
|
||
color: var(--bright-fg);
|
||
}
|
||
|
||
/* Lists */
|
||
ul {
|
||
margin: 1rem 0;
|
||
padding-left: 1.25rem;
|
||
}
|
||
|
||
ol {
|
||
margin: 1rem 0;
|
||
padding-left: 1.75rem;
|
||
}
|
||
|
||
ul ul,
|
||
ul ol,
|
||
ol ul,
|
||
ol ol {
|
||
margin: 0;
|
||
}
|
||
|
||
ul li::marker {
|
||
content: '∗ ';
|
||
color: var(--bright-bg);
|
||
}
|
||
|
||
ol li::marker {
|
||
color: var(--bright-bg);
|
||
}
|
||
|
||
/* Blockquotes */
|
||
blockquote {
|
||
position: relative;
|
||
margin-left: 1.5rem;
|
||
}
|
||
|
||
blockquote::before {
|
||
position: absolute;
|
||
left: -1.5rem;
|
||
content: ">";
|
||
color: var(--bright-bg);
|
||
}
|
||
|
||
.twitter-tweet::before {
|
||
content: "\f099";
|
||
font-family: "Font Awesome 5 Brands";
|
||
font-weight: 400;
|
||
}
|
||
|
||
/* Code */
|
||
pre,
|
||
code,
|
||
kbd {
|
||
overflow-x: auto;
|
||
background: var(--dark-bg) !important;
|
||
font-family: var(--font-monospace);
|
||
color: var(--bright-bg);
|
||
}
|
||
|
||
/* Emphasis */
|
||
b,
|
||
strong {
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* Highlighting */
|
||
::selection,
|
||
mark {
|
||
background-color: var(--yellow);
|
||
color: var(--bg);
|
||
}
|
||
|
||
/* Other typographic elements */
|
||
hr {
|
||
border: 0;
|
||
}
|
||
|
||
hr:after {
|
||
content: '---';
|
||
color: var(--bright-bg);
|
||
}
|
||
|