mirror of
https://codeberg.org/vlw/vlw.se.git
synced 2025-09-13 21:13:40 +02:00
feat: redesigned standard button element
This commit is contained in:
parent
ff7d4f5397
commit
e00a373d25
6 changed files with 74 additions and 31 deletions
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ section.git {
|
|||
border-radius: 6px;
|
||||
}
|
||||
|
||||
section.git svg {
|
||||
section.git > svg {
|
||||
fill: white;
|
||||
width: 60px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
@ -326,7 +334,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 {
|
||||
|
|
@ -334,8 +343,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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -37,8 +37,14 @@
|
|||
<?= VV::embed("public/assets/media/icons/codeberg.svg") ?>
|
||||
<p>I have moved most of my free open-source software <a href="https://giveupgithub.com">away from GitHub</a> to <a href="https://codeberg.org/vlw">Codeberg</a>. I also have a mirror of everything and sources for some smaller projects on <a href="https://git.vlw.se">Forgejo</a>.</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>
|
||||
|
||||
|
|
@ -151,7 +157,10 @@
|
|||
: $action[WorkActionsModel::HREF->value];
|
||||
?>
|
||||
|
||||
<a href="<?= $link_href ?>" <?= $link_attr ?>><button class="inline <?= $action["class_list"] ?>"><?= $action["display_text"] ?></button></a>
|
||||
<a href="<?= $link_href ?>" <?= $link_attr ?>><button class="inline <?= $action["class_list"] ?>">
|
||||
<p><?= $action["display_text"] ?></p>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue