blog: scrumbled egg blog post; styles: update colours and typography for blog post

src/content/blog/2024-09-28-link-tossed-salads-and-scrumbled-eggs-lucidity.md

@@ -0,0 +1,24 @@
+---
+title: 'Link: "Tossed Salads And Scrumbled Eggs" - Lucidity'
+date: 2024-09-28T14:24:47.467Z
+slug: 2024-09-28-link-tossed-salads-and-scrumbled-eggs-lucidity
+author: Thomas Wilson
+
+---
+[Link to the original article](https://ludic.mataroa.blog/blog/tossed-salads-and-scrumbled-eggs/) from Nikhil Suresh.
+
+I came across this article on Hacker News, and gave it my full attention this Friday, with a glass of wine.  It's from the same author that gave us [I Will Fucking Piledrive You If You Mention AI Again](https://ludic.mataroa.blog/blog/i-will-fucking-piledrive-you-if-you-mention-ai-again/)
+
+I had the unique experience of seeing someone articulate the strong beliefs I have about How To Do Work Properly, in a clearer way, while being both funnier and more outraged.
+
+Suresh, you won't know this feeling, but it hurts to know in my heart that I will come at most second best in a niche I, until recently, thought occupied entirely by me shouting into the twin voids of my blog and every manager I have had since 2020.  Ever more niche I must pitch myself.
+
+Look, just read the piece, but here are some of my highlights:
+
+> And this is exactly why I don't view Scrum itself as particularly problematic. The _fundamental issue_, the one that is only moved by small degrees by project management methodologies, is that many, many people simply have totally unsophisticated ideas around how knowledge work functions.
+
+> A phrase I love is that "the map is not the territory", which more or less translates to the idea that _maps_ merely contain abstract symbols of the territory they represent, and that while we may never have access to a perfect view of the whole territory, it is important to understand that we aren't looking at the real territory… Some people have just lived with these symbols for so long that they think drawing a box on a PowerPoint slide that says "Secure Personally Identifiable Data" is the same thing as _actually making that happen_, as if one could conjure a forest into existence by drawing some trees
+
+"As if one could conjure a forest into existence by drawing some trees."
+
+I have never, perhaps ever, written a sentence that goes that hard.  The *closest* thing I have, that I trot out at every possible occasion, is "sure, go shout at the tides if you just want to shout".  *as if one could conjure a forest into existence by drawing some trees*… it's good and I will use it.

src/routes/+layout.svelte

@@ -18,12 +18,6 @@
       localStorage.getItem("colourScheme");
     const colourScheme = colourSchemes?.[colourSchemeName];
 
-    console.log({ 
-      colourSchemeName, 
-      colourScheme, 
-      prefersDarkmode 
-    })
-    
     if (colourScheme) {
       colourSchemeStore.set(colourScheme);
     } else if (prefersDarkmode) {
@@ -35,11 +29,16 @@
 
   colourSchemeStore.subscribe((value) => {
     if (!browser) return;
+
     document.documentElement.style.setProperty(
       "--colour-scheme-background",
       value.background
     );
 
+    // document.documentElement.style.setProperty(
+    //   "--colour-scheme-back""
+    // )
+
     document.documentElement.style.setProperty(
       "--colour-scheme-text",
       value.text

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

@@ -16,25 +16,25 @@
   <!-- Primary Meta Tags -->
   <title>{post.title} | thomaswilson.xyz</title>
   <meta name="title" content="Blog | thomaswilson.xyz" />
-  <meta name="description" content="{post.preview}" />
+  <meta name="description" content={post.preview} />
 
   <!-- Open Graph / Facebook -->
   <meta property="og:type" content="website" />
   <meta
     property="og:url"
-    content="{`https://www.thomaswilson.xyz/blog/${post.slug}`}"
+    content={`https://www.thomaswilson.xyz/blog/${post.slug}`}
   />
-  <meta property="og:title" content="{post.title}" />
+  <meta property="og:title" content={post.title} />
-  <meta property="og:description" content="{post.preview}" />
+  <meta property="og:description" content={post.preview} />
 
   <!-- Twitter -->
-  <meta property="twitter:title" content="{post.title}" />
+  <meta property="twitter:title" content={post.title} />
-  <meta property="twitter:description" content="{post.preview}" />
+  <meta property="twitter:description" content={post.preview} />
 </svelte:head>
 
 <Navbar />
-<main class="thomaswilson-container">
+<main class="thomaswilson-container blog">
-  <header class="section">
+  <header class="blog__header">
     <h1 class="title post-title">{post.title}</h1>
     <p class="post-author">
       {#if post.autor}
@@ -61,53 +61,29 @@
 </main>
 
 <style lang="scss">
-  header {
+  .blog {
-    padding-top: 24px;
+    background-color: var(--colour-scheme-background);
+    display: flex;
+    flex-direction: column;
+    --max-width: 65ch;
+    --width: 100%;
   }
 
-  :global(blockquote) {
+  .blog__header {
-    font-size: var(--font-size);
+    width: 100dvw;
-    font-style: italic;
+    background-color: var(--colour-scheme-background);
-    margin: 0;
+    padding: 48px 0;
-    padding: 0 0 0 1rem;
+    display: flex;
-    border-left: 2px solid var(--brand-orange);
+    flex-flow: column;
-  }
+    align-items: center;
-
-  :global(p, a) {
-    line-height: 160%;
-    font-size: var(--font-size);
-    font-weight: 400;
-    letter-spacing: -0.5px;
-  }
-
-  :global(li) {
-    margin: 0;
-    line-height: 140%;
-    font-size: var(--font-size);
-  }
-
-  #article {
-    max-width: 95%;
-    width: 65ch;
-    flex-grow: 1;
-
-    @media screen and (max-width: 700px) {
-      --font-size: 1rem;
-      padding: 12px;
-      letter-spacing: normal;
-      line-height: 110%;
-    }
-
-    @media screen and (min-width: 700px) {
-      --font-size: 1.29rem;
-      padding: 24px;
-    }
   }
 
   .post-title {
     text-align: center;
     line-height: 125%;
+    max-width: 30ch;
   }
+
   .post-author {
     font-size: 1.3rem;
     text-align: center;
@@ -121,4 +97,51 @@
     line-height: 100%;
     margin: 0;
   }
+
+  :global(#article p) {
+    padding-bottom: 12px;
+  }
+
+  :global(#article blockquote) {
+    font-size: var(--font-size);
+    margin: 0;
+    margin-bottom: 12px;
+    padding: 0 0 0 1rem;
+    border-left: 2px solid var(--brand-orange);
+  }
+
+  :global(#article p, a) {
+    line-height: 160%;
+    font-size: var(--font-size);
+    font-weight: 400;
+    letter-spacing: -0.5px;
+  }
+
+  :global(li) {
+    margin: 0;
+    line-height: 140%;
+    font-size: var(--font-size);
+  }
+
+  #article {
+    --padding: 4px;
+    background-color: var(--colour-scheme-background-accent);
+    padding: var(--padding);
+    font-size: var(--font-size-base);
+    width: var(--width);
+    max-width: var(--max-width);
+    flex-grow: 1;
+
+    @media screen and (max-width: 700px) {
+      --font-size: 1rem;
+      letter-spacing: normal;
+      line-height: 110%;
+      --padding: 4px;
+    }
+
+    @media screen and (min-width: 700px) {
+      --font-size: 1.29rem;
+      --padding: 1.5rem 2rem;
+    }
+  }
 </style>

src/styles/thomaswilson.css

@@ -141,7 +141,7 @@ blockquote {
   font-family: var(--font-family-mono);
   margin: 0;
   color: var(--colour-scheme-text);
-  padding: 24px 0;
+  padding: 4px 0;
   letter-spacing: -1px;
 }