author | Olivier Brunel
<jjk@jjacky.com> 2023-01-02 20:05:48 UTC |
committer | Olivier Brunel
<jjk@jjacky.com> 2023-01-04 15:10:17 UTC |
parent | ce81c6207d12ccde1c0a52dd207772cbd6972966 |
dark.css | +1 | -1 |
light.css | +1 | -1 |
struct.css | +13 | -10 |
diff --git a/dark.css b/dark.css index caf4887..5877e65 100644 --- a/dark.css +++ b/dark.css @@ -2,7 +2,7 @@ :root { color-scheme: dark; } - main header { + main header section { background: #17679B; } main header section h1 { diff --git a/light.css b/light.css index bfd9860..ce73aba 100644 --- a/light.css +++ b/light.css @@ -1,7 +1,7 @@ :root { color-scheme: light; } -main header { +main header section { background: #2980B9; } main header section h1 { diff --git a/struct.css b/struct.css index eb738e4..4687441 100644 --- a/struct.css +++ b/struct.css @@ -18,18 +18,23 @@ time, mark, audio, video { html, body { height: 100%; } -main header { - position: fixed; - width: 300px; +main { + display: grid; + grid-template-areas: "toc page"; + grid-template-columns: 300px 1fr; height: 100%; - padding-top: 88px; +} +main header { + grid-area: toc; + overflow: scroll; } main header section { + position: sticky; + top: 0; + z-index: 1; height: 88px; - margin-top: -88px; } main header section h1 { - margin-top: 23px; text-align: center; font-size: 1.42em; font-weight: 800; @@ -43,8 +48,7 @@ main header nav { position: relative; padding: 8px; padding-bottom: 42px; /* 23 (section h1 margin-top) + 19 */ - height: 100%; - min-height: 100%; + min-height: calc(100% - 88px); overflow: hidden scroll; overscroll-behavior-y: contain; } @@ -84,8 +88,8 @@ main header nav > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul padding-left: 72px; } main > section { + grid-area: page; position: relative; - margin-left: 300px; padding: 23px 42px 0 42px; min-height: 100%; overflow: hidden scroll; @@ -153,7 +157,6 @@ main section h1 { } main header section h1 { text-transform: inherit; - padding-top: inherit; padding-bottom: inherit; } main section h2 {