diff options
Diffstat (limited to 'static/styles/risotto/layout.css')
| -rw-r--r-- | static/styles/risotto/layout.css | 58 |
1 files changed, 29 insertions, 29 deletions
diff --git a/static/styles/risotto/layout.css b/static/styles/risotto/layout.css index d7dbe23f..f26b4cc9 100644 --- a/static/styles/risotto/layout.css +++ b/static/styles/risotto/layout.css @@ -1,57 +1,57 @@ /* 1rem = 16px by default */ .page { - max-width: 64rem; - margin: 1rem auto; - display: grid; - grid-template-areas: - 'header' - 'body' - 'aside' - 'footer'; - grid-template-columns: minmax(0, 1fr); /* https://css-tricks.com/preventing-a-grid-blowout/ */ - grid-row-gap: 2rem; + max-width: 64rem; + margin: 1rem auto; + display: grid; + grid-template-areas: + 'header' + 'body' + 'aside' + 'footer'; + grid-template-columns: minmax(0, 1fr); /* https://css-tricks.com/preventing-a-grid-blowout/ */ + grid-row-gap: 2rem; } @media (min-width: 45rem) { - .page { - grid-template-areas: - 'header header' - 'body aside' - 'footer footer'; - grid-template-columns: minmax(0, 1fr) 15rem; - grid-column-gap: 2rem; - } + .page { + grid-template-areas: + 'header header' + 'body aside' + 'footer footer'; + grid-template-columns: minmax(0, 1fr) 15rem; + grid-column-gap: 2rem; + } } /* Header */ .page__header { - grid-area: header; - display: flex; + grid-area: header; + display: flex; } .page__logo { - flex-shrink: 0; + flex-shrink: 0; } .page__nav { - flex-grow: 1; + flex-grow: 1; } /* Body + aside */ .page__body { - grid-area: body; - background-color: var(--off-bg); - box-shadow: 0 0 0 1rem var(--off-bg); - overflow-wrap: break-word; + grid-area: body; + background-color: var(--off-bg); + box-shadow: 0 0 0 1rem var(--off-bg); + overflow-wrap: break-word; } .page__aside { - grid-area: aside; - color: var(--off-fg); + grid-area: aside; + color: var(--off-fg); } /* Footer */ .page__footer { - grid-area: footer; + grid-area: footer; } |