Update aside shortcode with types and new accent colors

This commit is contained in:
BBaoVanC 2022-05-14 00:13:01 -05:00
parent 121a67a1fc
commit 833edacc1f
Signed by: bbaovanc
GPG Key ID: 18089E4E3CCF1D3A
2 changed files with 98 additions and 14 deletions

View File

@ -3,7 +3,6 @@
*/ */
/* color notes: /* color notes:
* accent is 15 chroma, 270 hue
* *
* lightness (dark): * lightness (dark):
* background-0: 5 * background-0: 5
@ -19,7 +18,21 @@
--background-1: #212121; --background-1: #212121;
--background-2: #303030; --background-2: #303030;
--background-highlight: #414141; --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-0: #e9e9e9;
--text-1: #d4d4d4; --text-1: #d4d4d4;
--link-color: #3a94fb; /* lch(60, 60, 270) */ --link-color: #3a94fb; /* lch(60, 60, 270) */
@ -36,7 +49,21 @@
--background-1: #dbdbdb; --background-1: #dbdbdb;
--background-2: #c6c6c6; --background-2: #c6c6c6;
--background-highlight: #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-0: #171717;
--text-1: #262626; --text-1: #262626;
--link-color: #2061a8; /* lch(40, 45, 270) */ --link-color: #2061a8; /* lch(40, 45, 270) */
@ -528,13 +555,6 @@ figcaption {
text-align: center; text-align: center;
} }
aside {
background-color: var(--background-1);
padding: 12px 16px;
margin: 16px 0;
border-radius: 8px;
}
a { a {
color: var(--link-color); color: var(--link-color);
text-decoration: inherit; 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 */ /* Icons */
.icon { .icon {
width: 20px; width: 20px;

View File

@ -1,5 +1,28 @@
<aside> {{ $type := "" }}
{{ with .Inner }} {{ if .IsNamedParams }}
{{ . | markdownify }} {{ $type = .Get "type" | default "note" }}
{{ end }} {{ else }}
{{ $type = .Get 0 | default "note" }}
{{ end }}
{{/* This idea comes from the LoveIt theme:
https://github.com/dillonzq/LoveIt/blob/aa834e89af8349f6c18d4c7ad50a73fd5f1e40e0/layouts/shortcodes/admonition.html#L3-L14
*/}}
{{ $icons := dict "note" "pencil" }}
{{ $icons = dict "info" "info" | merge $icons }}
{{ $icons = dict "tip" "lightbulb" | merge $icons }}
{{ $icons = dict "warning" "info" | merge $icons }}
{{ $icons = dict "example" "flask" | merge $icons }}
{{ $icons = dict "quote" "quote" | merge $icons }}
<aside class="{{ $type }}">
<div class="aside-title">
{{ partial "icon.html" (index $icons $type) }}
{{ title $type }}
</div>
<div class="aside-content">
{{ .Inner | .Page.RenderString (dict "display" "block") }}
</div>
</aside> </aside>