1 files changed, 92 insertions, 18 deletions
diff --git a/examples/blog/public/global.scss b/examples/blog/public/global.scss
index d5891f6b4..c0d03a8fd 100644
--- a/examples/blog/public/global.scss
+++ b/examples/blog/public/global.scss
@@ -1,25 +1,99 @@
-body {
-  font-family: 'Spectral', serif;
-  line-height: 1.4;
+: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;
 }
 
-p {
-  line-height: 2;
+* {
+    box-sizing: border-box;
+    margin: 0;
 }
-
-a {
-  color: crimson;
+html {
+    display: grid;
+    width: 100%;
+    max-width: 100vw;
+    overflow: hidden;
+    height: 100%;
+    background-color: #000014;
 }
-
-img {
-  max-width: 100%;
-  height: auto;
+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.320, 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);
+        }
+    }
 
-.wrapper {
-  max-width: 60rem;
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: 2rem;
-  padding-right: 2rem;
+    &::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.320, 1),
+            background 120ms cubic-bezier(0.23, 1, 0.320, 1);
+        z-index: -1;
+    }
 }