refactor link styles
This commit is contained in:
parent
f4019437c5
commit
1d8bcaf080
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue