first commit

style.css

@@ -0,0 +1,238 @@
+@import "atkinson-hyperlegible.css";
+
+:root {
+  --spacing: 1em;
+
+  --bg-lum: 1;
+  --bg-chroma: 30%;
+  --bg-hue: 240;
+  
+  font-size: 18pt;
+
+  color-scheme: light dark;
+}
+
+body {
+  font-family: 'Atkinson Hyperlegible';
+  line-height: 1.5;
+  width: 594mm;
+  height: 841mm;
+  margin: 0;
+  padding: 2cm;
+  --shrink: 100%;
+  transform: translate(calc(-50% + 0.5 * var(--shrink)),calc(-50% + 0.5 * var(--shrink))) scale(var(--shrink));
+
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  align-items: center;
+}
+
+header {
+  text-align: center;
+  font-size: 1.2rem;
+
+  display: grid;
+  grid-template:
+    "title title title title"
+    ". name portrait ." 
+    / 1fr auto auto 1fr
+  ;
+  gap: 1em;
+  justify-content: center;
+
+  & h1 {
+    grid-area: title;
+  }
+
+  & p {
+    grid-area: name;
+  }
+
+  & .portrait {
+    height: 5em;
+    border-radius: 50%;
+    align-self: center;
+    grid-area: portrait;
+    border: 0.2em solid #d9c181;
+    box-sizing: border-box;
+  }
+}
+
+h1, h2 {
+  margin: 0;
+}
+
+main {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 1em 2em;
+  align-items: center;
+
+  &:has(:nth-child(6)) { --num-slides: 6;}
+  &:has(:nth-child(7)) { --num-slides: 7;}
+  &:has(:nth-child(8)) { --num-slides: 8;}
+  &:has(:nth-child(9)) { --num-slides: 9;}
+  &:has(:nth-child(10)) { --num-slides: 10;}
+  &:has(:nth-child(11)) { --num-slides: 11;}
+  &:has(:nth-child(12)) { --num-slides: 12;}
+  &:has(:nth-child(13)) { --num-slides: 13;}
+
+  & :nth-child(1) { --index: 1;}
+  & :nth-child(2) { --index: 2;}
+  & :nth-child(3) { --index: 3;}
+  & :nth-child(4) { --index: 4;}
+  & :nth-child(5) { --index: 5;}
+  & :nth-child(6) { --index: 6;}
+  & :nth-child(7) { --index: 7;}
+  & :nth-child(8) { --index: 8;}
+  & :nth-child(9) { --index: 9;}
+  & :nth-child(10) { --index: 10;}
+  & :nth-child(11) { --index: 11;}
+  & :nth-child(12) { --index: 12;}
+  & :nth-child(13) { --index: 13;}
+  
+  & section {
+    --slide-number: calc(var(--index) / var(--num-slides));
+    
+    border-radius: 0.5em;
+
+    --bg-hue: calc(var(--slide-number) * 360);
+    background-color: oklch(var(--bg-lum) var(--bg-chroma) var(--bg-hue));
+    border: 0.2em solid;
+    border-color: color-mix(in oklch, oklch(var(--bg-lum) var(--bg-chroma) var(--bg-hue)), black 20%);
+
+    padding: 1em;
+
+    --col: span 1;
+
+    grid-column: var(--col);
+
+    &.plain {
+      text-align: center;
+      background: none;
+      border: none;
+      align-self: start;
+      padding: 0;
+
+      & p {
+        margin-top: 0;
+      }
+    
+      & .qrcode {
+        width: 4cm;
+        margin: 1em;
+      }
+    }
+
+  }
+}
+
+dl.quotes {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.25em;
+    
+    & dt {
+        &::before {content: '“';}
+        &::after {content: '”';}
+        justify-self: end;
+        text-align: end;
+    }
+    
+    & dd {
+        font-style: italic;
+    }
+}
+
+@media print {
+  * {
+    text-wrap: balance;
+  }
+
+  a {
+    text-decoration: none;
+    color: inherit;
+    display: flex;  
+    align-items: center;
+    justify-content: center;
+    gap: 1em;
+    font-weight: 250;
+  }
+}
+
+img {
+  width: 100%;
+}
+
+figure {
+  margin: 0;
+}
+
+a {
+}
+
+.qrcode {
+  width: 3cm;
+
+  & .bg {
+    fill: none;
+  }
+}
+
+.squiggle {
+  fill: none;
+  stroke: color-mix(in oklch, oklch(var(--bg-lum) var(--bg-chroma) var(--bg-hue)), black 30%);
+  stroke-width: 0.05em;
+  stroke-linejoin: round;
+}
+
+@media screen {
+  :root {
+    font-size: 18px;
+  }
+
+  .print-only {
+    display: none;
+  }
+  
+  body {
+    width: revert;
+    height: revert;
+    margin: 0;
+    padding: 0.25rem;
+  }
+
+  header {
+    font-size: 1rem;
+    margin-bottom: 2rem;
+  }
+
+  main {
+    grid-template-columns: 1fr;
+    justify-items: center;
+    & section {
+      grid-column: 1;
+
+      &.plain {
+        display: none;
+      }
+    }
+  }
+
+  .qrcode {
+    display: none;
+  }
+  
+  dl.quotes {
+    grid-template-columns: 1fr;
+
+    & dt {
+      text-align: start;
+      justify-self: start;
+    }
+
+    & dd {
+      text-align: end;
+    }
+  }
+}