Add blog

src/styles/BlogPost.module.css

@@ -1,15 +1,38 @@
 .jumbo {
 	display: flex;
+	padding: 1rem 1.5rem;
 	flex-direction: column;
-	position: relative;
 	align-items: center;
 }
 
+.jumbo.standalone {
+	max-width: 80rem;
+}
+
+.more {
+	margin-top: 1.5rem;
+	padding: 1rem;
+	border: 2px solid var(--primary);
+	border-radius: 20rem;
+	backdrop-filter: blur(2rem);
+	background: rgb(0 0 0 / 0.3);
+	box-shadow: 0 0 2rem black;
+	transition: scale 0.2s;
+}
+
+.more:hover {
+	scale: 1.05;
+	text-decoration: underline;
+}
+
 .date {
-	position: absolute;
-	top: 1rem;
-	right: 1rem;
-	color: hsl(37 10% 58%);
+	color: var(--muted);
+}
+
+.top {
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
 }
 
 .title {
@@ -18,9 +41,9 @@
 	text-align: center;
 }
 
-.description p {
+.description {
 	font-size: 1.3rem;
-	max-width: 40rem;
+	max-width: 60rem;
 	text-align: justify;
 }
 
@@ -37,8 +60,20 @@
 	font-size: 1.6rem;
 }
 
-.description :is(strong, em) {
-	display: block;
+.links {
 	width: 100%;
-	text-align: justify;
+	display: flex;
+	justify-content: space-between;
+}
+
+.links * {
+	font-size: 1.2rem;
+}
+
+.links a {
+	color: white;
+}
+
+.links span {
+	color: var(--muted);
 }