Update aside shortcode with types and new accent colors
This commit is contained in:
parent
121a67a1fc
commit
833edacc1f
GPG Key ID:
18089E4E3CCF1D3A
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,28 @@
|
|||
<aside>
|
||||
{{ with .Inner }}
|
||||
{{ . | markdownify }}
|
||||
{{ end }}
|
||||
{{ $type := "" }}
|
||||
{{ if .IsNamedParams }}
|
||||
{{ $type = .Get "type" | default "note" }}
|
||||
{{ 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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue