vlw/vlw.se
1
0
Fork 0
mirror of https://codeberg.org/vlw/vlw.se.git synced 2025-09-13 21:13:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: new design for button.inline elements (#22)

Browse source 
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
This commit is contained in:
Victor Westerlund 2025-01-28 15:23:55 +00:00
parent e25b1b6689
commit e420f33d4a
8 changed files with 139 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
public/about.php
View file

@ -85,12 +85,12 @@
<languages-list>
<?php foreach ($langs->all() as $lang => $bytes): ?>
<a href="<?= FORGEJO_HREF . $lang ?>"><language-item data-lang="<?= $lang ?>">
<a href="<?= FORGEJO_HREF . $lang ?>"><button data-lang="<?= $lang ?>" class="inline">
<p><?= $langs->get_percent_str($lang) ?></p>
<p class="lang"><?= $lang ?></p>
<p><?= $langs->get_bytes_str($lang) ?></p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</language-item></a>
</button></a>
<?php endforeach; ?>
</languages-list>

36
public/assets/css/pages/about.css
View file

@ -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 {

4
public/assets/css/pages/contact.css
View file

@ -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) {

66
public/assets/css/shell.css
View file

@ -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);

2
public/assets/media/icons/chevron.svg
View file

@ -1 +1 @@
<svg viewBox="0 0 78.743 46.968" xmlns="http://www.w3.org/2000/svg"><path d="m530.436 290.342 6.658 8.935c4.438 5.956 8.512 11.037 12.222 15.242 3.71 4.205 7.691 8.797 11.945 13.776a590.023 590.023 0 0 1 11.95 14.425c3.713 4.638 9.56 11.441 17.54 20.41 7.98 8.97 15.892 17.872 23.736 26.707a2267.256 2267.256 0 0 0 21.633 24.05c6.578 7.197 11.225 8.056 13.942 2.576 2.717-5.48 8.45-12.8 17.199-21.96 8.748-9.162 15.904-16.447 21.468-21.856a2287.547 2287.547 0 0 1 17.272-16.611 674.569 674.569 0 0 0 16.506-16.229c5.054-5.154 9.753-9.968 14.098-14.443 4.344-4.475 9.494-10.016 15.448-16.624 5.954-6.607 10.747-11.748 14.38-15.422 3.631-3.675 6.18-6.009 7.645-7.003a16.094 16.094 0 0 1 4.757-2.202 16.095 16.095 0 0 1 5.212-.568c1.768.096 3.474.47 5.12 1.126a16.094 16.094 0 0 1 4.492 2.701 16.094 16.094 0 0 1 3.394 3.995 16.094 16.094 0 0 1 1.941 4.87c.381 1.729.476 3.473.285 5.234a16.094 16.094 0 0 1-1.402 5.051 16.095 16.095 0 0 1-2.94 4.34c-15.004 15.842-39.417-8.906-22.252-23.487a16.094 16.094 0 0 1 4.491-2.703 16.094 16.094 0 0 1 5.12-1.127 16.095 16.095 0 0 1 5.211.567 16.095 16.095 0 0 1 4.758 2.2 16.094 16.094 0 0 1 3.805 3.606 16.094 16.094 0 0 1 2.456 4.631c.565 1.678.848 3.403.848 5.173 0 1.771-.283 3.495-.849 5.173a16.095 16.095 0 0 1-2.455 4.632l-1.606 2.112-5.37 4.582c-3.583 3.055-8.51 7.767-14.786 14.135a11933.445 11933.445 0 0 0-15.839 16.1c-4.284 4.364-8.943 9.26-13.975 14.688a75638.076 75638.076 0 0 1-15.826 17.063 2642.057 2642.057 0 0 0-15.89 17.273c-5.073 5.567-11.507 12.866-19.3 21.897-7.794 9.03-13.63 15.948-17.51 20.753a496.057 496.057 0 0 1-12.49 14.836c-4.447 5.085-9.976 7.77-16.588 8.052-6.612.283-12.583-2.325-17.913-7.822-5.33-5.498-11.117-11.861-17.361-19.091-6.245-7.23-11.274-13.11-15.087-17.64a385.872 385.872 0 0 0-11.496-13.06 905.91 905.91 0 0 1-12.117-13.426c-4.228-4.774-10.087-11.613-17.577-20.518-7.49-8.905-13.37-15.797-17.635-20.676-4.266-4.88-8.437-9.663-12.511-14.35-4.075-4.687-8.453-9.915-13.135-15.684-4.681-5.77-7.355-9.208-8.02-10.317a15.914 15.914 0 0 1-1.567-3.517 15.937 15.937 0 0 1 .724-11.305 15.914 15.914 0 0 1 2.003-3.288 15.914 15.914 0 0 1 2.733-2.713 15.913 15.913 0 0 1 3.302-1.98 15.914 15.914 0 0 1 3.68-1.132 15.914 15.914 0 0 1 3.845-.219c1.29.083 2.552.319 3.785.708 1.233.39 2.401.92 3.505 1.593a15.914 15.914 0 0 1 3.023 2.386l1.366 1.375z" transform="matrix(.26458 0 0 .26458 -132.758 -75.015)"/></svg>
<svg class="chevron" viewBox="0 0 78.743 46.968" xmlns="http://www.w3.org/2000/svg"><path d="m530.436 290.342 6.658 8.935c4.438 5.956 8.512 11.037 12.222 15.242 3.71 4.205 7.691 8.797 11.945 13.776a590.023 590.023 0 0 1 11.95 14.425c3.713 4.638 9.56 11.441 17.54 20.41 7.98 8.97 15.892 17.872 23.736 26.707a2267.256 2267.256 0 0 0 21.633 24.05c6.578 7.197 11.225 8.056 13.942 2.576 2.717-5.48 8.45-12.8 17.199-21.96 8.748-9.162 15.904-16.447 21.468-21.856a2287.547 2287.547 0 0 1 17.272-16.611 674.569 674.569 0 0 0 16.506-16.229c5.054-5.154 9.753-9.968 14.098-14.443 4.344-4.475 9.494-10.016 15.448-16.624 5.954-6.607 10.747-11.748 14.38-15.422 3.631-3.675 6.18-6.009 7.645-7.003a16.094 16.094 0 0 1 4.757-2.202 16.095 16.095 0 0 1 5.212-.568c1.768.096 3.474.47 5.12 1.126a16.094 16.094 0 0 1 4.492 2.701 16.094 16.094 0 0 1 3.394 3.995 16.094 16.094 0 0 1 1.941 4.87c.381 1.729.476 3.473.285 5.234a16.094 16.094 0 0 1-1.402 5.051 16.095 16.095 0 0 1-2.94 4.34c-15.004 15.842-39.417-8.906-22.252-23.487a16.094 16.094 0 0 1 4.491-2.703 16.094 16.094 0 0 1 5.12-1.127 16.095 16.095 0 0 1 5.211.567 16.095 16.095 0 0 1 4.758 2.2 16.094 16.094 0 0 1 3.805 3.606 16.094 16.094 0 0 1 2.456 4.631c.565 1.678.848 3.403.848 5.173 0 1.771-.283 3.495-.849 5.173a16.095 16.095 0 0 1-2.455 4.632l-1.606 2.112-5.37 4.582c-3.583 3.055-8.51 7.767-14.786 14.135a11933.445 11933.445 0 0 0-15.839 16.1c-4.284 4.364-8.943 9.26-13.975 14.688a75638.076 75638.076 0 0 1-15.826 17.063 2642.057 2642.057 0 0 0-15.89 17.273c-5.073 5.567-11.507 12.866-19.3 21.897-7.794 9.03-13.63 15.948-17.51 20.753a496.057 496.057 0 0 1-12.49 14.836c-4.447 5.085-9.976 7.77-16.588 8.052-6.612.283-12.583-2.325-17.913-7.822-5.33-5.498-11.117-11.861-17.361-19.091-6.245-7.23-11.274-13.11-15.087-17.64a385.872 385.872 0 0 0-11.496-13.06 905.91 905.91 0 0 1-12.117-13.426c-4.228-4.774-10.087-11.613-17.577-20.518-7.49-8.905-13.37-15.797-17.635-20.676-4.266-4.88-8.437-9.663-12.511-14.35-4.075-4.687-8.453-9.915-13.135-15.684-4.681-5.77-7.355-9.208-8.02-10.317a15.914 15.914 0 0 1-1.567-3.517 15.937 15.937 0 0 1 .724-11.305 15.914 15.914 0 0 1 2.003-3.288 15.914 15.914 0 0 1 2.733-2.713 15.913 15.913 0 0 1 3.302-1.98 15.914 15.914 0 0 1 3.68-1.132 15.914 15.914 0 0 1 3.845-.219c1.29.083 2.552.319 3.785.708 1.233.39 2.401.92 3.505 1.593a15.914 15.914 0 0 1 3.023 2.386l1.366 1.375z" transform="matrix(.26458 0 0 .26458 -132.758 -75.015)"/></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

16
public/contact.php
View file

@ -81,8 +81,14 @@
<p>Please consider encrypting your message with my PGP key, even if your message doesn't contain anything sensitive. The key is also available via <a href="https://wiki.gnupg.org/WKD" target="_blank" rel="noopener noreferer">WKD</a>, and is listed on the <a href="https://keys.openpgp.org/search?q=victor%40vlw.se" target="_blank" rel="noopener noreferer">openPGP key server</a> for victor@vlw.se.</p>
<p>Fingerprint for victor@vlw.se<br><strong class="fingerprint">DCE987311CB5D2A252F58951D0AD730E1057DFC6</strong></p>
<div class="buttons">
<a href="https://keys.openpgp.org/vks/v1/by-fingerprint/DCE987311CB5D2A252F58951D0AD730E1057DFC6"><button class="inline solid">download ASC</button></a>
<a href="https://emailselfdefense.fsf.org/en/" target="_blank" rel="noopener noreferer"><button class="inline">email encryption guide</button></a>
<a href="https://keys.openpgp.org/vks/v1/by-fingerprint/DCE987311CB5D2A252F58951D0AD730E1057DFC6"><button class="inline solid download">
<p>download ASC</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
<a href="https://emailselfdefense.fsf.org/en/" target="_blank" rel="noopener noreferer"><button class="inline">
<p>email encryption guide</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
</div>
</section>
<section class="center fade">
@ -129,7 +135,11 @@
<label title="this field is required">your message (required)</label>
<textarea name="<?= MessagesModel::MESSAGE->value ?>" required placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie dignissim mauris vel dignissim. Sed et aliquet odio, id egestas libero. Vestibulum ut dui a turpis aliquam hendrerit id et dui. Morbi eu tristique quam, sit amet dictum felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac nibh a ex accumsan ullamcorper non quis eros. Nam at suscipit lacus. Nullam placerat semper sapien, vitae aliquet nisl elementum a. Duis viverra quam eros, eu vestibulum quam egestas sit amet. Duis lobortis varius malesuada. Mauris in fringilla mi. "></textarea>
</input-group>
<button class="inline solid">send</button>
<button class="inline solid">
<?= VV::embed("public/assets/media/icons/email.svg") ?>
<p>send message</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button>
</form>
</section>

46
public/work.php
View file

@ -50,7 +50,10 @@
</div>
<p><?= $work->get_summary("vlw/vegvisir") ?></p>
<div class="actions">
<a href="https://vegvisir.vlw.se"><button class="inline">read more</button></a>
<a href="https://vegvisir.vlw.se"><button class="inline solid">
<p>read more</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
</div>
</div>
</div>
@ -62,7 +65,10 @@
</div>
<p><?= $work->get_summary("vlw/reflect") ?></p>
<div class="actions">
<a href="https://reflect.vlw.se"><button class="inline">read more</button></a>
<a href="https://reflect.vlw.se"><button class="inline solid">
<p>read more</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
</div>
</div>
</div>
@ -75,7 +81,10 @@
<h3>vlw.se</h3>
<p>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.</p>
<div class="actions">
<a href="https://codeberg.org/vlw/vlw.se"><button class="inline">view source</button></a>
<a href="https://codeberg.org/vlw/vlw.se"><button class="inline">
<p>read more</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
</div>
</featured-item>
<featured-item>
@ -85,7 +94,10 @@
<h3>Silly dabbles</h3>
<p>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.</p>
<div class="actions">
<a href="/playground"><button class="inline">playground</button></a>
<a href="/playground"><button class="inline">
<p>playground</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
</div>
</featured-item>
<featured-item>
@ -95,7 +107,11 @@
<h3>vlw/php-mysql</h3>
<p><?= $work->get_summary("vlw/php-mysql") ?></p>
<div class="actions">
<a href="https://codeberg.org/vlw/php-mysql"><button class="inline">view source</button></a>
<a href="https://codeberg.org/vlw/php-mysql"><button class="inline">
<?= VV::embed("public/assets/media/icons/codeberg.svg") ?>
<p>view source</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
</div>
</featured-item>
<featured-item>
@ -105,7 +121,10 @@
<h3>Website for iCellate Medical</h3>
<p><?= $work->get_summary("icellate/website") ?></p>
<div class="actions">
<a href="/work/icellate/website"><button class="inline">read more</button></a>
<a href="/work/icellate/website"><button class="inline">
<p>read more</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
</div>
</featured-item>
<featured-item>
@ -115,7 +134,10 @@
<h3>Modernizing GeneMate by iCellate</h3>
<p><?= $work->get_summary("icellate/genemate") ?></p>
<div class="actions">
<a href="/work/icellate/genemate"><button class="inline">read more</button></a>
<a href="/work/icellate/genemate"><button class="inline">
<p>read more</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
</div>
</featured-item>
<featured-item>
@ -125,7 +147,10 @@
<h3>Custom pages for Deltaco AB</h3>
<p><?= $work->get_summary("deltaco/asyncapp") ?></p>
<div class="actions">
<a href="/work/deltaco/asyncapp"><button class="inline">read more</button></a>
<a href="/work/deltaco/asyncapp"><button class="inline">
<p>read more</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
</div>
</featured-item>
</section>
@ -134,5 +159,8 @@
</section>
<?= VV::include("public/work/timeline?limit=" . TIMELINE_PREVIEW_LIMIT) ?>
<section class="heading">
<a href="/work/timeline"><button class="inline solid">view full timeline</button></a>
<a href="/work/timeline"><button class="inline solid">
<p>view full timeline</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
</section>

20
public/work/timeline.php
View file

@ -100,8 +100,14 @@
<?= VV::embed("public/assets/media/icons/codeberg.svg") ?>
<p>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.</p>
<div class="buttons">
<a href="https://codeberg.org/vlw"><button class="inline solid">Codeberg</button></a>
<a href="https://git.vlw.se"><button class="inline">Forgejo</button></a>
<a href="https://codeberg.org/vlw"><button class="inline solid">
<p>Codeberg</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
<a href="https://git.vlw.se"><button class="inline">
<p>Forgejo</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
</div>
</section>
<section class="timeline">
@ -156,12 +162,18 @@
<?php // Display each action button ?>
<?php foreach ($work->get_actions($item[WorkModel::ID->value]) as $action): ?>
<a href="<?= $action[WorkActionsModel::HREF->value] ?>"><button class="inline <?= $action[WorkActionsModel::CLASS_LIST->value] ?>"><?= $action[WorkActionsModel::DISPLAY_TEXT->value] ?></button></a>
<a href="<?= $action[WorkActionsModel::HREF->value] ?>"><button class="inline <?= $action[WorkActionsModel::CLASS_LIST->value] ?>">
<p><?= $action[WorkActionsModel::DISPLAY_TEXT->value] ?></p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
<?php endforeach; ?>
<?php // Display a link to namespaced page on vlw.se if no action is defined ?>
<?php else: ?>
<a href="<?= $item[WorkModel::ID->value] ?>"><button class="inline">read more</button></a>
<a href="<?= $item[WorkModel::ID->value] ?>"><button class="inline">
<p>read more</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
<?php endif; ?>
</div>