Add backdrop

src/assets/css/components/index.css

@@ -13,6 +13,7 @@
 @import url("./prisim.css");
 @import url("./recent-posts.css");
 @import url("./section.css");
+@import url("./site-backdrop.css");
 @import url("./site-footer.css");
 @import url("./site-header.css");
 @import url("./site-main.css");

src/assets/css/components/site-backdrop.css

@@ -0,0 +1,39 @@
+.site-backdrop {
+	--size: 80vmax;
+
+	height: var(--size);
+	left: calc(-1 * var(--size) / 2);
+	mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
+	mask-repeat: no-repeat;
+	mask-size: contain;
+	opacity: 0.1;
+	pointer-events: none;
+	position: fixed;
+	top: calc(-1 * var(--size) / 2);
+	transform: translate3d(50vw, 50vh, 0);
+	width: var(--size);
+	z-index: -1;
+}
+
+&[data-theme="light"] {
+
+	& .site-backdrop {
+		background-image: linear-gradient(
+			to bottom,
+			var(--color-indigo-500),
+			var(--color-indigo-700)
+		);
+	}
+}
+
+&[data-theme="dark"] {
+
+	& .site-backdrop {
+		background-image: linear-gradient(
+			to bottom,
+			var(--color-amber-500),
+			var(--color-amber-700)
+		);
+	}
+}
+

src/assets/css/global/colors.css

@@ -51,31 +51,4 @@
 	--color-indigo-700: 244.5, 57.9%, 50.6%;
 	--color-indigo-800: 243.7, 54.5%, 41.4%;
 	--color-indigo-900: 242.2, 47.4%, 34.3%;
-
-	/* Theme */
-	&[data-theme="dark"] {
-		--color-base: hsl(var(--color-gray-50));
-		--color-primary: hsl(var(--color-amber-500));
-		--color-accent: hsl(var(--color-gray-300));
-		--color-accent-background: hsl(var(--color-gray-800));
-		--color-accent-border: hsl(var(--color-gray-700));
-		--color-body: hsl(var(--color-gray-200));
-		--color-headings: hsl(var(--color-gray-50));
-		--color-background: hsl(var(--color-gray-900));
-		--color-gradient: linear-gradient(165deg, #f59e0b, #f39909, #ed8c06, #e37a05, #d96606, #ce5409, #c5460b, #c2410c);
-		--color-shadow: hsla(var(--color-amber-900), 0.5);
-	}
-
-	&[data-theme="light"] {
-		--color-base: hsl(var(--color-gray-cool-900));
-		--color-primary: hsl(var(--color-indigo-500));
-		--color-accent: hsl(var(--color-gray-cool-600));
-		--color-accent-background: hsl(var(--color-gray-cool-100));
-		--color-accent-border: hsl(var(--color-gray-300));
-		--color-body: hsl(var(--color-gray-cool-700));
-		--color-headings: hsl(var(--color-gray-cool-800));
-		--color-background: hsl(var(--color-gray-cool-50));
-		--color-gradient: linear-gradient(165deg, #6366f1, #6363f0, #645ced, #6552e9, #6745e4, #6a38df, #6c2ddb, #6d28d9);
-		--color-shadow: hsla(var(--color-indigo-900), 0.5);
-	}
 }

src/assets/css/global/mixins.css

@@ -8,6 +8,7 @@
     --color-headings: var(--color-gray-cool-800);
     --color-background: var(--color-gray-cool-50);
     --color-gradient: linear-gradient(165deg, #6366f1, #6363f0, #645ced, #6552e9, #6745e4, #6a38df, #6c2ddb, #6d28d9);
+	--color-gradient-reverse: linear-gradient(165deg, #f59e0b, #f39909, #ed8c06, #e37a05, #d96606, #ce5409, #c5460b, #c2410c);
     --color-shadow: var(--color-indigo-900);
 }
 
@@ -21,5 +22,6 @@
     --color-headings: var(--color-gray-50);
     --color-background: var(--color-gray-900);
     --color-gradient: linear-gradient(165deg, #f59e0b, #f39909, #ed8c06, #e37a05, #d96606, #ce5409, #c5460b, #c2410c);
+	--color-gradient-reverse: linear-gradient(165deg, #6366f1, #6363f0, #645ced, #6552e9, #6745e4, #6a38df, #6c2ddb, #6d28d9);
     --color-shadow: var(--color-amber-900);
-}
+}

src/assets/js/backdrop.js

@@ -0,0 +1,24 @@
+import { debounce, prefersReducedMotion } from './utils'
+
+function init () {
+  const isPrefersReducedMotion = prefersReducedMotion()
+
+  if (isPrefersReducedMotion) {
+    return
+  }
+
+  const backdrop = document.querySelector('.site-backdrop')
+
+  const handleDocumentPointerMove = debounce((event) => {
+    const { clientX, clientY } = event
+
+    backdrop.animate(
+      { transform: `translate3d(${clientX}px, ${clientY}px, 0)` },
+      { duration: 2000, fill: 'forwards', ease: 'ease-out' }
+    )
+  })
+
+  document.addEventListener('pointermove', handleDocumentPointerMove)
+}
+
+init()

src/assets/js/index.js

@@ -1,3 +1,4 @@
+import './backdrop'
 import './base-header'
 import './heading-links'
 import './theme-switcher'

src/assets/js/utils.js

@@ -25,3 +25,7 @@ export function debounce (fn) {
     })
   }
 }
+
+export function prefersReducedMotion () {
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches
+}

src/layouts/Base.astro

@@ -34,6 +34,7 @@ const {
         />
     </head>
     <body class={bodyClass} data-swup-scroll-container>
+		<div class="site-backdrop"></div>
         <SiteSVG />
         <SiteHeader />
         <main id="main" class="site-main">