From de636d43d6f8bec6a2f9309f7258fe64defd3cd7 Mon Sep 17 00:00:00 2001
From: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
Date: Thu, 22 Feb 2024 15:14:29 +0100
Subject: [PATCH] :zap: make socials show up without need for javascript

Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
---
 public/socials/github_dark.svg         |  5 +++++
 public/socials/github_light.svg        |  5 +++++
 public/socials/spotify_dark.svg        | 19 +++++++++++++++++++
 public/socials/spotify_light.svg       | 19 +++++++++++++++++++
 public/{ => socials}/webring_dark.svg  |  0
 public/{ => socials}/webring_light.svg |  0
 src/components/Footer.astro            | 22 +++++++++++-----------
 src/styles/global.css                  | 17 -----------------
 8 files changed, 59 insertions(+), 28 deletions(-)
 create mode 100644 public/socials/github_dark.svg
 create mode 100644 public/socials/github_light.svg
 create mode 100644 public/socials/spotify_dark.svg
 create mode 100644 public/socials/spotify_light.svg
 rename public/{ => socials}/webring_dark.svg (100%)
 rename public/{ => socials}/webring_light.svg (100%)

diff --git a/public/socials/github_dark.svg b/public/socials/github_dark.svg
new file mode 100644
index 0000000..ff77d6f
--- /dev/null
+++ b/public/socials/github_dark.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.29183 21V18.4407L9.3255 16.6219C9.36595 16.0561 9.58639 15.5228 9.94907 15.11C9.95438 15.1039 9.95972 15.0979 9.9651 15.0919C9.9791 15.0763 9.96988 15.0511 9.94907 15.0485V15.0485C7.52554 14.746 5.0005 13.7227 5.0005 9.26749C4.9847 8.17021 5.3427 7.10648 6.00437 6.27215C6.02752 6.24297 6.05103 6.21406 6.07492 6.18545V6.18545C6.10601 6.1482 6.11618 6.09772 6.10194 6.05134C6.10107 6.04853 6.10021 6.04571 6.09935 6.04289C6.0832 5.9899 6.06804 5.93666 6.05388 5.88321C5.81065 4.96474 5.86295 3.98363 6.20527 3.09818C6.20779 3.09164 6.21034 3.08511 6.2129 3.07858C6.22568 3.04599 6.25251 3.02108 6.28698 3.01493V3.01493C6.50189 2.97661 7.37036 2.92534 9.03298 4.07346C9.08473 4.10919 9.13724 4.14609 9.19053 4.18418V4.18418C9.22901 4.21168 9.27794 4.22011 9.32344 4.20716C9.32487 4.20675 9.32631 4.20634 9.32774 4.20593C9.41699 4.18056 9.50648 4.15649 9.59617 4.1337C11.1766 3.73226 12.8234 3.73226 14.4038 4.1337C14.4889 4.1553 14.5737 4.17807 14.6584 4.20199C14.6602 4.20252 14.6621 4.20304 14.6639 4.20356C14.7174 4.21872 14.7749 4.20882 14.8202 4.17653V4.17653C14.8698 4.14114 14.9187 4.10679 14.967 4.07346C16.6257 2.92776 17.4894 2.9764 17.7053 3.01469V3.01469C17.7404 3.02092 17.7678 3.04628 17.781 3.07946C17.7827 3.08373 17.7843 3.08799 17.786 3.09226C18.1341 3.97811 18.1894 4.96214 17.946 5.88321C17.9315 5.93811 17.9159 5.9928 17.8993 6.04723V6.04723C17.8843 6.09618 17.8951 6.14942 17.9278 6.18875C17.9289 6.18998 17.9299 6.19121 17.9309 6.19245C17.9528 6.21877 17.9744 6.24534 17.9956 6.27215C18.6573 7.10648 19.0153 8.17021 18.9995 9.26749C18.9995 13.747 16.4565 14.7435 14.0214 15.015V15.015C14.0073 15.0165 14.001 15.0334 14.0105 15.0439C14.0141 15.0479 14.0178 15.0519 14.0214 15.0559C14.2671 15.3296 14.4577 15.6544 14.5811 16.0103C14.7101 16.3824 14.7626 16.7797 14.7351 17.1754V21" stroke="#9AD3BB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 17C4.36915 17.0523 4.72159 17.1883 5.03065 17.3975C5.3397 17.6068 5.59726 17.8838 5.7838 18.2078C5.94231 18.4962 6.15601 18.7504 6.41264 18.9557C6.66927 19.161 6.96379 19.3135 7.27929 19.4043C7.59478 19.4952 7.92504 19.5226 8.25112 19.485C8.5772 19.4475 8.89268 19.3457 9.17946 19.1855" stroke="#9AD3BB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/public/socials/github_light.svg b/public/socials/github_light.svg
new file mode 100644
index 0000000..b62718f
--- /dev/null
+++ b/public/socials/github_light.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.29183 21V18.4407L9.3255 16.6219C9.36595 16.0561 9.58639 15.5228 9.94907 15.11C9.95438 15.1039 9.95972 15.0979 9.9651 15.0919C9.9791 15.0763 9.96988 15.0511 9.94907 15.0485V15.0485C7.52554 14.746 5.0005 13.7227 5.0005 9.26749C4.9847 8.17021 5.3427 7.10648 6.00437 6.27215C6.02752 6.24297 6.05103 6.21406 6.07492 6.18545V6.18545C6.10601 6.1482 6.11618 6.09772 6.10194 6.05134C6.10107 6.04853 6.10021 6.04571 6.09935 6.04289C6.0832 5.9899 6.06804 5.93666 6.05388 5.88321C5.81065 4.96474 5.86295 3.98363 6.20527 3.09818C6.20779 3.09164 6.21034 3.08511 6.2129 3.07858C6.22568 3.04599 6.25251 3.02108 6.28698 3.01493V3.01493C6.50189 2.97661 7.37036 2.92534 9.03298 4.07346C9.08473 4.10919 9.13724 4.14609 9.19053 4.18418V4.18418C9.22901 4.21168 9.27794 4.22011 9.32344 4.20716C9.32487 4.20675 9.32631 4.20634 9.32774 4.20593C9.41699 4.18056 9.50648 4.15649 9.59617 4.1337C11.1766 3.73226 12.8234 3.73226 14.4038 4.1337C14.4889 4.1553 14.5737 4.17807 14.6584 4.20199C14.6602 4.20252 14.6621 4.20304 14.6639 4.20356C14.7174 4.21872 14.7749 4.20882 14.8202 4.17653V4.17653C14.8698 4.14114 14.9187 4.10679 14.967 4.07346C16.6257 2.92776 17.4894 2.9764 17.7053 3.01469V3.01469C17.7404 3.02092 17.7678 3.04628 17.781 3.07946C17.7827 3.08373 17.7843 3.08799 17.786 3.09226C18.1341 3.97811 18.1894 4.96214 17.946 5.88321C17.9315 5.93811 17.9159 5.9928 17.8993 6.04723V6.04723C17.8843 6.09618 17.8951 6.14942 17.9278 6.18875C17.9289 6.18998 17.9299 6.19121 17.9309 6.19245C17.9528 6.21877 17.9744 6.24534 17.9956 6.27215C18.6573 7.10648 19.0153 8.17021 18.9995 9.26749C18.9995 13.747 16.4565 14.7435 14.0214 15.015V15.015C14.0073 15.0165 14.001 15.0334 14.0105 15.0439C14.0141 15.0479 14.0178 15.0519 14.0214 15.0559C14.2671 15.3296 14.4577 15.6544 14.5811 16.0103C14.7101 16.3824 14.7626 16.7797 14.7351 17.1754V21" stroke="#3B2C29" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 17C4.36915 17.0523 4.72159 17.1883 5.03065 17.3975C5.3397 17.6068 5.59726 17.8838 5.7838 18.2078C5.94231 18.4962 6.15601 18.7504 6.41264 18.9557C6.66927 19.161 6.96379 19.3135 7.27929 19.4043C7.59478 19.4952 7.92504 19.5226 8.25112 19.485C8.5772 19.4475 8.89268 19.3457 9.17946 19.1855" stroke="#3B2C29" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/public/socials/spotify_dark.svg b/public/socials/spotify_dark.svg
new file mode 100644
index 0000000..53e96b5
--- /dev/null
+++ b/public/socials/spotify_dark.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="300" height="300" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    
+    <title>spotify [#162]</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+
+</defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Dribbble-Light-Preview" transform="translate(-140.000000, -7479.000000)" fill="#9AD3BB">
+            <g id="icons" transform="translate(56.000000, 160.000000)">
+                <path d="M99.915,7327.865 C96.692,7325.951 91.375,7325.775 88.297,7326.709 C87.803,7326.858 87.281,7326.58 87.131,7326.085 C86.981,7325.591 87.26,7325.069 87.754,7324.919 C91.287,7323.846 97.159,7324.053 100.87,7326.256 C101.314,7326.52 101.46,7327.094 101.196,7327.538 C100.934,7327.982 100.358,7328.129 99.915,7327.865 L99.915,7327.865 Z M99.81,7330.7 C99.584,7331.067 99.104,7331.182 98.737,7330.957 C96.05,7329.305 91.952,7328.827 88.773,7329.792 C88.36,7329.916 87.925,7329.684 87.8,7329.272 C87.676,7328.86 87.908,7328.425 88.32,7328.3 C91.951,7327.198 96.466,7327.732 99.553,7329.629 C99.92,7329.854 100.035,7330.334 99.81,7330.7 L99.81,7330.7 Z M98.586,7333.423 C98.406,7333.717 98.023,7333.81 97.729,7333.63 C95.381,7332.195 92.425,7331.871 88.944,7332.666 C88.609,7332.743 88.274,7332.533 88.198,7332.197 C88.121,7331.862 88.33,7331.528 88.667,7331.451 C92.476,7330.58 95.743,7330.955 98.379,7332.566 C98.673,7332.746 98.766,7333.129 98.586,7333.423 L98.586,7333.423 Z M94,7319 C88.477,7319 84,7323.477 84,7329 C84,7334.523 88.477,7339 94,7339 C99.523,7339 104,7334.523 104,7329 C104,7323.478 99.523,7319.001 94,7319.001 L94,7319 Z" id="spotify-[#162]">
+
+</path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/socials/spotify_light.svg b/public/socials/spotify_light.svg
new file mode 100644
index 0000000..041dc77
--- /dev/null
+++ b/public/socials/spotify_light.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="300" height="300" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    
+    <title>spotify [#162]</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+
+</defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Dribbble-Light-Preview" transform="translate(-140.000000, -7479.000000)" fill="#3B2C29">
+            <g id="icons" transform="translate(56.000000, 160.000000)">
+                <path d="M99.915,7327.865 C96.692,7325.951 91.375,7325.775 88.297,7326.709 C87.803,7326.858 87.281,7326.58 87.131,7326.085 C86.981,7325.591 87.26,7325.069 87.754,7324.919 C91.287,7323.846 97.159,7324.053 100.87,7326.256 C101.314,7326.52 101.46,7327.094 101.196,7327.538 C100.934,7327.982 100.358,7328.129 99.915,7327.865 L99.915,7327.865 Z M99.81,7330.7 C99.584,7331.067 99.104,7331.182 98.737,7330.957 C96.05,7329.305 91.952,7328.827 88.773,7329.792 C88.36,7329.916 87.925,7329.684 87.8,7329.272 C87.676,7328.86 87.908,7328.425 88.32,7328.3 C91.951,7327.198 96.466,7327.732 99.553,7329.629 C99.92,7329.854 100.035,7330.334 99.81,7330.7 L99.81,7330.7 Z M98.586,7333.423 C98.406,7333.717 98.023,7333.81 97.729,7333.63 C95.381,7332.195 92.425,7331.871 88.944,7332.666 C88.609,7332.743 88.274,7332.533 88.198,7332.197 C88.121,7331.862 88.33,7331.528 88.667,7331.451 C92.476,7330.58 95.743,7330.955 98.379,7332.566 C98.673,7332.746 98.766,7333.129 98.586,7333.423 L98.586,7333.423 Z M94,7319 C88.477,7319 84,7323.477 84,7329 C84,7334.523 88.477,7339 94,7339 C99.523,7339 104,7334.523 104,7329 C104,7323.478 99.523,7319.001 94,7319.001 L94,7319 Z" id="spotify-[#162]">
+
+</path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/webring_dark.svg b/public/socials/webring_dark.svg
similarity index 100%
rename from public/webring_dark.svg
rename to public/socials/webring_dark.svg
diff --git a/public/webring_light.svg b/public/socials/webring_light.svg
similarity index 100%
rename from public/webring_light.svg
rename to public/socials/webring_light.svg
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 4ab4789..7d3dd0e 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,20 +1,20 @@
 ---
 const today = new Date();
 ---
-<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
-
 <script type="module" client:load>
-  const themeImage = document.getElementById('themeImage');
+  const githubImage = document.getElementById('githubImage');
+  const spotifyImage = document.getElementById('spotifyImage');
+  const webringImage = document.getElementById('webringImage');
 
   const updateImageForTheme = () => {
     const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
-    themeImage.src = currentTheme === 'dark' ? '/webring_dark.svg' : '/webring_light.svg';
+    githubImage.src = currentTheme === 'dark' ? '/socials/github_dark.svg' : '/socials/github_light.svg';
+    spotifyImage.src = currentTheme === 'dark' ? '/socials/spotify_dark.svg' : '/socials/spotify_light.svg';
+    webringImage.src = currentTheme === 'dark' ? '/socials/webring_dark.svg' : '/socials/webring_light.svg';
   };
 
-  // Initial update on page load
   updateImageForTheme();
 
-  // Listen for theme changes if your theme toggle updates a class or attribute
   const themeToggle = document.getElementById('themeToggle');
   if (themeToggle) {
     themeToggle.addEventListener('click', updateImageForTheme);
@@ -23,15 +23,15 @@ const today = new Date();
 
 <footer class="flex justify-between py-5 mt-5 footerbg">
 	<div>Sindre Kjelsrud &copy; {today.getFullYear()}</div>
-	<div class="flex social">
+	<div class="flex gap-1">
     <a href="https://github.com/SindreKjelsrud" aria-label="Link to my GitHub">
-      <iconify-icon icon="ri:github-line" width="30" height="30" />
+      <img id="githubImage" height="30" width="30" src="/socials/github_light.svg" alt="GitHub"/>
     </a>
     <a href="https://open.spotify.com/user/kjelsrud!" aria-label="Link to my Spotify">
-				<iconify-icon icon="mdi:spotify" width="30" height="30" />
-		</a>
+      <img id="spotifyImage" height="30" width="30" src="/socials/spotify_light.svg" alt="Spotify"/>
+    </a>
     <a href="https://webring.xxiivv.com/#sid" target="_blank" rel="noopener">
-      <img id="themeImage" height="30" width="30" src="/webring_light.svg" alt="XXIIVV webring"/>
+      <img id="webringImage" height="30" width="30" src="/socials/webring_light.svg" alt="XXIIVV webring"/>
     </a>
   </div>
 </footer>
diff --git a/src/styles/global.css b/src/styles/global.css
index 935352f..6086d8c 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -31,23 +31,6 @@ p {
 	font-size: large;
 }
 
-/* HOME */
-.social a {
-	color: var(--light-1);
-}
-
-.dark .social a {
-	color: var(--dark-1);
-}
-
-.social a:nth-child(1) :hover {
-	color: grey !important;
-}
-
-.social a:nth-child(2) :hover {
-    color: #1DB954 !important;
-}
-
 /* FOOTER */
 .footerbg {
 	background-color: var(--light-bg);