feat: migrate to zine

assets/reset.css

@@ -0,0 +1,90 @@
+/* https://piccalil.li/blog/a-more-modern-css-reset/ */
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Prevent font size inflation */
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+/* Remove default margin in favour of better control in authored CSS */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin-block-start: 0;
+  margin-block-end: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+}
+
+/* Set shorter line heights on headings and interactive elements */
+h1,
+h2,
+h3,
+h4,
+button,
+input,
+label {}
+
+/* Balance text wrapping on headings */
+h1,
+h2,
+h3,
+h4 {
+  text-wrap: balance;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+  color: currentColor;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+/* Make sure textareas without a rows attribute are not tiny */
+textarea:not([rows]) {
+  min-height: 10em;
+}
+
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+  scroll-margin-block: 5ex;
+}

assets/style.css

@@ -0,0 +1,138 @@
+:root {
+  --font-family: "Monaspace Argon", monospace;
+  --measure: 100ch;
+  --line-height: 1.20rem;
+
+  --background-color: #fbf1c7;
+  --foreground-color: #282828;
+
+  font-family: var(--font-family);
+  font-optical-sizing: auto;
+  font-weight: normal;
+  font-style: normal;
+  /*font-variant-numeric: tabular-nums lining-nums;*/
+  font-size: 16px;
+}
+
+@media screen and (max-width: 480px) {
+  body {
+    padding: var(--line-height) 1ch;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-color: #282828;
+    --foreground-color: #fbf1c7;
+  }
+}
+
+body {
+  line-height: var(--line-height);
+  background: var(--background-color);
+  color: var(--foreground-color);
+  margin: calc(var(--line-height) * 3) auto;
+  padding: 0 2ch;
+}
+
+
+
+/* Specify max chars on a line */
+* {
+  max-inline-size: var(--measure);
+}
+
+*+* {
+  margin-top: var(--line-height);
+}
+
+ul {
+  margin-top: 0;
+  padding-left: 1ch;
+}
+
+html {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+}
+
+li {
+  margin-top: 0;
+}
+
+html,
+body,
+div,
+header,
+nav,
+main,
+footer {
+  max-inline-size: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: var(--line-height);
+  margin-bottom: var(--line-height);
+}
+
+#debug-grid {
+  --color: color-mix(in srgb, var(--foreground-color) 10%, var(--background-color) 90%);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+
+  background-image:
+    repeating-linear-gradient(var(--color) 0 1px, transparent 1px 100%),
+    repeating-linear-gradient(90deg, var(--color) 0 1px, transparent 1px 100%);
+
+  background-size: 1ch var(--line-height);
+}
+
+@font-face {
+  font-family: 'Monaspace Neon';
+  src: url('fonts/MonaspaceNeonVarVF[wght\,wdth\,slnt].woff2') format('woff2');
+  font-weight: 100 900;
+  font-stretch: 75% 125%;
+  font-style: oblique -10deg 0deg;
+}
+
+@font-face {
+  font-family: 'Monaspace Argon';
+  src: url('fonts/MonaspaceArgonVarVF[wght\,wdth\,slnt].woff2') format('woff2');
+  font-weight: 100 900;
+  font-stretch: 75% 125%;
+  font-style: oblique -10deg 0deg;
+}
+
+@font-face {
+  font-family: 'Monaspace Krypton';
+  src: url('fonts/MonaspaceKryptonVarVF[wght\,wdth\,slnt].woff2') format('woff2');
+  font-weight: 100 900;
+  font-stretch: 75% 125%;
+  font-style: oblique -10deg 0deg;
+}
+
+@font-face {
+  font-family: 'Monaspace Radon';
+  src: url('fonts/MonaspaceRadonVarVF[wght\,wdth\,slnt].woff2') format('woff2');
+  font-weight: 100 900;
+  font-stretch: 75% 125%;
+  font-style: oblique -10deg 0deg;
+}
+
+@font-face {
+  font-family: 'Monaspace Xenon';
+  src: url('fonts/MonaspaceXenonVarVF[wght\,wdth\,slnt].woff2') format('woff2');
+  font-weight: 100 900;
+  font-stretch: 75% 125%;
+  font-style: oblique -10deg 0deg;
+}