sangelo/website
sangelo/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

[a] add steam & mastodon buttons

Browse source
This commit is contained in:
Sangelo 2023-11-16 09:13:45 +01:00
parent c7eff090a3
commit 858dfc2cb7
2 changed files with 43 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/routes/Socials.svelte
View file

@ -9,9 +9,10 @@
import IconGitHub from 'svelte-material-icons/Github.svelte'; import IconGitHub from 'svelte-material-icons/Github.svelte';
import IconEmailFast from 'svelte-material-icons/EmailFast.svelte'; import IconEmailFast from 'svelte-material-icons/EmailFast.svelte';
import IconMatrix from 'svelte-material-icons/Matrix.svelte'; import IconMatrix from 'svelte-material-icons/Matrix.svelte';
// import IconGitpot from '$lib/IconGitpot.svelte';
import IconChevronDown from 'svelte-material-icons/ChevronDown.svelte'; import IconChevronDown from 'svelte-material-icons/ChevronDown.svelte';
import IconChevronUp from 'svelte-material-icons/ChevronUp.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 // Initialisations
@ -32,6 +33,14 @@
'with ❤️', 'with ❤️',
'with ❤️', 'with ❤️',
'with ❤️', 'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ❤️',
'with ☕️', 'with ☕️',
'with 🍵', 'with 🍵',
'with 🍪', 'with 🍪',
@ -143,7 +152,18 @@
{#if showMore} {#if showMore}
<div class="button-container below" transition:slide> <div class="button-container below" transition:slide>
<div class="tooltip"> <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 <a
href="https://matrix.to/#/@sangelo:matrix.org" href="https://matrix.to/#/@sangelo:matrix.org"
target="_blank" target="_blank"
@ -163,8 +183,6 @@
class="round-button button gitpot" class="round-button button gitpot"
aria-label="Gitpot" aria-label="Gitpot"
> >
<!-- <img src="/assets/icons/gitpot.svg" class="icon gitpot" /> -->
<!-- <IconGitpot class="icon gitpot"/> -->
<svg <svg
class="icon gitpot" class="icon gitpot"
width="220" width="220"
@ -226,7 +244,18 @@
</a> </a>
<span class="tooltiptext">/sangelo</span> <span class="tooltiptext">/sangelo</span>
</div> </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> </div>
{/if} {/if}
</div> </div>

10
src/styles/socials.scss
View file

@ -38,7 +38,7 @@
.toggle-more { .toggle-more {
color: $star-gray; color: $star-gray;
cursor: pointer; cursor: pointer;
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, margin 0.05s ease-out;
text-decoration: none; text-decoration: none;
align-self: center; align-self: center;
width: 4em; width: 4em;
@ -84,6 +84,10 @@
background: linear-gradient(158deg, #ec8f5a 55.62%, #ffaf37 90.01%); 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 { .button.matrix {
background: linear-gradient(145deg, rgb(12, 163, 165) 25%, rgb(19, 174, 122) 100%); 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 { .button.inactive {
background: transparent; background: transparent;
display: none; display: none;