add background gradients (from mshr.app) and fix some small issues

imdevarsh · imdevarsh · commit f72540b33f80 · 2025-07-11T18:04:24.000+12:00
diff --git a/.gitignore b/.gitignore
@@ -28,3 +28,5 @@ pnpm-debug.log*
 /dataSources/
 /dataSources.local.xml
 *.iml
+
+.wrangler/
diff --git a/bun.lockb b/bun.lockb
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -14,11 +14,7 @@ import HeaderLink from "./HeaderLink.astro";
 <style>
   header {
     border-radius: 99999px;
-    margin: 1rem;
-    padding: 0 1.5em;
-    background: white;
-    border: 2px solid rgba(var(--black), 15%);
-    box-shadow: 0 2px 8px rgba(var(--black), 5%);
+    padding: 0.5em 2.5em;
   }
   h2 {
     margin: 0;
diff --git a/src/layouts/Blog.astro b/src/layouts/Blog.astro
@@ -1,15 +1,17 @@
 ---
+import type { CollectionEntry } from "astro:content";
 import BaseHead from "../components/BaseHead.astro";
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 import FormattedDate from "../components/FormattedDate.astro";
 import Giscus from "../components/Giscus.astro";
 
+type Props = CollectionEntry<"blog">["data"];
+
 const { title, description, pubDate } = Astro.props;
 ---
 
 <html lang="en">
-  <!--suppress HtmlRequiredTitleElement -->
   <head>
     <BaseHead title={title} description={description} />
   </head>
diff --git a/src/layouts/Main.astro b/src/layouts/Main.astro
@@ -3,20 +3,26 @@ import BaseHead from "../components/BaseHead.astro";
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 
+type Props = {
+  title: string;
+  description?: string;
+  header?: boolean;
+};
+
 const { title } = Astro.props;
 const description =
   Astro.props.description ||
   "My website where I write about things that interest me.";
+const header = Astro.props.header ?? true;
 ---
 
-<html lang="en">
-  <!--suppress HtmlRequiredTitleElement -->
+<html lang="en" style="">
   <head>
     <BaseHead title={title} description={description} />
   </head>
   <body>
-    <div>
-      <Header />
+    <div class={title === "Home" ? "gradient-1" : "gradient-2"}>
+      {header && <Header />}
       <main>
         <slot />
       </main>
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
@@ -1,5 +1,5 @@
 ---
-import { getCollection } from "astro:content";
+import { type CollectionEntry, getCollection } from "astro:content";
 import Blog from "../../layouts/Blog.astro";
 
 export const prerender = true;
@@ -12,6 +12,8 @@ export async function getStaticPaths() {
   }));
 }
 
+type Props = CollectionEntry<"blog">;
+
 const post = Astro.props;
 const { Content } = await post.render();
 ---
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -3,16 +3,17 @@ import Main from "../layouts/Main.astro";
 ---
 
 <Main title="Home">
-  <h1>Hello! 👋</h1>
-  <p>I'm Devarsh!</p>
-  <p>
-    I enjoy programming and computers. That is why I have made this website,
-    built with <a href="https://astro.build">Astro</a>, to share stuff that you
-    may find interesting!
-  </p>
-  <p>
-    Feel free to take a look around my website! In the footer are ways to talk
-    to me.
-  </p>
-  <p>As I just revamped my website, more things will be added in the future!</p>
+  <section>
+    <h1>Hello! 👋</h1>
+    <p>I'm Devarsh!</p>
+    <p>
+      I enjoy programming and computers. That is why I have made this website,
+      built with <a href="https://astro.build">Astro</a>, to share stuff that
+      you may find interesting!
+    </p>
+    <p>
+      Feel free to take a look around my website! In the footer are ways to talk
+      to me.
+    </p>
+  </section>
 </Main>
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -66,6 +66,7 @@ main {
   max-width: calc(100% - 2em);
   margin: auto;
   padding: 3em 1em;
+  min-height: 35vh;
 }
 
 h1,
@@ -193,3 +194,84 @@ hr {
   /* added line to stop words getting smushed together (as they go onto separate lines and some screen readers do not understand line feeds as a space */
   white-space: nowrap;
 }
+
+/* Following gradients generated by https://mshr.app */
+
+.gradient-1 {
+  background-color: hsla(238, 0%, 100%, 1);
+  background-image:
+    url("data:image/svg+xml,%3Csvg viewBox='0 0 1052 1052' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
+    radial-gradient(
+      circle at 4% 10%,
+      hsla(198, 80%, 58%, 0.35) 4.380688239697029%,
+      transparent 33.03580475382234%
+    ),
+    radial-gradient(
+      circle at 29% 10%,
+      hsla(270, 77%, 74%, 0.35) 3.1210986267166043%,
+      transparent 33.35643321544201%
+    ),
+    radial-gradient(
+      circle at 42% 5%,
+      hsla(220, 77%, 74%, 0.35) 5.506816480693434%,
+      transparent 40%
+    ),
+    radial-gradient(
+      circle at 59% 5%,
+      hsla(161, 77%, 74%, 0.35) 5.3936243936243935%,
+      transparent 40%
+    ),
+    radial-gradient(
+      circle at 80% 0%,
+      hsla(96, 77%, 74%, 0.35) 3.1210986267166043%,
+      transparent 21.611228303122836%
+    ),
+    radial-gradient(
+      circle at 91% 21%,
+      hsla(96, 91%, 33%, 0.35) 3.1210986267166043%,
+      transparent 21.611228303122836%
+    ),
+    radial-gradient(
+      circle at 67% 14%,
+      hsla(261.1111111111111, 73%, 65%, 0.35) 3.1210986267166043%,
+      transparent 21.611228303122836%
+    );
+  background-blend-mode:
+    overlay, normal, normal, normal, normal, normal, normal, normal;
+}
+
+.gradient-2 {
+  background-color: hsla(204, 0%, 100%, 1);
+  background-image:
+    radial-gradient(
+      circle at 0% 0%,
+      hsla(231.61764705882354, 100%, 67%, 0.35) 15.931854861359255%,
+      transparent 34.89027460829219%
+    ),
+    radial-gradient(
+      circle at 44% 4%,
+      hsla(301.76470588235304, 92%, 62%, 0.35) 7.688609714732761%,
+      transparent 40%
+    ),
+    radial-gradient(
+      circle at 40% 0%,
+      hsla(149.5588235294118, 100%, 80%, 0.35) 3.1210986267166043%,
+      transparent 40%
+    ),
+    radial-gradient(
+      circle at 60% 0%,
+      hsla(127.0588235294118, 76%, 49%, 0.35) 3.1210986267166043%,
+      transparent 40%
+    ),
+    radial-gradient(
+      circle at 80% 0%,
+      hsla(221.02941176470588, 100%, 69%, 0.35) 3.1210986267166043%,
+      transparent 40%
+    ),
+    radial-gradient(
+      circle at 100% 0%,
+      hsla(123.08823529411762, 77%, 74%, 0.35) 3%,
+      transparent 40%
+    );
+  background-blend-mode: normal, normal, normal, normal, normal, normal;
+}
