refactor link styles

This commit is contained in:
Lyn Fugmann 2024-10-02 12:16:01 +02:00
parent f4019437c5
commit 1d8bcaf080
6 changed files with 16 additions and 18 deletions

View file

@ -52,7 +52,7 @@ footer {
border-bottom: 1px dotted var(--color-text); border-bottom: 1px dotted var(--color-text);
} }
.languageSwitch a { .languageSwitch {
display: inline-block; display: inline-block;
background: #e2e8f0; background: #e2e8f0;
color: #000; color: #000;
@ -63,7 +63,7 @@ footer {
transition: background-color .3s ease-out; transition: background-color .3s ease-out;
} }
.languageSwitch a:hover { .languageSwitch:hover {
background: #d5dbe4; background: #d5dbe4;
} }

View file

@ -1,8 +1,8 @@
<footer> <footer>
<div class="footer-container content"> <div class="footer-container content">
{% set otherLang = page.url | locale_links | first %} {% set otherLang = page.url | locale_links | first %}
<div class="languageSwitch"> <div>
<a href="{{otherLang.url}}" lang="{{otherLang.lang}}" hreflang="{{otherLang.lang}}"> <a class="languageSwitch" href="{{otherLang.url}}" lang="{{otherLang.lang}}" hreflang="{{otherLang.lang}}">
{% if otherLang.lang == "de" %} {% if otherLang.lang == "de" %}
Deutsche Version 🇩🇪 Deutsche Version 🇩🇪
{% else %} {% else %}
@ -33,7 +33,7 @@
</nav> </nav>
<span class="designCredit"> <span class="designCredit">
Design: Design:
<a href="https://designtoasty.de" target="_blank" rel="noreferrer">Designtoasty</a> <a class="designLink" href="https://designtoasty.de" target="_blank" rel="noreferrer">Designtoasty</a>
</span> </span>
<span>Made with 🧉 and 🌈 in Dresden</span> <span>Made with 🧉 and 🌈 in Dresden</span>
</div> </div>

View file

@ -96,13 +96,17 @@
display: inline-block; display: inline-block;
} }
.social-media a { .social-media li:not(:first-child) {
margin-left: 36px;
}
.social-link {
color: #fff; color: #fff;
filter: drop-shadow(0 0 10px rgba(0,0,0,.5)); filter: drop-shadow(0 0 10px rgba(0,0,0,.5));
transition: opacity .3s ease-out; transition: opacity .3s ease-out;
} }
.social-media a:hover { .social-link:hover {
opacity: .75; opacity: .75;
} }
@ -112,10 +116,6 @@
fill: currentColor; fill: currentColor;
} }
.social-media li:not(:first-child) {
margin-left: 36px;
}
@media (width < 640px) { @media (width < 640px) {
.introduction { .introduction {
padding: 6.5rem 0; padding: 6.5rem 0;

View file

@ -32,17 +32,17 @@ layout: page.njk
<ul class="social-media"> <ul class="social-media">
<li> <li>
<a href="https://www.instagram.com/ifsrde" title="Instagram" target="_blank"> <a class="social-link" href="https://www.instagram.com/ifsrde" title="Instagram" target="_blank">
{% icon "brands:instagram" %} {% icon "brands:instagram" %}
</a> </a>
</li> </li>
<li> <li>
<a href="https://toot.kif.rocks/@iFSR" title="Mastodon" target="_blank"> <a class="social-link" href="https://toot.kif.rocks/@iFSR" title="Mastodon" target="_blank">
{% icon "brands:mastodon" %} {% icon "brands:mastodon" %}
</a> </a>
</li> </li>
<li> <li>
<a href="https://t.me/s/ifsrde" title="Telegram" target="_blank"> <a class="social-link" href="https://t.me/s/ifsrde" title="Telegram" target="_blank">
{% icon "brands:telegram" %} {% icon "brands:telegram" %}
</a> </a>
</li> </li>

View file

@ -69,13 +69,13 @@ p {
line-height: 1.8; line-height: 1.8;
} }
a.link { a:not([class]) {
color: var(--color-primary); color: var(--color-primary);
text-decoration: underline dotted var(--color-primary); text-decoration: underline dotted var(--color-primary);
font-weight: 500; font-weight: 500;
transition: filter .1s ease-out; transition: filter .1s ease-out;
} }
a.link:hover { a:not([class]):hover {
filter: brightness(.8); filter: brightness(.8);
} }

View file

@ -108,8 +108,6 @@ module.exports = function(eleventyConfig) {
tokens[idx].attrSet('href', newHref); tokens[idx].attrSet('href', newHref);
} }
tokens[idx].attrSet('class', 'link');
return self.renderToken(tokens, idx, options); return self.renderToken(tokens, idx, options);
}; };