chore: date in blog

4 files changed, 217 insertions, 224 deletions

diff --git a/layouts/blog/baseof.html b/layouts/blog/baseof.html
index ac10717..689bb61 100644
--- a/layouts/blog/baseof.html
+++ b/layouts/blog/baseof.html
@@ -164,6 +164,10 @@
           display: flow-root;
       }
 
+      h2 {
+        margin-bottom: 4px;
+      }
+
       article.link {
         padding: 20px;
         display: flex;
@@ -270,18 +274,13 @@
           background-color: var(--panel-color);
       }
       
-      footer.copyright {
+      .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 {
+      .buttons {
           text-align: center;
           padding: 10px;
           border: var(--cool-border);
@@ -309,196 +308,7 @@
 
   <header>
     <div class="logo">
-      {{- $img := resources.Get "blog/logo/front.png" }}
-      {{- $img1x := $img.Resize "100x webp" }}
-      {{- $img2x := $img.Resize "200x webp" }} 
-      <img
-        alt="Michal"
-        id="face"
-        style="cursor: crosshair;"
-        src="{{ $img1x.Permalink }}" 
-        srcset="
-                {{ $img1x.Permalink }} 1x,
-                {{ $img2x.Permalink }} 2x
-                "
-        width="{{ $img1x.Width }}" 
-        height="{{ $img1x.Height }}"
-        >
-      <script>
-
-        // A game - click on my face.
-        const faces = {
-            normal:{
-                front: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
-                {{- $img := resources.Get "blog/logo/left.png" }}
-                {{- $img1x := $img.Resize "100x webp" }}
-                {{- $img2x := $img.Resize "200x webp" }}
-                left: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
-                {{- $img := resources.Get "blog/logo/right.png" }}
-                {{- $img1x := $img.Resize "100x webp" }}
-                {{- $img2x := $img.Resize "200x webp" }}
-                right: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
-            },
-            state1:{
-                {{- $img := resources.Get "blog/logo/state-1-front.png" }}
-                {{- $img1x := $img.Resize "100x webp" }}
-                {{- $img2x := $img.Resize "200x webp" }} 
-                front: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
-                {{- $img := resources.Get "blog/logo/state-1-left.png" }}
-                {{- $img1x := $img.Resize "100x webp" }}
-                {{- $img2x := $img.Resize "200x webp" }}
-                left: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
-                {{- $img := resources.Get "blog/logo/state-1-right.png" }}
-                {{- $img1x := $img.Resize "100x webp" }}
-                {{- $img2x := $img.Resize "200x webp" }}
-                right: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
-            },
-            state2:{
-                {{- $img := resources.Get "blog/logo/state-2-front.png" }}
-                {{- $img1x := $img.Resize "100x webp" }}
-                {{- $img2x := $img.Resize "200x webp" }} 
-                front: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
-                {{- $img := resources.Get "blog/logo/state-2-left.png" }}
-                {{- $img1x := $img.Resize "100x webp" }}
-                {{- $img2x := $img.Resize "200x webp" }}
-                left: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
-                {{- $img := resources.Get "blog/logo/state-2-right.png" }}
-                {{- $img1x := $img.Resize "100x webp" }}
-                {{- $img2x := $img.Resize "200x webp" }}
-                right: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
-            },
-            state3:{
-                {{- $img := resources.Get "blog/logo/state-3-front.png" }}
-                {{- $img1x := $img.Resize "100x webp" }}
-                {{- $img2x := $img.Resize "200x webp" }} 
-                front: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
-                {{- $img := resources.Get "blog/logo/state-3-front.png" }}
-                {{- $img1x := $img.Resize "100x webp" }}
-                {{- $img2x := $img.Resize "200x webp" }}
-                left: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
-                {{- $img := resources.Get "blog/logo/state-3-front.png" }}
-                {{- $img1x := $img.Resize "100x webp" }}
-                {{- $img2x := $img.Resize "200x webp" }}
-                right: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
-            },
-            state4:{
-                {{- $img := resources.Get "blog/logo/grim.png" }}
-                {{- $img1x := $img.Resize "100x webp" }}
-                {{- $img2x := $img.Resize "200x webp" }} 
-                front: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
-                {{- $img := resources.Get "blog/logo/right.png" }}
-                {{- $img1x := $img.Resize "100x webp" }}
-                {{- $img2x := $img.Resize "200x webp" }}
-                left: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
-                {{- $img := resources.Get "blog/logo/left.png" }}
-                {{- $img1x := $img.Resize "100x webp" }}
-                {{- $img2x := $img.Resize "200x webp" }}
-                right: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
-            },
-            state5:{
-                {{- $img := resources.Get "blog/logo/hit.png" }}
-                {{- $img1x := $img.Resize "100x webp" }}
-                {{- $img2x := $img.Resize "200x webp" }} 
-                front: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
-                {{- $img := resources.Get "blog/logo/hit.png" }}
-                {{- $img1x := $img.Resize "100x webp" }}
-                {{- $img2x := $img.Resize "200x webp" }}
-                left: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
-                {{- $img := resources.Get "blog/logo/hit.png" }}
-                {{- $img1x := $img.Resize "100x webp" }}
-                {{- $img2x := $img.Resize "200x webp" }}
-                right: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
-            }
-        }
-        
-        let health = 100;
-        let state = "normal"
-        let inAnimation = false;
-
-        const faceImg = document.getElementById('face');
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const moneyLink = document.getElementById('moneyLink');
-            
-            if(moneyLink) {
-                moneyLink.addEventListener( 'mouseover', function() {
-                    health = "300"
-                    state = "state4"
-                    
-                    updateFace(getStateFaces().front);
-                })
-            }
-        })
-        
-        
-        const updateState = () => {
-            if(health < 100) { state = "state1" }
-            if(health < 50) { state = "state2" }
-            if(health < 1) {
-                state = "state3"
-            }
-        }
-
-        faceImg.addEventListener( 'click', function() {
-            health--;
-            updateState();
-
-            if(state !== "state3") {
-                document.body.style.background = "#ff0000";
-                state = "state5";
-                updateFace(getStateFaces().front);
-                
-                setTimeout(
-                    () => {
-                        document.body.style.background = null
-                    }, 10)
-                
-                if(!inAnimation) {
-                    setTimeout(
-                        () => {
-                            inAnimation = false;
-                            updateState();
-                            updateFace(getStateFaces().front);
-                        }, 200)
-                }
-                                inAnimation = true;
-
-            }
-            else {
-                document.body.style.background = "#000";
-            }
-
-            console.log(`state: ${state}; health: ${health}`);
-        })
-        
-        const getStateFaces = () => {
-            return faces[state]
-        }
-
-        const updateFace = (faceUrls) => {
-            if(!inAnimation) {
-                faceImg.src = faceUrls[0];
-                faceImg.srcset = ` ${faceUrls[0]} 1x, ${faceUrls[1]} 2x`
-            }
-        }
-
-        lookFront = () => {
-            updateFace(getStateFaces().front);
-            setTimeout(lookLeft, 5000);
-        }
-        lookLeft = () => {
-            updateFace(getStateFaces().left);
-            setTimeout(lookRight, 500);
-        }            
-        lookRight = () => {
-            updateFace(getStateFaces().right)
-            setTimeout(lookFront, 500);
-        }            
-
-        lookFront();
-
-      </script>
-      
+      {{ partial "blog/face-game.html" . }}
     </div><div class="name">
       <a href="/blog">Michał's weblog</a>
     </div><nav>
@@ -514,14 +324,23 @@
     <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>
+    <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>
 
-  </footer>
+    <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>
diff --git a/layouts/blog/single.html b/layouts/blog/single.html
index 4a563ab..fdfcdd4 100644
--- a/layouts/blog/single.html
+++ b/layouts/blog/single.html
@@ -1,16 +1,4 @@
 {{ define "main" }}
+{{ partial "partials/blog/full-post.html" . }}
 
-<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 }}
diff --git a/layouts/partials/blog/face-game.html b/layouts/partials/blog/face-game.html
new file mode 100644
index 0000000..df54451
--- /dev/null
+++ b/layouts/partials/blog/face-game.html
@@ -0,0 +1,190 @@
+{{- $img := resources.Get "blog/logo/front.png" }}
+      {{- $img1x := $img.Resize "100x webp" }}
+      {{- $img2x := $img.Resize "200x webp" }} 
+      <img
+        alt="Michal"
+        id="face"
+        style="cursor: crosshair;"
+        src="{{ $img1x.Permalink }}" 
+        srcset="
+                {{ $img1x.Permalink }} 1x,
+                {{ $img2x.Permalink }} 2x
+                "
+        width="{{ $img1x.Width }}" 
+        height="{{ $img1x.Height }}"
+        >
+      <script>
+
+        // A game - click on my face.
+        const faces = {
+            normal:{
+                front: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+                {{- $img := resources.Get "blog/logo/left.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }}
+                left: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+                {{- $img := resources.Get "blog/logo/right.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }}
+                right: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+            },
+            state1:{
+                {{- $img := resources.Get "blog/logo/state-1-front.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }} 
+                front: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+                {{- $img := resources.Get "blog/logo/state-1-left.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }}
+                left: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+                {{- $img := resources.Get "blog/logo/state-1-right.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }}
+                right: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+            },
+            state2:{
+                {{- $img := resources.Get "blog/logo/state-2-front.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }} 
+                front: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+                {{- $img := resources.Get "blog/logo/state-2-left.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }}
+                left: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+                {{- $img := resources.Get "blog/logo/state-2-right.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }}
+                right: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+            },
+            state3:{
+                {{- $img := resources.Get "blog/logo/state-3-front.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }} 
+                front: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+                {{- $img := resources.Get "blog/logo/state-3-front.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }}
+                left: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+                {{- $img := resources.Get "blog/logo/state-3-front.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }}
+                right: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+            },
+            state4:{
+                {{- $img := resources.Get "blog/logo/grim.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }} 
+                front: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+                {{- $img := resources.Get "blog/logo/right.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }}
+                left: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+                {{- $img := resources.Get "blog/logo/left.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }}
+                right: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+            },
+            state5:{
+                {{- $img := resources.Get "blog/logo/hit.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }} 
+                front: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+                {{- $img := resources.Get "blog/logo/hit.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }}
+                left: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+                {{- $img := resources.Get "blog/logo/hit.png" }}
+                {{- $img1x := $img.Resize "100x webp" }}
+                {{- $img2x := $img.Resize "200x webp" }}
+                right: [ {{ $img1x.Permalink }}, {{ $img2x.Permalink }} ],
+            }
+        }
+        
+        let health = 100;
+        let state = "normal"
+        let inAnimation = false;
+
+        const faceImg = document.getElementById('face');
+
+        document.addEventListener('DOMContentLoaded', function() {
+            const moneyLink = document.getElementById('moneyLink');
+            
+            if(moneyLink) {
+                moneyLink.addEventListener( 'mouseover', function() {
+                    health = "300"
+                    state = "state4"
+                    
+                    updateFace(getStateFaces().front);
+                })
+            }
+        })
+        
+        
+        const updateState = () => {
+            if(health < 100) { state = "state1" }
+            if(health < 50) { state = "state2" }
+            if(health < 1) {
+                state = "state3"
+            }
+        }
+
+        faceImg.addEventListener( 'click', function() {
+            health--;
+            updateState();
+
+            if(state !== "state3") {
+                document.body.style.background = "#ff0000";
+                state = "state5";
+                updateFace(getStateFaces().front);
+                
+                setTimeout(
+                    () => {
+                        document.body.style.background = null
+                    }, 10)
+                
+                if(!inAnimation) {
+                    setTimeout(
+                        () => {
+                            inAnimation = false;
+                            updateState();
+                            updateFace(getStateFaces().front);
+                        }, 200)
+                }
+                                inAnimation = true;
+
+            }
+            else {
+                document.body.style.background = "#000";
+            }
+
+            console.log(`state: ${state}; health: ${health}`);
+        })
+        
+        const getStateFaces = () => {
+            return faces[state]
+        }
+
+        const updateFace = (faceUrls) => {
+            if(!inAnimation) {
+                faceImg.src = faceUrls[0];
+                faceImg.srcset = ` ${faceUrls[0]} 1x, ${faceUrls[1]} 2x`
+            }
+        }
+
+        lookFront = () => {
+            updateFace(getStateFaces().front);
+            setTimeout(lookLeft, 5000);
+        }
+        lookLeft = () => {
+            updateFace(getStateFaces().left);
+            setTimeout(lookRight, 500);
+        }            
+        lookRight = () => {
+            updateFace(getStateFaces().right)
+            setTimeout(lookFront, 500);
+        }            
+
+        lookFront();
+
+      </script>
+      
diff --git a/layouts/partials/blog/full-post.html b/layouts/partials/blog/full-post.html
index 31ab76f..1d69e84 100644
--- a/layouts/partials/blog/full-post.html
+++ b/layouts/partials/blog/full-post.html
@@ -1,13 +1,9 @@
 <article class="blog-post-item">
   <h2> <a href="{{ .Page.Permalink }}"> {{ .Title }}</a></h2>
-
   <time datetime="{{.PublishDate.Format "2006-01-02" }}">
-    {{ .PublishDate.Format "January 2, 2006" }}
+    {{ .PublishDate.Format "Monday, 2 Jan 2006" }}
   </time>
-  
-  <nav>
-    <a href="{{ .Page.Permalink }}">[ Permalink ]</a>
-  </nav>
-
-  {{ .Page.Content }}
+  <a href="{{ .Page.Permalink }}">[ Permalink ]</a>
+  <hr>
+{{ .Page.Content }}
 </article>