tom/personal_site
1
0
Fork 0
mirror of https://github.com/TomHodson/tomhodson.github.com.git synced 2025-06-26 10:01:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add fun little view transitions for browsers that support it

Browse Source
This commit is contained in:
Tom 2025-05-16 16:22:28 +01:00
parent 280bfffc49
commit 2f12ac1a53
4 changed files with 24 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_includes/post_summary.html
View File

@ -11,7 +11,7 @@
<article class="h-entry blogroll {% if is_draft %}draft{%endif%}"> <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> <figure>
<img <img
src = "{{ post.thumbnail | default: post.image}}" src = "{{ post.thumbnail | default: post.image}}"
@ -21,7 +21,7 @@
</figure> </figure>
</a> </a>
<section> <section style="view-transition-name: {{post.slug}}">
<section class="title-date-container"> <section class="title-date-container">
<h2 class="p-name blogroll-title"><a class="u-uid u-url" href="{{ post.url }}">{{ post.title }}</a></h2> <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> <time class="dt-published" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: '%b %Y' }}</time>

13
_layouts/post.html
View File

@ -14,18 +14,19 @@
{% include header.html %} {% include header.html %}
<main> <main>
<article class="h-entry"> <article class="h-entry">
<section class="header"> <section class="header" style="view-transition-name: {{ page.slug }}">
<section class="title-icon-container"> <section class="title-icon-container">
<h1 class = "p-name highlights">{{ page.title }}</h1> <h1 class = "p-name highlights">{{ page.title }}</h1>
<div class = "icon-container"></div> <div class = "icon-container"></div>
</section> </section>
<hr class="byline"> <hr class="byline">
</section>
<section class="byline-time"> <section class="byline-time">
<section class="byline"> <section class="byline">
{{page.excerpt}} {{page.excerpt}}
</section>
<time class="dt-label dt-published" datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date_to_string }}</time>
</section> </section>
<time class="dt-label dt-published" datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date_to_string }}</time>
</section> </section>
<div class="e-content"> <div class="e-content">
{{ content }} {{ content }}

12
_sass/base.scss
View File

@ -138,7 +138,7 @@ hr.byline {
// Used for both blog and project summaries // Used for both blog and project summaries
@mixin time-text { @mixin time-text {
font-size: 0.75em; font-size: 0.75em;
color: var(--theme-subtle-text-color); opacity: 0.8;
} }
span.dt-label { span.dt-label {
@ -464,3 +464,13 @@ svg {
[data-user-color-scheme="dark"] { [data-user-color-scheme="dark"] {
@include night-mode; @include night-mode;
} }
@view-transition {
navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
* {
view-transition-name: unset !important;
}
}

4
project_ideas.md
View File

@ -9,6 +9,10 @@ mathjax: false
# Project Ideas # 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 something interactive using a custom server on my new server
* Make a tiny rest server on an esp32 * Make a tiny rest server on an esp32