From c40e2474b7be718a4f42b3573704d1d65e7cd420 Mon Sep 17 00:00:00 2001 From: Thomas Date: Tue, 14 Feb 2023 22:47:26 +0000 Subject: [PATCH] blog: A website can do that? --- .../blog/2023-02-14-medium-can-do-that.md | 23 ++++++++++++++++ src/routes/blog/[slug]/+page.svelte | 27 ++++++++++++++----- src/styles/thomaswilson.css | 1 + 3 files changed, 44 insertions(+), 7 deletions(-) create mode 100644 src/content/blog/2023-02-14-medium-can-do-that.md diff --git a/src/content/blog/2023-02-14-medium-can-do-that.md b/src/content/blog/2023-02-14-medium-can-do-that.md new file mode 100644 index 0000000..65cfd2e --- /dev/null +++ b/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) + diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte index 18fc27b..b8323be 100644 --- a/src/routes/blog/[slug]/+page.svelte +++ b/src/routes/blog/[slug]/+page.svelte @@ -32,7 +32,15 @@

{post.title}

- +
@@ -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 { + @media screen and (max-width: 700px) { + --font-size: 1.1rem; padding: 12px; } + + @media screen and (min-width: 700px) { + --font-size: 1.29rem; + padding: 24px; + } } .post-title { diff --git a/src/styles/thomaswilson.css b/src/styles/thomaswilson.css index a57856b..c55a5a6 100644 --- a/src/styles/thomaswilson.css +++ b/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 {