diff options
Diffstat (limited to 'styles/layout.css')
-rw-r--r-- | styles/layout.css | 32 |
1 files changed, 7 insertions, 25 deletions
diff --git a/styles/layout.css b/styles/layout.css index f2b2dba..4a64adb 100644 --- a/styles/layout.css +++ b/styles/layout.css @@ -1,6 +1,7 @@ :root { --header-height: 400px; --header-overlap: 150px; + --min-main-overhang: 100px; --header-bar-height: 48px; --main-width: 600px; --footer-spacing: 8px; @@ -95,7 +96,7 @@ header .headerBackground { top: 0; left: 0; right: 0; - height: 400px; + height: var(--header-height); z-index: -1; user-select: none; } @@ -114,7 +115,7 @@ header .headerBackground::after { background: rgba(0,0,0,.35); } -header:not(.homepage) + h1 { +header:not(.homepage) ~ h1.pageTitle { width: var(--main-width); margin: 0 auto; padding: var(--text-padding); @@ -123,40 +124,21 @@ header:not(.homepage) + h1 { margin-top: -80px; } -main { - font-family: Arial, sans-serif; -} - main.mainColumn { width: var(--main-width); box-sizing: border-box; padding: var(--text-padding); margin: 0 auto; background: var(--main-background); - min-height: calc(var(--header-overlap) + 100px); + min-height: calc(var(--header-overlap) + var(--min-main-overhang)); box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12); } -header.homepage + main.mainColumn { - min-height: calc(var(--header-overlap) + 100px - var(--header-bar-height)); -} - -main.mainColumn aside.infobar { - margin: calc(-1 * var(--text-padding)); - margin-bottom: var(--text-padding); - padding: var(--text-padding); - background: var(--main-background); - height: var(--header-bar-height); - width: var(--main-width); - box-sizing: border-box; - display: flex; - flex-direction: row; - align-items: center; - border-bottom: solid 1px var(--text-dimmed); +header.homepage ~ .mainColumn { + min-height: calc(var(--header-overlap) + var(--min-main-overhang) - var(--header-bar-height)); } -main.mainColumn > p:first-child, -main.mainColumn .infobar + p { +main.mainColumn > p:first-child { margin-top: 0; } |