feat: update version 3 post
This commit is contained in:
Devin Haska
parent
bc728a3b8c
commit
ec53da11c2
5 changed files with 108 additions and 7 deletions
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue