diff options
| author | mms <michal@sapka.me> | 2024-05-25 22:10:55 +0200 |
|---|---|---|
| committer | mms <michal@sapka.me> | 2024-05-25 22:10:55 +0200 |
| commit | c1a74cc9d62515d0bc1c09522de223c32f2cfd18 (patch) | |
| tree | db74591ef4a66988d9c20fd96bf8228556d3278c /layouts/brain-rot/baseof.html | |
| parent | 2d27ad1d9b96ace302ddef93e48d7b78863efa43 (diff) | |
feat: tidy up BR menu
Diffstat (limited to 'layouts/brain-rot/baseof.html')
| -rw-r--r-- | layouts/brain-rot/baseof.html | 97 |
1 files changed, 75 insertions, 22 deletions
diff --git a/layouts/brain-rot/baseof.html b/layouts/brain-rot/baseof.html index 0810ace..b0d366d 100644 --- a/layouts/brain-rot/baseof.html +++ b/layouts/brain-rot/baseof.html @@ -2,13 +2,25 @@ <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> - {{ partial "header/meta" . }} + {{ partial "header/meta" . }} + {{- $bg := resources.Get "brain-rot/bg-stars.jpg" }} + <style> :root { --content-bg: #fff; --highlight-color: #978b27; --text-color: #000; - } + --cool-border: conic-gradient(from -135deg at right,#000,#000 1deg 89deg,#0000 90deg) 50%/100% 35px; + + --info-bg: #f2f2f2; + } + @media (prefers-color-scheme: dark) { + :root { + --content-bg: #000; + --text-color: #fff; + --info-bg: #484343; + } + } html { height:100%; font-family: helvetica; @@ -32,14 +44,13 @@ min-height: 100%; max-width: 1020px; } - + .decoration-left { background-color: #000; width: 200px; min-height: 100%; flex-shrink: 0; - mask: conic-gradient(from -135deg at right,#0000,#000 1deg 89deg,#0000 90deg) 50%/100% 35px; - {{- $bg := resources.Get "brain-rot/bg-stars.jpg" }} + mask: var(--cool-border); background-image: url("{{ $bg.Permalink }}"); } @@ -49,17 +60,9 @@ padding-left: 40px; padding-top: 70px; padding-bottom: 40px; + overflow-x: hidden; } - @media only screen and (max-width: 600px) { - .decoration-left { - width: 30px; - } - - .main { - padding-left: 20px; - } - } .breadcrumbs, .lastup { @@ -114,27 +117,77 @@ .rating-box { float: right; - margin: 10px; + padding: 10px; + text-align: center; + font-size: 0.8em; + line-height: 1em; + } + + footer { + margin-top: 20px; text-align: center; + padding-bottom: 20px; } + + .recent-updates { + margin-top: 20px; + margin-bottom: 20px; + background-color: var(--info-bg); + padding: 10px; + border-radius: 10px; + width: 500px; + margin-left: auto; + margin-right: auto; + border-color: #000; + border-style: solid; + border-width: 1px; + max-width: 90%; + } + + .recent-updates h2 { + font-size: inherit; + margin: 0; + padding: 0; + } + + @media only screen and (max-width: 600px) { + .decoration-left { + width: 30px; + } + + .main { + padding-left: 20px; + } + + .recent-updates { + margin-left: -10px; + } + } + </style> <body> <div class="container"> <div class="decoration-left"></div> <div class="main"> - <nav class="home"> - <a href="/brain-rot/">Michal's Brain Rot:</a> - </nav> - <h1> {{ .Page.Title }}</h1> + + <header> + <nav class="home"> + <a href="/brain-rot/">Michal's Brain Rot:</a> + </nav> + <h1> {{ .Page.Title }}</h1> + </header> - <nav class="breadcrumbs"> - </nav> - <hr> + <main> {{ block "main" . }} {{ end }} </main> + + <footer> + {{ partial "button-31" (dict "file" "html5.gif" "alt" "Valid HTML" "href" "https://validator.w3.org/check?uri=referer") }} + {{ partial "button-31" (dict "file" "rss.gif" "alt" "RSS Feed" "href" "https://michal.sapka.me/brain-rot/index.xml") }} + </footer> </div> </div> </body> |