diff options
| author | Michał M. Sapka <michal@sapka.me> | 2023-03-01 20:41:55 +0100 |
|---|---|---|
| committer | Michał M. Sapka <michal@sapka.me> | 2023-03-01 20:41:55 +0100 |
| commit | 2d832a197a8685fc16a81cf4800e71a2b9124d0a (patch) | |
| tree | de56f7c7ca2158d923884f60791ef283c879f7c8 | |
| parent | 92d765aba0354a08f0a644cd9f48bafd92f0f516 (diff) | |
2 column test
| -rw-r--r-- | layouts/_default/baseof.html | 93 | ||||
| -rw-r--r-- | layouts/shortcodes/img-center.html | 4 | ||||
| -rw-r--r-- | static/style.css | 1 |
3 files changed, 79 insertions, 19 deletions
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index db3d2be..0e36fbe 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -36,33 +36,94 @@ <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> + +.flex-container { + 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; +} + +.left-column nav { + margin-top: 30px; +} + +.left-column nav a { + display: block; + margin-bottom: 5px; +} + +.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 { + 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="flex-container"> + <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> + <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> diff --git a/layouts/shortcodes/img-center.html b/layouts/shortcodes/img-center.html index fca4395..7121414 100644 --- a/layouts/shortcodes/img-center.html +++ b/layouts/shortcodes/img-center.html @@ -3,8 +3,8 @@ {{- $img := resources.Get $path }} {{- $caption := .Get 1 }} {{- $source := .Get 2 }} -{{- $img1x := $img.Resize "500x webp q90"}} -{{- $img2x := $img.Resize "1000x webp q90"}} +{{- $img1x := $img.Resize "450x webp q90"}} +{{- $img2x := $img.Resize "900x webp q90"}} <center> <figure> <img diff --git a/static/style.css b/static/style.css index c7a664e..d12f2b8 100644 --- a/static/style.css +++ b/static/style.css @@ -179,7 +179,6 @@ blockquote { article figure { text-align: left; margin: 0; - width: 500px; max-width: 100%; font-size: 0.8em; } |