package.json

@@ -16,11 +16,8 @@
     "@astrojs/rss": "^4.0.7",
     "@astrojs/sitemap": "^3.1.6",
     "astro": "^4.15.4",
-    "autoprefixer": "^10.4.20",
-    "cssnano": "^7.0.6",
     "mdast-util-to-string": "^4.0.0",
     "reading-time": "^1.5.0",
-    "sass": "^1.78.0",
     "typescript": "^5.6.2"
   },
   "devDependencies": {

postcss.config.cjs

@@ -1,8 +0,0 @@
-module.exports = {
-	plugins: [
-		require("autoprefixer"),
-		require("cssnano")({
-			preset: "default",
-		}),
-	],
-};

src/components/Header.astro

@@ -4,6 +4,10 @@
 
 <header>
 	<nav>
+		<a href="/">Home</a>
+		<span>
+			<span>|</span>
 			<a href="/feed.xml">RSS</a>
+		</span>
 	</nav>
 </header>

src/layouts/BaseLayout.astro

@@ -1,7 +1,6 @@
 ---
 import Head from "../components/Head.astro";
 import Header from "../components/Header.astro";
-import "../scss/global.scss";
 
 const { title, description } = Astro.props;
 ---

src/scss/_framework.scss

@@ -1,242 +0,0 @@
-*,
-*::after,
-*::before {
-	box-sizing: border-box;
-	text-size-adjust: 100%;
-}
-
-html {
-	font-family: $font-family-base;
-	font-size: 62.5%;
-	min-height: 100%;
-	overflow-y: scroll;
-}
-
-body {
-	background-color: $color-bg;
-	color: $color-text;
-	font-size: $font-size-base;
-	font-synthesis: weight style small-caps;
-	font-weight: 400;
-	line-height: 1.5;
-	margin: auto;
-	max-width: 52em;
-	min-height: 100vh;
-	padding: 6em 4em 4em;
-	text-rendering: optimizelegibility;
-}
-
-@media (width <=684px) {
-	body {
-		font-size: $font-size-base * 0.85;
-		padding: 4em 1em 2em;
-	}
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-	font-weight: 700;
-	line-height: 1.1;
-	margin-bottom: 1.5rem;
-	margin-top: 3rem;
-	overflow-wrap: break-word;
-	word-break: break-word;
-	word-wrap: break-word;
-}
-
-h1 {
-	font-size: 2.35em;
-}
-
-h2 {
-	font-size: 2em;
-}
-
-h3 {
-	font-size: 1.75em;
-}
-
-h4 {
-	font-size: 1.5em;
-}
-
-h5 {
-	font-size: 1.25em;
-}
-
-h6 {
-	font-size: 1em;
-}
-
-p {
-	margin-bottom: 2.5rem;
-	margin-top: 0;
-}
-
-small,
-sub,
-sup {
-	font-size: 75%;
-}
-
-hr {
-	border-color: $color-blossom;
-}
-
-a {
-	color: $color-blossom;
-	text-decoration: inherit;
-	transition: color 0.25s;
-
-	&:visited {
-		color: $color-blossom;
-	}
-
-	&:active,
-	&:focus,
-	&:hover {
-		opacity: 0.5;
-	}
-}
-
-ul {
-	margin-bottom: 2.5rem;
-	margin-top: 0;
-	padding-left: 1.4em;
-}
-
-li {
-	margin-bottom: 0.4em;
-}
-
-blockquote {
-	background-color: $color-bg-alt;
-	border-left: 5px solid $color-blossom;
-	margin-bottom: 2.5rem;
-	margin-left: 0;
-	margin-right: 0;
-	padding: 0.8em 0.8em 0.8em 1em;
-}
-
-blockquote p {
-	margin-bottom: 0;
-}
-
-img,
-video {
-	display: block;
-	height: auto;
-	margin-bottom: 2.5rem;
-	margin-top: 0;
-	max-width: 100%;
-}
-
-pre {
-	background-color: $color-bg-alt;
-	border-radius: 4px;
-	border: 1px solid $color-bg-alt;
-	display: block;
-	font-size: 0.9em;
-	margin-bottom: 2.5rem;
-	margin-top: 0;
-	overflow-x: auto;
-	padding: 1em;
-}
-
-code,
-kbd,
-samp {
-	background-color: $color-bg-code;
-	border-radius: 4px;
-	font-size: 0.9em;
-	padding: 0 0.2em;
-	white-space: pre-wrap;
-}
-
-pre > code {
-	background-color: transparent;
-	font-size: 1em;
-	padding: 0;
-	white-space: pre;
-}
-
-table {
-	border-collapse: collapse;
-	text-align: justify;
-	width: 100%;
-}
-
-td,
-th {
-	border-bottom: 1px dashed $color-blossom;
-	padding: 0.5em;
-}
-
-textarea {
-	width: 100%;
-}
-
-.button,
-button,
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
-	background-color: $color-blossom;
-	border: 1px solid $color-blossom;
-	border-radius: 1px;
-	box-sizing: border-box;
-	color: $color-bg;
-	cursor: pointer;
-	display: inline-block;
-	padding: 5px 10px;
-	text-align: center;
-	text-decoration: none;
-	white-space: nowrap;
-
-	&[disabled] {
-		cursor: default;
-		opacity: 0.5;
-	}
-
-	&:focus:enabled,
-	&:hover:enabled {
-		background-color: $color-fade;
-		border-color: $color-fade;
-		color: $color-bg;
-		outline: 0;
-	}
-}
-
-textarea,
-select,
-input {
-	background-color: $color-bg-alt;
-	border: 1px solid $color-bg-alt;
-	border-radius: 4px;
-	box-shadow: none;
-	box-sizing: border-box;
-	color: $color-text;
-	margin-bottom: 10px;
-	padding: 6px 10px;
-
-	&:focus {
-		border: 1px solid $color-blossom;
-		outline: 0;
-	}
-}
-
-input[type="checkbox"]:focus {
-	outline: 1px dotted $color-blossom;
-}
-
-label,
-legend,
-fieldset {
-	display: block;
-	font-weight: 600;
-	margin-bottom: 0.5rem;
-}

src/scss/_navbar.scss

@@ -1,41 +0,0 @@
-header {
-	background-color: $color-bg;
-	border-bottom: 1px solid $color-header;
-	box-shadow: 0 5px 5px $color-bg;
-	left: 0;
-	line-height: 3.5em;
-	opacity: 0.975;
-	position: fixed;
-	right: 0;
-	top: 0;
-}
-
-nav {
-	margin: auto;
-	max-width: 60em;
-	padding: 0 4em;
-	text-align: right;
-
-	a {
-		color: $color-text;
-		padding: 0 1em;
-
-		&:visited {
-			color: $color-text;
-		}
-	}
-}
-
-@media (width <=684px) {
-	header {
-		box-shadow: none;
-	}
-
-	nav {
-		padding: 0 2em;
-
-		span {
-			display: none;
-		}
-	}
-}

src/scss/_print.scss

@@ -1,21 +0,0 @@
-@media print {
-	body {
-		padding: 0;
-	}
-
-	audio,
-	embed,
-	footer,
-	form,
-	header,
-	iframe,
-	nav,
-	object,
-	video {
-		display: none;
-	}
-
-	img {
-		max-width: 500px;
-	}
-}

src/scss/_variables.scss

@@ -1,22 +0,0 @@
-$color-bg: #212529;
-$color-bg-alt: hwb(0deg 0% 100% / 20%);
-$color-bg-code: #3b3d42;
-$color-blossom: #6da13f;
-$color-fade: #598332;
-$color-header: #1b1f22;
-$color-text: #dee2e6;
-$font-family-base:
-	"Jost",
-	-apple-system,
-	blinkmacsystemfont,
-	"Segoe UI",
-	roboto,
-	"Helvetica Neue",
-	arial,
-	"Noto Sans",
-	sans-serif,
-	"Apple Color Emoji",
-	"Segoe UI Emoji",
-	"Segoe UI Symbol",
-	"Noto Color Emoji";
-$font-size-base: 1.8rem;

src/scss/global.scss

@@ -1,7 +0,0 @@
-// Base
-@import "variables";
-@import "framework";
-@import "print";
-
-// Modules
-@import "navbar";