mirror of
https://github.com/TomHodson/tomhodson.github.com.git
synced 2025-06-26 10:01:18 +02:00
Add fun little view transitions for browsers that support it
This commit is contained in:
parent
280bfffc49
commit
2f12ac1a53
@ -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>
|
||||
|
@ -14,19 +14,20 @@
|
||||
{% 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>
|
||||
<time class="dt-label dt-published" datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date_to_string }}</time>
|
||||
</section>
|
||||
</section>
|
||||
<div class="e-content">
|
||||
{{ content }}
|
||||
</div>
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
@ -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
|
||||
|
Loading…
x
Reference in New Issue
Block a user