From 5c2ef4127ab2f94ba09bb04166f3b234468d0208 Mon Sep 17 00:00:00 2001
From: Maxi Ferreira <charca@gmail.com>
Date: Tue, 5 Dec 2023 16:40:04 -0800
Subject: [PATCH] CSS Updates and View Transitions

---
 src/components/BaseHead.astro | 27 ++++++++++++++++-----------
 src/components/Logo.astro     |  8 +++++++-
 src/styles/global.css         | 11 +++++++++++
 3 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
index 5c3b713..6e48d84 100644
--- a/src/components/BaseHead.astro
+++ b/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>
diff --git a/src/components/Logo.astro b/src/components/Logo.astro
index 43b9a2f..bf09838 100644
--- a/src/components/Logo.astro
+++ b/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>
diff --git a/src/styles/global.css b/src/styles/global.css
index ff51f62..8638ab2 100644
--- a/src/styles/global.css
+++ b/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 {