diff options
| author | Deniz Akşimşek <deniz@denizaksimsek.com> | 2022-05-17 13:04:38 +0300 |
|---|---|---|
| committer | Deniz Akşimşek <deniz@denizaksimsek.com> | 2022-05-17 13:04:38 +0300 |
| commit | a10271f5f5b4d5b84d3e62a4020da9220804f231 (patch) | |
| tree | 5ea42cd8969227bd171a2bb077193d8fa3ae0ee6 | |
| parent | e04d8c15e228ff91b63112ada003915b560e4796 (diff) | |
| download | missing-a10271f5f5b4d5b84d3e62a4020da9220804f231.tar.gz missing-a10271f5f5b4d5b84d3e62a4020da9220804f231.zip | |
add .textcolumns
| -rw-r--r-- | src/util/layout.css | 10 | ||||
| -rw-r--r-- | www/docs/layout.md | 15 |
2 files changed, 22 insertions, 3 deletions
diff --git a/src/util/layout.css b/src/util/layout.css index 85714dc..92999fb 100644 --- a/src/util/layout.css +++ b/src/util/layout.css @@ -38,6 +38,16 @@ /**/ +.textcolumns { + --col-width: 30ch; + column-width: var(--col-width); + column-gap: var(--gap); + + & :first-child { margin-block-start: 0 !important } +} + +/**/ + .fullbleed { position: relative; width: 100vw; diff --git a/www/docs/layout.md b/www/docs/layout.md index 20eeb6d..4e73cf8 100644 --- a/www/docs/layout.md +++ b/www/docs/layout.md @@ -13,9 +13,9 @@ manually set the <dfn>`--col-width`</dfn> variable. | Class | Column width | |-------------------------|-------------------------------------------| -| <dfn>`colwidth-s`</dfn> | `--col-width` = 15ch (same as default) | -| <dfn>`colwidth-m`</dfn> | `--col-width` = 24ch | -| <dfn>`colwidth-l`</dfn> | `--col-width` = 35ch | +| <dfn>`colwidth-s`</dfn> | `--col-width` = 15ch (same as default) | +| <dfn>`colwidth-m`</dfn> | `--col-width` = 24ch | +| <dfn>`colwidth-l`</dfn> | `--col-width` = 35ch | If you want an element to take up multiple columns, use the `col-*` classes: @@ -36,6 +36,15 @@ size without regard for the column grid, and <dfn>`.col-1`</dfn>, just for completeness' sake. +## Text Columns + +The <dfn>`.textcolumns`</dfn> class creates multi-column text using the CSS +[`column-width`][] property. The column width can be set with the `.colwidth-*` +classes. + +[`column-width`]: https://developer.mozilla.org/en-US/docs/Web/CSS/column-width + + ## Full Bleed Add the <dfn>`.full-bleed`</dfn> class to make an element go outside its |