diff options
Diffstat (limited to 'layouts/blog/baseof.html')
| -rw-r--r-- | layouts/blog/baseof.html | 225 |
1 files changed, 22 insertions, 203 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> |