feat: stuff

ca057 · Nov 26, 2024 · 4757678 · 4757678
1 parent 08e0a4a
commit 4757678
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 18 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -2,6 +2,7 @@
 // import browserslist from "browserslist";
 import pluginWebc from "@11ty/eleventy-plugin-webc";
 import { getBlurHashAverageColor } from "fast-blurhash";
+import { Temporal } from "temporal-polyfill";
 
 const environment =
   process.env.ELEVENTY_RUN_MODE === "serve" || process.env.ELEVENTY_RUN_MODE === "watch" ? "development" : "production";
@@ -17,7 +18,9 @@ export default function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy("src/**/images/*");
 
   eleventyConfig.addFilter("blurhashColorRgb", (blurhash) => `rgb(${getBlurHashAverageColor(blurhash).join(",")})`);
-  eleventyConfig.addFilter("formatDate", (date, lcoale = "en") => "foo")
+  eleventyConfig.addFilter("formatDate", (date, locale = "en-UK") => {
+    return Temporal.PlainDate.from(date).toLocaleString(locale, { calendar: 'gregory', dateStyle: "long" })
+  })
 
   return {
     dir: {

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/coffee/index.webc b/src/coffee/index.webc
@@ -21,13 +21,15 @@
         src: url("/fonts/knewave.woff");
       }
       :root {
-        --spacing-1: 12px;
+        --spacing-1: 1rem;
+        --spacing-2: 2rem;
+        --spacing-3: 3rem;
+        --spacing-4: 4rem;
       }
       html,
       body {
         height: 100%;
         font-family:
-          "Inter",
           system-ui,
           -apple-system,
           BlinkMacSystemFont,
@@ -50,32 +52,36 @@
         font-family: Knewave;
         font-weight: normal;
         font-size: clamp(1.5rem, -0.875rem + 8.333vw, 4rem);
-        margin: clamp(3rem, -0.875rem + 8.333vw, 4rem) 1rem 1rem;
+        margin:
+          clamp(var(--spacing-2), -0.875rem + 8.333vw, var(--spacing-4))
+          var(--spacing-1)
+          clamp(var(--spacing-2), -0.875rem + 8.333vw, var(--spacing-3))
+        ;
       }
       h1 span.numeric {
         font-size: 2em;
       }
 
       p {
-        font-size: 1.2rem;
-        margin-bottom: 1.2rem;
+        font-family: Charter, Bitstream Charter, serif;
+        margin-bottom: 0.5rem;
       }
       p.info {
         font-family: serif;
-        font-size: clamp(0.75rem, -0.875rem + 4.333vw, 1rem);
         font-style: italic;
       }
-      p.ta-right {
-        text-align: right;
+      p.footnote {
+        font-size: 0.8rem;
+        color: #04040455;
       }
 
-      .coffees {
+      main {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(min(max(150px, 25%), 300px), 1fr));
         grid-gap: var(--spacing-1);
         margin: 1rem auto;
       }
-      .coffees img {
+      main img {
         width: 100%;
         height: 100%;
         aspect-ratio: 1 / 1;
@@ -85,7 +91,7 @@
 
       footer {
         text-align: center;
-        margin-bottom: var(--spacing-1);
+        margin: var(--spacing-2);
       }
     </style>
   </head>
@@ -94,10 +100,6 @@
       <h1><span class="numeric" @text="coffees.length"></span> coffees</h1>
     </header>
     <main>
-      <p class="info ta-right">
-        A picture of every coffee I drank since <span @text="formatDate(coffees[0].day)"></span>.
-      </p>
-      <div class="coffees">
         <img
           webc:for="(coffee, index) of coffees"
           :id="coffee.id"
@@ -110,10 +112,12 @@
           decoding="async"
         >
         </img>
-      </div>
     </main>
     <footer>
-      <p class="info">by <a href="/">Christian Ost</a> – last updated at <span @text="formatDate(Date.now())"></span></p>
+      <p class="info">
+        A picture of every coffee I drank between <span @text="formatDate(coffees[0].day)"></span> and <span @text="formatDate(coffees[coffees.length-1].day)"></span>.
+      </p>
+      <p class="info footnote">by <a href="/">Christian Ost</a> – last updated on <span @text="formatDate((new Date()).toISOString().split('T')[0])"></span></p>
     </footer>
   </body>
 </html>