[a] add steam & mastodon buttons
This commit is contained in:
parent
c7eff090a3
commit
858dfc2cb7
2 changed files with 43 additions and 6 deletions
|
@ -9,9 +9,10 @@
|
|||
import IconGitHub from 'svelte-material-icons/Github.svelte';
|
||||
import IconEmailFast from 'svelte-material-icons/EmailFast.svelte';
|
||||
import IconMatrix from 'svelte-material-icons/Matrix.svelte';
|
||||
// import IconGitpot from '$lib/IconGitpot.svelte';
|
||||
import IconChevronDown from 'svelte-material-icons/ChevronDown.svelte';
|
||||
import IconChevronUp from 'svelte-material-icons/ChevronUp.svelte';
|
||||
import IconMastodon from 'svelte-material-icons/Mastodon.svelte';
|
||||
import IconSteam from 'svelte-material-icons/Steam.svelte';
|
||||
|
||||
// Initialisations
|
||||
|
||||
|
@ -32,6 +33,14 @@
|
|||
'with ❤️',
|
||||
'with ❤️',
|
||||
'with ❤️',
|
||||
'with ❤️',
|
||||
'with ❤️',
|
||||
'with ❤️',
|
||||
'with ❤️',
|
||||
'with ❤️',
|
||||
'with ❤️',
|
||||
'with ❤️',
|
||||
'with ❤️',
|
||||
'with ☕️',
|
||||
'with 🍵',
|
||||
'with 🍪',
|
||||
|
@ -143,7 +152,18 @@
|
|||
{#if showMore}
|
||||
<div class="button-container below" transition:slide>
|
||||
<div class="tooltip">
|
||||
<a href="#top" class="round-button button inactive" aria-label="Inactive" />
|
||||
<a
|
||||
href="https://steamcommunity.com/id/sangeloo"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="round-button button steam"
|
||||
aria-label="Steam"
|
||||
>
|
||||
<IconSteam class="icon" size="2.5em" />
|
||||
</a>
|
||||
<span class="tooltiptext">@sangeloo</span>
|
||||
</div>
|
||||
<div class="tooltip">
|
||||
<a
|
||||
href="https://matrix.to/#/@sangelo:matrix.org"
|
||||
target="_blank"
|
||||
|
@ -163,8 +183,6 @@
|
|||
class="round-button button gitpot"
|
||||
aria-label="Gitpot"
|
||||
>
|
||||
<!-- <img src="/assets/icons/gitpot.svg" class="icon gitpot" /> -->
|
||||
<!-- <IconGitpot class="icon gitpot"/> -->
|
||||
<svg
|
||||
class="icon gitpot"
|
||||
width="220"
|
||||
|
@ -226,7 +244,18 @@
|
|||
</a>
|
||||
<span class="tooltiptext">/sangelo</span>
|
||||
</div>
|
||||
<a href="#top" class="round-button button inactive" aria-label="Inactive" />
|
||||
<div class="tooltip">
|
||||
<a
|
||||
href="https://mas.to/@sangelo"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="round-button button mastodon"
|
||||
aria-label="Mastodon"
|
||||
>
|
||||
<IconMastodon class="icon" size="2.5em" />
|
||||
</a>
|
||||
<span class="tooltiptext">@sangelo@mas.to</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
@ -38,7 +38,7 @@
|
|||
.toggle-more {
|
||||
color: $star-gray;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
transition: transform 0.3s ease-in-out, margin 0.05s ease-out;
|
||||
text-decoration: none;
|
||||
align-self: center;
|
||||
width: 4em;
|
||||
|
@ -84,6 +84,10 @@
|
|||
background: linear-gradient(158deg, #ec8f5a 55.62%, #ffaf37 90.01%);
|
||||
}
|
||||
|
||||
.button.steam {
|
||||
background: linear-gradient(35deg, rgb(23 29 37) 35%, rgb(44 46 53) 100%);
|
||||
}
|
||||
|
||||
.button.matrix {
|
||||
background: linear-gradient(145deg, rgb(12, 163, 165) 25%, rgb(19, 174, 122) 100%);
|
||||
}
|
||||
|
@ -97,6 +101,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.button.mastodon {
|
||||
background: linear-gradient(180deg, rgb(99 100 255) 10%, rgb(86 58 204) 100%);
|
||||
}
|
||||
|
||||
.button.inactive {
|
||||
background: transparent;
|
||||
display: none;
|
||||
|
|
Loading…
Reference in a new issue