From 833edacc1fb11fefbae371f4190fed489c5c8a23 Mon Sep 17 00:00:00 2001 From: BBaoVanC Date: Sat, 14 May 2022 00:13:01 -0500 Subject: [PATCH] Update aside shortcode with types and new accent colors --- assets/css/bobastyle.css | 81 ++++++++++++++++++++++++++++++----- layouts/shortcodes/aside.html | 31 ++++++++++++-- 2 files changed, 98 insertions(+), 14 deletions(-) diff --git a/assets/css/bobastyle.css b/assets/css/bobastyle.css index 250c7f7..0b1f579 100644 --- a/assets/css/bobastyle.css +++ b/assets/css/bobastyle.css @@ -3,7 +3,6 @@ */ /* color notes: - * accent is 15 chroma, 270 hue * * lightness (dark): * background-0: 5 @@ -19,7 +18,21 @@ --background-1: #212121; --background-2: #303030; --background-highlight: #414141; - --background-accent: #101c30; /* lch(10, 15, 270) */ + + --background-accent-red: #2d1411; /* lch(10, 15, 30) */ + --background-accent-orange: #291705; /* lch(10, 15, 60) */ + --background-accent-yellow: #2b2510; /* lch(15, 15, 90) */ + --background-accent-lime: #202813; /* lch(15, 15, 120) */ + --background-accent-green: #092010; /* lch(10, 15, 150) */ + --background-accent-turquoise: #062b25; /* lch(15, 15, 180) */ + --background-accent-teal: #002b30; /* lch(15, 15, 210) */ + --background-accent-cerulean: #022331; /* lch(12, 15, 240) */ + --background-accent-blue: #101c30; /* lch(10, 15, 270) */ + --background-accent-purple: #1e182d; /* lch(10, 15, 300) */ + --background-accent-pink: #291526; /* lch(10, 15, 330) */ + + --background-accent: var(--background-accent-blue); + --text-0: #e9e9e9; --text-1: #d4d4d4; --link-color: #3a94fb; /* lch(60, 60, 270) */ @@ -36,7 +49,21 @@ --background-1: #dbdbdb; --background-2: #c6c6c6; --background-highlight: #c6c6c6; - --background-accent: #d7e3ff; + + --background-accent-red: #f1cbc7; /* lch(85, 15, 30); */ + --background-accent-orange: #f8ddca; /* lch(90, 15, 60); */ + --background-accent-yellow: #f0e1b2; /* lch(90, 25, 90); */ + --background-accent-lime: #dce6c9; /* lch(90, 15, 120); */ + --background-accent-green: #cdead3; /* lch(90, 15, 150); */ + --background-accent-turquoise: #c3ebe2; /* lch(90, 15, 180); */ + --background-accent-teal: #c1eaf0; /* lch(90, 15, 210); */ + --background-accent-cerulean: #c8e7fb; /* lch(90, 15, 240); */ + --background-accent-blue: #d7e3ff; /* lch(90, 15, 270); */ + --background-accent-purple: #e8defb; /* lch(90, 15, 300); */ + --background-accent-pink: #f6daf1; /* lch(90, 15, 330); */ + + --background-accent: var(--background-accent-blue); + --text-0: #171717; --text-1: #262626; --link-color: #2061a8; /* lch(40, 45, 270) */ @@ -528,13 +555,6 @@ figcaption { text-align: center; } -aside { - background-color: var(--background-1); - padding: 12px 16px; - margin: 16px 0; - border-radius: 8px; -} - a { color: var(--link-color); text-decoration: inherit; @@ -606,6 +626,47 @@ code { +/* Asides */ +aside { + padding: 8px 16px; + margin: 16px 0; + border-radius: 8px; +} + +.aside-title { + margin-bottom: 8px; + padding-bottom: 4px; + font-weight: bold; +} + +.aside-content > :first-child { + margin-top: 0; +} +.aside-content > :last-child { + margin-bottom: 0; +} + +aside.note { + background-color: var(--background-accent-blue); +} +aside.info { + background-color: var(--background-accent-green); +} +aside.tip { + background-color: var(--background-accent-teal); +} +aside.warning { + background-color: var(--background-accent-yellow); +} +aside.example { + background-color: var(--background-accent-purple); +} +aside.quote { + background-color: var(--background-1); +} + + + /* Icons */ .icon { width: 20px; diff --git a/layouts/shortcodes/aside.html b/layouts/shortcodes/aside.html index a3d1946..aa92c47 100644 --- a/layouts/shortcodes/aside.html +++ b/layouts/shortcodes/aside.html @@ -1,5 +1,28 @@ -