diff options
| author | Joe Carstairs <65492573+Sycamost@users.noreply.github.com> | 2023-08-26 08:24:35 +0100 |
|---|---|---|
| committer | Joe Carstairs <65492573+Sycamost@users.noreply.github.com> | 2023-08-26 08:24:35 +0100 |
| commit | 0128568e2221f1d0d5df9fe3a1ab6e5911c0655a (patch) | |
| tree | 17141b6a9910a8edea9bd02d293414f79dc0c9f0 /public/css/layout/grid.css | |
| parent | 4e4486f60ea2a09a91a875f20f276ad2693ddfaf (diff) | |
Adds xs breakpoint
Diffstat (limited to 'public/css/layout/grid.css')
| -rw-r--r-- | public/css/layout/grid.css | 54 |
1 files changed, 4 insertions, 50 deletions
diff --git a/public/css/layout/grid.css b/public/css/layout/grid.css index a4fb251..25cdd95 100644 --- a/public/css/layout/grid.css +++ b/public/css/layout/grid.css @@ -11,12 +11,14 @@ width: var(--grid-column-width); } +/* On screens narrower than 16rem, there is only one column. */ + .grid-span-2 { - width: calc(var(--grid-column-width) * 2 + var(--grid-gutter-width)); + width: var(--grid-column-width); } .grid-span-3 { - width: calc(var(--grid-column-width) * 3 + var(--grid-gutter-width) * 2); + width: var(--grid-column-width); } .width-prose { @@ -26,51 +28,3 @@ .grid-span-full { width: var(--grid-total-width); } - -.grid-span-1.grid-end { - margin-inline-start: calc( - var(--grid-column-width) * (var(--grid-column-count) - 1) + - var(--grid-gutter-width) * (var(--grid-column-count) - 1) - ); - margin-inline-end: 0; -} - -.grid-span-2.grid-end { - margin-inline-start: calc( - var(--grid-column-width) * (var(--grid-column-count) - 2) + - var(--grid-gutter-width) * (var(--grid-column-count) - 2) - ); - margin-inline-end: 0; -} - -.grid-span-3.grid-end { - margin-inline-start: calc( - var(--grid-column-width) * (var(--grid-column-count) - 3) + - var(--grid-gutter-width) * (var(--grid-column-count) - 3) - ); - margin-inline-end: 0; -} - -.grid-span-1.grid-prose-end { - margin-inline-start: calc( - var(--grid-column-width) * (var(--grid-prose-column-count) - 1) + - var(--grid-gutter-width) * (var(--grid-prose-column-count) - 1) - ); - margin-inline-end: 0; -} - -.grid-span-2.grid-prose-end { - margin-inline-start: calc( - var(--grid-column-width) * (var(--grid-prose-column-count) - 2) + - var(--grid-gutter-width) * (var(--grid-prose-column-count) - 2) - ); - margin-inline-end: 0; -} - -.grid-span-3.grid-prose-end { - margin-inline-start: calc( - var(--grid-column-width) * (var(--grid-prose-column-count) - 3) + - var(--grid-gutter-width) * (var(--grid-prose-column-count) - 3) - ); - margin-inline-end: 0; -}
\ No newline at end of file |