new design for theme chooser
parent
7debfedd6c
commit
feaf530177
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue