CSS Updates and View Transitions

src/components/BaseHead.astro

@@ -1,14 +1,15 @@
 ---
+import { ViewTransitions } from 'astro:transitions'
 import '../styles/fonts.css'
 import '../styles/global.css'
 
 export interface Props {
-  title: string;
-  description: string;
-  permalink: string;
+  title: string
+  description: string
+  permalink: string
 }
 
-const { title, description, permalink } = Astro.props;
+const { title, description, permalink } = Astro.props
 const socialUrl = Astro.site.href + 'assets/social.png'
 ---
 
@@ -17,7 +18,6 @@ const socialUrl = Astro.site.href + 'assets/social.png'
 <meta name="viewport" content="width=device-width" />
 <link rel="icon" type="image/x-icon" href="/favicon.ico" />
 
-
 <!-- Primary Meta Tags -->
 <title>{title}</title>
 <meta name="title" content={title} />
@@ -37,13 +37,18 @@ const socialUrl = Astro.site.href + 'assets/social.png'
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={socialUrl} />
 
+<ViewTransitions />
+
 <!-- This is intentionally inlined to avoid FOUC -->
-<script>
-  const root = document.documentElement;
-  const theme = localStorage.getItem('theme');
-  if (theme === 'dark' || (!theme) && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-    root.classList.add('theme-dark');
+<script is:inline>
+  const root = document.documentElement
+  const theme = localStorage.getItem('theme')
+  if (
+    theme === 'dark' ||
+    (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)
+  ) {
+    root.classList.add('theme-dark')
   } else {
-    root.classList.remove('theme-dark');
+    root.classList.remove('theme-dark')
   }
 </script>

src/components/Logo.astro

@@ -3,8 +3,14 @@
     display: block;
     width: 75px;
   }
+
+  @media screen and (max-width: 520px) {
+    img {
+      display: none;
+    }
+  }
 </style>
 
 <a href="/">
-  <img alt="Blog Logo" src="/assets/logo.webp" width="75" height="50">
+  <img alt="Blog Logo" src="/assets/logo.webp" width="75" height="50" />
 </a>

src/styles/global.css

@@ -14,6 +14,17 @@
   --primary-color: #548e9b;
 }
 
+html {
+  overflow-y: scroll;
+}
+
+@supports (scrollbar-gutter: stable) {
+  html {
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+  }
+}
+
 *,
 *:before,
 *:after {