diff options
| author | Michał M. Sapka <michal@sapka.me> | 2023-03-02 14:13:10 +0100 |
|---|---|---|
| committer | Michał M. Sapka <michal@sapka.me> | 2023-03-02 14:13:10 +0100 |
| commit | 15608f4e4bc4f62d121f40b48c62671ed88ff65b (patch) | |
| tree | b748bf90d880fb51a8fa55ec019689b307950041 /layouts | |
| parent | 2d832a197a8685fc16a81cf4800e71a2b9124d0a (diff) | |
fixes
Diffstat (limited to 'layouts')
| -rw-r--r-- | layouts/_default/baseof.html | 55 |
1 files changed, 47 insertions, 8 deletions
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 0e36fbe..c31074e 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -37,8 +37,13 @@ </head> <body> {{ block "header" . }} <style> + + ::root { + color-scheme: light dark; /* both supported */ + --menu-bg: #fff; + } -.flex-container { +.the-site { display: flex; flex-wrap: wrap; margin-left: auto; @@ -50,29 +55,63 @@ margin-top: 20px; .left-column { flex: 200px 0; text-align: center; +flex-shrink: 0; } .left-column nav { margin-top: 30px; + flex-shrink: 0; } .left-column nav a { display: block; margin-bottom: 5px; } - +#topnav { + background-color: var(--menu-bg); +} +@media (max-width: 710px) { + .left-column nav a { + display: inline-block; + margin-right: 10px; + } + h1 { + font-size: 1.5em; + display: inline-block; + } + .the-site { + margin-top: 5px; + } + .left-column nav { + margin-top: 0; + margin-bottom: 10px; + } +p #logo { + height: 20px; + display: inline-block; + } + #logo img { + height: 20px; + } + #topnav { + width: 100%; + + } +} +h1 { + text-transform: none; +} .right-column { flex: 50%; } /* Responsive layout - makes a one column layout instead of a two-column layout */ -@media (max-width: 800px) { - .flex-item-right, .flex-item-left { +@media (max-width: 710px) { + .left-column, .right-column { flex: 100%; } } -ź pre code { width: 93%; padding-bottom: 5px; @@ -84,7 +123,7 @@ pre code { word-break: keep-all; } </style> - <section class="flex-container"> + <section class="the-site"> <aside class="left-column"> <a href="/"> {{ $image := resources.Get "logo.png" }} @@ -93,8 +132,8 @@ pre code { <img alt="logo" src="{{ $image.Permalink }}" width={{$image.Width}} height={{$image.Height}}/> </div> <h1>{{ .Site.Title }}</h1> - <nav> - <a href="/">Home</a> + <nav id="topnav"> + <a href="/">Home</a> <a href="/about">About</a> <a href="https://git.sapka.me">Git</a> <a href="/index.xml">RSS</a> |