added first article

public/css/bundle.css

@@ -0,0 +1,117 @@
+/* See https://codeberg.org/lucajunge/css-reset for details */
+@import url(./reset.css);
+
+/* Custom fonts */
+@import url(./fonts.css);
+
+:root {
+	--font-family: "Lilita One", -apple-system, system-ui, sans-serif;
+	--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono,
+		Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono,
+		Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New,
+		Courier, monospace;
+}
+
+:root {
+	--background-color: #363d4a;
+	--dark-background-color: hsl(219, 16%, 20%);
+	--accent-color: #70bafa;
+
+	--accent-red: #ffaaaa;
+	--accent-node3d: #ffaaaa;
+
+	--accent-green: #aaffaa;
+	--accent-control: #aaffaa;
+
+	--accent-blue: #aaaaff;
+	--accent-node2d: #aaaaff;
+
+	--accent-yellow: #ffffaa;
+
+	--aceent-purple: #c25bff;
+	--accent-media: #c25bff;
+
+	--white: #eeeeee;
+	--dark-white: #cccccc;
+}
+
+html,
+body {
+	font-family: var(--font-family);
+	background-color: var(--background-color);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	color: var(--accent-color);
+}
+
+.header {
+	padding: 1rem;
+	background-color: var(--dark-background-color);
+	display: flex;
+}
+
+.recent-posts-container {
+	margin: 12px 12px;
+	display: flex;
+	justify-content: flex-start;
+	gap: 12px;
+}
+
+.highlight-card {
+	max-width: 24rem;
+	border-radius: 12px;
+	display: flex;
+	padding: 14px;
+	justify-content: stretch;
+	background-color: var(--dark-background-color);
+}
+
+.highlight-card-header {
+	display: flex;
+	column-gap: 10px;
+	justify-content: space-between;
+	padding-bottom: 8px;
+}
+
+.highlight-card img {
+	border-radius: 16px;
+	width: 100%;
+	height: 8rem;
+	object-fit: cover;
+	display: inline-block;
+	box-shadow: inset 0px 0px 32px 32px #000000;
+}
+
+.highlight-card a {
+	color: unset;
+	color: var(--white);
+	width: 100%;
+	text-decoration: none;
+}
+
+.highlight-card-button {
+	border-radius: 8px;
+	margin: 8px 0px 0px 0px;
+	padding: 4px 8px;
+	cursor: pointer;
+	background-color: var(--accent-color);
+	outline: none;
+}
+
+.content-type.article {
+	color: var(--accent-red);
+}
+
+.content-type.tip {
+	color: var(--accent-green);
+}
+
+.content-type.recommendation {
+	color: var(--accent-yellow);
+}

public/css/fonts.css

@@ -0,0 +1,6 @@
+@font-face {
+	font-family: "Lilita One";
+	src: url("../fonts/lilita_one/LilitaOne-Regular.ttf") format("truetype");
+	font-weight: normal;
+	font-style: normal;
+}

public/css/reset.css

@@ -0,0 +1 @@
+*,*:after,*:before{box-sizing:border-box}*{margin:0;padding:0;font:inherit}html{color-scheme:dark light}body{margin:unset}body{min-height:100vh;min-height:100svh}picture,svg,video,canvas{display:block;max-inline-size:100%;max-width:100%;block-size:auto}img{font-style:italic;background-repeat:no-repeat;background-size:cover;shape-margin:1rem;max-width:100%;height:auto;vertical-align:middle}h1,h2,h3,h4,h5,h6{text-wrap:balance}p{max-width:75ch;text-wrap:pretty}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media (prefers-reduced-motion: no-preference){:has(:target){scroll-behavior:smooth;scroll-padding-top:2rem}}html{hanging-punctuation:first last}