3 files changed, 95 insertions, 93 deletions
diff --git a/examples/blog/public/blog.scss b/examples/blog/public/blog.css
index 2cee5a81a..2cee5a81a 100644
--- a/examples/blog/public/blog.scss
+++ b/examples/blog/public/blog.css
diff --git a/examples/blog/public/global.css b/examples/blog/public/global.css
new file mode 100644
index 000000000..3566fce27
--- /dev/null
+++ b/examples/blog/public/global.css
@@ -0,0 +1,95 @@
+:root {
+	--font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+	--font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
+	--color-green: #17c083;
+}
+
+* {
+	box-sizing: border-box;
+	margin: 0;
+}
+
+html {
+	display: grid;
+	width: 100%;
+	max-width: 100vw;
+	overflow: hidden;
+	height: 100%;
+	background-color: #000014;
+}
+
+html,
+body {
+	padding: 0;
+	font-size: clamp(14px, calc(1rem + (3vw - 1.2rem)), 20px);
+	font-family: var(--font-sans);
+	font-weight: 400;
+	background-image: radial-gradient(87.7% 87.7% at 85.6% 18.14%, #111827 0%, #000014 100%);
+	background-repeat: no-repeat;
+	color: #f3f4f6;
+}
+
+body {
+	position: relative;
+	display: grid;
+	place-items: center;
+	min-width: 100%;
+	max-width: 100vw;
+	min-height: 100vh;
+	overflow-x: hidden;
+}
+
+.visually-hidden {
+	clip: rect(0 0 0 0);
+	clip-path: inset(50%);
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
+}
+
+a {
+	position: relative;
+	text-decoration: none;
+	color: var(--color-green);
+	padding: 0.05em 0.125em;
+	margin: -0.05em -0.125em;
+	transition: color 120ms cubic-bezier(0.23, 1, 0.32, 1);
+	z-index: 0;
+	display: inline-block;
+}
+
+a:hover, a:focus {
+	color: black;
+}
+
+a:hover::before, a:focus::before {
+	transform: scaleY(1);
+	background: var(--color-green);
+}
+
+a:visited {
+	color: var(--color-green);
+}
+
+a:visited:hover, a:visited:focus {
+	color: black;
+}
+
+a::before {
+	transform-origin: bottom center;
+	content: '';
+	display: block;
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	inset: 0;
+	background: var(--color-green);
+	pointer-events: none;
+	transform: scaleY(0.05);
+	transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background 120ms cubic-bezier(0.23, 1, 0.32, 1);
+	z-index: -1;
+}
+\ No newline at end of file
diff --git a/examples/blog/public/global.scss b/examples/blog/public/global.scss
deleted file mode 100644
index 5aea52933..000000000
--- a/examples/blog/public/global.scss
+++ /dev/null
@@ -1,93 +0,0 @@
-:root {
-  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  --font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',
-    'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
-  --color-green: #17c083;
-}
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-}
-html {
-  display: grid;
-  width: 100%;
-  max-width: 100vw;
-  overflow: hidden;
-  height: 100%;
-  background-color: #000014;
-}
-html,
-body {
-  padding: 0;
-  font-size: clamp(14px, calc(1rem + (3vw - 1.2rem)), 20px);
-  font-family: var(--font-sans);
-  font-weight: 400;
-  background-image: radial-gradient(87.7% 87.7% at 85.6% 18.14%, #111827 0%, #000014 100%);
-  background-repeat: no-repeat;
-  color: #f3f4f6;
-}
-body {
-  position: relative;
-  display: grid;
-  place-items: center;
-  min-width: 100%;
-  max-width: 100vw;
-  min-height: 100vh;
-  overflow-x: hidden;
-}
-.visually-hidden {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-a {
-  position: relative;
-  text-decoration: none;
-  color: var(--color-green);
-  padding: 0.05em 0.125em;
-  margin: -0.05em -0.125em;
-  transition: color 120ms cubic-bezier(0.23, 1, 0.32, 1);
-  z-index: 0;
-  display: inline-block;
-
-  &:hover,
-  &:focus {
-    color: rgba(0, 0, 0, 1);
-
-    &::before {
-      transform: scaleY(1);
-      background: var(--color-green);
-    }
-  }
-
-  &:visited {
-    // color: var(--color-green);
-    color: var(--color-green);
-    &:hover,
-    &:focus {
-      color: rgba(0, 0, 0, 1);
-    }
-  }
-
-  &::before {
-    transform-origin: bottom center;
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    inset: 0;
-    background: var(--color-green);
-    pointer-events: none;
-    transform: scaleY(0.05);
-    transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background 120ms cubic-bezier(0.23, 1, 0.32, 1);
-    z-index: -1;
-  }
-}