diff options
Diffstat (limited to 'layouts/_default')
| -rw-r--r-- | layouts/_default/baseof.html | 132 |
1 files changed, 116 insertions, 16 deletions
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index db3d2be0..c31074e9 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -36,33 +36,133 @@ <script defer data-api="/api/event" data-domain="{{ .Site.Params.PlausibleDomain}}" src="/js/script.js"></script> </head> <body> {{ block "header" . }} - <nav id="topnav"> - <div> - <a href="/">Home</a> - <a href="/about">About</a> - <a href="https://git.sapka.me">Git</a> - <a href="/index.xml">RSS</a> - </div> - </nav> - <header> - <div id="logo-space"> - <a href="/"> + <style> + + ::root { + color-scheme: light dark; /* both supported */ + --menu-bg: #fff; + } + +.the-site { + display: flex; +flex-wrap: wrap; + margin-left: auto; + margin-right: auto; +max-width: 700px; +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: 710px) { + .left-column, .right-column { + flex: 100%; + } +} + +pre code { + width: 93%; + padding-bottom: 5px; + white-space: pre-wrap; + border-width: 1px; + border-style: solid; + padding: 11px; + background-color: #f0f0f0; + word-break: keep-all; +} +</style> + <section class="the-site"> + <aside class="left-column"> + <a href="/"> {{ $image := resources.Get "logo.png" }} {{ $image := $image.Resize "x160 webpn" }} <div id="logo"> <img alt="logo" src="{{ $image.Permalink }}" width={{$image.Width}} height={{$image.Height}}/> </div> <h1>{{ .Site.Title }}</h1> - </a> - </div> - </header> - {{ end }} - <main> + <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> + </nav> + + </aside> + <section class="right-column"> {{ block "main" . }} {{ end }} {{ block "pagination" . }} + {{ end }} + </section> + </section> + + + + + + + <header> + <div id="logo-space"> + + </a> + </div> + </header> {{ end }} + <main> + {{ block "FOOTER" . }} </main> |