🐛 [Astro] Various fixes since refactor (#55)

* ♻️ [App] Shuffle some z-index values * 🔥 [App] Disable scroll snapping * ♻️ [Meta] Improve some meta tags * 🎨 [Contact] Switch to fixed position * 🐛 [Page] Fix Toast centering on Safari * 🐛 [Page] Fix smooth scrolling in Safari * 🎨 [Prettier] Format
beefchimi · Jul 22, 2024 · 218563b · 218563b
1 parent 1e10165
commit 218563b
Show file tree

Hide file tree

Showing 12 changed files with 98 additions and 67 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -9,6 +9,7 @@ export default defineConfig({
   },
   server: {
     port: 3000,
+    // host: '192.168.2.27',
   },
   vite: {
     // TODO: Figure out how to get this to work.

diff --git a/src/components/Contact.astro b/src/components/Contact.astro
@@ -52,8 +52,8 @@ import {SecretEmail} from '@scripts/SecretEmail';
   }
 
   .Contact {
-    z-index: var(--index-surface);
-    position: absolute;
+    z-index: var(--index-thermosphere);
+    position: fixed;
     bottom: var(--space-tight);
     left: var(--space-tight);
     display: grid;

diff --git a/src/components/Hamburger.astro b/src/components/Hamburger.astro
@@ -156,7 +156,7 @@ const {id, controlsId} = Astro.props;
   /* --- Component --- */
 
   .Hamburger {
-    z-index: var(--index-troposphere);
+    z-index: var(--index-thermosphere);
     position: fixed;
     bottom: var(--space-tight);
     right: var(--space-tight);

diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
@@ -88,7 +88,7 @@ const {id, items = []} = Astro.props;
 
   .List {
     position: fixed;
-    z-index: var(--index-stratosphere);
+    z-index: var(--index-thermosphere);
     bottom: var(--nav-list-bottom);
     right: 0;
 

diff --git a/src/components/Toast.astro b/src/components/Toast.astro
@@ -72,7 +72,7 @@ const {
 
   .Toast {
     position: fixed;
-    z-index: var(--index-thermosphere);
+    z-index: var(--index-outerspace);
     bottom: var(--space-tighter);
     left: auto;
     right: auto;

diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
@@ -8,63 +8,80 @@ import '@styles/utility.css';
 import {TOAST_TMPL_ID} from '@data/app';
 import Toast from '@components/Toast.astro';
 
+// import ToastTest from '@mock/ToastTest.astro';
+
 interface Props {
   id: string;
   title?: string;
 }
 
-const THEME_COLOR = '#8c54c1';
-const SITE_NAME = 'dulmage.me';
-const SITE_URL = 'https://dulmage.me';
-const DEFAULT_TITLE = 'Curtis Dulmage | UX Developer';
-const DESCRIPTION = 'UX development portfolio for Curtis Dulmage';
-const SOCIAL_IMG = '/assets/dulmage-social-png';
+const {id, title = 'Curtis Dulmage | UX Developer'} = Astro.props;
 
-const {id, title = DEFAULT_TITLE} = Astro.props;
+const DESCRIPTION = 'UX development portfolio for Curtis Dulmage';
+const PERMALINK = new URL(Astro.url.pathname, Astro.site).href;
+// new URL('/assets/dulmage-social.png', Astro.site).href;
+const OG_IMAGE = '/assets/dulmage-social.png';
 ---
 
 <!doctype html>
 <html lang="en" data-current-index="0">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, viewport-fit=cover"
+    />
 
     <title>{title}</title>
 
-    <!-- Special app meta -->
-
+    <!-- SEO meta -->
     <meta name="description" content={DESCRIPTION} />
-    <meta name="theme-color" content={THEME_COLOR} />
+    <meta
+      name="keywords"
+      content="Web, UX, Developer, Software, Design, Ottawa"
+    />
     <meta name="generator" content={Astro.generator} />
 
+    <!-- Web app meta -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="mobile-web-app-capable" content="yes" />
     <meta
       name="apple-mobile-web-app-status-bar-style"
       content="black-translucent"
     />
     <meta name="apple-mobile-web-app-title" content="Curtis Dulmage" />
+    <meta name="format-detection" content="telephone=no" />
 
-    <!-- Favicons (see: https://vite-pwa-org.netlify.app/assets-generator) -->
+    <!-- iOS browser chrome looks better without this -->
+    <!-- <meta name="theme-color" content="#8c54c1" /> -->
+
+    <!-- Windows meta -->
+    <!--
+      <meta name="msapplication-TileImage" content="/icon-144x144.png">
+      <meta name="msapplication-TileColor" content="#8c54c1">
+    -->
 
+    <!-- Favicons (see: https://vite-pwa-org.netlify.app/assets-generator) -->
     <!-- <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml"> -->
     <link rel="icon" href="/favicon.ico" sizes="48x48" />
     <link rel="icon" href="/favicon.png" sizes="any" type="image/png" />
     <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
 
-    <!-- Social share images -->
+    <!-- Open Graph meta -->
     <meta property="og:type" content="website" />
-    <meta property="og:site_name" content={SITE_NAME} />
+    <meta property="og:site_name" content="dulmage.me" />
     <meta property="og:title" content={title} />
     <meta property="og:description" content={DESCRIPTION} />
-    <meta property="og:image" content={SOCIAL_IMG} />
-    <meta property="og:url" content={SITE_URL} />
+    <meta property="og:image" content={OG_IMAGE} />
+    <meta property="og:url" content={PERMALINK} />
 
+    <!-- Twitter meta -->
     <meta property="twitter:card" content="summary_large_image" />
     <meta property="twitter:site" content="@beefchimi" />
     <meta property="twitter:account_id" content="358226505" />
     <meta property="twitter:title" content={title} />
     <meta property="twitter:description" content={DESCRIPTION} />
-    <meta property="twitter:image" content={SOCIAL_IMG} />
+    <meta property="twitter:image" content={OG_IMAGE} />
 
     {pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}
 
@@ -97,10 +114,13 @@ const {id, title = DEFAULT_TITLE} = Astro.props;
 </html>
 
 <style>
-  /* Horizontal centering is required for Toast components */
+  /*
+    Horizontal centering is required for Toast components.
+    `display grid / justify-items` does not work correctly in Safari.
+  */
   body {
-    display: grid;
-    justify-items: center;
+    display: flex;
+    justify-content: center;
   }
 </style>
 

diff --git a/src/mock/ToastTest.astro b/src/mock/ToastTest.astro
@@ -14,7 +14,7 @@
 
 <style>
   .ToastTest {
-    z-index: var(--index-troposphere);
+    z-index: var(--index-thermosphere);
     position: absolute;
     top: var(--space);
     left: var(--space);

diff --git a/src/pages/404.astro b/src/pages/404.astro
@@ -49,6 +49,8 @@ import Stars from '@components/Stars.astro';
 
   .ErrorContent {
     --color-portfolio: hsl(var(--color-rainbow) 100% 50%);
+
+    position: relative;
     display: grid;
     gap: var(--space-tight);
     justify-content: center;

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -49,7 +49,8 @@ const [intro, ...portfolioSections] = sections;
   const overlayInstance = new Overlay(OVERLAY_ID);
   overlayInstance.init();
 
-  const portfolioInstance = new Portfolio({scroller: 'main'});
+  // Only pass `{scroller: 'main'}` if we want scroll-snapping.
+  const portfolioInstance = new Portfolio();
   portfolioInstance.init();
 
   const emailInstance = new SecretEmail(PERSONAL_EMAIL);

diff --git a/src/sections/ProjectOverlay.astro b/src/sections/ProjectOverlay.astro
@@ -18,7 +18,7 @@ const {id} = Astro.props;
 
   .ProjectOverlay {
     display: none;
-    z-index: var(--index-mesosphere);
+    z-index: var(--index-exosphere);
     position: fixed;
     inset: 0;
     background-color: rgb(0, 0, 0, 0.6);

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -80,37 +80,71 @@ body {
   cursor: url('../assets/img/cursor-auto.png'), auto;
 }
 
+/* --- Page load --- */
+/* TODO: Consider something better with `document.readystate`. */
+
+@keyframes pageLoad {
+  from {
+    opacity: 1;
+    visibility: visible;
+  }
+  to {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+body {
+  position: relative;
+
+  &::after {
+    content: '';
+    z-index: var(--index-mesosphere);
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    background-color: black;
+    animation: pageLoad var(--speed-slow) var(--speed) var(--ease) forwards;
+  }
+}
+
 /* --- Smooth scroll + snapping --- */
+/* Disabled because it breaks "dynamic chrome" behaviour on iOS */
 
+/*
 html,
 body {
-  height: 100dvh;
+  height: 100svh;
   overflow: hidden;
 }
 
 main {
-  height: 100dvh;
+  height: 100svh;
   overflow: scroll;
-  scroll-snap-points-y: repeat(100dvh);
+  scroll-snap-points-y: repeat(100svh);
   scroll-snap-type: y proximity;
   scroll-behavior: smooth;
 }
 
 .section {
   position: relative;
-  width: 100dvw;
-  height: 100dvh;
   scroll-snap-align: start;
+}
+*/
+
+/* --- Components --- */
+
+.section {
+  width: 100dvw;
+  height: 100svh;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
   /*
     Required to prevent content from spilling over
     when on a very short height display.
   */
   overflow: hidden;
-
-  /* Background styles */
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: cover;
 }
 
 .section-interior {
@@ -126,34 +160,6 @@ main {
   }
 }
 
-/* --- Page load --- */
-/* TODO: Consider something better with `document.readystate`. */
-
-@keyframes pageLoad {
-  from {
-    opacity: 1;
-    visibility: visible;
-  }
-  to {
-    opacity: 0;
-    visibility: hidden;
-  }
-}
-
-body {
-  position: relative;
-
-  &::after {
-    content: '';
-    z-index: var(--index-outerspace);
-    position: fixed;
-    inset: 0;
-    pointer-events: none;
-    background-color: black;
-    animation: pageLoad var(--speed-slow) var(--speed) var(--ease) forwards;
-  }
-}
-
 /* --- Typography --- */
 
 .paragraph {

diff --git a/src/styles/reset.css b/src/styles/reset.css
@@ -95,7 +95,8 @@ html {
   text-rendering: geometricPrecision;
 }
 
-html:focus-within {
+html {
+  /* Scoping to `&:focus-within` does not work in Safari. */
   scroll-behavior: smooth;
 }