diff options
| -rw-r--r-- | config.toml | 2 | ||||
| -rw-r--r-- | layouts/_default/baseof.html | 43 | ||||
| -rw-r--r-- | static/style.css | 111 |
3 files changed, 50 insertions, 106 deletions
diff --git a/config.toml b/config.toml index 85dde3d..123ce2c 100644 --- a/config.toml +++ b/config.toml @@ -1,6 +1,6 @@ baseURL = 'https://michal.sapka.me' languageCode = 'en-us' -title = "Michał Sapka's webpage" +title = "Michał Sapka's website" tagline = "Hello do Michał's weblog!" diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 95c447d..aa899a6 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -41,42 +41,33 @@ <link rel="webmention" href="https://webmention.io/d-s.sh/webmention"> <link rel="pingback" href="https://webmention.io/d-s.sh/xmlrpc"> </head> - <body> - <div class="the-site"> - <aside class="left-column"> - <a href="/"> - {{ $logo := resources.Get "logos/right.png" }} - {{ $logo1x := $logo.Resize "x160 webpn" }} - {{ $logo2x := $logo.Resize "x310 webpn" }} - <div class="logo"> - <img - alt="logo" - src="{{ $logo.Permalink }}" - srcset=" - {{ $logo1x.RelPermalink }} 1x, - {{ $logo2x.RelPermalink }} 2x - " - width="{{$logo.Width}}" - height="{{$logo.Height}}"> - </div> - </a> + <body> + + <header> + <a href="/"> <h1>{{ .Site.Title }}</h1> - <nav id="mainnav"> + </a> + + <nav id="top-nav"> + <nav id="main-nav"> <a href="/">Home</a> <a href="/about">About</a> <a href="/links">Links</a> - <a href="/index.xml">RSS</a> - <BR> + </nav> + <nav id="categories-nav"> <a href="/category/engineering">Engineering</a> <a href="/category/emacs">Emacs</a> <a href="/category/bsd">BSD</a> <a href="/category/computer-history">Computer History</a> <a href="/category/star-trek">Star Trek</a> - </nav> - + <nav> + </nav> + + + </header> - </aside> + <main class="right-column"> {{ block "main" . }} {{ end }} @@ -84,7 +75,7 @@ {{ block "pagination" . }} {{ end }} </main> - </div> + {{ block "FOOTER" . }} <footer> diff --git a/static/style.css b/static/style.css index f171743..fde2bd9 100644 --- a/static/style.css +++ b/static/style.css @@ -1,4 +1,5 @@ - { + +:root { color-scheme: light dark; --site-bg: #fff; @@ -16,6 +17,13 @@ --blockquote-color: ##666666; --pre-bg: #f0f0f0; + + --font-size: 1.2em; + --h1-size: 1.2em; + --header-font-size: 0.9em; + + --site-font: monospace; + --header-font: arial; } @media (prefers-color-scheme: dark) { @@ -34,23 +42,20 @@ } /* ----------- Entire site */ body { - font-family: 'monospace'; + font-family: var(--site-font); padding: 0; - margin: 0; - font-size: 1.2cem; + font-size: var(--font-size); background-color: var(--site-bg); color: var(--text-color); -} -.the-site { - display: flex; - flex-wrap: wrap; - margin-left: auto; - margin-right: auto; max-width: 800px; - margin-top: 20px; + margin: auto; +} +header { + width: 100%; + text-align: center; } main, footer { - width: 600px; + width: 100%; max-width: 95%; margin-left: auto; margin-right: auto; @@ -68,84 +73,32 @@ a { a:hover { text-decoration: underline; } -/* ----------- Left column */ -.left-column { - flex: 200px 0; - text-align: center; - flex-shrink: 0; - margin-bottom: 20px; -} -@media (max-width: 100000px) { - #topnav { - width: 100%; - } - .left-column { - flex: 100%; - } +/* ----------- Site header */ +header { + font-family: var(--header-font); + font-size: var(--header-font-size); } - -/* ----------- Site title */ h1 { - font-size: 2.5em; + font-size: var(--h1-size); margin: 0; -} -@media (max-width: 71000000px) { - h1 { - margin-bottom: 10px; - } + padding-bottom: 5px; + padding-top: 10px; } -/* ----------- Logo */ -logo{ - height: auto; - width: auto; -} -@media (max-width: 7100000000px) { - .logo img { - height: 40px; - } +#top-nav #main-nav { + padding-bottom: 5px; } -p -/* ----------- Main navigation */ -.left-column nav { - margin-top: 30px; - flex-shrink: 0; +#top-nav { } -.left-column nav a { - display: block; - margin-bottom: 5px; +#top-nav a { + margin-right: 5px; } -@media (max-width: 71000000000px) { - .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; - } + -} -/* ----------- Right column */ -.right-column { - flex: 50%; -} +/* ---------- Main */ main { - padding: 0px; -} - -@media (max-width: 710000000000px) { - .right-column { - flex: 100%; - } + margin-top: 30px; } /* ----------- Taxmomy list */ |