refactor link styles

_includes/footer.css

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

_includes/footer.njk

@@ -1,8 +1,8 @@
 <footer>
   <div class="footer-container content">
     {% set otherLang = page.url | locale_links | first %}
-    <div class="languageSwitch">
-      <a href="{{otherLang.url}}" lang="{{otherLang.lang}}" hreflang="{{otherLang.lang}}">
+    <div>
+      <a class="languageSwitch" href="{{otherLang.url}}" lang="{{otherLang.lang}}" hreflang="{{otherLang.lang}}">
         {% if otherLang.lang == "de" %}
           Deutsche Version 🇩🇪
         {% else %}
@@ -33,7 +33,7 @@
     </nav>
     <span class="designCredit">
       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>Made with 🧉 and 🌈 in Dresden</span>
   </div>

_includes/index.css

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

_includes/index.njk

@@ -32,17 +32,17 @@ layout: page.njk
 
   <ul class="social-media">
     <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" %}
       </a>
     </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" %}
       </a>
     </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" %}
       </a>
     </li>

_includes/page.css

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

eleventy.config.js

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