Update postcss.config.cjs to include cssnano preset

package.json

@@ -16,8 +16,11 @@
     "@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

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

src/components/Header.astro

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

src/layouts/BaseLayout.astro

@@ -1,6 +1,7 @@
 ---
 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

@@ -0,0 +1,242 @@
+*,
+*::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

@@ -0,0 +1,41 @@
+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

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

src/scss/_variables.scss

@@ -0,0 +1,22 @@
+$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

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