Add aside styles

This commit is contained in:
Shadowfacts 2020-08-25 16:15:46 -04:00
parent afb844db87
commit e5f97c3a5e
Signed by untrusted user: shadowfacts
GPG Key ID: 94A5AB95422746E5
3 changed files with 76 additions and 21 deletions

View File

@ -7,6 +7,9 @@
--secondary-ui-text-color: var(--dark-secondary-ui-text-color);
--content-text-color: var(--dark-content-text-color);
--aside-background: var(--dark-aside-background);
--aside-border: var(--dark-aside-border);
// Syntax highdarking
--atom-base: var(--dark-atom-base);
--atom-mono-1: var(--dark-atom-mono-1);
@ -31,6 +34,9 @@
--secondary-ui-text-color: var(--light-secondary-ui-text-color);
--content-text-color: var(--light-content-text-color);
--aside-background: var(--light-aside-background);
--aside-border: var(--light-aside-border);
// Syntax highlighting
--atom-base: var(--light-atom-base);
--atom-mono-1: var(--light-atom-mono-1);

View File

@ -7,6 +7,9 @@
--secondary-ui-text-color: var(--light-secondary-ui-text-color);
--content-text-color: var(--light-content-text-color);
--aside-background: var(--light-aside-background);
--aside-border: var(--light-aside-border);
// Syntax highlighting
--atom-base: var(--light-atom-base);
--atom-mono-1: var(--light-atom-mono-1);
@ -31,6 +34,9 @@
--secondary-ui-text-color: var(--dark-secondary-ui-text-color);
--content-text-color: var(--dark-content-text-color);
--aside-background: var(--dark-aside-background);
--aside-border: var(--dark-aside-border);
// Syntax highdarking
--atom-base: var(--dark-atom-base);
--atom-mono-1: var(--dark-atom-mono-1);

View File

@ -1,9 +1,13 @@
<%- include("normalize.css") %>
<%- include("syntax-highlighting.css") %>
$light-accent-color: #0638d0;
$dark-accent-color: #f9c72f;
:root {
--light-accent-color: #0638d0;
--dark-accent-color: #f9c72f;
// Theme colors
--light-accent-color: #{$light-accent-color};
--dark-accent-color: #{$dark-accent-color};
--light-content-background-color: white;
--dark-content-background-color: #111;
--light-shadow-color: #f7f7f7;
@ -17,6 +21,11 @@
--light-content-text-color: #222;
--dark-content-text-color: #ddd;
--light-aside-background: #{lighten($light-accent-color, 50%)};
--dark-aside-background: #{darken($dark-accent-color, 50%)};
--light-aside-border: #{darken($light-accent-color, 10%)};
--dark-aside-border: #{darken($dark-accent-color, 10%)};
// Syntax highlighting
--light-atom-base: #fafafa;
--dark-atom-base: #282c34;
@ -42,6 +51,11 @@
--dark-atom-hue-6: #d19a66;
--light-atom-hue-6-2: #c18401;
--dark-atom-hue-6-2: #e6c07b;
// Fonts
--ui-font: Avenir, Lucida Grande, Arial, sans-serif;
--content-font: Charter, Georgia, serif;
--monospace-font: SF Mono, monospace;
}
.theme-light {
--accent-color: var(--light-accent-color);
@ -52,6 +66,9 @@
--secondary-ui-text-color: var(--light-secondary-ui-text-color);
--content-text-color: var(--light-content-text-color);
--aside-background: var(--light-aside-background);
--aside-border: var(--light-aside-border);
// Syntax highlighting
--atom-base: var(--light-atom-base);
--atom-mono-1: var(--light-atom-mono-1);
@ -75,6 +92,9 @@
--secondary-ui-text-color: var(--dark-secondary-ui-text-color);
--content-text-color: var(--dark-content-text-color);
--aside-background: var(--dark-aside-background);
--aside-border: var(--dark-aside-border);
// Syntax highdarking
--atom-base: var(--dark-atom-base);
--atom-mono-1: var(--dark-atom-mono-1);
@ -90,15 +110,10 @@
--atom-hue-6-2: var(--dark-atom-hue-6-2);
}
// Fonts
$sansSerif: Avenir, Lucida Grande, Arial, sans-serif;
$serif: Charter, Georgia, serif;
$monospace: SF Mono, monospace;
// General
html {
background-color: var(--content-background-color);
font-family: $sansSerif;
font-family: var(--ui-font);
font-size: 16px;
line-height: 1.6;
color: var(--ui-text-color);
@ -145,7 +160,7 @@ article {
&::before {
content: "#";
font-family: $monospace;
font-family: var(--monospace-font);
color: var(--accent-color);
user-select: none;
}
@ -175,15 +190,16 @@ article {
}
.article-content {
font-family: $serif;
position: relative;
font-family: var(--content-font);
font-size: 1.25rem;
word-wrap: break-word;
h1, h2, h3, h4, h5, h6 {
font-family: $sansSerif;
font-family: var(--ui-font);
.header-anchor {
font-family: $monospace;
font-family: var(--monospace-font);
color: var(--accent-color);
user-select: none;
text-decoration: none;
@ -208,6 +224,22 @@ article {
word-break: break-all;
}
aside {
background-color: var(--aside-background);
border: 1px solid var(--aside-border);
padding: 15px;
font-size: 1rem;
width: 50%;
position: absolute;
left: 100%;
margin-left: 15px;
box-sizing: border-box;
transform: translateY(-50%);
p:first-child { margin-top: 0; }
p:last-child { margin-bottom: 0; }
}
// Markdown decorations
@media screen and (min-width: 768px) {
a {
@ -216,7 +248,7 @@ article {
&::after { content: "](" attr(data-link) ")"; word-wrap: break-word; }
&::before, &::after {
color: var(--secondary-ui-text-color);
font-family: $monospace;
font-family: var(--monospace-font);
font-size: 0.75em;
}
}
@ -233,7 +265,7 @@ article {
}
code::before, code::after {
content: "`";
font-family: $monospace;
font-family: var(--monospace-font);
color: var(--secondary-ui-text-color);
}
pre code::before,
@ -244,12 +276,12 @@ article {
}
strong::before, strong::after {
content: "**";
font-family: $monospace;
font-family: var(--monospace-font);
color: var(--secondary-ui-text-color);
}
em::before, em::after {
content: "_";
font-family: $monospace;
font-family: var(--monospace-font);
color: var(--secondary-ui-text-color);
}
}
@ -394,7 +426,7 @@ a {
position: absolute;
top: -0.15em;
transition: 0.3s ease all;
font-family: $monospace;
font-family: var(--monospace-font);
color: transparent;
&:first-child {
@ -430,11 +462,13 @@ pre {
tab-size: 4;
word-wrap: normal;
font-family: var(--monospace-font);
}
pre, code {
font-family: $monospace;
font-size: 1rem;
code {
font-family: var(--monospace-font);
font-size: 0.8em;
}
img {
@ -447,7 +481,7 @@ figure {
margin: 0;
figcaption {
font-family: $sansSerif;
font-family: var(--ui-font);
font-size: 1rem;
font-style: italic;
color: var(--secondary-ui-text-color);
@ -671,3 +705,12 @@ figure {
max-width: 720px;
}
}
@media (max-width: 1455px) {
article .article-content aside {
position: initial;
width: 100%;
margin: 0;
transform: unset;
}
}