diff options
| -rw-r--r-- | frontend/scss/general.scss | 50 |
1 files changed, 49 insertions, 1 deletions
diff --git a/frontend/scss/general.scss b/frontend/scss/general.scss index 13d2053..62dc361 100644 --- a/frontend/scss/general.scss +++ b/frontend/scss/general.scss @@ -19,7 +19,8 @@ article { h1, h2, -h3 { +h3, +h4 { font-weight: 500; line-height: var(--line-height-smaller); @@ -47,6 +48,10 @@ h3 { margin-top: calc(var(--margin-base) + 0.5rem); } +h4 { + font-size: 1.25rem; +} + p { margin-bottom: var(--margin-base); } @@ -248,3 +253,46 @@ article.large { margin-bottom: 2rem; } } + +.callout { + display: flex; + gap: 0.5rem; + flex-direction: column; + + padding: var(--margin-base); + background: var(--callout-color-background); + color: var(--callout-color); + + margin-bottom: var(--margin-base); + + & h4 { + margin-bottom: 0; + + font-weight: 600; + } + + & div { + display: flex; + gap: 0.5rem; + flex-direction: column; + } + + & div p { + margin-bottom: 0; + } +} + +[data-kind="note"] { + --callout-color-background: hsl(201, 60%, 70%); + --callout-color: hsl(189, 20%, 15%); +} + +[data-kind="warn"] { + --callout-color-background: hsl(39, 100%, 55%); + --callout-color: hsl(40, 40%, 15%); +} + +[data-kind="danger"] { + --callout-color-background: hsl(345, 95%, 42%); + --callout-color: hsl(345, 10%, 95%); +} |