GuerillaStudio/now-playing
GuerillaStudio/now-playing
1
0
Fork 0
mirror of https://github.com/GuerillaStudio/now-playing synced 2024-11-30 01:41:41 +00:00
Code Issues Activity Actions

Add experimental View Transition on page change

Browse source
This commit is contained in:
Tixie 2023-05-12 03:30:18 +02:00
parent 35ce43c9db
commit 5846cbb5eb
6 changed files with 38 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/scss/4-base/_06-header.scss
View file

@ -4,8 +4,8 @@
.header { .header {
position: relative; position: relative;
top: 0;
background-color: $color-bg-head; background-color: $color-bg-head;
transition: .15s all;
} }
.header--home { .header--home {

18
assets/scss/8-rwd/_rwd-reduced-motion.scss
View file

@ -26,4 +26,22 @@
.coverGlitchSimpleHover:hover { .coverGlitchSimpleHover:hover {
animation: none; animation: none;
} }
/* Experimental View Transition API
-------------------------------------------------------------- */
html,
.header__logo,
.header__tagline,
.navigation__item,
.catalog-item__visual,
.catalog-item__album,
.catalog-item__artist,
.album-cover__visual
.album-name
.album-artist {
view-transition-name: none !important;
}
} }

2
layouts/_default/baseof.html
View file

@ -33,6 +33,8 @@
<meta name="twitter:title" content="Now Playing ∴ Great music should be shared" /> <meta name="twitter:title" content="Now Playing ∴ Great music should be shared" />
<meta name="twitter:description" content="{{ .Site.Params.description }}" /> <meta name="twitter:description" content="{{ .Site.Params.description }}" />
{{ end }} {{ end }}
<!-- experimental view transition API -->
<meta name="view-transition" content="same-origin" />
{{ with .Site.GetPage "/" }} {{ with .Site.GetPage "/" }}
{{ with .OutputFormats.Get "rss" }} {{ with .OutputFormats.Get "rss" }}

9
layouts/_default/single.html
View file

@ -41,7 +41,10 @@
class="album-cover__visual" class="album-cover__visual"
width="500" width="500"
height="500" height="500"
style="background-image: url(data:{{ $placeholder.MediaType }};base64,{{ $placeholder.Content | base64Encode }});" style="
background-image: url(data:{{ $placeholder.MediaType }};base64,{{ $placeholder.Content | base64Encode }});
view-transition-name: album_cover_{{ .File.BaseFileName }};
"
src="{{ $coverMedium.Permalink }}" src="{{ $coverMedium.Permalink }}"
loading="lazy" loading="lazy"
alt="{{ .Title }} album's cover" alt="{{ .Title }} album's cover"
@ -49,8 +52,8 @@
> >
</picture> </picture>
<div class="album-infos"> <div class="album-infos">
<h1 class="album-name">{{ .Title }}</h1> <h1 class="album-name" style="view-transition-name: album_title_{{ .File.BaseFileName }};">{{ .Title }}</h1>
<strong class="album-artist">by {{ .Params.artist }}</strong> <strong class="album-artist" style="view-transition-name: album_artist_{{ .File.BaseFileName }};">by {{ .Params.artist }}</strong>
<ul class="album-tags"> <ul class="album-tags">
{{ range .Params.styles }} {{ range .Params.styles }}
<li class="album-tags__item">{{ . }}</li> <li class="album-tags__item">{{ . }}</li>

9
layouts/index.html
View file

@ -42,13 +42,16 @@
{{ $placeholder := $cover.Resize "x1 png" }} {{ $placeholder := $cover.Resize "x1 png" }}
<div class="catalog-item"> <div class="catalog-item">
<a class="catalog-item__content" href="{{ .Permalink }}"> <a class="catalog-item__content" href="{{ .Permalink }}">
<h2 class="catalog-item__album">{{ .Title }}</h2> <h2 class="catalog-item__album" style="view-transition-name: album_title_{{ .File.BaseFileName }};">{{ .Title }}</h2>
<div class="catalog-item__artist">by {{ .Params.artist }}</div> <div class="catalog-item__artist" style="view-transition-name: album_artist_{{ .File.BaseFileName }};">by {{ .Params.artist }}</div>
<img <img
class="catalog-item__visual" class="catalog-item__visual"
width="320" width="320"
height="320" height="320"
style="background-image: url(data:{{ $placeholder.MediaType }};base64,{{ $placeholder.Content | base64Encode }});" style="
background-image: url(data:{{ $placeholder.MediaType }};base64,{{ $placeholder.Content | base64Encode }});
view-transition-name: album_cover_{{ .File.BaseFileName }};
"
src="{{ $cover.Permalink }}" src="{{ $cover.Permalink }}"
srcset="{{ $cover.Permalink }} 1x, {{ $cover2x.Permalink }} 2x" srcset="{{ $cover.Permalink }} 1x, {{ $cover2x.Permalink }} 2x"
{{ if ( gt $albumIndex 3) }} {{ if ( gt $albumIndex 3) }}

10
layouts/partials/header.html
View file

@ -5,19 +5,19 @@
{{ end }} {{ end }}
<div class="container"> <div class="container">
<div class="header__left"> <div class="header__left">
<a class="header__logo glitch--hover" data-text="Now Playing" href="/" title="Homepage">Now Playing</a> <a class="header__logo glitch--hover" data-text="Now Playing" href="/" title="Homepage" style="view-transition-name: header-title;">Now Playing</a>
<div class="header__tagline"> <div class="header__tagline" style="view-transition-name: header-tagline;">
Great music should be shared Great music should be shared
</div> </div>
</div> </div>
<nav class="navigation" data-menu="navigation"> <nav class="navigation" data-menu="navigation">
<a class="navigation__item {{ if .IsHome }}active{{ end }}" href="/">Latest</a> <a class="navigation__item {{ if .IsHome }}active{{ end }}" href="/" style="view-transition-name: nav-latest;">Latest</a>
{{ with .Site.GetPage "/" }} {{ with .Site.GetPage "/" }}
{{ with .OutputFormats.Get "RSS" }} {{ with .OutputFormats.Get "RSS" }}
<a class="navigation__item" href="{{ .RelPermalink }}">RSS</a> <a class="navigation__item" href="{{ .RelPermalink }}" style="view-transition-name: nav-rss;">RSS</a>
{{ end }} {{ end }}
{{ end }} {{ end }}
<button class="navigation__item" data-random="btn">Random</button> <button class="navigation__item" data-random="btn" style="view-transition-name: header-random;">Random</button>
</nav> </nav>
<div class="navigation__mobileOverlay" data-menu="overlay"></div> <div class="navigation__mobileOverlay" data-menu="overlay"></div>
<button class="navigation__mobileBtn" data-menu="btn"> <button class="navigation__mobileBtn" data-menu="btn">