shadowfacts
/
shadowfacts.net
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Add warning-style asides

This commit is contained in:
Shadowfacts 2021-12-27 15:56:17 -05:00
parent 0cfe1ef91b
commit 5cb6144041
3 changed files with 21 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
site/css/dark.scss
View File

@ -9,6 +9,8 @@
--aside-background: var(--dark-aside-background); --aside-background: var(--dark-aside-background);
--aside-border: var(--dark-aside-border); --aside-border: var(--dark-aside-border);
--aside-warning-background: var(--dark-aside-warning-background);
--aside-warning-border: var(--dark-aside-warning-border);
// Syntax highdarking // Syntax highdarking
--atom-base: var(--dark-atom-base); --atom-base: var(--dark-atom-base);
@ -36,6 +38,8 @@
--aside-background: var(--light-aside-background); --aside-background: var(--light-aside-background);
--aside-border: var(--light-aside-border); --aside-border: var(--light-aside-border);
--aside-warning-background: var(--light-aside-warning-background);
--aside-warning-border: var(--light-aside-warning-border);
// Syntax highlighting // Syntax highlighting
--atom-base: var(--light-atom-base); --atom-base: var(--light-atom-base);

4
site/css/light.scss
View File

@ -9,6 +9,8 @@
--aside-background: var(--light-aside-background); --aside-background: var(--light-aside-background);
--aside-border: var(--light-aside-border); --aside-border: var(--light-aside-border);
--aside-warning-background: var(--light-aside-warning-background);
--aside-warning-border: var(--light-aside-warning-border);
// Syntax highlighting // Syntax highlighting
--atom-base: var(--light-atom-base); --atom-base: var(--light-atom-base);
@ -36,6 +38,8 @@
--aside-background: var(--dark-aside-background); --aside-background: var(--dark-aside-background);
--aside-border: var(--dark-aside-border); --aside-border: var(--dark-aside-border);
--aside-warning-background: var(--dark-aside-warning-background);
--aside-warning-border: var(--dark-aside-warning-border);
// Syntax highdarking // Syntax highdarking
--atom-base: var(--dark-atom-base); --atom-base: var(--dark-atom-base);

13
site/css/main.scss
View File

@ -25,6 +25,10 @@ $dark-accent-color: #f9c72f;
--dark-aside-background: #{darken($dark-accent-color, 50%)}; --dark-aside-background: #{darken($dark-accent-color, 50%)};
--light-aside-border: #{darken($light-accent-color, 10%)}; --light-aside-border: #{darken($light-accent-color, 10%)};
--dark-aside-border: #{darken($dark-accent-color, 10%)}; --dark-aside-border: #{darken($dark-accent-color, 10%)};
--light-aside-warning-background: #{lighten(#c6322f, 40%)};
--dark-aside-warning-background: #{darken(#c6322f, 40%)};
--light-aside-warning-border: #c6322f;
--dark-aside-warning-border: #c6322f;
// Syntax highlighting // Syntax highlighting
--light-atom-base: #fafafa; --light-atom-base: #fafafa;
@ -68,6 +72,8 @@ $dark-accent-color: #f9c72f;
--aside-background: var(--light-aside-background); --aside-background: var(--light-aside-background);
--aside-border: var(--light-aside-border); --aside-border: var(--light-aside-border);
--aside-warning-background: var(--light-aside-warning-background);
--aside-warning-border: var(--light-aside-warning-border);
// Syntax highlighting // Syntax highlighting
--atom-base: var(--light-atom-base); --atom-base: var(--light-atom-base);
@ -94,6 +100,8 @@ $dark-accent-color: #f9c72f;
--aside-background: var(--dark-aside-background); --aside-background: var(--dark-aside-background);
--aside-border: var(--dark-aside-border); --aside-border: var(--dark-aside-border);
--aside-warning-background: var(--dark-aside-warning-background);
--aside-warning-border: var(--dark-aside-warning-border);
// Syntax highdarking // Syntax highdarking
--atom-base: var(--dark-atom-base); --atom-base: var(--dark-atom-base);
@ -240,6 +248,11 @@ article {
font-size: 1rem; font-size: 1rem;
box-sizing: border-box; box-sizing: border-box;
&.warning {
background-color: var(--aside-warning-background);
border: 1px solid var(--aside-warning-border);
}
p:first-child { margin-top: 0; } p:first-child { margin-top: 0; }
p:last-child { margin-bottom: 0; } p:last-child { margin-bottom: 0; }
} }