feat: more of new site

11 files changed, 1229 insertions, 59 deletions

diff --git a/config/_default/hugo.toml b/config/_default/hugo.toml
index ee3d778..d60b41f 100644
--- a/config/_default/hugo.toml
+++ b/config/_default/hugo.toml
@@ -3,7 +3,7 @@ languageCode = 'en-us'
 title = "Michał Sapka's website"
 tagline = "Hello do Michał's weblog!"
 
-theme = "sapka-2024"
+theme = "24-unification"
 
 
 [params]
diff --git a/config/_default/menus.en.toml b/config/_default/menus.en.toml
index 79fe8a5..41d1457 100644
--- a/config/_default/menus.en.toml
+++ b/config/_default/menus.en.toml
@@ -1,64 +1,102 @@
-[[main-nav]]
-  name = "blog"
-  pageRef = "/blog"
-  pre = "Read my"
-  weight = 10
-
-[[main-nav]]
-  name = "Links"
-  pageRef = "/links"
-  post = "to other sites"
-  weight = 20
+[[sections]]
+  name = "Blog"
+  section = "blog"
+  pageRef = "/1"
+  weight = 100
+  [[sections.params]]
+    submenu = "sections-blog"
   
-[[main-nav]]
-  name = "funny pictures"
-  url = "/funnies/c/"
-  pre = "Browse my collection of"
-  post = "(over 5000)"
-  weight = 30 
-
-[[main-nav]]
-  name = "code repository"
-  url = "/git/"
-  pre = "Source"
-  weight = 50
-
-[[main-nav]]
-  name = "Articles"
-  pageRef = "/articles"          
-  weight = 40
-  
-[[main-nav]]
-  name = "Me"
-  pageRef = "/"
-  weight = 60
-  [[main-nav.params]]
-     nonpage = "yes"          
-     inlineChildren = "yes"
-
-[[main-nav]]
-  pre = "Buy me a"
-  name = "Ko-fi"
-  url = "https://ko-fi.com/mmspl"          
-  weight = 70
-  [[main-nav.params]]
-    forcedId = "ko-fi"
-
-[[main-nav]]
+# [[sections-blog]]
+#   name = "2024"
+#   pageRef = "/blog"
+
+# [[sections-blog]]
+#   name = "2023"
+#   pageRef = "/blog"
+
+# [[sections-blog]]
+#   name = "2022"
+#   pageRef = "/blog"
+
+
+
+# [[sections]]                    
+#   name = "Unix History"
+#   pageRef = "/unix-history"
+#   weight = 500
+#   [[sections.params]]
+#     submenu = "section-null"
+
+
+# [[sections]]                    
+#   name = "BSD"
+#   pageRef = "/emacs"
+#   weight = 600
+#   [[sections.params]]
+#     submenu = "section-null"
+
+# [[sections]]                    
+#   name = "Emacs"
+#   pageRef = "/emacs"
+#   weight = 700
+#   [[sections.params]]
+#     submenu = "section-null"
+
+
+# [[sections]]                    
+#   name = "Reviews"
+#   pageRef = "/brain-rot"
+#   weight = 800
+#   [[sections.params]]
+#     submenu = "section-null"
+
+
+# [[sections]]                    
+#   name = "Star Trek"
+#   pageRef = "/star-trek"
+#   weight = 900
+#   [[sections.params]]
+#     submenu = "section-null"
+
+
+[[sections]]                    
+  name = "More"
+  section="more"
+  pageRef = "/more"
+  weight = 2000
+  [[sections.params]]
+    submenu = "sections-extra"
+
+[[sections-extra]]
   name = "Uses"
-  pageRef = "/me/uses"
-  parent = "Me"
+  pageRef = "/more/uses"
 
-[[main-nav]]
+  
+[[sections-extra]]
   name = "Now"
-  pageRef = "/me/now"          
-  parent = "Me"
+  pageRef = "/unix-history"
+
+[[sections-extra]]
+  name = "Contact"
+  pageRef = "/unix-history"
 
 
-[[main-nav]]
-  name = "Contact me"
-  pageRef = "/me/contact"          
-  parent = "Me"
+# [[sections]]                    
+#   name = "Links"
+#   pageRef = "/index.xml"
+#   weight = 9000
+#   [[sections.params]]
+#     submenu = "sections-null"
+
+
+[[sections]]                    
+  name = "Subscribe"
+  pageRef = "/index.xml"
+  weight = 10000
+  [[sections.params]]
+    submenu = "sections-null"
+
+   
 
 
 
@@ -295,3 +333,6 @@
   identifier = "mtimeline"
     [[brain-rot-patlabor.params]]
     nonpage = "yes"
+
+      
+
diff --git a/content-org/blog-extra.org b/content-org/blog-extra.org
index 7189bcb..bae232c 100644
--- a/content-org/blog-extra.org
+++ b/content-org/blog-extra.org
@@ -5,7 +5,7 @@
 
 #+HUGO_BASE_DIR: ~/ghq/vcs.sapka.me/michal-sapka-me/
 #+HUGO_WEIGHT: auto
-#+HUGO_SECTION: blog
+#+HUGO_SECTION: more
 
 * Michał's Blog
 :PROPERTIES:
@@ -18,7 +18,7 @@
 
 * More pages
 :PROPERTIES:
-:EXPORT_HUGO_SECTION: blog/more
+:EXPORT_HUGO_SECTION: more
 :EXPORT_FILE_NAME: _index
 :EXPORT_HUGO_CUSTOM_FRONT_MATTER+: :abstract Other things on this blog
 :END:
diff --git a/layouts/blog/baseof.html b/layouts/retired-2024-blog/baseof.html
index a2e1caf..7f504c4 100644
--- a/layouts/blog/baseof.html
+++ b/layouts/retired-2024-blog/baseof.html
@@ -62,7 +62,7 @@
           background-attachment: fixed;
           max-width: 98%;
           font-family: serif;
-          font-size: 1.2em;
+          font-size: 1.0em;
       }
       a {
           color: var(--text-color);
diff --git a/layouts/blog/list.html b/layouts/retired-2024-blog/list.html
index 58cb880..58cb880 100644
--- a/layouts/blog/list.html
+++ b/layouts/retired-2024-blog/list.html
diff --git a/layouts/blog/single.html b/layouts/retired-2024-blog/single.html
index fdfcdd4..fdfcdd4 100644
--- a/layouts/blog/single.html
+++ b/layouts/retired-2024-blog/single.html
diff --git a/themes/24-unification/layouts/_default/baseof.html b/themes/24-unification/layouts/_default/baseof.html
new file mode 100644
index 0000000..c484d92
--- /dev/null
+++ b/themes/24-unification/layouts/_default/baseof.html
@@ -0,0 +1,297 @@
+<!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: 5px groove #000;
+
+          --bg-nav-section: #AAA6A1;
+          --bg-active-nav-section: #000;
+
+          --button-emph-bg: #807B75;
+
+          --breakpoint: 800px;
+      }
+      body {
+          width: 1000px;
+          margin-left: auto;
+          margin-right: auto;
+          margin-top: 20px;
+          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;
+          display: flex;
+          flex-direction: row;
+      }
+
+      @media only screen and (max-width: 800px) {
+          body {
+              flex-direction: column;
+          }
+      }
+
+      a {
+          color: var(--text-color);
+      }
+
+      /* Left navigation */
+
+      .nav {
+          flex-shrink: 0;
+          flex-grow: 0;
+          width: 200px;
+
+          .nav-box {
+              border: var(--cool-border);
+          }
+          .logo {
+              width: 100%;
+              background-color: var(--panel-color);
+              border-bottom: var(--cool-border);
+              text-align: center;
+              padding-bottom: 10px;
+              padding-top: 10px;
+              box-sizing: border-box;                   
+          }
+          .name {
+              background-color: var(--panel-color);
+              border-bottom: var(--cool-border);
+              text-align: center;
+              padding-bottom: 5px;
+              padding-top: 5px;
+              background-size: 30px;
+
+              a {
+                  border: 0!important;
+              }
+          }
+
+          ol {
+              list-style: none;
+              margin: 0;
+              padding: 0;
+          }
+          
+          li {
+              box-sizing: border-box;
+              background-color: var(--bg-nav-section);
+          }
+
+          ol.section {
+              li a{
+                  border-bottom: var(--cool-border);
+                  border-left: 0;
+                  border-right: 0;
+                  border-top: 0;
+                  display: block;
+                  width: 192px;
+                  padding: 5px;
+                  box-sizing: border-box;
+              }
+              > li:hover {
+                  background-color: var(--button-emph-bg);
+              }
+              li:last-child a{
+                  border-bottom: 0;
+              }  
+          }
+
+          ol.subsection {
+              background-color: var(--panel-color);
+              box-sizing: border-box;
+              padding-left: 20px;
+              border-bottom: var(--cool-border);
+              li {
+                  background-color: var(--panel-color);
+                  border: 0;
+                  padding: 3px;
+              }
+
+
+              li a {
+                  border: 0;
+              }
+          }
+
+          .webbuttons {
+              text-align: center;
+              margin-top: 20px;
+          }
+      }
+        
+       @media only screen and (max-width: 800px) {
+           .logo {
+               display: none;
+           }
+
+           .nav {
+               width: 100%;
+               padding-bottom: 20px;;
+               
+               .nav-box {
+                   width: 100%;
+                   border: 0;
+               }
+
+               ol.section {
+                   display: flex;
+                   flex-direction: row;
+                   flex-wrap: wrap;
+               }
+           
+               ol.subsection {
+                   display: none;
+               }
+
+               li {
+                   flex-shrink: 1;
+                   border: var(--cool-border)!important;
+                   padding: 5px;
+
+                   a {
+                       width: 100%!important;
+                       border: 0!important;
+                   }
+               }
+           }
+
+           .webbuttons {
+               display: none;
+           }
+           
+       }
+ 
+           main {
+               padding-left: 20px;
+               box-sizing: border-box;
+          
+               article {
+                   background-color: var(--panel-color);
+                   margin-bottom: 20px;
+                   border: var(--cool-border);
+                   padding: 20px;
+               }
+           
+               img {
+                   max-width: 100%;
+                   height: auto;
+               
+               }
+           }
+
+       @media only screen and (max-width: 800px) {
+           main {
+               padding: 0;
+           }
+       }
+           </style>
+  </head>
+  
+  <body>
+
+  <nav class="nav">
+
+<div class="nav-box">    
+    <div class="logo">
+      {{ partial "blog/face-game.html" . }}
+    </div>
+    
+    
+    {{- with index site.Menus "sections" }}
+    <ol class="section">
+        <li class="name"><a href="/"><b>CRYS</b>SITE</a></li>
+    
+        {{- range . }}
+{{ . }}
+        <li><a href="{{ .URL }}">{{ .Name }}</a>
+            {{- with index site.Menus .Params.submenu }}
+            <ol class="subsection">
+                {{- range .}}
+          <li><a href="{{ .URL}}">{{ .Name }}</a></li>
+          {{- end}}
+        </ol>
+        
+        {{- end}}
+      </li>
+
+      {{- end}}
+    </ol>
+    {{- end}}
+
+      <!-- <li class="active"><a href="/blog">Blog</a> -->
+      <!--   <ol class="subsection"> -->
+      <!--     <li>Archive -->
+      <!--       <ol> -->
+      <!--         <li><a href="/blog/2024">2024</a></li> -->
+      <!--         <li><a href="/blog/2024">2024</a></li> -->
+      <!--         <li><a href="/blog/2024">2024</a></li> -->
+      <!--       </ol> -->
+      <!--   </ol> -->
+      <!-- </li> -->
+      
+</div>
+
+    <div class="webbuttons">
+      {{ partial "button-31" (dict "file" "rss.gif" "alt" "RSS Feed" "href" "https://michal.sapka.me/blog/index.xml") }}
+      {{ partial "button-31" (dict "file" "openbsd.gif" "alt" "RSS Feed" "href" "https://michal.sapka.me/blog/index.xml") }}
+      {{ partial "button-31" (dict "file" "openbsd.gif" "alt" "RSS Feed" "href" "https://michal.sapka.me/blog/index.xml") }}
+      {{ partial "button-31" (dict "file" "openbsd.gif" "alt" "RSS Feed" "href" "https://michal.sapka.me/blog/index.xml") }}
+    </div>
+    
+  </nav>
+  
+  <main>
+    {{ block "main" . }}
+    {{ end }}
+  </main>
+</body>
+
diff --git a/themes/24-unification/layouts/_default/list.html b/themes/24-unification/layouts/_default/list.html
new file mode 100644
index 0000000..58cb880
--- /dev/null
+++ b/themes/24-unification/layouts/_default/list.html
@@ -0,0 +1,38 @@
+{{ define "main" }}
+
+{{if .Page.Content}}
+<article>
+  {{ .Page.Content }}
+  </article>
+{{ else }}
+{{ $paginator := .Paginate .Site.RegularPages.ByDate.Reverse 10 }}
+
+{{ range $paginator.Pages }}
+{{ if eq .Section "blog" }}
+{{ partial "partials/blog/full-post.html" . }}
+{{ else }}
+{{ partial "partials/blog/cross-site-post.html" . }}
+{{ end }}
+{{ end }}
+
+<nav class="blog-pages-list">
+  Pages: 
+  {{ if $paginator.HasPrev }}
+   <span>[ <a href="{{ $paginator.Prev.URL}}">previous</a> ]</span>
+  {{ end }}
+
+  {{ range seq $paginator.TotalPages }}
+    {{ if eq . $paginator.PageNumber }}
+        <span class="current"> {{. }} </span>
+    {{ else }}
+        <a href="/blog/page/{{ . }}/">{{ . }}</a>
+    {{ end }}
+  {{ end }}
+
+  {{ if $paginator.HasNext }}
+    <span>[ <a href="{{ $paginator.Next.URL}}">Next</a> ]</span>
+  {{ end }}
+</nav>
+
+{{end}}
+{{end}}
diff --git a/themes/24-unification/layouts/_default/rss.xml b/themes/24-unification/layouts/_default/rss.xml
new file mode 100644
index 0000000..fa34bd5
--- /dev/null
+++ b/themes/24-unification/layouts/_default/rss.xml
@@ -0,0 +1,81 @@
+{{- /* Deprecate site.Author.email in favor of site.Params.author.email */}}
+{{- $authorEmail := "" }}
+{{- with site.Params.author }}
+  {{- if reflect.IsMap . }}
+    {{- with .email }}
+      {{- $authorEmail = . }}
+    {{- end }}
+  {{- end }}
+{{- else }}
+  {{- with site.Author.email }}
+    {{- $authorEmail = . }}
+    {{- warnf "The author key in site configuration is deprecated. Use params.author.email instead." }}
+  {{- end }}
+{{- end }}
+
+{{- /* Deprecate site.Author.name in favor of site.Params.author.name */}}
+{{- $authorName := "" }}
+{{- with site.Params.author }}
+  {{- if reflect.IsMap . }}
+    {{- with .name }}
+      {{- $authorName = . }}
+    {{- end }}
+  {{- else }}
+    {{- $authorName  = . }}
+  {{- end }}
+{{- else }}
+  {{- with site.Author.name }}
+    {{- $authorName = . }}
+    {{- warnf "The author key in site configuration is deprecated. Use params.author.name instead." }}
+  {{- end }}
+{{- end }}
+
+{{- $pctx := . }}
+{{- if .IsHome }}{{ $pctx = .Site }}{{ end }}
+{{- $pages := slice }}
+{{- if $.IsHome }}
+{{- $pages = $pctx.RegularPages}}
+{{- else if $.IsSection }}
+{{- $pages = $pctx.RegularPagesRecursive}}
+{{- else }}
+{{- $pages = $pctx.Pages }}
+{{- end }}
+{{- $limit := .Site.Config.Services.RSS.Limit }}
+{{- if ge $limit 1 }}
+{{- $pages = $pages | first $limit }}
+{{- end }}
+{{- printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>" | safeHTML }}
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>{{ if eq .Title .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} on {{ end }}{{ .Site.Title }}{{ end }}</title>
+    <link>{{ .Permalink }}</link>
+    <description>Recent content {{ if ne .Title .Site.Title }}{{ with .Title }}in {{ . }} {{ end }}{{ end }}on {{ .Site.Title }}</description>
+    <generator>Hugo -- gohugo.io</generator>
+    <language>{{ site.Language.LanguageCode }}</language>{{ with $authorEmail }}
+    <managingEditor>{{.}}{{ with $authorName }} ({{ . }}){{ end }}</managingEditor>{{ end }}{{ with $authorEmail }}
+    <webMaster>{{ . }}{{ with $authorName }} ({{ . }}){{ end }}</webMaster>{{ end }}{{ with .Site.Copyright }}
+    <copyright>{{ . }}</copyright>{{ end }}{{ if not .Date.IsZero }}
+    <lastBuildDate>{{ (index $pages.ByLastmod.Reverse 0).Lastmod.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>{{ end }}
+    {{- with .OutputFormats.Get "RSS" }}
+    {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
+    {{- end }}
+    {{- range $pages.ByPublishDate.Reverse}}
+    <item>
+      <title>{{ .Title }}</title>
+      <link>{{ .Permalink }}</link>
+      <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
+      {{- with $authorEmail }}<author>{{ . }}{{ with $authorName }} ({{ . }}){{ end }}</author>{{ end }}
+      <guid>{{ crypto.MD5 .Date }}</guid>
+      <description>
+        {{ if in .Page.Params.Categories "blog" }}
+        {{ safeHTML "<![CDATA[" }}{{ replace .Content "\n\n" "\n" | safeHTML }}
+        <hr><p style="font-style:italic">Reply via <a href="https://michal.sapka.me/me/contact/">email</a></p>]]>
+        {{ else }}
+  {{ safeHTML "<![CDATA[" }}{{  partial "external_link" . }}
+        <hr><p style="font-style:italic">Reply via <a href="https://michal.sapka.me/me/contact/">email</a></p>]]>
+        {{ end }}
+      </description>
+    </item>
+    {{- end }}
+  </channel>
+</rss>
diff --git a/themes/24-unification/layouts/_default/single.html b/themes/24-unification/layouts/_default/single.html
new file mode 100644
index 0000000..fdfcdd4
--- /dev/null
+++ b/themes/24-unification/layouts/_default/single.html
@@ -0,0 +1,4 @@
+{{ define "main" }}
+{{ partial "partials/blog/full-post.html" . }}
+
+{{- end }}
diff --git a/themes/24-unification/static/style.css b/themes/24-unification/static/style.css
new file mode 100644
index 0000000..c594514
--- /dev/null
+++ b/themes/24-unification/static/style.css
@@ -0,0 +1,709 @@
+:root {
+    color-scheme: light dark;
+
+    --site-bg: #fff;
+    --menu-bg: var(--menu-bg)
+               --text-color: #000;
+    --link-color: var(--text-color);
+
+    --logo-bg-color: #000;
+
+    --article-bg: ##fcfcfc;
+    --article-border-color: #f3f1f1;
+    --highlight-bg: rgba(240, 240, 240, 0.42);
+
+    --border-color: var(--text-color);
+
+    --blockquote-border-color:  #d2d2d2;
+    --blockquote-color: ##666666;
+
+    --pre-bg: #f0f0f0;
+
+    --font-size: 1.2em;
+    --mobile-font-size: 1hem;
+    --header-font-size: 0.9em;
+
+    --site-font: monospace;
+    --header-font: arial;
+}
+/* default_variables_end */
+
+/* article_variables_start */
+:root {
+  --article-highlight-color: #863fc1; 
+  --article-logo-bg-color: var(--article-highlight-color); 
+  --article-logo-h1-color: var(--article-highlight-color); 
+}
+/* article_variables_end */
+
+/* ste_info_variables_start */
+:root {
+    --site-info-hightlight-color: #9ba89a; 
+    --site-info-logo-bg-color: var(--site-info-hightlight-color);
+    --site-info-h1-color: var(--site-info-hightlight-color);
+}
+/* ste_info_variables_end */
+
+
+
+
+
+
+/* dark_mode_variables_end */
+@media (prefers-color-scheme: dark) {
+    :root  {
+        --site-bg: #000;
+        --text-color: #abb1b1;
+
+        --logo-bg-color: #abb1b1;
+
+        --article-bg: #141818;
+
+        --article-border-color: var(--article-bg);
+        --highlight-bg: rgb(31 27 27);
+
+        --border-color: var(--text-color);
+
+        --pre-bg: #1b2121;
+    }
+}
+/* dark_mode_variables_end */
+
+/* site_start */
+body {
+    font-family: var(--site-font);
+    padding: 0;
+    font-size: var(--font-size);
+    background-color: var(--site-bg);
+    color: var(--text-color);
+    max-width: 800px;
+    margin: auto;
+}
+@media only screen and (max-width: 600px) {
+    body {
+        font-size: var(--mobile-font-size);
+    }
+}
+main, footer {
+    width: 100%;
+    max-width: 95%;
+    margin-left: auto;
+    margin-right: auto;
+}
+img {
+    max-width: 99%;
+    width: auto;
+    height: auto;
+}
+a { color: var(--link-color); }
+h2 a { text-decoration: none; }
+
+.placeholder {
+    opacity: 0.55;
+}
+/* site_end */
+
+/* generic_header_start */
+header {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: normal;
+    align-items: normal;
+    align-content: normal;
+    max-width: 95%;
+    margin-left: auto;
+    margin-right: auto;
+}
+header > .logo {
+    display: block;
+    flex-grow: 0;
+    flex-shrink: 1;
+    flex-basis: auto;
+    align-self: auto;
+    order: 0;
+    width: 50px;
+    height: 80px;
+    background-color: var(--logo-bg-color);
+    position: relative;
+    overflow: hidden;
+}
+header > .name {
+    display: block;
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: auto;
+    align-self: auto;
+    order: 0;
+    text-align: left;
+    position: relative;
+}
+header > .name > nav {
+    position: absolute;
+    bottom: -10px;
+    padding: 10px;
+} 
+h1 {
+    font-size: inherit;
+    margin: 0;
+    text-decoration: none;     
+}
+h1 a,
+h2 a {
+    text-decoration: none;
+    color: inherit;
+}
+.breadcrumb {
+}
+sup {
+    font-size: 0.6em;
+}
+header ol {
+    padding-left: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+header li {
+    display: block;
+}
+/*  */
+header li:not(:last-child)::after {
+    content: "»";
+}
+
+/* generic_header_end */
+
+h2 a { color: inherit; }
+h3 a { color: inherit; }
+h4 a { color: inherit; }
+h5 a { color: inherit; }
+
+/* article_header_end */
+body.article > header > .logo {
+    background-color: var(--article-logo-bg-color);
+}
+body.article > header > .logo > img.files {
+    position: absolute;
+    bottom: 4px;
+    right: -2px;
+    transform: scale(1);
+}
+body.article  h1{
+    color: var(--article-logo-h1-color);
+}
+
+
+
+
+/* site_info_header_end */
+body.site-info > header > .logo { 
+    background-color: var(--site-info-logo-bg-color);
+}
+body.site-info  h1{
+    color: var(--site-info-h1-color);
+}
+/* site_info_header_end */
+
+
+
+/* blog_post_list_start */
+article.blog-post-item > h2 > a {
+    text-decoration: none;
+}
+article.blog-post-item > nav {
+    display: inline-block;
+}
+nav.blog-pages-list {
+    margin-bottom: 20px;
+}
+nav.blog-pages-list a {
+    text-decoration: underline;
+}
+/* blog_post_list_end */
+
+/* article_list_start */
+article.article-abstract-list-item {
+    margin-bottom: 5px;
+}
+article.article-abstract-list-item > h2  {
+    margin-top: 0;
+}
+article.article-abstract-list-item > h2 > a {
+    text-decoration: none;
+}
+article.article-abstract-list-item > a > aside {
+    margin-top: 7px;
+    opacity : 0.7;
+}
+
+/* article_list_end */
+
+/* index_start */
+nav.personal {
+}
+nav.personal > a {
+    font-weight: bold;
+}
+table { width: 100% }
+td { border-style: solid!important; border-width: 1px;}
+
+table.small { width: auto; border-style: none!important; }
+table.small td { border-style: none!important; }
+table.small tr { border-style: none!important; }
+
+/* single_start */
+
+article  > .publish-date {
+    text-align: right;
+}
+
+article  > .publish-date  a {
+    text-decoration: none;
+}
+/*single_end */
+
+/* inline_nav_start */
+.inline-nav > h4 {
+    text-transform: none!important;
+}
+.inline-nav > ul > li > b {
+    color: var(--star-trek-highlight-color);
+}
+
+/* inline_nav_end */
+
+
+
+
+
+/* legacy_code_start */
+
+/* ---------- Main  */
+main {
+    margin-top: 30px;
+}
+
+
+/* ----------- Taxmomy list  */
+
+.list-item time {
+    opacity: 0.5;
+}
+.list-item span {
+    font-weight: bold;
+}
+
+/* ----------- Articles / Posts  */
+article {
+    margin-bottom: 20px;
+    padding: 5px;
+    line-height: 1.32em;
+}
+article p {
+    text-align: justify;
+}
+article a {
+    text-decoration: underline;
+}
+h2, h3, h4, h5 {
+    text-align: left;
+    border: 0;
+    border-bottom-width: 0px;
+    border-style: solid;
+    font-size: inherit;
+    text-transform: uppercase;
+}
+h2 {
+    border-bottom-width: 1px;
+}
+
+
+
+/* emacs_article_start */
+
+/* emacs_article_end */
+
+
+blockquote {
+    border: 0;
+    border-left: 3px;
+    border-style: solid;
+    border-color: var(--blockquote-border-color);
+    margin-left: 15px;
+    padding-left: 15px;
+    color: var(--blockquote-color);
+}
+pre {
+    padding-bottom: 5px;
+    white-space: pre-wrap;
+    padding: 11px;
+    background-color: var(--pre-bg);
+    word-break: keep-all;
+}
+pre code {
+    max-width: 100%;
+    /* word-break: break-all; */
+}
+
+/* ----------- Articles images  */
+article figure {
+    text-align: center;
+    margin: 0;
+    max-width: 100%;
+    font-size: 0.8em;
+}
+img.float-right {
+    float: right;
+    display: inline;
+    margin-left: 10px;
+}
+img.center {
+    max-width: 100%;
+    height: auto;
+}
+img.small {
+    max-width: 50%;
+    height: auto;
+}
+figure.graph {
+    background-color: var(--highlight-bg);
+    padding: 5px;
+    padding-top: 20px;
+}
+figure.graph img {
+    width: 95%;
+}
+
+/* ----------- Articles adjustement navigation  */
+.next-link {
+    float: right;
+}
+
+/* ----------- Footer  */
+footer {
+    text-align: center;
+    padding: 10px 0 30px 0;
+}
+
+/* ---------- Footnotes  */
+a[href^="#fn:"], a[href^="#fnref:"] {
+    text-decoration: none;
+}
+a[href^="#fn:"]:before{ content: '[' }
+a[href^="#fn:"]:after{ content: ']' }
+.footnotes p {
+    margin: 3px;
+}
+.footnotes hr {
+    size: 1px;
+}
+.footnotes::before {
+    border: 0;
+    border-bottom-width: 1px;
+    border-style: solid;
+    font-weight: bold;
+    display: block;
+    text-transform: uppercase;
+}
+
+/* ----------- Donations  */
+.donor {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    align-content: flex-start;
+    gap: 50px;
+}
+
+/* --------- Code blocks  */
+
+/* Background  */ .bg { background-color: #f8f8f8; }
+/* PreWrapper  */ .chroma { background-color: #f8f8f8; }
+/* Other  */ .chroma .x {  }
+/* Error  */ .chroma .err {  }
+/* CodeLine  */ .chroma .cl {  }
+/* LineLink  */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
+/* LineTableTD  */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+/* LineTable  */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
+/* LineHighlight  */ .chroma .hl { background-color: #ffffcc }
+/* LineNumbersTable  */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineNumbers  */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* Line  */ .chroma .line { display: flex; }
+/* Keyword  */ .chroma .k { color: #aa22ff; font-weight: bold }
+/* KeywordConstant  */ .chroma .kc { color: #aa22ff; font-weight: bold }
+/* KeywordDeclaration  */ .chroma .kd { color: #aa22ff; font-weight: bold }
+/* KeywordNamespace  */ .chroma .kn { color: #aa22ff; font-weight: bold }
+/* KeywordPseudo  */ .chroma .kp { color: #aa22ff }
+/* KeywordReserved  */ .chroma .kr { color: #aa22ff; font-weight: bold }
+/* KeywordType  */ .chroma .kt { color: #00bb00; font-weight: bold }
+/* Name  */ .chroma .n {  }
+/* NameAttribute  */ .chroma .na { color: #bb4444 }
+/* NameBuiltin  */ .chroma .nb { color: #aa22ff }
+/* NameBuiltinPseudo  */ .chroma .bp {  }
+/* NameClass  */ .chroma .nc { color: #0000ff }
+/* NameConstant  */ .chroma .no { color: #880000 }
+/* NameDecorator  */ .chroma .nd { color: #aa22ff }
+/* NameEntity  */ .chroma .ni { color: #999999; font-weight: bold }
+/* NameException  */ .chroma .ne { color: #d2413a; font-weight: bold }
+/* NameFunction  */ .chroma .nf { color: #00a000 }
+/* NameFunctionMagic  */ .chroma .fm {  }
+/* NameLabel  */ .chroma .nl { color: #a0a000 }
+/* NameNamespace  */ .chroma .nn { color: #0000ff; font-weight: bold }
+/* NameOther  */ .chroma .nx {  }
+/* NameProperty  */ .chroma .py {  }
+/* NameTag  */ .chroma .nt { color: #008000; font-weight: bold }
+/* NameVariable  */ .chroma .nv { color: #b8860b }
+/* NameVariableClass  */ .chroma .vc {  }
+/* NameVariableGlobal  */ .chroma .vg {  }
+/* NameVariableInstance  */ .chroma .vi {  }
+/* NameVariableMagic  */ .chroma .vm {  }
+/* Literal  */ .chroma .l {  }
+/* LiteralDate  */ .chroma .ld {  }
+/* LiteralString  */ .chroma .s { color: #bb4444 }
+/* LiteralStringAffix  */ .chroma .sa { color: #bb4444 }
+/* LiteralStringBacktick  */ .chroma .sb { color: #bb4444 }
+/* LiteralStringChar  */ .chroma .sc { color: #bb4444 }
+/* LiteralStringDelimiter  */ .chroma .dl { color: #bb4444 }
+/* LiteralStringDoc  */ .chroma .sd { color: #bb4444; font-style: italic }
+/* LiteralStringDouble  */ .chroma .s2 { color: #bb4444 }
+/* LiteralStringEscape  */ .chroma .se { color: #bb6622; font-weight: bold }
+/* LiteralStringHeredoc  */ .chroma .sh { color: #bb4444 }
+/* LiteralStringInterpol  */ .chroma .si { color: #bb6688; font-weight: bold }
+/* LiteralStringOther  */ .chroma .sx { color: #008000 }
+/* LiteralStringRegex  */ .chroma .sr { color: #bb6688 }
+/* LiteralStringSingle  */ .chroma .s1 { color: #bb4444 }
+/* LiteralStringSymbol  */ .chroma .ss { color: #b8860b }
+/* LiteralNumber  */ .chroma .m { color: #666666 }
+/* LiteralNumberBin  */ .chroma .mb { color: #666666 }
+/* LiteralNumberFloat  */ .chroma .mf { color: #666666 }
+/* LiteralNumberHex  */ .chroma .mh { color: #666666 }
+/* LiteralNumberInteger  */ .chroma .mi { color: #666666 }
+/* LiteralNumberIntegerLong  */ .chroma .il { color: #666666 }
+/* LiteralNumberOct  */ .chroma .mo { color: #666666 }
+/* Operator  */ .chroma .o { color: #666666 }
+/* OperatorWord  */ .chroma .ow { color: #aa22ff; font-weight: bold }
+/* Punctuation  */ .chroma .p {  }
+/* Comment  */ .chroma .c { color: #008800; font-style: italic }
+/* CommentHashbang  */ .chroma .ch { color: #008800; font-style: italic }
+/* CommentMultiline  */ .chroma .cm { color: #008800; font-style: italic }
+/* CommentSingle  */ .chroma .c1 { color: #008800; font-style: italic }
+/* CommentSpecial  */ .chroma .cs { color: #008800; font-weight: bold }
+/* CommentPreproc  */ .chroma .cp { color: #008800 }
+/* CommentPreprocFile  */ .chroma .cpf { color: #008800 }
+/* Generic  */ .chroma .g {  }
+/* GenericDeleted  */ .chroma .gd { color: #a00000 }
+/* GenericEmph  */ .chroma .ge { font-style: italic }
+/* GenericError  */ .chroma .gr { color: #ff0000 }
+/* GenericHeading  */ .chroma .gh { color: #000080; font-weight: bold }
+/* GenericInserted  */ .chroma .gi { color: #00a000 }
+/* GenericOutput  */ .chroma .go { color: #888888 }
+/* GenericPrompt  */ .chroma .gp { color: #000080; font-weight: bold }
+/* GenericStrong  */ .chroma .gs { font-weight: bold }
+/* GenericSubheading  */ .chroma .gu { color: #800080; font-weight: bold }
+/* GenericTraceback  */ .chroma .gt { color: #0044dd }
+/* GenericUnderline  */ .chroma .gl { text-decoration: underline }
+/* TextWhitespace  */ .chroma .w { color: #bbbbbb }
+
+/* legacy_code_end */
+
+
+/* brain_rot_start */
+:root {
+    --brain-rot-highlight-color: #978b27;
+}
+
+.brain-rot > header > .logo {
+    background-color: var(--brain-rot-highlight-color);
+}
+.brain-rot > header > .logo > img {
+    position: absolute;
+    bottom: 0px;
+    right: -5px;
+    transform: scale(0.9);
+}
+.brain-rot h1 {
+    color: var(--brain-rot-highlight-color);
+}
+
+.brain-rot h2,
+.brain-rot h3,
+.brain-rot h4,
+.brain-rot h5,
+.brain-rot h6 {
+    color: var(--brain-rot-highlight-color);
+    border-color: var(--brain-rot-highlight-color)
+}
+.brain-rot .new {
+    color: var(--brain-rot-highlight-color);
+}
+.rating-box {
+    float: right;
+    margin: 10px;
+    text-align: center;
+}
+/* brain_rot_end */
+
+/* star_trek_start */
+
+:root {
+    --star-trek-highlight-color: #3e7dc0; 
+}
+
+body.star-trek > header > .logo {
+    background-color: var(--star-trek-highlight-color);
+}
+body.star-trek > header > .logo > img.stbadge {
+    position: absolute;
+    bottom: -12px;
+    right: -6px;
+    transform: scale(0.8);
+}
+body.star-trek  h1{
+    color: var(--star-trek-highlight-color);
+}
+
+.star-trek h2,
+.star-trek h3,
+.star-trek h4,
+.star-trek h5,
+.star-trek h6 {
+    color: var(--star-trek-highlight-color);
+    border-color: var(--star-trek-highlight-color)
+}
+
+.star-trek .new {
+    color: var(--star-trek-highlight-color)
+}
+
+img.vert-move:hover {
+    animation: mover 1s infinite  alternate;
+}
+
+@keyframes mover {
+    0% { transform: translateY(0); }
+    100% { transform: translateY(-10px); }
+}
+
+/* star_trek__end */
+
+
+
+/* bsd_start */
+:root {
+    --bsd-highlight-color: #ab2b28;
+}
+
+body.bsd > header > .logo {
+    background-color: var(--bsd-highlight-color);
+}
+body.bsd > header > .logo > img.beastie {
+    position: absolute;
+    bottom: 0px;
+    right: -11px;
+    transform: scale(1.1);
+}
+.bsd h1 {
+    color: var(--bsd-highlight-color);
+}
+
+.bsd h2,
+.bsd h3,
+.bsd h4,
+.bsd h5,
+.bsd h6 {
+    color: var(--bsd-highlight-color);
+    border-color: var(--bsd-highlight-color)
+}
+
+.bsd .new {
+    color: var(--bsd-highlight-color)
+}
+
+
+/* bsd_end */
+
+
+
+/* emacs_start */
+:root {
+    --emacs-highlight-color: #7F5AB6;
+}
+
+body.emacs > header > .logo {
+    background-color: var(--emacs-highlight-color);
+}
+body.emacs > header > .logo > img {
+    position: absolute;
+    bottom: 0px;
+    right: -2px;
+    transform: scale(0.9);
+}
+.emacs h1 {
+    color: var(--emacs-h1-color);
+}
+
+.emacs h2,
+.emacs h3,
+.emacs h4,
+.emacs h5,
+.emacs h6 {
+    color: var(--emacs-highlight-color);
+    border-color: var(--emacs-highlight-color)
+}
+.emacs .new {
+    color: var(--emacs-highlight-color)
+}
+
+/* emacs_end */
+
+
+/* blog_start */
+:root {
+    --blog-highlight-color: #4c683c;;
+}
+
+body.blog > header > .logo {
+    background-color: var(--blog-highlight-color);
+}
+body.blog > header > .logo > img.blogicon {
+    position: absolute;
+    bottom: 0px;
+    right: -2px;
+    transform: scale(0.9);
+}
+body.blog h1 {
+    color: var(--blog-h1-color);
+}
+
+.blog h2,
+.blog h3,
+.blog h4,
+.blog h5,
+.blog h6 {
+    color: var(--blog-highlight-color);
+    border-color: var(--blog-highlight-color)
+}
+/* emacs_end */
+
+/* omake_start */
+:root {
+    --omake-highlight-color: #b47379;
+}
+
+.omake h1 {
+    color: var(--omake-h1-color);
+}
+
+ .omake h2,
+ .omake h3,
+ .omake h4,
+ .omake h5,
+ .omake h6 {
+     color: var(--omake-highlight-color);
+     border-color: var(--omake-highlight-color)
+ }
+
+ /* omake_end */