Skip to content

Commit

Permalink
Asides
Browse files Browse the repository at this point in the history
  • Loading branch information
irskep committed Aug 26, 2024
1 parent 6b0cfdd commit 95a00b4
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 0 deletions.
5 changes: 5 additions & 0 deletions docs/src/basics/configuration.djot
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
31 changes: 31 additions & 0 deletions templates/html/static/dj-asides.css
Original file line number Diff line number Diff line change
@@ -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);
}
1 change: 1 addition & 0 deletions templates/html/static/dj-typography.css
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ header h1 {

article p,
article pre,
article aside,
article ol,
article ul {
margin-bottom: 1.25em;
Expand Down
9 changes: 9 additions & 0 deletions templates/html/static/dj-variables.css
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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) {
Expand Down

0 comments on commit 95a00b4

Please sign in to comment.