From e420f33d4ab02888937860c62a26a346f8a6a321 Mon Sep 17 00:00:00 2001 From: Victor Westerlund Date: Tue, 28 Jan 2025 15:23:55 +0000 Subject: [PATCH] feat: new design for `button.inline` elements (#22) Redesign of the buttons I use on the site here and there. This changes all: `button.inline` and `button.inline.solid` I think the new buttons look more "cutesy" or "cozy" with my hand drawn little icons, soft gradients and shadows, and larger size. # Old ![image](/attachments/9c1082aa-551f-43f8-9428-89c190178335) ![image](/attachments/0cdb44fd-6378-4b22-8493-a2f52e1dfe65) ![image](/attachments/736c44d6-3bf4-4f83-a48c-da40008b7aed) # New ![image](/attachments/9f4de1d9-8b60-4b54-ba2f-8166eb1126c1) ![image](/attachments/c42a20e6-a8ae-4b27-bcfa-b064e365a7c7) ![image](/attachments/8105c00d-caf3-4a9e-8e2d-0140cbc44caa) Reviewed-on: https://codeberg.org/vlw/vlw.se/pulls/22 --- public/about.php | 4 +- public/assets/css/pages/about.css | 36 +++++++++------ public/assets/css/pages/contact.css | 4 ++ public/assets/css/shell.css | 66 +++++++++++++++++---------- public/assets/media/icons/chevron.svg | 2 +- public/contact.php | 16 +++++-- public/work.php | 48 +++++++++++++++---- public/work/timeline.php | 20 ++++++-- 8 files changed, 139 insertions(+), 57 deletions(-) diff --git a/public/about.php b/public/about.php index 4791029..4851da7 100644 --- a/public/about.php +++ b/public/about.php @@ -85,12 +85,12 @@ all() as $lang => $bytes): ?> - + diff --git a/public/assets/css/pages/about.css b/public/assets/css/pages/about.css index 42f855a..8907ddd 100644 --- a/public/assets/css/pages/about.css +++ b/public/assets/css/pages/about.css @@ -4,14 +4,23 @@ --primer-color-accent: 148, 255, 21; --color-accent: rgb(var(--primer-color-accent)); - --color-go: rgb(0, 173, 216); - --color-php: rgb(79, 93, 149); - --color-css: rgb(86, 61, 124); - --color-html: rgb(227, 76, 38); - --color-shell: rgb(137, 224, 81); - --color-python: rgb(53, 114, 165); - --color-typescript: rgb(49, 120, 198); - --color-javascript: rgb(241, 224, 90); + --primer-color-go: 0, 173, 216; + --primer-color-php: 79, 93, 149; + --primer-color-css: 86, 61, 124; + --primer-color-html: 227, 76, 38; + --primer-color-shell: 137, 224, 81; + --primer-color-python: 53, 114, 165; + --primer-color-typescript: 49, 120, 198; + --primer-color-javascript: 241, 224, 90; + + --color-go: rgb(var(--primer-color-go)); + --color-php: rgb(var(--primer-color-php)); + --color-css: rgb(var(--primer-color-css)); + --color-html: rgb(var(--primer-color-html)); + --color-shell: rgb(var(--primer-color-shell)); + --color-python: rgb(var(--primer-color-python)); + --color-typescript: rgb(var(--primer-color-typescript)); + --color-javascript: rgb(var(--primer-color-javascript)); } vv-shell { @@ -183,18 +192,17 @@ section.languages languages-list language-item { background: linear-gradient(139deg, rgba(0, 0, 0, 0) 0%, rgba(79, 93, 144, .2) 100%); } -section.languages languages-list language-item p.lang { - font-size: 1.3em; - font-weight: 900; - color: var(--color-php); -} - section.languages languages-list language-item svg { width: 2em; margin-left: auto; transform: rotate(-90deg); } +section.languages button p.lang { + font-size: 1.3em; + font-weight: 900; +} + /* # Interests */ div.interests { diff --git a/public/assets/css/pages/contact.css b/public/assets/css/pages/contact.css index 1e8adda..bb7b2ff 100644 --- a/public/assets/css/pages/contact.css +++ b/public/assets/css/pages/contact.css @@ -108,6 +108,10 @@ section.pgp .buttons { gap: var(--padding); } +section.pgp .buttons .download svg.chevron { + transform: unset; +} + /* ## Contact form */ section.form :is(input, textarea) { diff --git a/public/assets/css/shell.css b/public/assets/css/shell.css index 56d0743..e940adf 100644 --- a/public/assets/css/shell.css +++ b/public/assets/css/shell.css @@ -101,35 +101,43 @@ button { /* ### Inline */ button.inline { - padding: calc(var(--padding) / 2) var(--padding); - color: white; - border: solid 2px white; - border-radius: 6px; + gap: 10px; + display: flex; + border-radius: 7px; + align-items: center; + fill: var(--color-accent); + padding: calc(var(--padding) / 1.5); + background: linear-gradient(139deg, rgba(0, 0, 0, 0) 0%, rgba(var(--primer-color-accent), .1) 100%); +} + +button.inline:not(.solid) { + box-shadow: + 0 0 0 2px rgba(var(--primer-color-accent), .1), + 10px 7px 40px 3px rgba(var(--primer-color-accent), .06) + ; +} + +button.inline svg { + height: 1em; +} + +button.inline svg:last-child { + width: 1.5em; + margin-left: auto; +} + +button.inline svg.chevron:last-child { + transform: rotate(-90deg); } button.inline.solid { + fill: black; color: black; + border: solid 2px rgba(var(--primer-color-accent), 1); border-color: var(--color-accent); background-color: var(--color-accent); } -a > button::after { - content: " ➜"; -} - -/* ### Text links */ - -a[target="_blank"] > button::after, -:is(h1, h2, h3, p, li) > a[target="_blank"]::after { - content: " ↑"; - color: var(--color-accent); - white-space: nowrap; -} - -a > button.solid:not(:hover)::after { - color: black; -} - /* ## Header */ header { @@ -327,7 +335,8 @@ search-results .info :is(svg, img) { /* # Components */ button.inline { - transition: 200ms background-color, 200ms border-color, 200ms color; + transition-duration: 300ms; + transition-property: background-color, border-color, box-shadow, color, fill; } button:hover { @@ -335,8 +344,19 @@ search-results .info :is(svg, img) { background-color: rgba(255, 255, 255, .1); } - button.solid:hover { + button.inline:hover { + fill: var(--color-accent); color: var(--color-accent); + } + + button.inline:not(.solid):hover { + box-shadow: + 0 0 0 2px rgba(var(--primer-color-accent), 1), + 10px 7px 30px 3px rgba(var(--primer-color-accent), .07) + ; + } + + button.solid:hover { border-color: rgba(var(--primer-color-accent), .2); background-color: rgba(var(--primer-color-accent), .2); box-shadow: 0 -10px 20px 10px rgba(var(--primer-color-accent), .05); diff --git a/public/assets/media/icons/chevron.svg b/public/assets/media/icons/chevron.svg index 056ac62..5f067d3 100644 --- a/public/assets/media/icons/chevron.svg +++ b/public/assets/media/icons/chevron.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/contact.php b/public/contact.php index 2223317..378b3c3 100644 --- a/public/contact.php +++ b/public/contact.php @@ -81,8 +81,14 @@

Please consider encrypting your message with my PGP key, even if your message doesn't contain anything sensitive. The key is also available via WKD, and is listed on the openPGP key server for victor@vlw.se.

Fingerprint for victor@vlw.se
DCE987311CB5D2A252F58951D0AD730E1057DFC6

- - + +
@@ -129,7 +135,11 @@ - +
diff --git a/public/work.php b/public/work.php index 00dc63a..85f7bb8 100644 --- a/public/work.php +++ b/public/work.php @@ -50,7 +50,10 @@

get_summary("vlw/vegvisir") ?>

- +
@@ -62,7 +65,10 @@

get_summary("vlw/reflect") ?>

- +
@@ -75,7 +81,10 @@

vlw.se

Can I put my own website here, is that cheating? Maybe, but I think this site counts as the most important thing I've personally created. I've only used my own libraries and frameworks to create this website, so it kind of works as a live demonstration of many of my web projects bundled together.

- +
@@ -85,7 +94,10 @@

Silly dabbles

I create silly things for fun to challenge myself sometimes, and putting them all on the timeline is not right. So I made an appropriately-themed and named page to highlight most of my "what if I could" projects.

- +
@@ -95,7 +107,11 @@

vlw/php-mysql

get_summary("vlw/php-mysql") ?>

- +
@@ -105,7 +121,10 @@

Website for iCellate Medical

get_summary("icellate/website") ?>

- +
@@ -115,7 +134,10 @@

Modernizing GeneMate by iCellate

get_summary("icellate/genemate") ?>

- +
@@ -125,7 +147,10 @@

Custom pages for Deltaco AB

get_summary("deltaco/asyncapp") ?>

- +
@@ -134,5 +159,8 @@
- -
\ No newline at end of file + + diff --git a/public/work/timeline.php b/public/work/timeline.php index d783653..3b38358 100644 --- a/public/work/timeline.php +++ b/public/work/timeline.php @@ -100,8 +100,14 @@

This timeline has most but not all of my FOSS software. If you want to see a list of all things I've created for the free software world, check out my repos on Codeberg or Forgejo.

- - + +
@@ -156,12 +162,18 @@ get_actions($item[WorkModel::ID->value]) as $action): ?> - + - +