diff options
| -rw-r--r-- | assets/style.css | 57 | ||||
| -rw-r--r-- | layouts/_default/baseof.html | 16 |
2 files changed, 54 insertions, 19 deletions
diff --git a/assets/style.css b/assets/style.css index cc7b1d6..e40056e 100644 --- a/assets/style.css +++ b/assets/style.css @@ -1,28 +1,25 @@ html { font-family: system-ui, sans-serif; --bg: hsl(32, 98%, 92%); - --fg: #1E1F21; - --link-color: #24527d; - --text-decoration-color: #CCC; + --fg: hsl(220, 4.76%, 12.35%); + --link-fg: hsl(208.99, 55.28%, 31.57%); + --text-decoration-fg: hsl(0, 0%, 80%); + --sidebar-bg: hsl(32, 80%, 88.5%); color: var(--fg); background-color: var(--bg); } @media(prefers-color-scheme:dark) { html { - --bg: #1E1F21; - --fg: #EEEFF1; - --link-color: #5ca7ed; - --text-decoration-color: #474747; + --bg: hsl(220, 4.76%, 12.35%); + --fg: hsl(220, 9.68%, 93.92%); + --link-fg: hsl(208.97, 80.11%, 64.51%); + --text-decoration-fg: hsl(0, 0%, 46.84%); + --sidebar-bg: hsl(220, 4.76%, 16.35%); } } body { - margin: 0 auto; - padding: 1rem; -} - -body:not(.wide) { - max-width: 50rem; + margin: 0rem; } h1 { @@ -30,6 +27,36 @@ h1 { } a:link, a:visited { - text-decoration-color: var(--text-decoration-color); - color: var(--link-color); + text-decoration-color: var(--text-decoration-fg); + color: var(--link-fg); +} + +aside#sidebar { + position: fixed; + width: min(33%, 200px); + height: 100%; + background-color: var(--sidebar-bg); + overflow-y: auto; +} + +div#main-and-footer { + margin-left: min(33%, 200px); + padding: 10px; +} + +main { + margin: 0 auto; +} + +main:not(.wide) { + max-width: 50rem; +} + +@media(max-width: 470px) { + aside#sidebar { + display: none; + } + div#main-and-footer { + margin-left: 0px; + } } diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 359e544..33f8136 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -8,10 +8,18 @@ <link rel="stylesheet" href="{{ $style.RelPermalink }}" /> </head> <body> - {{ block "main" . }} - {{ end }} - {{ block "footer" . }} - {{ end }} + <aside id="sidebar"> + </aside> + <div id="main-and-footer"> + <main> + {{ block "main" . }} + {{ end }} + </main> + <footer> + {{ block "footer" . }} + {{ end }} + </footer> + </div> </body> </html> |