Add aside styles

This commit is contained in:
Shadowfacts 2020-08-25 16:15:46 -04:00
parent afb844db87
commit e5f97c3a5e
Signed by: 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); --secondary-ui-text-color: var(--dark-secondary-ui-text-color);
--content-text-color: var(--dark-content-text-color); --content-text-color: var(--dark-content-text-color);
--aside-background: var(--dark-aside-background);
--aside-border: var(--dark-aside-border);
// Syntax highdarking // Syntax highdarking
--atom-base: var(--dark-atom-base); --atom-base: var(--dark-atom-base);
--atom-mono-1: var(--dark-atom-mono-1); --atom-mono-1: var(--dark-atom-mono-1);
@ -31,6 +34,9 @@
--secondary-ui-text-color: var(--light-secondary-ui-text-color); --secondary-ui-text-color: var(--light-secondary-ui-text-color);
--content-text-color: var(--light-content-text-color); --content-text-color: var(--light-content-text-color);
--aside-background: var(--light-aside-background);
--aside-border: var(--light-aside-border);
// Syntax highlighting // Syntax highlighting
--atom-base: var(--light-atom-base); --atom-base: var(--light-atom-base);
--atom-mono-1: var(--light-atom-mono-1); --atom-mono-1: var(--light-atom-mono-1);

View File

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

View File

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