1
0
Fork 0

new design for theme chooser

main
Gustav Lindqvist 1 month ago
parent 7debfedd6c
commit feaf530177

@ -33,7 +33,7 @@ function css() {
function serve() {
'use strict';
watch('src_/sass/**/*.scss', css);
watch('src/_sass/**/*.scss', css);
}
exports.css = css;

@ -4,7 +4,8 @@
"description": "Personal website using Eleventy",
"main": "eleventy.js",
"scripts": {
"build": "eleventy"
"build": "npx @11ty/eleventy",
"serve": "npx @11ty/eleventy --serve --incremental --ignore-initial"
},
"author": "Gustav Lindqvist",
"license": "MIT",

@ -17,17 +17,21 @@ eleventyComputed:
<html lang="sv" class="no-js">
<head>
<meta charset="utf-8">
<title>
{% if page_title %}{{ page_title }}{% elseif title %}{{ title }} / {{ metadata.title }}{% elseif tagMetadata[ tag ].title %}{{ tagMetadata[ tag ].title | firstLetterUpper }} / {{ metadata.title }}{% else %}{{ metadata.title }} / {{ metadata.description }}{% endif %}
</title>
<meta name="generator" content="{{ eleventy.generator }}">
<title>{% if page_title %}{{ page_title }}{% elseif title %}{{ title }} / {{ metadata.title }}{% elseif tagMetadata[ tag ].title %}{{ tagMetadata[ tag ].title | firstLetterUpper }} / {{ metadata.title }}{% else %}{{ metadata.title }} / {{ metadata.description }}{% endif %}</title>
<meta name="description" content="{% if tagMetadata[ tag ].description %}{{ tagMetadata[ tag ].description }}{% elseif description %}{{ description }}{% else %}{{ metadata.description }}{{ metadata.description }}{% endif %}">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="/assets/stylesheets/gustavlindqvist.css?{% checksum './src/assets/stylesheets/gustavlindqvist.css' %}">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="/site.webmanifest">
<script src="/assets/javascript/dayjs.min.js" defer></script>
@ -45,8 +49,6 @@ eleventyComputed:
<meta property="og:image" content="{{ meta.image.src }}">
<meta property="og:type" content="{% if type === 'post' %}article{% else %}website{% endif %}">
<meta name="generator" content="{{ eleventy.generator }}">
{% include 'partials/identities.njk' %}
{% include 'partials/feeds.njk' %}

@ -1,13 +1,13 @@
{% if templateClass == 'tag-template' %}
<link rel="alternate" type="application/atom+xml" title="Gustav Lindqvist - {{ tagMetadata[ tag ].title | firstLetterUpper }}" href="{{ metadata.url }}{{ page.url }}feed.xml"/>
<link rel="alternate" type="application/atom+xml" title="Gustav Lindqvist - {{ tagMetadata[ tag ].title | firstLetterUpper }}" href="{{ metadata.url }}{{ page.url }}feed.xml"/>
{% else %}
<link rel="alternate" type="application/atom+xml" title="Gustav Lindqvist" href="/feed.xml"/>
<link rel="alternate" type="application/atom+xml" title="Gustav Lindqvist Friluftsliv" href="/friluftsliv/feed.xml"/>
<link rel="alternate" type="application/atom+xml" title="Gustav Lindqvist Fotografering" href="/fotografering/feed.xml"/>
<link rel="alternate" type="application/atom+xml" title="Gustav Lindqvist Cykling" href="/cykling/feed.xml"/>
<link rel="alternate" type="application/atom+xml" title="Gustav Lindqvist Löpning" href="/lopning/feed.xml"/>
<link rel="alternate" type="application/atom+xml" title="Gustav Lindqvist Kartor" href="/kartor/feed.xml"/>
<link rel="alternate" type="application/atom+xml" title="Gustav Lindqvist Resor" href="/kartor/feed.xml"/>
<link rel="alternate" type="application/atom+xml" title="Gustav Lindqvist Ölbryggning" href="/olbryggning/feed.xml"/>
<link rel="alternate" type="application/atom+xml" title="Gustav Lindqvist Länktips" href="/lanktips.xml"/>
<link rel="alternate" type="application/atom+xml" title="Gustav Lindqvist" href="/feed.xml"/>
<link rel="alternate" type="application/atom+xml" title="Gustav Lindqvist Friluftsliv" href="/friluftsliv/feed.xml"/>
<link rel="alternate" type="application/atom+xml" title="Gustav Lindqvist Fotografering" href="/fotografering/feed.xml"/>
<link rel="alternate" type="application/atom+xml" title="Gustav Lindqvist Cykling" href="/cykling/feed.xml"/>
<link rel="alternate" type="application/atom+xml" title="Gustav Lindqvist Löpning" href="/lopning/feed.xml"/>
<link rel="alternate" type="application/atom+xml" title="Gustav Lindqvist Kartor" href="/kartor/feed.xml"/>
<link rel="alternate" type="application/atom+xml" title="Gustav Lindqvist Resor" href="/kartor/feed.xml"/>
<link rel="alternate" type="application/atom+xml" title="Gustav Lindqvist Ölbryggning" href="/olbryggning/feed.xml"/>
<link rel="alternate" type="application/atom+xml" title="Gustav Lindqvist Länktips" href="/lanktips.xml"/>
{% endif %}

@ -1,57 +1,36 @@
<div class="site-footer__content columns">
<div class="column">
<h2 id="lankar-i-sidfot" class="sr-only">Länkar</h2>
<div class="site-footer__content">
<div>
<h2 id="lankar-i-sidfot" class="site-footer__heading">Länkar</h2>
<nav class="site-footer__navigation" aria-labelledby="lankar-i-sidfot">
<ul>
<ul class="list">
<li><a href="/kontakta-mig/">Kontakta mig</a></li>
<li><a href="/hembryggeri/">Hembryggeriet</a></li>
<li><a href="/blogroll/">Blogroll</a></li>
<li><a href="/lanktips/">Länktips</a></li>
<li><a href="/licensiering/">Licensiering</a></li>
<li><a href="/feeds/">Prenumerera via flöden</a></li>
</ul>
</nav>
</div>
<div class="column">
<h2 id="andra-konton" class="sr-only">Mina andra konton</h2>
<div>
<h2 id="andra-konton" class="site-footer__heading">Annat innehåll</h2>
<nav class="site-footer__navigation" aria-labelledby="andra-konton">
<ul class="list -column-count-2">
<li class="list-item--mastodon"><a rel="me" href="https://jkpg.rocks/@gustav">
<svg class="icon icon--mastodon" role="presentation" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/mastodon.svg#mastodon-icon"></use></svg> Mastodon
</a></li>
<li class="list-item--twitter"><a rel="me" href="https://twitter.gustavlindqvist.se">
<svg class="icon icon--twitter" role="presentation" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/twitter.svg#twitter-icon"></use></svg> Mitt Twitterarkiv
</a></li>
<li class="list-item--discord"><a rel="me" href="https://discordapp.com/users/126936105458073600/">
<svg class="icon icon--discord" role="presentation" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/discord.svg#discord-icon"></use></svg> Discord
</a></li>
<li class="list-item--signal"><a rel="me" href="http://signal.me/#p/+46761479126">
<svg class="icon icon--signal" role="presentation" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/signal.svg#signal-icon"></use></svg> Signal
</a></li>
<li class="list-item--telegram"><a rel="me" href="https://t.me/Reedyn">
<svg class="icon icon--telegram" role="presentation" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/telegram.svg#telegram-icon"></use></svg> Telegram
</a></li>
<li class="list-item--steam"><a rel="me" href="https://steamcommunity.com/id/reedyn">
<svg class="icon icon--steam" role="presentation" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/steam.svg#steam-icon"></use></svg> Steam
</a></li>
<li class="list-item--github"><a rel="me" href="https://github.com/Reedyn">
<svg class="icon icon--GitHub" role="presentation" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/github.svg#github-icon"></use></svg> GitHub
</a></li>
<li class="list-item--openstreetmap"><a rel="me" href="https://www.openstreetmap.org/user/Reedyn">
<svg class="icon icon--openstreetmap" role="presentation" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/openstreetmap.svg#openstreetmap-icon"></use></svg> OpenStreetMap
</a></li>
<li class="list-item--untappd"><a rel="me" href="https://untappd.com/user/Reedyn">
<svg class="icon icon--untappd" role="presentation" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/untappd.svg#untappd-icon"></use></svg> Untappd
</a></li>
<li class="list-item--strava"><a rel="me" href="https://www.strava.com/athletes/7825396">
<svg class="icon icon--strava" role="presentation" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/strava.svg#strava-icon"></use></svg> Strava
</a></li>
<ul class="list">
<li><a href="/blogroll/">Blogroll</a></li>
<li><a href="/lanktips/">Länktips</a></li>
</ul>
</nav>
</div>
<div class="button-row -flex-grow -align-right">
<a class="button__icon" href="/feeds/">
<svg class="icon" role="presentation" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/rss.svg#rss"></use></svg>
<span class="sr-only">RSS-flöden</span>
</a>
<a class="button__icon" href="https://git.gustavlindqvist.se/gustav/gustavlindqvist.se">
<svg class="icon" role="presentation" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/source-branch.svg#icon"></use></svg>
<span class="sr-only">Gå till källkoden för webbplatsen</span>
</a>
<button id="theme-chooser-toggle" class="button__icon hidden@no-js">
<svg class="icon" role="presentation" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/spray.svg#icon"></use></svg>
<span class="sr-only">Visa färgväljaren</span>
</button>
</div>
</div>
<div class="hidden@no-js" aria-labelledby="valj-tema">
<h2 id="valj-tema" class="sr-only">Välj färgtema</h2>
{% include 'partials/theme-chooser.njk' %}
</div>
<p class="site-footer__content">Byggt med <a href="https://www.11ty.dev/">11ty</a> och <a href="https://git.gustavlindqvist.se/gustav/gustavlindqvist.se">öppen källkod <svg class="icon icon--xml" role="presentation" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/xml.svg#icon"></use></svg></a></p>
{% include 'partials/theme-chooser.njk' %}

@ -1,10 +1,11 @@
<link href="https://twitter.com/lindqvistus" rel="me">
<link href="https://twitter.com/reedyn" rel="me">
<link href="https://facebook.com/reedyn" rel="me">
<link href="https://github.com/Reedyn" rel="me">
<link href="https://jkpg.rocks/@gustav" rel="me">
<link href="https://mastodon.beer/@gustav" rel="me">
<link href="https://mstdn.games/@reedyn" rel="me">
<link href="https://reedyn.com/@reedyn" rel="me">
<link href="https://github.com/Reedyn" rel="me">
<link href="mailto:hej@gustavlindqvist.se" rel="me">
<link href="https://twitter.com/lindqvistus" rel="me">
<link href="https://twitter.com/reedyn" rel="me">
<link href="https://facebook.com/reedyn" rel="me">
<link href="https://github.com/Reedyn" rel="me">
<link href="https://jkpg.rocks/@gustav" rel="me">
<link href="https://mastodon.beer/@gustav" rel="me">
<link href="https://mstdn.games/@reedyn" rel="me">
<link href="https://reedyn.com/@reedyn" rel="me">
<link href="https://github.com/Reedyn" rel="me">
<link href="mailto:hej@gustavlindqvist.se" rel="me">

@ -1,10 +1,30 @@
<div id="theme-chooser-container" class="theme-chooser-container hidden">
<button class="theme-chooser" id="theme-choose__auto" value="auto">Automatiskt tema</button>
<label for="theme-chooser" class="sr-only">Välj tema</label>
<select name="theme-chooser" id="theme-chooser" class="theme-chooser">
<option value="auto">Auto</option>
<option value="light">Ljust</option>
<option value="dark">Mörkt</option>
</select>
<div id="theme-chooser-container" class="theme-chooser-container hidden hidden@no-js">
<button class="theme-chooser -auto" id="theme-choose__auto" value="auto">
<span class="theme-chooser__title">Auto</span>
<span class="theme-chooser__dot -text"></span>
<span class="theme-chooser__dot -text-alt"></span>
<span class="theme-chooser__dot -link"></span>
<span class="theme-chooser__dot -link-visited"></span>
</button>
<button class="theme-chooser -light" id="theme-choose__light" value="light">
<span class="theme-chooser__title">Ljust</span>
<span class="theme-chooser__dot -text"></span>
<span class="theme-chooser__dot -text-alt"></span>
<span class="theme-chooser__dot -link"></span>
<span class="theme-chooser__dot -link-visited"></span>
</button>
<button class="theme-chooser -dark" id="theme-choose__dark" value="dark">
<span class="theme-chooser__title">Mörkt</span>
<span class="theme-chooser__dot -text"></span>
<span class="theme-chooser__dot -text-alt"></span>
<span class="theme-chooser__dot -link"></span>
<span class="theme-chooser__dot -link-visited"></span>
</button>
<!--button class="theme-chooser -wiki" id="theme-choose__wiki" value="light">
<span class="theme-chooser__title">Wiki</span>
<span class="theme-chooser__dot -text"></span>
<span class="theme-chooser__dot -text-alt"></span>
<span class="theme-chooser__dot -link"></span>
<span class="theme-chooser__dot -link-visited"></span>
</button-->
</div>

@ -8,7 +8,7 @@ $padding__medium: 2rem;
$padding__large: 4rem;
$max-width__content: 70rem;
$max-width__base: 120rem;
$max-width__base: 110rem;
$header__height: 6rem;

@ -28,7 +28,7 @@ ol {
list-style: none;
}
.no-style {
.-no-style {
list-style: none;
padding-inline-start: 0;
}

@ -0,0 +1,5 @@
.button-row {
display: flex;
flex-direction: row;
column-gap: var(--margin__medium);
}

@ -0,0 +1,27 @@
.button__icon {
display: flex;
justify-content: center;
align-items: center;
width: 4em;
height: 4em;
margin: 0;
border-radius: 50%;
border: 0;
color: var(--color__text);
background: var(--color__background__alt);
cursor: pointer;
&:visited {
color: var(--color__text);
}
&:hover, &:focus {
color: var(--color__background);
background: var(--color__link);
}
svg {
width: 2em;
height: 2em;
}
}

@ -4,24 +4,21 @@
align-content: space-around;
align-items: center;
justify-content: space-around;
padding: var(--padding__medium) 0;
border-top: 1px solid var(--color__background__widget);
.column {
margin: var(--margin__medium) 0;
}
}
.site-footer__content {
display: flex;
flex-direction: column;
width: 100%;
max-width: var(--max-width__base);
padding: 0 var(--padding__medium);
font-size: 90%;
padding: var(--padding__large) var(--padding__medium);
font-size: var(--font__size-base);
grid-template-columns: 1fr;
grid-gap: var(--margin__medium);
grid-gap: var(--margin__large);
@include respond-to(small) {
grid-template-columns: 1fr 2fr;
flex-direction: row;
}
label {
@ -58,5 +55,6 @@
.site-footer__heading {
margin-top: 0;
font-size: var(--font__size__heading-4);
margin-bottom: var(--margin__small);
font-size: var(--font__size__heading-5);
}

@ -1,7 +1,105 @@
.theme-chooser-container {
--color__background: white;
--color__link: #{$color__blue};
--color__link__visited: #{$color__purple};
--color__text: black;
--color__text-alt: #{$color__25-brightness};
@media (prefers-color-scheme: dark) {
--color__background: #141414;
--color__link: #6183fd;
--color__link__visited: #B172FD;
--color__text: #{$color__95-brightness};
--color__text-alt: #{$color__65-brightness};
}
display: flex;
width: 100%;
padding: var(--padding__medium) var(--padding__medium);
column-gap: var(--margin__small);
justify-content: center;
background: var(--color__background__alt);
}
.theme-chooser {
position: relative;
min-width: 10rem;
margin: 0;
padding: var(--padding__small);
padding-bottom: 4rem;
border: 2px solid #8989898a;
border-radius: 3px;
background: var(--color__background);
cursor: pointer;
&.active {
border: 2px solid var(--color__text);
}
&:hover, &:focus {
border: 2px solid var(--color__link);
}
&__title {
font-size: var(--font__size);
color: var(--color__text);
}
&__dot {
position: absolute;
left: .7rem;
bottom: .7rem;
display: block;
border-radius: 50%;
width: 2.5rem;
height: 2.5rem;
border: 2px solid var(--color__background);
&.-text {
transform: translateX(0);
background: var(--color__text);
z-index: 4;
}
&.-text-alt {
transform: translateX(75%);
background: var(--color__text-alt);
z-index: 3;
}
&.-link {
transform: translateX(150%);
background: var(--color__link);
z-index: 2;
}
&.-link-visited {
transform: translateX(225%);
background: var(--color__link__visited);
z-index: 1;
}
}
&.-light {
--color__background: white;
--color__link: #{$color__blue};
--color__link__visited: #{$color__purple};
--color__text: black;
--color__text-alt: #{$color__25-brightness};
}
&.-dark {
--color__background: #141414;
--color__link: #6183fd;
--color__link__visited: #B172FD;
--color__text: #{$color__95-brightness};
--color__text-alt: #{$color__65-brightness};
}
&.-wiki {
font-family: serif;
--color__background: white;
--color__link: #3366cc;
--color__link__visited: #795cb2;
--color__text: #000000;
--color__text-alt: #202122;
}
}

@ -18,6 +18,20 @@
column-count: 2;
}
.-flex-grow {
flex: 1;
}
.-align-right {
justify-content: right;
text-align: right;
}
.-align-left {
justify-content: left;
text-align: left;
}
.sr-only {
position: absolute;
width: 1px;

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path id="icon" d="M10,4H12V6H10V4M7,3H9V5H7V3M7,6H9V8H7V6M6,8V10H4V8H6M6,5V7H4V5H6M6,2V4H4V2H6M13,22A2,2 0 0,1 11,20V10A2,2 0 0,1 13,8V7H14V4H17V7H18V8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H13M13,10V20H18V10H13Z" /></svg>

After

Width:  |  Height:  |  Size: 279 B

@ -13,28 +13,38 @@ const gustavlindqvist = (() => {
let theme = localStorage.getItem('theme');
if (theme) {
document.documentElement.setAttribute('data-theme', theme);
document.querySelector(`.theme-chooser.-${theme}`).classList.add('active');
} else {
document.querySelector(`.theme-chooser.-auto`).classList.add('active');
}
})();
const createThemeChooser = (() => {
const themeSelector = document.querySelector('#theme-chooser');
const themeSelectorContainer = document.querySelector('#theme-chooser-container');
const theme = localStorage.getItem('theme');
themeSelector.value = (theme) ? theme : 'auto';
const themeChooserToggle = document.getElementById('theme-chooser-toggle');
const themeChooserContainer = document.getElementById('theme-chooser-container');
const themeSelectors = document.querySelectorAll('.theme-chooser');
themeSelector.addEventListener('change', (event) => {
const selectedTheme = event.target.value;
if(selectedTheme === 'auto') {
localStorage.removeItem('theme');
document.documentElement.removeAttribute('data-theme');
} else {
localStorage.setItem('theme', event.target.value);
document.documentElement.setAttribute('data-theme', event.target.value);
}
themeChooserToggle.addEventListener('click', () => {
themeChooserContainer.classList.toggle('hidden');
});
themeSelectorContainer.classList.remove('hidden');
[...themeSelectors].forEach((themeSelector) => {
themeSelector.addEventListener('click', (event) => {
[...document.querySelectorAll('.theme-chooser.active')].forEach((btn) => { btn.classList.remove('active') });
const selectedTheme = themeSelector.value;
if(selectedTheme === 'auto') {
localStorage.removeItem('theme');
document.documentElement.removeAttribute('data-theme');
} else {
localStorage.setItem('theme', selectedTheme);
document.documentElement.setAttribute('data-theme', selectedTheme);
}
themeSelector.classList.add('active')
});
});
})();
const initializeDayJS = (() => {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -6,20 +6,43 @@ date: 2019-10-17
<p>Det går bra att kontakta mig via någon av följande tjänster. För säker kommunikation rekommenderas Signal.</p>
<ul class="list">
<li class="list-item--email"><a rel="me" href="mailto:&#104;&#101;&#106;&#064;&#103;&#117;&#115;&#116;&#097;&#118;&#108;&#105;&#110;&#100;&#113;&#118;&#105;&#115;&#116;&#046;&#115;&#101;">
<svg class="icon icon--email" role="presentation" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/email.svg#email-icon"></use></svg> &#104;&#101;&#106;&#064;&#103;&#117;&#115;&#116;&#097;&#118;&#108;&#105;&#110;&#100;&#113;&#118;&#105;&#115;&#116;&#046;&#115;&#101;
</a></li>
<li class="list-item--telegram"><a rel="me" href="https://t.me/Reedyn">
<svg class="icon icon--telegram" role="presentation" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/telegram.svg#telegram-icon"></use></svg> Telegram
</a></li>
<li class="list-item--signal"><a rel="me" href="http://signal.me/#p/+46761479126">
<svg class="icon icon--signal" role="presentation" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/signal.svg#signal-icon"></use></svg> Signal
</a></li>
<li class="list-item--discord"><a rel="me" href="https://discordapp.com/users/126936105458073600/">
<svg class="icon icon--discord" role="presentation" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/discord.svg#discord-icon"></use></svg> Discord
</a></li>
<li class="list-item--mastodon"><a rel="me" href="https://mastodon.se/@gustav">
<svg class="icon icon--mastodon" role="presentation" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/mastodon.svg#mastodon-icon"></use></svg> Mastodon
</a></li>
</ul>
<ul class="list -no-style">
<li class="list-item--email"><a rel="me" href="mailto:&#104;&#101;&#106;&#064;&#103;&#117;&#115;&#116;&#097;&#118;&#108;&#105;&#110;&#100;&#113;&#118;&#105;&#115;&#116;&#046;&#115;&#101;">
<svg class="icon icon--email" role="presentation" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/email.svg#email-icon"></use></svg> &#104;&#101;&#106;&#064;&#103;&#117;&#115;&#116;&#097;&#118;&#108;&#105;&#110;&#100;&#113;&#118;&#105;&#115;&#116;&#046;&#115;&#101;
</a></li>
<li class="list-item--telegram"><a rel="me" href="https://t.me/Reedyn">
<svg class="icon icon--telegram" role="presentation" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/telegram.svg#telegram-icon"></use></svg> Telegram
</a></li>
<li class="list-item--signal"><a rel="me" href="http://signal.me/#p/+46761479126">
<svg class="icon icon--signal" role="presentation" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/signal.svg#signal-icon"></use></svg> Signal
</a></li>
<li class="list-item--mastodon"><a rel="me" href="https://mastodon.se/@gustav">
<svg class="icon icon--mastodon" role="presentation" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/mastodon.svg#mastodon-icon"></use></svg> Mastodon
</a></li>
</ul>
## Andra konton
<ul class="list -no-style">
<li class="list-item--twitter"><a rel="me" href="https://twitter.gustavlindqvist.se">
<svg class="icon icon--twitter" role="presentation" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/twitter.svg#twitter-icon"></use></svg> Mitt Twitterarkiv
</a></li>
<li class="list-item--steam"><a rel="me" href="https://steamcommunity.com/id/reedyn">
<svg class="icon icon--steam" role="presentation" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/steam.svg#steam-icon"></use></svg> Steam
</a></li>
<li class="list-item--discord"><a rel="me" href="https://discordapp.com/users/126936105458073600/">
<svg class="icon icon--discord" role="presentation" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/discord.svg#discord-icon"></use></svg> Discord
</a></li>
<li class="list-item--github"><a rel="me" href="https://github.com/Reedyn">
<svg class="icon icon--GitHub" role="presentation" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/github.svg#github-icon"></use></svg> GitHub
</a></li>
<li class="list-item--openstreetmap"><a rel="me" href="https://www.openstreetmap.org/user/Reedyn">
<svg class="icon icon--openstreetmap" role="presentation" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/openstreetmap.svg#openstreetmap-icon"></use></svg> OpenStreetMap
</a></li>
<li class="list-item--untappd"><a rel="me" href="https://untappd.com/user/Reedyn">
<svg class="icon icon--untappd" role="presentation" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/untappd.svg#untappd-icon"></use></svg> Untappd
</a></li>
<li class="list-item--strava"><a rel="me" href="https://www.strava.com/athletes/7825396">
<svg class="icon icon--strava" role="presentation" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" href="/assets/icons/strava.svg#strava-icon"></use></svg> Strava
</a></li>
</ul>

Loading…
Cancel
Save