From ec53da11c2d4b1de2593b0690576ce8effd2690e Mon Sep 17 00:00:00 2001
From: Devin Haska <wonderfulfrog@users.noreply.github.com>
Date: Sun, 3 Mar 2024 18:15:23 -0800
Subject: [PATCH] feat: update version 3 post

---
 src/_includes/layouts/catalogue-item.html |   2 +-
 src/_includes/layouts/post.html           |   3 +-
 src/css/global/global-styles.css          |   4 +-
 src/posts/2022-10-02-its-been-a-while.md  |   2 -
 src/posts/2024-03-02-version-3.md         | 104 +++++++++++++++++++++-
 5 files changed, 108 insertions(+), 7 deletions(-)

diff --git a/src/_includes/layouts/catalogue-item.html b/src/_includes/layouts/catalogue-item.html
index 6901ece..a542a01 100644
--- a/src/_includes/layouts/catalogue-item.html
+++ b/src/_includes/layouts/catalogue-item.html
@@ -27,7 +27,7 @@ imageCaption: ""
         </div>
         {% endif %}
         {% if filteredTags | length > 0 %}
-            <ul class="[ categories ] [ cluster p-0 flow-space-2 ]" role="list">
+            <ul class="[ categories ] [ cluster p-0 flow-space-2 line-height-m ]" role="list">
                 {% for tag in filteredTags %}<li class="[ flex gap-0.25 ]">{{ tag }}</li>{% endfor %}
             </ul>
         {% endif %}
diff --git a/src/_includes/layouts/post.html b/src/_includes/layouts/post.html
index b37d094..47a1407 100644
--- a/src/_includes/layouts/post.html
+++ b/src/_includes/layouts/post.html
@@ -7,7 +7,8 @@ layout: "layouts/base"
     <header class="[ flow flow-space-1 mb-2 ]">
         {{ format(page.date) }}
         <h1>{{ title }}</h1>
-        <ul class="[ categories ] [ cluster list-none p-0 ]">
+        <p class="[ text-skew text-fadeText flow-space-0.25 ]">{{ excerpt }}</p>
+        <ul class="[ categories ] [ cluster list-none p-0 flow-space-2 line-height-m ]">
             {% for tag in tags | filter(["post"]) %}
                 <li class="[ flex gap-0.25 ]">
                     <a href="/tags/{{ tag | slugify }}">{{ tag }}</a>
diff --git a/src/css/global/global-styles.css b/src/css/global/global-styles.css
index a4d9931..fe595a8 100644
--- a/src/css/global/global-styles.css
+++ b/src/css/global/global-styles.css
@@ -125,7 +125,7 @@ hr {
 
 :not(pre) > code {
   background-color: var(--color-surface);
-  border-radius: 0.5em;
+  border-radius: var(--spacing-\0.5);
   padding-block: 0.15em;
   padding-inline: 0.25em;
 }
@@ -147,7 +147,7 @@ figure figcaption {
 
 picture source,
 picture img {
-  border-radius: 1rem;
+  border-radius: var(--spacing-0\.5);
 }
 
 aside {
diff --git a/src/posts/2022-10-02-its-been-a-while.md b/src/posts/2022-10-02-its-been-a-while.md
index 1c942c3..618a9e6 100644
--- a/src/posts/2022-10-02-its-been-a-while.md
+++ b/src/posts/2022-10-02-its-been-a-while.md
@@ -4,8 +4,6 @@ excerpt: February 2022 - September 2022.
 tags: ["gba", "updates", "burnout"]
 ---
 
-{% image "https://cdn.wonderfulfrog.com/unknown.jpg", "An AI generated image using the prompt 'a frog playing a game boy in watercolor'.", "" %}
-
 What’s happened since my last post?
 
 * I got engaged!
diff --git a/src/posts/2024-03-02-version-3.md b/src/posts/2024-03-02-version-3.md
index 015b005..dbdd133 100644
--- a/src/posts/2024-03-02-version-3.md
+++ b/src/posts/2024-03-02-version-3.md
@@ -197,7 +197,10 @@ const helperClassCss = helperClassToCss(helperClass, cssProperties, value);
 Finally, `helperClassesToCss` ties everything together to make adding new classes and variants easy.
 
 ```js
-const helperClasses = [["mx", ["margin-left", "margin-right"]], ["my", ["margin-top", "margin-bottom"]]];
+const helperClasses = [
+    ["mx", ["margin-left", "margin-right"]],
+    ["my", ["margin-top", "margin-bottom"]]
+];
 const variant = "1";
 const value = "16px";
 
@@ -440,6 +443,103 @@ Whenever a change is detected on the `main` branch, a new version is deployed au
 
 I tried hard to ensure that my site is fully accessible. I'm still learning how to properly test this - automated tools can only go so far - so if I missed something obvious [please tell me]({{ meta.social.mastodon }})!
 
+## Design
+
+I drew big inspiration from a recent favourite game of mine: [Super Mario Wonder](https://supermariobroswonder.nintendo.com/ca/)! I think the design in that game is top notch - from the character design to the [game UI](https://www.gameuidatabase.com/gameData.php?id=1838)!
+
+I borrowed heavily from the triangle pattern on this screen, as well as the slightly angled text which I used for my headers:
+
+{% image "https://cdn.wonderfulfrog.com/Super-Mario-Bros-Wonder10212023-084101-75299.jpg", "A screenshot of the game Super Mario Bros. Wonder. In this screenshot a level transition screen is visible, displaying a heading saying 'Badge Challenge' and 'Wall-Climb Jump II'. Both headings have a slanted or tilted effect that makes the text look like it is angled upwards. Near the bottom of the screen is a transition from a purple background to a white background, with a zig-zag pattern between the two colours, which looks like a perforated edge.", "Screenshot of game UI from Super Mario Bros. Wonder." %}
+
+And for the buttons I pretty much copied it straight from the game!
+
+{% image "https://cdn.wonderfulfrog.com/Super-Mario-Bros-Wonder10212023-084101-96390.jpg", "A screenshot of Super Mario Bros. Wonder showing the style of buttons used in the game. The buttons have a 3D bevel effect, with the button colour changing to yellow when active or highlighted. The buttons have a white outline surrounding them.", "Screenshot of game UI from Super Mario Bros. Wonder." %}
+
+I'm very pleased with how that came out. For reference, here is the CSS I used to achieve the effect:
+
+```css
+  background-color: var(--color-white);
+  color: var(--color-shadow);
+
+  /* This gives the button its 3d effect */
+  box-shadow:
+    1px 1px 0px var(--color-shadow),
+    2px 2px 0 var(--color-shadow);
+
+  border-radius: var(--spacing-0\.25);
+  border: 1px solid var(--color-shadow);
+
+  transition:
+    box-shadow var(--transition-duration),
+    transform var(--transition-duration),
+    background-color var(--transition-duration),
+    color var(--transition-duration);
+
+  /*
+   * I applied this to a wrapping element, and gives it the
+   * white outline.
+   */
+  filter: drop-shadow(1px 0 0 var(--color-white))
+    drop-shadow(-1px 0 0 var(--color-white))
+    drop-shadow(0 -1px 0 var(--color-white))
+    drop-shadow(0 1px 0 var(--color-white));
+```
+
+The colour scheme was tricky to figure out. I knew that I wanted a teal colour as my primary one, but where to go from there stumped me. I was originally going to use Tailwind's colours to make it easier for me, but I wanted to challenge myself to come up with one on my own. So I stewed on it for a week...
+
+I stumbled upon [Themescura](https://www.xypnox.com/blag/posts/themescura/introducing-themescura/) and found the philosophy resonated with me. The basis for a colour scheme has 5 elements:
+
+- Primary - Also known as the "brand colour"
+- Secondary - A... second colour.
+- Background - The colour of the site's background
+- Surface - A colour that is sort of a mix between Primary and Background
+- Text - The colour of the site's overall text
+
+I also extrapolated a few extra colours that are based on these five:
+
+- Border - The colour of borders! Like a darkened version of the Primary colour. Works well when paired with Surface.
+- Shadow - A very dark version of the Primary colour.
+- Fade Text - A mix of the Text colour and Background colour.
+
+The [source code for Themescura](https://github.com/xypnox/xypnox.github.io/blob/v2/src/theme.ts) provides a "developer way" to create the colours from the base five. I used this way as a starting point, then tweaked the values using HSL until I was happy.
+
+The final colour scheme looks like this (and will change depending on light or dark mode):
+
+<div class="[ flex flex-1 flex-col items-center gap-0.5 ]">
+    <div class="[ flex gap-0.5 ]">
+        <p>Primary</p>
+        <div class="[ size-2 ]" style="background-color: var(--color-primary)"></div>
+    </div>
+    <div class="[ flex gap-0.5 ]">
+        <p>Secondary</p>
+        <div class="[ size-2 ]" style="background-color: var(--color-secondary)"></div>
+    </div>
+    <div class="[ flex gap-0.5 ]">
+        <p>Background</p>
+        <div class="[ size-2 ]" style="background-color: var(--color-background); border: 1px solid var(--color-text)"></div>
+    </div>
+    <div class="[ flex gap-0.5 ]">
+        <p>Surface</p>
+        <div class="[ size-2 ]" style="background-color: var(--color-surface)"></div>
+    </div>
+    <div class="[ flex gap-0.5 ]">
+        <p>Text</p>
+        <div class="[ size-2 ]" style="background-color: var(--color-text)"></div>
+    </div>
+    <div class="[ flex gap-0.5 ]">
+        <p>Border</p>
+        <div class="[ size-2 ]" style="background-color: var(--color-border)"></div>
+    </div>
+    <div class="[ flex gap-0.5 ]">
+        <p>Shadow</p>
+        <div class="[ size-2 ]" style="background-color: var(--color-shadow)"></div>
+    </div>
+    <div class="[ flex gap-0.5 ]">
+        <p>Fade Text</p>
+        <div class="[ size-2 ]" style="background-color: var(--color-fadeText)"></div>
+    </div>
+</div>
+
 ## Conclusion
 
 That was a lot, but I covered everything! I hope.
@@ -483,3 +583,5 @@ Here are some resources I used (likely heavily) while building the site.
 [^2]: Here is [a post on 11ty.dev](https://www.11ty.dev/blog/stability/) with additional information, if you're curious.
 [^3]: Every Layout is a fantastic resource and worth every penny. Check out the free options if you're not sure, and really try them out.
 [^4]: People smarter than me have created posts outlining their problems with modern React. Here is a small sample: [Annoyed at React](https://blog.cassidoo.co/post/annoyed-at-react/) [React, where are you going?](https://dev.to/matfrana/react-where-are-you-going-5284) [Switching Costs](https://adactio.com/journal/20837) [Removing React is just weakness leaving your codebase](https://begin.com/blog/posts/2024-01-26-removing-react-is-just-weakness-leaving-your-codebase)
+
+*[HSL]: Hue, Saturation, and Lightness