From 1d8bcaf080eb106e8f430cd5ae13f40c08f975c3 Mon Sep 17 00:00:00 2001
From: Lyn Fugmann <lyn.fugmann@ifsr.de>
Date: Wed, 2 Oct 2024 12:16:01 +0200
Subject: [PATCH] refactor link styles

---
 _includes/footer.css |  4 ++--
 _includes/footer.njk |  6 +++---
 _includes/index.css  | 12 ++++++------
 _includes/index.njk  |  6 +++---
 _includes/page.css   |  4 ++--
 eleventy.config.js   |  2 --
 6 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/_includes/footer.css b/_includes/footer.css
index 912ef50..164c5f1 100644
--- a/_includes/footer.css
+++ b/_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;
 }
 
diff --git a/_includes/footer.njk b/_includes/footer.njk
index e789095..a910e9a 100644
--- a/_includes/footer.njk
+++ b/_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>
diff --git a/_includes/index.css b/_includes/index.css
index 368af62..37d1a57 100644
--- a/_includes/index.css
+++ b/_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;
diff --git a/_includes/index.njk b/_includes/index.njk
index 3f59ce8..0435cf3 100644
--- a/_includes/index.njk
+++ b/_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>
diff --git a/_includes/page.css b/_includes/page.css
index 97f7b87..831b9de 100644
--- a/_includes/page.css
+++ b/_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);
 }
 
diff --git a/eleventy.config.js b/eleventy.config.js
index 3881e82..a519c71 100644
--- a/eleventy.config.js
+++ b/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);
     };