Updated styling

public/logo.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="89" height="45">
+
+<defs>
+    <mask id="eye">
+        <circle cx="0" cy="0" r="13" fill="white"/>
+        <circle cx="0" cy="0" r="8" fill="black"/>
+        <circle cx="0" cy="0" r="3" fill="white"/>
+    </mask>
+</defs>
+
+<path d="M-16 -11 L10 -11 C18 -11, 18 -25, 10 -25 L10 -21 C13 -21, 13 -15, 10 -15  L-16 -15 Z" fill="#FFFFFF" transform="translate(13 25)" />
+<circle cx="0" cy="0" r="13" mask="url(#eye)" fill="white" transform="translate(13 25)"/>
+
+<path d="M-16 -11 L10 -11 C18 -11, 18 -25, 10 -25 L10 -21 C13 -21, 13 -15, 10 -15  L-16 -15 Z" fill="#FFFFFF" transform="translate(73 25)" />
+<circle cx="0" cy="0" r="13" mask="url(#eye)" fill="#FFFFFF" transform="translate(73 25)"/>
+
+<path d="M0 3 L25 3 L25 0 L0 0 Z" fill="#FFFFFF" transform="translate(27, 42)" />
+</svg>

src/components/Footer.astro

@@ -23,7 +23,7 @@ const today = new Date();
 </footer>
 <style>
 	footer {
-		background-color: var(--background);
+		background-color: var(--background-soft);
 		padding: 1rem 1rem 2rem;
 		width: 100%;
 	}

src/components/Header.astro

@@ -5,7 +5,9 @@ import HeaderLink from "./HeaderLink.astro";
 
 <header>
 	<nav>
-		<a class="logo" href="/"><img src="/logo.png" alt="ಠ_ಠ" /></a>
+	  <a class="logo" href="/">
+	    <img src="/logo.svg" alt="ಠ_ಠ" />
+	  </a>
 		<div class="internal-links">
 			<HeaderLink href="/">Home</HeaderLink>
 			<HeaderLink href="/projects">Projects</HeaderLink>
@@ -36,8 +38,7 @@ import HeaderLink from "./HeaderLink.astro";
 		margin: 0;
 		padding: 0 1em;
 		width: 100%;
-		background: var(--background);
-		box-shadow: var(--standard-box-shadow);
+		background-color: var(--background-soft);
 	}
 
 	header .logo {
@@ -50,8 +51,7 @@ import HeaderLink from "./HeaderLink.astro";
 	}
 
 	header .logo img {
-		width: 96px;
-		height: 96px;
+		height: 24pt;
 	}
 
 	nav {
@@ -61,7 +61,7 @@ import HeaderLink from "./HeaderLink.astro";
 	}
 
 	nav a {
-		padding: 1em 0.5em;
+		padding: .4em 0.5em;
 		color: var(--text);
 		border-bottom: 4px solid transparent;
 		text-decoration: none;
@@ -76,13 +76,14 @@ import HeaderLink from "./HeaderLink.astro";
 	.social-links a {
 		display: flex;
 	}
+
 	@media (max-width: 720px) {
-		.logo {
-			display: none;
+	  header .logo img {
+	    height: 18pt;
 	  }
 
-		.logo img {
-			display: none;
+	  nav {
+	    font-size: 16px;
 	  }
 	}
 </style>

src/components/Main.astro

@@ -0,0 +1,72 @@
+---
+import { ClientRouter } from "astro:transitions";
+---
+<canvas id="dotted-background" transition:persist></canvas>
+<main transition:name="main" transition:animate="slide">
+  <slot />
+</main>
+
+<style>
+  canvas#dotted-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: -1;
+  }
+</style>
+
+<script type="module" transition:persist>
+  let canvas = document.getElementById("dotted-background");
+  let ctx = canvas.getContext("2d");
+
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+
+  let gap = 20;
+
+  let mouse = { x: canvas.width / 2, y: canvas.height / 2 };
+  document.addEventListener("mousemove", (e) => {
+    mouse.x = e.clientX;
+    mouse.y = e.clientY;
+  });
+
+  let distanceThreshold = .2;
+  let baseOpacity = .05;
+  let baseRadius = 1;
+
+  const draw = () => {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    for (let x = gap; x < canvas.width; x += gap) {
+      for (let y = gap; y < canvas.height; y += gap) {
+	// mouse distance
+	const mouseDistance = Math.sqrt(
+	  Math.pow(mouse.x - x, 2) +
+	  Math.pow(mouse.y - y, 2)
+	);
+
+	// normalized mouse distance
+	const normalizedMouseDistance = mouseDistance / Math.sqrt(
+	  Math.pow(canvas.width, 2) +
+	  Math.pow(canvas.height, 2)
+	);
+
+	const opacity = Math.max(baseOpacity, .4 - normalizedMouseDistance / distanceThreshold);
+	const radius = baseRadius + Math.max(0, 1 - normalizedMouseDistance / distanceThreshold);
+
+	// draw dots
+	ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`;
+	ctx.beginPath();
+	ctx.arc(x, y, radius, 0, Math.PI * 2);
+	ctx.fill();
+	ctx.closePath();
+      }
+    }
+  };
+
+  setInterval(() => {
+    draw();
+  }, 1000 / 60);
+</script>

src/layouts/BlogPost.astro

@@ -2,6 +2,7 @@
 import type { CollectionEntry } from "astro:content";
 import BaseHead from "../components/BaseHead.astro";
 import Header from "../components/Header.astro";
+import Main from "../components/Main.astro";
 import Footer from "../components/Footer.astro";
 import FormattedDate from "../components/FormattedDate.astro";
 
@@ -100,7 +101,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 
 	<body>
 		<Header />
-		<main>
+		<Main>
 			<article>
 				<div class="hero-image">
 					{
@@ -132,7 +133,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 					<slot />
 				</div>
 			</article>
-		</main>
+		</Main>
 		<Footer />
 	</body>
 </html>

src/pages/about.astro

@@ -1,6 +1,7 @@
 ---
 import BaseHead from "../components/BaseHead.astro";
 import Header from "../components/Header.astro";
+import Main from "../components/Main.astro";
 import Footer from "../components/Footer.astro";
 import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
 ---
@@ -12,13 +13,13 @@ import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
 	</head>
 	<body>
 		<Header />
-		<main>
+		<Main>
 			<h1>Anton Pogrebnjak</h1>
             <p>
                 Really, I don't have much to tell you about myself. Just look at the amazing stuff I've done and written about. That should suffice.
             </p>
             <p style="float: right; text-align: end;">Kind regards,<br>Anton</p>
-		</main>
+		</Main>
 		<Footer />
 	</body>
 

src/pages/blog/index.astro

@@ -1,6 +1,7 @@
 ---
 import BaseHead from '../../components/BaseHead.astro';
 import Header from '../../components/Header.astro';
+import Main from '../../components/Main.astro';
 import Footer from '../../components/Footer.astro';
 import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
 import { getCollection } from 'astro:content';
@@ -19,13 +20,13 @@ const posts: Post[] = (await getCollection('blog')).map(convertPost).sort(
 	</head>
 	<body>
 		<Header />
-		<main>
+		<Main>
 			{posts.length === 0 ? (
 				<h1 style="opacity: .5; user-select: none;">No posts yet &#128539;</h1>
 			) : (
 				<Showcase collection="blog" posts={posts} />
 			)}
-		</main>
+		</Main>
 		<Footer />
 	</body>
 </html>

src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import BaseHead from "../components/BaseHead.astro";
 import Header from "../components/Header.astro";
+import Main from "../components/Main.astro";
 import Footer from "../components/Footer.astro";
 import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
 import Showcase from "../components/Showcase.astro";
@@ -19,7 +20,7 @@ const posts: Post[] = (await getCollection("projects"))
 	</head>
 	<body>
 		<Header />
-		<main>
+		<Main>
 			<section id="welcome">
 				<h1>Hi &#128075;, my name is <a href="/about">Anton</a></h1>
 				<h2 class="typeout">
@@ -34,9 +35,9 @@ const posts: Post[] = (await getCollection("projects"))
 			</section>
 
 			<section id="projects">
-				<Showcase color="black" collection="projects" posts={posts} />
+				<Showcase color="var(--text)" collection="projects" posts={posts} />
 			</section>
-		</main>
+		</Main>
 		<Footer />
 	</body><script>
 		const typeout = document.querySelectorAll(".typeout");
@@ -58,13 +59,6 @@ const posts: Post[] = (await getCollection("projects"))
 	</script>
 
 	<style>
-		main {
-			width: 100%;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-		}
-
 		section {
 			padding: 2rem;
 			border-radius: .75em;
@@ -82,12 +76,9 @@ const posts: Post[] = (await getCollection("projects"))
 		}
 
 		#projects {
-			background-color: var(--primary);
-			color: var(--background);
-		}
-
-		#projects .title {
-			color: var(--background);
+		  border: 2px solid var(--primary);
+		  border-radius: .75em;
+		  color: var(--text);
 		}
 
 		.buttons {
@@ -110,5 +101,21 @@ const posts: Post[] = (await getCollection("projects"))
 			background-color: var(--accent);
 			transition: background-color 0.2s;
 		}
+
+		@media (max-width: 720px) {
+			max-width: 100%;
+
+			section {
+				padding: 1rem;
+			}
+
+			#welcome h1 {
+				font-size: 1.5rem;
+			}
+
+			#welcome h2 {
+				font-size: 1rem;
+			}
+		}
 	</style>
 </html>

src/pages/projects/index.astro

@@ -1,6 +1,7 @@
 ---
 import BaseHead from '../../components/BaseHead.astro';
 import Header from '../../components/Header.astro';
+import Main from '../../components/Main.astro';
 import Footer from '../../components/Footer.astro';
 import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
 import { getCollection } from 'astro:content';
@@ -19,13 +20,13 @@ const posts: Post[] = (await getCollection('projects')).map(convertPost).sort(
 	</head>
 	<body>
 		<Header />
-		<main>
+		<Main>
 			{posts.length === 0 ? (
 				<h1 style="opacity: .5; user-select: none;">No posts yet &#128539;</h1>
 			) : (
 				<Showcase collection="projects" posts={posts} />
 			)}
-		</main>
+		</Main>
 		<Footer />
 	</body>
 </html>

src/styles/global.css

@@ -28,6 +28,7 @@
 	--text: #ffffff;
 	--text-soft: #ddd;
 	--background: #121212;
+	--background-soft: #212121;
 	--primary: #2df598;
 	--primary-soft: #22cf7e;
 	--secondary: #222021;
@@ -69,16 +70,6 @@ b {
 	font-weight: 700;
 }
 
-a.more {
-	display: block;
-	margin-top: 2em;
-	font-weight: bold;
-}
-
-.indent {
-	margin-left: 2em;
-}
-
 i {
 	font-size: 2rem;
 	color: #ffffff;
@@ -87,6 +78,10 @@ i {
 
 main {
 	position: relative;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
 	width: 60vw;
 }
 
@@ -142,16 +137,6 @@ code {
 	color: var(--accent);
 }
 
-.wink::after {
-	content: "ಠ_ಠ";
-	font-family: "Ubuntu";
-}
-
-.wink:hover::after {
-	content: "ಠ‿↼";
-	font-family: "Ubuntu";
-}
-
 textarea {
 	width: 100%;
 	font-size: 16px;
@@ -207,9 +192,14 @@ hr {
 	body {
 		font-size: 18px;
 	}
+	
+	.logo img {
+		height: 18px;
+	}
+
 	main {
 		width: 100vw;
-		padding: 1em;
+		padding: 8px;
 	}
 
 	header .logo {