meow

assets/report.css

@@ -0,0 +1,181 @@
+.reports {
+	list-style: none;
+	padding-left: 0;
+}
+
+.report {
+	display: block;
+	text-decoration: none;
+	color: var(--theme-foreground);
+	background-color: var(--theme-background-alt);
+	border: 1px solid var(--theme-separator);
+	padding: var(--space-4) var(--space-5);
+	margin-bottom: var(--space-3);
+	border-radius: var(--radius-md);
+	transition: all var(--transition-fast);
+	opacity: 75%;
+	position: relative;
+	overflow: hidden;
+}
+
+.report::before {
+	position: absolute;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	content: "*******";
+	transform: rotate(-35deg);
+	color: transparent;
+	font-size: 30rem;
+	letter-spacing: -0.075em;
+	line-height: 1;
+	text-align: center;
+	-webkit-text-stroke: 2px var(--theme-separator);
+	opacity: 0.5;
+}
+
+.reports li, .report:hover {
+	opacity: 1;
+	filter: none;
+}
+
+.report .date {
+	font-size: var(--font-size-sm);
+	color: var(--theme-foreground-bruh);
+	margin-bottom: var(--space-2);
+}
+
+.report h3 {
+	font-size: var(--font-size-lg);
+	font-weight: 600;
+	margin-bottom: var(--space-1);
+	color: var(--theme-foreground);
+}
+
+.report .excerpt {
+	font-size: var(--font-size-md);
+	color: var(--theme-foreground-alt);
+	line-height: 1.6;
+	margin-bottom: var(--space-2);
+}
+
+.report .excerpt, .report .title {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	line-clamp: 2;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.report .tags {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--space-2);
+	margin-top: var(--space-3);
+}
+
+.report .tag {
+	font-size: var(--font-size-xs);
+	padding: var(--space-0) var(--space-2);
+	background-color: var(--theme-background);
+	border: 1px solid var(--theme-separator);
+	border-radius: var(--radius-sm);
+	color: var(--theme-foreground-alt);
+}
+
+.report .arrow {
+	position: absolute;
+	right: 1.25em;
+	top: 50%;
+	transform: translateY(-50%);
+	opacity: 0;
+	font-size: 1.25rem;
+	transition: all var(--transition-fast);
+	color: var(--theme-foreground-alt);
+}
+
+.report:hover .arrow {
+	opacity: 1;
+	transform: translateY(-50%) translateX(4px);
+}
+
+article header {
+	margin-bottom: var(--space-7);
+	padding-bottom: var(--space-7);
+	border-bottom: 1px solid var(--theme-separator);
+}
+
+article header .meta {
+	display: flex;
+	align-items: center;
+	font-size: var(--font-size-md);
+	color: var(--theme-foreground-bruh);
+	margin-bottom: var(--space-4);
+	gap: var(--space-4);
+}
+
+article header h1 {
+	font-size: var(--font-size-xl);
+	margin: var(--space-3) 0;
+	color: var(--theme-foreground);
+}
+
+article header .tags {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--space-2);
+}
+
+article header .tag {
+	font-size: 12px;
+	padding: var(--space-1) var(--space-3);
+	background-color: var(--theme-background-alt);
+	border: 1px solid var(--theme-separator);
+	border-radius: 2px;
+	color: var(--theme-foreground-alt);
+}
+
+article .content {
+	color: var(--theme-foreground-alt);
+}
+
+article .content p {
+	margin-bottom: var(--space-6);
+}
+
+article .content h2 {
+	font-size: var(--font-size-xl);
+	color: var(--theme-foreground);
+	margin-top: var(--space-8);
+	margin-bottom: var(--space-4);
+	position: relative;
+}
+
+article .content h2::before {
+	content: "## ";
+	color: var(--theme-foreground-bruh);
+	margin-right: 0.5ch;
+}
+
+article .content h3 {
+	font-size: var(--font-size-lg);
+	color: var(--theme-foreground);
+	margin-top: var(--space-7);
+	margin-bottom: var(--space-3);
+}
+
+article .content h3::before {
+	content: "### ";
+	color: var(--theme-foreground-bruh);
+	margin-right: 0.5ch;
+}
+
+article footer {
+	margin-top: var(--space-10);
+	padding-top: var(--space-7);
+	border-top: 1px solid var(--theme-separator);
+	text-align: center;
+	color: var(--theme-foreground-alt);
+	font-size: var(--font-size-md);
+}