blog: A website can do that?

src/content/blog/2023-02-14-medium-can-do-that.md

@@ -0,0 +1,23 @@
+---
+title: Medium.com as my "a website can do that?" moment
+date: 2023-02-14T22:31:08.484Z
+slug: 2023-02-14-medium-can-do-that
+author: Thomas Wilson
+
+---
+In the early 2010s, when I was a post-grad (not a professional), I started writing online.  And my first blog was on Medium.com.  And the writing experience there was *excellent*.
+
+I think that was one of my earliest \"a website can do that?!\" moments.  I don't want to forget that feeling.
+
+The buttery spacious experience of writing and laying out your piece felt like what every WYSIWYG editor should want to be.  The words *looked* beautiful and it did Just Work™️.  It wasn't clunky buttons, and impossible-to-escape-or-indent lists (looking at you Notion and JIRA).  
+
+It's like the first time you *smell* fresh cookies coming out of the oven, or watch someone make music up close, or witness someone really *use* photoshop.  
+
+It's one step before \"I think I could make something like this\".
+
+And it was a website.  A website that didn't have Google money or Google brains.  A website that wasn't just plain forms and tables.
+
+Medium might have tried to scale too far and fumbled the monetisation, discoverability, and editorial aspects.  I might have left Medium and taken a hard stance on markdown as the One True Format.  But that text editor was really fucking cool, and I hope all the folks who imagined that product into my browser in 2014 knew that.
+
+![A screenshot of Medium.com's editor](https://help.medium.com/hc/article_attachments/360010397434/dropcap.png)
+

src/routes/blog/[slug]/+page.svelte

@@ -32,7 +32,15 @@
   <header class="section">
     <h1 class="title post-title">{post.title}</h1>
     <p class="post-author">{post.author}</p>
-    <p class="post-date">{intlFormat(date)}</p>
+    <p class="post-date">
+      {intlFormat(date, {
+        weekday: "long",
+        day: "2-digit",
+        month: "long",
+        year: "numeric",
+        localeMatcher: "best fit"
+      })}
+    </p>
   </header>
 
   <article id="article">
@@ -47,12 +55,13 @@
   }
 
   #article {
-    max-width: 65ch;
+    max-width: 95%;
+    width: 65ch;
 
     p,
     a {
       line-height: 160%;
-      font-size: 1.29rem;
+      font-size: var(--font-size);
       font-weight: 400;
       margin-bottom: 1.5rem;
       letter-spacing: 0.5px;
@@ -61,14 +70,18 @@
     li {
       margin: 0;
       line-height: 140%;
-      font-size: 1.29rem;
-    }
+      font-size: var(--font-size);
     }
 
     @media screen and (max-width: 700px) {
-    article {
+      --font-size: 1.1rem;
       padding: 12px;
     }
+
+    @media screen and (min-width: 700px) {
+      --font-size: 1.29rem;
+      padding: 24px;
+    }
   }
 
   .post-title {

src/styles/thomaswilson.css

@@ -49,6 +49,7 @@ body {
     font-family: var(--font-family-sans);
     color: var(--gray-900);
     line-height: 130%;
+    min-height: 100vh;
 }
 
 .thomaswilson-container {