diff --git a/docs/src/basics/configuration.djot b/docs/src/basics/configuration.djot index d0960c0..ee61da6 100644 --- a/docs/src/basics/configuration.djot +++ b/docs/src/basics/configuration.djot @@ -3,6 +3,11 @@ order: -1 --- # Configuration reference +{.tag-aside .warning} +::: +Djockey is pre-alpha and config options _will_ change. +::: + ```yaml # djockey.yaml siteName: "Your name here" diff --git a/templates/html/static/dj-asides.css b/templates/html/static/dj-asides.css new file mode 100644 index 0000000..ae96994 --- /dev/null +++ b/templates/html/static/dj-asides.css @@ -0,0 +1,31 @@ +aside { + border-width: var(--aside-border-width); + border-radius: var(--aside-border-radius); + border-style: solid; + overflow: hidden; +} + +aside > * { + margin: 0 var(--ms); +} + +aside > *:last-child { + margin-bottom: var(--ms); +} + +aside::before { + font-weight: var(--fw-bold); + margin: 0 0 var(--ms) 0; + padding: var(--mss) var(--ms); + display: block; + background-color: var(--aside-title-color-bg-warning); +} + +aside.warning::before { + content: "Warning"; +} + +aside.warning { + border-color: var(--aside-color-border-warning); + font-size: var(--fs-small); +} diff --git a/templates/html/static/dj-typography.css b/templates/html/static/dj-typography.css index 3b15bc2..d8ecb08 100644 --- a/templates/html/static/dj-typography.css +++ b/templates/html/static/dj-typography.css @@ -21,6 +21,7 @@ header h1 { article p, article pre, +article aside, article ol, article ul { margin-bottom: 1.25em; diff --git a/templates/html/static/dj-variables.css b/templates/html/static/dj-variables.css index 278c8da..7e2b4ef 100644 --- a/templates/html/static/dj-variables.css +++ b/templates/html/static/dj-variables.css @@ -1,6 +1,8 @@ :root { /* PALETTE */ + /* It's OK to define one-off colors, but consider promoting them to palette colors ASAP. */ + /* Prefixes: -f: fonts @@ -82,6 +84,13 @@ --approx-height-of-top-bar-during-scroll: calc( var(--header-height) + var(--mm) ); + + /* COMPONENT VALUES */ + + --aside-border-width: 1px; + --aside-border-radius: 4px; + --aside-color-border-warning: red; + --aside-title-color-bg-warning: rgb(251, 205, 205); } @media (prefers-color-scheme: dark) {