diff options
| author | Joe Carstairs <65492573+Sycamost@users.noreply.github.com> | 2023-08-19 20:43:00 +0100 |
|---|---|---|
| committer | Joe Carstairs <65492573+Sycamost@users.noreply.github.com> | 2023-08-19 21:10:00 +0100 |
| commit | a76fd2721ebea4172d4dc33da1f47ad57679d03e (patch) | |
| tree | cb12b89c2481cd423ad8ea4bb4b9a491bfb80510 /public/css/layout | |
| parent | 4e0ab56ffaa175458e2b76df42b143e30d1c70b1 (diff) | |
Defines grid columns spacing
Diffstat (limited to 'public/css/layout')
| -rw-r--r-- | public/css/layout/grid.css | 36 | ||||
| -rw-r--r-- | public/css/layout/index.css | 1 |
2 files changed, 37 insertions, 0 deletions
diff --git a/public/css/layout/grid.css b/public/css/layout/grid.css new file mode 100644 index 0000000..b4bc240 --- /dev/null +++ b/public/css/layout/grid.css @@ -0,0 +1,36 @@ +:is(main, article, header, footer, nav) { + padding-inline-start: var(--grid-padding-start); + padding-inline-end: calc( + 100vw - (var(--grid-padding-start) + ( + var(--grid-column-width) * var(--grid-column-count) + + var(--grid-gutter-width) * (var(--grid-column-count) - 1) + )) + ); +} + +.grid-span-1 { + width: var(--grid-column-width); +} + +.grid-span-2 { + width: calc(var(--grid-column-width) * 2 + var(--grid-gutter-width)); +} + +.grid-span-6 { + width: calc( + var(--grid-column-width) * min(6, var(--grid-column-count)) + + var(--grid-gutter-width) * min(5, (var(--grid-column-count) - 1)) + ); +} + +.grid-span-full { + width: calc( + var(--grid-column-width) * var(--grid-column-count) + + var(--grid-gutter-width) * (var(--grid-column-count) - 1) + ) +} + +.grid-end-end { + margin-inline-start: auto; + margin-inline-end: 0; +}
\ No newline at end of file diff --git a/public/css/layout/index.css b/public/css/layout/index.css index e69de29..08d6c13 100644 --- a/public/css/layout/index.css +++ b/public/css/layout/index.css @@ -0,0 +1 @@ +@import './grid.css';
\ No newline at end of file |