From e5f97c3a5e4a0565c1a252a93037f4e20e28bd32 Mon Sep 17 00:00:00 2001 From: Shadowfacts Date: Tue, 25 Aug 2020 16:15:46 -0400 Subject: [PATCH] Add aside styles --- site/css/dark.scss | 6 ++++ site/css/light.scss | 6 ++++ site/css/main.scss | 85 ++++++++++++++++++++++++++++++++++----------- 3 files changed, 76 insertions(+), 21 deletions(-) diff --git a/site/css/dark.scss b/site/css/dark.scss index cf98b1b..b958ea7 100644 --- a/site/css/dark.scss +++ b/site/css/dark.scss @@ -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); diff --git a/site/css/light.scss b/site/css/light.scss index 7b4c667..f9a6af3 100644 --- a/site/css/light.scss +++ b/site/css/light.scss @@ -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); diff --git a/site/css/main.scss b/site/css/main.scss index 0d427f8..0b08e22 100644 --- a/site/css/main.scss +++ b/site/css/main.scss @@ -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; + } +}