diff options
Diffstat (limited to 'archive/layouts/24-blog/baseof.html')
| -rw-r--r-- | archive/layouts/24-blog/baseof.html | 371 |
1 files changed, 371 insertions, 0 deletions
diff --git a/archive/layouts/24-blog/baseof.html b/archive/layouts/24-blog/baseof.html new file mode 100644 index 0000000..7f504c4 --- /dev/null +++ b/archive/layouts/24-blog/baseof.html @@ -0,0 +1,371 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta charset="utf-8"> + <title> {{ .Page.Title }} </title> + + <meta name="viewport" content="width=device-width, initial-scale=1"> + + <meta property="fediverse:creator" content="@mms@emacs.ch"> + <link rel="me" href="https://emacs.ch/@mms"> + + {{- $header_rect := resources.Get "blog/logo/right.png" }} + {{- $header_rect_180 := $header_rect.Resize "180x webp q90"}} + <link rel="apple-touch-icon" sizes="180x180" href="{{ $header_rect_180.Permalink }}"> + + {{- $header_rect_32 := $header_rect.Resize "32x webp q90"}} + <link rel="icon" type="image/png" sizes="32x32" href="{{ $header_rect_32.Permalink }}"> + + {{- $header_rect_16 := $header_rect.Resize "16x webp q90"}} + <link rel="icon" type="image/png" sizes="16x16" href="{{ $header_rect_16.Permalink }}"> + + <meta name="description" content="{{ .Params.Abstract | default .Site.Params.DefaultDescription}}"> + + <meta property="og:title" content="{{ .Page.Title }}"> + <meta property="og:type" content="website"> + <meta property="og:url" content="{{ .Permalink }}"> + + {{- $imageUrl := default "blog/logo/right.png" .Params.image }} + {{- $image := resources.Get $imageUrl }} + <meta property="og:image" content="{{ $image.Permalink }}"> + + + <meta property="og:description" content="{{ .Params.Abstract | default .Site.Params.DefaultDescription}}"> + + <link rel="canonical" href="{{ .Permalink }}"> + <link rel='alternate' type='application/rss+xml' title="Feed with all changes" href='/index.xml'> + <link rel='alternate' type='application/rss+xml' title="Feed with Unix History changes" href='/unix-history/index.xml'> + <meta name="robots" content="index, follow"> + + <link rel="webmention" href="https://webmention.io/d-s.sh/webmention"> + <link rel="pingback" href="https://webmention.io/d-s.sh/xmlrpc"> + + <style> + :root { + --bg-color: #738276; + --panel-color: #DBD7D2; + --panel-meta-color: #C2BFBC; + --text-color: #000; + --cool-border: 4px groove #000; + + --hover-button-bg: #A8A4A0; + } + body { + width: 800px; + margin-left: auto; + margin-right: auto; + background-color: var(--bg-color); + background-image: linear-gradient(0deg, #738276 25%, #4a524b 25%, #4a524b 50%, #738276 50%, #738276 75%, #4a524b 75%, #4a524b 100%); + background-size: 8.00px 8.00px; + color: var(--text-color); + background-attachment: fixed; + max-width: 98%; + font-family: serif; + font-size: 1.0em; + } + a { + color: var(--text-color); + } + header { + width: 100%; + margin-top: 40px; + margin-bottom: 20px; + display: flex; + align-items: stretch; + flex-wrap: wrap; + } + + header div, header nav { + border: 4px groove #000; + display: inline-block; + margin: 0; + background-color: var(--panel-color); + } + + .logo { + width: 140px; + border-right: 0; + text-align: center; + } + + .name { + flex-grow: 1; + border-left: 0; + font-size: 2.5em; + font-weight: bolder; + + display: flex; + justify-content: center; + align-items: center; + } + @media only screen and (max-width: 460px) { + .logo { + display: none; + } + .name { + border-left: var(--cool-border); + } + } + + header nav { + width: 150px; + border: 0; + display: flex; + flex-direction: column; + } + + header nav a { + display: block; + height: 22px; + border: var(--cool-border); + text-align: center; + padding-right: 10px; + flex-grow: 1; + background-color: var(--panel-color); + border-left: 0; + border-bottom: 0; + padding: 5px; + + } + header nav a:hover { + border-style: inset; + background-color: var(--hover-button-bg); + } + header nav a:last-of-type { + border-bottom: var(--cool-border); + } + + @media only screen and (max-width: 700px) { + header { + height: auto; + } + + header nav { + flex-basis: 100%; + border-top: 0; + border-bottom: 0; + + flex-direction: row; + } + header nav a { + border: var(--cool-border); + border-top: 0; + border-right: 0; + } + + header nav a:last-of-type { + border-right: var(--cool-border); + } + } + + article { + border: var(--cool-border); + margin-bottom: 20px; + padding: 20px; + background-color: var(--panel-color);; + padding-bottom: 0; + padding-top: 0; + text-align: justify; + display: flow-root; + } + aside.post-meta { + margin-left: -20px; + margin-right: -20px; + border-top: var(--cool-border); + padding-left: 20px; + padding-right: 20px; + padding-top: 5px; + padding-bottom: 5px; + background-color: var(--panel-meta-color); + } + + h2 { + margin-bottom: 4px; + } + + article.link { + padding: 20px; + display: flex; + justify-content: center; + } + article.link .img { + padding-right: 20px; + flex-grow: 0; + height: 32px; + width: 32px; + } + article.link .text { + flex-grow: 1; + } + + article figure { + text-align: center; + margin: 0; + max-width: 100%; + font-size: 0.8em; + } + + img { + max-width: 100%; + height: auto; + } + img.float-right { + float: right; + display: inline; + margin-left: 10px; + } + img.center { + max-width: 100%; + height: auto; + } + .pull-left { + float: left; + margin: 10px; + } + .pull-right { + float: right; + margin: 10px; + } + .blog-pages-list { + border: var(--cool-border); + margin-bottom: 20px; + padding: 20px; + background-color: var(--panel-color);; + } + + .other-sites { + border: var(--cool-border); + background-color: var(--panel-color); + display: flex; + margin-bottom: 20px; + } + + .other-sites div, .other-sites a { + flex-grow: 1; + padding: 5px; + } + .other-sites a { + border-left: var(--cool-border); + text-align: center; + } + header nav a:last-of-type { + border-bottom: var(--cool-border); + } + + @media only screen and (max-width: 700px) { + header { + height: auto; + } + + header nav { + flex-basis: 100%; + border-top: 0; + border-bottom: 0; + + flex-direction: row; + } + header nav a { + border: var(--cool-border); + border-top: 0; + border-right: 0; + } + + header nav a:last-of-type { + border-right: var(--cool-border); + } + } + + article { + border: var(--cool-border); + margin-bottom: 20px; + padding: 20px; + background-color: var(--panel-color);; + padding-bottom: 0; + padding-top: 0; + line-height: 1.5em; + } + + img { + max-width: 100%; + height: auto; + } + + .blog-pages-list { + border: var(--cool-border); + margin-bottom: 20px; + padding: 20px; + background-color: var(--panel-color); + } + + .copyright { + border: var(--cool-border); + background-color: var(--panel-color); + padding: 10px; + margin-bottom: 20px; + } + .buttons { + text-align: center; + padding: 10px; + border: var(--cool-border); + background-color: var(--panel-color); + margin-bottom: 20px; + } + .other-sites { + border: var(--cool-border); + background-color: var(--panel-color); + display: flex; + margin-bottom: 20px; + + } + .other-sites div, .other-sites a { + flex-grow: 1; + padding: 6px; + } + .other-sites a:hover { + background-color: var(--hover-button-bg); + } + </style> + </head> + +<body> + + <header> + <div class="logo"> + {{ partial "blog/face-game.html" . }} + </div><div class="name"> + <a href="/blog">Michał's weblog</a> + </div><nav> + <a href="/">Homepage</a> + <a href="/blog/index.xml">RSS</a> + <a href="/blog/more">More</a> + </nav> + </header> + + <div class="other-sites"> + <div class="other">My other sites:</div> + <a href="/brain-rot">Brain Rots</a> + <a href="/cool-emacs">Cool Emacs</a> + <a href="/unix-history">History of Unix</a> + </div> + + {{ block "main" . }} + {{ end }} + + <footer> + <div class="copyright"> + This page is licensed under a <a href="https://creativecommons.org/licenses/by-nd/4.0/">CC BY-ND 4.0 Deed</a> license. + If you found this site interesting, you can <a id="moneyLink" href="https://ko-fi.com/mmspl">buy me a coffee</a>. + You can contact me via <a href="/blog/contact/">email</a> or using <a href="https://emacs.ch/@mms">mastodon</a>. + </div> + + <div class="buttons"> + {{ partial "buttons/valid_html" . }} + {{ partial "button-31" (dict "file" "rss.gif" "alt" "RSS Feed" "href" "https://michal.sapka.me/blog/index.xml") }} + {{ partial "buttons/emacs" . }} + {{ partial "buttons/openbsd" . }} + <footer> + + </div> +</body> + |