Add fun little view transitions for browsers that support it

_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>

_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 }}

_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;
+    }
+}

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