preliminary work for old theme re-implementation

_src/assets/css/default/blog.css

@@ -0,0 +1,141 @@
+:root {
+	--avatar: 3rem;
+}
+
+article {
+	margin: 0 auto;
+	font-family: "Rubik", sans-serif;
+	max-width: var(--post);
+	& section:not(section:has(p)) {
+		display: flex;
+		gap: var(--pad-l);
+	}
+	& aside {
+		float: right;
+		border-radius: var(--round);
+		width: 66%;
+	}
+	& [aria-label="Post warning"] {
+		font-size: 1.4rem;
+		font-weight: bold;
+		text-align: center;
+		font-family: monospace;
+		&::before,
+		&::after {
+			content: "";
+			display: inherit;
+			border-width: 2px;
+			border-style: dashed;
+		}
+	}
+}
+[aria-label="Addendum"], [aria-label="Post warning"], article aside {
+	margin: var(--pad-l) 0;
+	padding: var(--pad-l);
+}
+article > [aria-label="Addendum"] {
+		border-image-slice: 1;
+		border-image-width: 2px;
+		border-image-outset: 4px;
+	& > p:first-child {
+		display: flex;
+		text-align: center;
+	}
+}
+
+article > [aria-label="Postscript"] {
+	margin: 0 0 auto auto;
+	padding: 2rem 0 4rem 0;
+	&::after {
+		content: "";
+		position: absolute;
+		width: 64px;
+		height: 64px;
+		mask-image: var(--paw);
+		mask-size: 100%;
+		mask-repeat: no-repeat;
+		transform: rotate(15deg);
+	}
+	& p {
+		display: flex;
+		flex-direction: column;
+		transition: background-color var(--trans);
+		margin-top: inherit;
+		margin-left: inherit;
+		margin-right: var(--avatar);
+		border-radius: var(--round);
+		border-bottom-right-radius: 0;
+		width: fit-content;
+		padding: var(--pad-m);
+		background-color: #0060df;
+		color: #fff;
+		font-family: "Rubik", sans-serif;
+		font-size: 0.8rem;
+		word-wrap: anywhere;
+
+		&:hover {
+			background-color: #3a76f0;
+		}
+
+		&:not(:last-of-type) {
+			margin-bottom: var(--pad-l);
+		}
+	}
+
+	& p:has(img:nth-child(n + 2)) {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(min(100%, 40%), 1fr));
+		align-items: center;
+		gap: var(--pad-m);
+	}
+	& p > img {
+		transition: height var(--trans), border-radius var(--trans),
+			background-color var(--trans);
+		border-radius: var(--round);
+		min-height: fit-content;
+		max-height: var(--image);
+	}
+	& img:not(p > img) {
+		display: flex;
+		box-sizing: content-box;
+		margin: 0 0 0 auto;
+		border-radius: 100%;
+		width: var(--avatar);
+		height: var(--avatar);
+	}
+}
+
+#posts {
+	max-width: var(--post);
+	& ul {
+		display: flex;
+		flex-direction: column;
+		gap: var(--pad-l);
+		margin: 0;
+		padding: 0;
+	}
+
+	& li p {
+		margin-block-start: 0;
+	}
+
+	& a {
+		display: flex;
+		flex-direction: column;
+		overflow: scroll;
+		border-style: solid;
+		border-width: 2px;
+		border-radius: var(--round);
+		padding: var(--pad-m);
+		font-size: 1.125rem;
+		font-weight: bold;
+		text-decoration: none;
+		word-break: break-word;
+		& time,
+		p {
+			display: flex;
+			font-size: 1rem;
+			font-weight: normal;
+		}
+	}
+}