diff options
| -rw-r--r-- | assets/blog/logo/front.png | bin | 0 -> 3928 bytes | |||
| -rw-r--r-- | layouts/blog/baseof.html | 332 | ||||
| -rw-r--r-- | layouts/blog/single.html | 16 |
3 files changed, 348 insertions, 0 deletions
diff --git a/assets/blog/logo/front.png b/assets/blog/logo/front.png Binary files differnew file mode 100644 index 0000000..cacbb62 --- /dev/null +++ b/assets/blog/logo/front.png diff --git a/layouts/blog/baseof.html b/layouts/blog/baseof.html new file mode 100644 index 0000000..0689e3d --- /dev/null +++ b/layouts/blog/baseof.html @@ -0,0 +1,332 @@ +<!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"> + + {{- $header_rect := resources.Get "unix-history/header-rect.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 }}"> + <meta property="og:image" content="{{ $header_rect.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="me" href="https://emacs.ch/@mms"> + + <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; + --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: helvetica; + font-size: 1em; + } + 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; + } + + 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; + } + .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); + } + + footer.copyright { + border: var(--cool-border); + background-color: var(--panel-color); + display: flex; + padding: 10px; + margin-bottom: 20px; + } + footer.copyright aside { + margin: 0!important; + + } + footer.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"> + {{- $logo1x := resources.Get "blog/logo/front.png" }} + <a href="/blog"> + <img + style=" + width: auto; + height: 90px;" + src="{{ $logo1x.Permalink }}" + width="{{ $logo1x.Width }}" + height="{{ $logo1x.Height }}" + loading="lazy"> + </a> + + </div><div class="name"> + <a href="/blog">Michał's weblog</a> + </div><nav> + <a href="/">Homepage</a> + <a href="/about" target="_blank">About</a> + <a href="/blog/index.xml">Rss</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 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> +</body> diff --git a/layouts/blog/single.html b/layouts/blog/single.html new file mode 100644 index 0000000..4a563ab --- /dev/null +++ b/layouts/blog/single.html @@ -0,0 +1,16 @@ +{{ define "main" }} + +<article> + <h2>{{ .Title}}</h2> + <hr> + {{ .Page.Content }} +</article> + +{{- if .Params.primary_menu }} + {{ partial "single/bottom_nav.html" (dict "menuID" .Page.Params.primary_menu "page" .) }} +{{- end }} + +<footer class="copyright"> + {{ partial "single/dates.html" . }} +</footer> +{{- end }} |
