glassmorphism

Xanazf · Nov 12, 2024 · 4fed33a · 4fed33a
1 parent 8013994
commit 4fed33a
Show file tree

Hide file tree

Showing 9 changed files with 936 additions and 110 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -8,6 +8,14 @@ import { markdownConfig } from "./src/config/io/markdown.ts";
 
 // https://astro.build/config
 export default defineConfig({
+  vite: {
+    css: {
+      transformer: "lightningcss",
+    },
+    build: {
+      cssMinify: "lightningcss",
+    },
+  },
   markdown: markdownConfig,
   integrations: [
     solidJs({

diff --git a/package.json b/package.json
@@ -15,22 +15,22 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/check": "^0.9.4",
     "@astrojs/mdx": "^3.1.8",
     "@astrojs/solid-js": "^4.4.2",
-    "@pagefind/default-ui": "^1.1.1",
     "astro": "^4.16.6",
     "astro-breadcrumbs": "^2.3.1",
     "astro-icon": "^1.1.1",
     "node": "npm:23.0.0",
     "remark-github-blockquote-alert": "^1.2.1",
     "solid-devtools": "^0.30.1",
     "solid-js": "^1.8.18",
-    "typescript": "^5.5.3"
+    "typescript": "^5.6.3"
   },
   "devDependencies": {
     "@astrojs/ts-plugin": "^1.10.3",
     "@biomejs/biome": "^1.8.3",
     "@types/node": "^20.14.11",
-    "pagefind": "^1.1.1"
+    "lightningcss": "^1.28.1"
   }
 }
diff --git a/src/components/cards/ProjectCard.module.css b/src/components/cards/ProjectCard.module.css
@@ -23,5 +23,6 @@
 @media (min-width: 65rem) {
   .project-card {
     width: 12rem;
+    margin: unset;
   }
 }
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
@@ -16,8 +16,12 @@ const { title, description } = Astro.props;
     <Head description={description} title={title} />
   </head>
   <body class="baselayout">
-    <Header/>
-    <div class="hr-neon"/>
-    <slot />
+    <div class="viewport">
+      <Header/>
+      <div class="hr-neon"/>
+      <main class="content">
+        <slot />
+      </main>
+    </div>
   </body>
 </html>
diff --git a/src/styles/backgrounds.css b/src/styles/backgrounds.css
@@ -0,0 +1,61 @@
+body.baselayout {
+  &::after {
+    position: fixed;
+    content: "";
+    inset: 0;
+    background-image: repeating-linear-gradient(
+      45deg,
+      var(--main-hsl-0),
+      var(--main-hsl-1),
+      var(--main-hsl-2),
+      var(--main-hsl-3),
+      var(--main-hsl-4),
+      var(--main-hsl-5),
+      var(--main-hsl-4),
+      var(--main-hsl-3),
+      var(--main-hsl-2),
+      var(--main-hsl-1),
+      var(--main-hsl-0)
+    );
+    background-size: 100% 400vh;
+    animation: scroll-up 30s linear infinite;
+    z-index: -2;
+    opacity: 0.45;
+  }
+  &::before {
+    position: fixed;
+    content: "";
+    inset: 0;
+    background-image: radial-gradient(transparent, #000000f0);
+    z-index: -1;
+  }
+}
+
+.viewport {
+  &::before {
+    position: fixed;
+    inset: 0;
+    content: "";
+    background: transparent;
+    backdrop-filter: blur(calc(1px * pow(10, 2)));
+    z-index: -1;
+  }
+  &::after {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: -2rem;
+    right: -2rem;
+    content: "";
+    background-color: hsla(0 3 6 / 0.45);
+    background-image: radial-gradient(transparent, #000000f0);
+    z-index: 0;
+  }
+}
+
+@media (max-width: 65rem) {
+  .viewport::after {
+    position: fixed;
+    inset: 0;
+  }
+}
diff --git a/src/styles/config/animations.css b/src/styles/config/animations.css
@@ -0,0 +1,26 @@
+@keyframes scroll-up {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 0 calc(100% - 100vh);
+  }
+}
+
+@keyframes scroll-up-down {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 0 100%;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
diff --git a/src/styles/config/index.css b/src/styles/config/index.css
@@ -17,6 +17,29 @@
 
   color-scheme: dark;
 
+  --main-hsl-0: hsl(245 91 25);
+  --main-hsl-1: hsl(243 81 36);
+  --main-hsl-2: hsl(306 68 34);
+  --main-hsl-3: hsl(332 87 42);
+  --main-hsl-4: hsl(344 100 50);
+  --main-hsl-5: hsl(345 100 43);
+
+  --main-hue-0: 245;
+  --main-hue-1: 243;
+  --main-hue-2: 306;
+  --main-hue-3: 332;
+  --main-hue-4: 344;
+  --main-hue-5: 345;
+
+  --main-hsl-val-0: 245 91 25;
+  --main-hsl-val-1: 243 81 36;
+  --main-hsl-val-2: 306 68 34;
+  --main-hsl-val-3: 332 87 42;
+  --main-hsl-val-4: 344 100 50;
+  --main-hsl-val-5: 345 100 43;
+
+  --translucency-image: url("https://images.unsplash.com/photo-1707494966495-a2cc8c1dac1f?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
+
   --bg-hue: 240;
   --bg-sl: 75 5;
   --font-color: 175 50 96;
@@ -46,9 +69,6 @@
 
   --info-primary: var(--info-hue) var(--primary-sl);
   --info-accent: var(--info-hue) var(--accent-sl);
-
-  background-color: hsl(var(--bg));
-  color: hsl(var(--font-color));
 }
 
 body {

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -1,6 +1,9 @@
 @import "remark-github-blockquote-alert/alert.css";
 @import "./config/index.css";
 @import "./config/reusable.css";
+@import "./config/animations.css";
+
+@import "./backgrounds.css";
 
 header {
   position: sticky;
@@ -18,47 +21,42 @@ footer {
 
 .baselayout {
   margin: auto;
+  color: hsl(var(--font-color));
+  z-index: 0;
 }
 
 a {
   all: unset;
   cursor: pointer;
 }
 
+.viewport {
+  position: relative;
+  height: 100svh;
+  z-index: 1;
+}
+
+.content {
+  z-index: 2;
+}
+
 .hr-neon {
   width: 75%;
   margin: auto;
   height: 1px;
   position: relative;
+  z-index: 1;
 
   &::before {
     content: "";
     position: absolute;
-    inset: -1px;
-    border-radius: 100vh;
+    inset: 0px;
     background: linear-gradient(
       90deg,
-      hsla(var(--neon) / 0.9) 0%,
+      hsla(var(--main-hsl-val-2) / 0.9) 20%,
       white 50%,
-      hsla(var(--neon) / 0.9) 100%
-    );
-    box-shadow: hsla(var(--neon)) 0 54px 55px, hsla(var(--neon)) 0
-      0 30px, hsla(var(--neon)) 0 0 6px, hsla(var(--neon)) 0 0 5px;
-  }
-
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    height: 10rem;
-    width: 100%;
-    background: linear-gradient(
-      180deg,
-      hsla(var(--neon) / 0.21) 0%,
-      hsla(var(--bg) / 0.7) 50%,
-      hsla(var(--bg) / 1) 100%
+      hsla(var(--main-hsl-val-2) / 0.9) 80%
     );
-    filter: blur(1.5rem) saturate(120%);
   }
 }
 
@@ -202,6 +200,7 @@ h2 {
   }
 
   .main-projects {
+    flex-direction: row;
     padding-left: 3rem;
   }
 }