details

src/assets/css/blocks/details.css

@@ -0,0 +1,47 @@
+summary {
+grid-column: content;
+}
+
+summary {
+  display: flex;
+  align-items: baseline;
+  line-height: 1.2;
+  gap: 0 1ch;
+  cursor: pointer;
+  list-style: none;
+	font-weight: bold;
+	font-size: var(--size-step-1);
+}
+
+summary:hover,
+summary:focus-visible {
+  color: var(--color-primary-shade);
+}
+
+summary::before {
+  content: '+';
+  display: block;
+  color: var(--color-primary);
+	font-family: var(--font-mono);
+	font-size: var(--size-step-0);
+	font-weight: normal;
+  line-height: 0.5;
+  margin-inline-start: -2ch;
+  transform: scale(1.4);
+  transform-origin: right bottom;
+}
+
+[open] summary::before {
+  content: '-';
+}
+
+/* Hide default marker */
+summary::-webkit-details-marker,
+summary::marker {
+  content: '';
+  display: none;
+}
+
+summary + * {
+	margin-block-start: var(--space-xs)
+}

src/docs/first.md

@@ -1,5 +1,6 @@
 ---
 title: First steps
+date: 2024-01-01
 ---
 
 You can use this starter as a template for your blog and you are ready to go! But there are some adjustments you have to make, most of them in `src/_data/meta.js`. It sets different "hard coded" text values all over the template, you can change the language, etc.