added new layout and fonts

public/css/bundle.css

@@ -4,8 +4,10 @@
 /* Custom fonts */
 @import url(./fonts.css);
 
+@import url(./margins.css);
+
 :root {
-	--font-family: "Lilita One", -apple-system, system-ui, sans-serif;
+	--font-family: "Source Sans 3", -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,
@@ -13,26 +15,9 @@
 }
 
 :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;
+	--background-color: #121212;
+	--background-color-dark: #080808;
+	--accent-color: #daa520;
 }
 
 html,
@@ -47,40 +32,45 @@ h3,
 h4,
 h5,
 h6 {
+	font-family: "Crimson Pro";
+	font-size: 1.3em;
+	font-weight: 600;
 	color: var(--accent-color);
 }
 
 .header {
 	padding: 1rem;
-	background-color: var(--dark-background-color);
 	display: flex;
+	justify-content: center;
+	font-weight: bold;
 }
 
 .recent-posts-container {
 	margin: 12px 12px;
 	display: flex;
+	flex-direction: column;
 	justify-content: flex-start;
 	gap: 12px;
 }
 
 .highlight-card {
-	max-width: 24rem;
 	border-radius: 12px;
 	display: flex;
 	padding: 14px;
+	width: 100%;
 	justify-content: stretch;
-	background-color: var(--dark-background-color);
 }
 
 .highlight-card-header {
 	display: flex;
+	flex-wrap: wrap;
 	column-gap: 10px;
 	justify-content: space-between;
 	padding-bottom: 8px;
 }
 
 .highlight-card img {
-	border-radius: 16px;
+	border-radius: 8px;
 	width: 100%;
 	height: 8rem;
 	object-fit: cover;
@@ -89,7 +79,6 @@ h6 {
 }
 
 .highlight-card a {
-	color: unset;
 	color: var(--white);
 	width: 100%;
 	text-decoration: none;
@@ -102,16 +91,13 @@ h6 {
 	cursor: pointer;
 	background-color: var(--accent-color);
 	outline: none;
+	border: none;
 }
 
-.content-type.article {
-	color: var(--accent-red);
-}
-
-.content-type.tip {
-	color: var(--accent-green);
-}
-
-.content-type.recommendation {
-	color: var(--accent-yellow);
+.content-type {
+	font-family: "Crimson Pro";
+	font-weight: bold;
+	border-radius: 4px;
+	padding: 2px 7px 5px 7px;
+	background-color: var(--background-color-dark);
 }

public/css/fonts.css

@@ -4,3 +4,27 @@
 	font-weight: normal;
 	font-style: normal;
 }
+
+@font-face {
+	font-family: "Source Sans 3";
+	src: url("../fonts/source_sans_3/SourceSans3-VariableFont_wght.ttf")
+		format("truetype");
+	font-weight: 100 900;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: "Source Sans 3";
+	src: url("../fonts/source_sans_3/SourceSans3-Italic-VariableFont_wght.ttf")
+		format("truetype");
+	font-weight: 100 900;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: "Crimson Pro";
+	src: url("../fonts/crimson_pro/CrimsonPro-VariableFont_wght.ttf")
+		format("truetype");
+	font-weight: 100 900;
+	font-style: normal;
+}

public/css/margins.css

@@ -0,0 +1,3 @@
+.margin-small {
+	margin: 12px;
+}