diff --git a/src/app.css b/src/app.css
index 0b15fa1..6073141 100644
--- a/src/app.css
+++ b/src/app.css
@@ -99,18 +99,25 @@
box-sizing: border-box;
}
-/* page transitions: quick cross-fade for content; the map morphs separately */
+/* page transitions: gentle simultaneous cross-fade for content;
+ the map morphs separately; topbar and footer are pinned and never fade */
@media not (prefers-reduced-motion: reduce) {
::view-transition-old(root) {
- animation: 110ms ease both vt-fade-out;
+ animation: 160ms ease both vt-fade-out;
}
::view-transition-new(root) {
- animation: 220ms ease 40ms both vt-fade-in;
+ animation: 160ms ease both vt-fade-in;
}
::view-transition-group(streba-map) {
animation-duration: 320ms;
animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1);
}
+ ::view-transition-old(topbar),
+ ::view-transition-new(topbar),
+ ::view-transition-old(site-footer),
+ ::view-transition-new(site-footer) {
+ animation: none;
+ }
}
@keyframes vt-fade-out {
to {
@@ -131,6 +138,9 @@ body {
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
}
h1 {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 68159ad..792cf80 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -158,7 +158,26 @@
-
+