From 2f12ac1a5344a3477fbe737a737d630b41836094 Mon Sep 17 00:00:00 2001
From: Tom <thomas.hodson@ecmwf.int>
Date: Fri, 16 May 2025 16:22:28 +0100
Subject: [PATCH] Add fun little view transitions for browsers that support it

---
 _includes/post_summary.html |  4 ++--
 _layouts/post.html          | 13 +++++++------
 _sass/base.scss             | 12 +++++++++++-
 project_ideas.md            |  4 ++++
 4 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/_includes/post_summary.html b/_includes/post_summary.html
index 461b62b..20d8d01 100644
--- a/_includes/post_summary.html
+++ b/_includes/post_summary.html
@@ -11,7 +11,7 @@
 
 <article class="h-entry blogroll {% if is_draft %}draft{%endif%}">
 
-<a class="u-uid u-url" href="{{ post.url }}" aria-label="Blog Post: {{ post.title }}">
+<a class="u-uid u-url" href="{{ post.url }}" aria-label="Blog Post: {{ post.title}}">
 <figure>
 <img
     src = "{{ post.thumbnail | default: post.image}}"
@@ -21,7 +21,7 @@
 </figure>
 </a>
 
-<section>
+<section style="view-transition-name: {{post.slug}}">
   <section class="title-date-container">
     <h2 class="p-name blogroll-title"><a class="u-uid u-url" href="{{ post.url }}">{{ post.title }}</a></h2>
     <time class="dt-published" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: '%b %Y' }}</time>
diff --git a/_layouts/post.html b/_layouts/post.html
index b22b971..1403256 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -14,18 +14,19 @@
     {% include header.html %}
     <main>
         <article class="h-entry">
-            <section class="header">
+            <section class="header" style="view-transition-name: {{ page.slug }}">
                 <section class="title-icon-container">
                     <h1 class = "p-name highlights">{{ page.title }}</h1>
                     <div class = "icon-container"></div>
                 </section>
                 <hr class="byline">
-            </section>
-            <section class="byline-time">
-                <section class="byline">
-                    {{page.excerpt}}
+
+                <section class="byline-time">
+                    <section class="byline">
+                        {{page.excerpt}}
+                    </section>
+                    <time class="dt-label dt-published" datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date_to_string }}</time>
                 </section>
-                <time class="dt-label dt-published" datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date_to_string }}</time>
             </section>
             <div class="e-content">
             {{ content }}
diff --git a/_sass/base.scss b/_sass/base.scss
index 6c3c95d..910251a 100644
--- a/_sass/base.scss
+++ b/_sass/base.scss
@@ -138,7 +138,7 @@ hr.byline {
 // Used for both blog and project summaries
 @mixin time-text {
   font-size: 0.75em;
-  color: var(--theme-subtle-text-color);
+  opacity: 0.8;
 }
 
 span.dt-label {
@@ -464,3 +464,13 @@ svg {
 [data-user-color-scheme="dark"] {
   @include night-mode;
 }
+
+@view-transition {
+    navigation: auto;
+  }
+
+@media (prefers-reduced-motion: reduce) {
+    * {
+        view-transition-name: unset !important;
+    }
+}
\ No newline at end of file
diff --git a/project_ideas.md b/project_ideas.md
index c82a559..21f18fe 100644
--- a/project_ideas.md
+++ b/project_ideas.md
@@ -9,6 +9,10 @@ mathjax: false
 
 # Project Ideas
 
+* get https://www.feather.art/ and try out the line rendering for nice 3D annotations
+
+* small telegram/whatsapp server that you can forward an audio message to and get a transcription
+
 * make something interactive using a custom server on my new server
 
 * Make a tiny rest server on an esp32