sidski/kjelsrud.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

✨ add webring

Browse source 
Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
Sindre Kjelsrud 2024-02-21 23:36:26 +01:00
parent 29e9253851
commit bf654334f1
Signed by untrusted user who does not match committer: sidski
GPG key ID: D2BBDF3EDE6BA9A6
3 changed files with 24 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
public/webring_dark.svg Normal file
View file

@ -0,0 +1 @@
<svg fill="none" height="300" stroke="#9AD3BB" stroke-linecap="square" stroke-width="28" width="300" xmlns="http://www.w3.org/2000/svg"><path d="M201.962 210a60 60 0 10-103.924-60l-50 86.603"/><path d="M98.038 210a60 60 0 10103.924-60l-50-86.603"/><path d="M150 120a60 60 0 100 120h100"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 294 B

1
public/webring_light.svg Normal file
View file

@ -0,0 +1 @@
<svg fill="none" height="300" stroke="#3B2C29" stroke-linecap="square" stroke-width="28" width="300" xmlns="http://www.w3.org/2000/svg"><path d="M201.962 210a60 60 0 10-103.924-60l-50 86.603"/><path d="M98.038 210a60 60 0 10103.924-60l-50-86.603"/><path d="M150 120a60 60 0 100 120h100"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 294 B

26
src/components/Footer.astro
View file

@ -2,18 +2,36 @@
const today = new Date();
---
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<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 updateImageForTheme = () => {
const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
themeImage.src = currentTheme === 'dark' ? '/webring_dark.svg' : '/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);
}
</script>
<footer class="flex justify-between py-5 mt-5 footerbg">
<div>Sindre Kjelsrud &copy; {today.getFullYear()}</div>
<div class="social">
<div class="flex social">
<a href="https://github.com/SindreKjelsrud" aria-label="Link to my GitHub">
<iconify-icon icon="ri:github-line" width="30" height="30" />
</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>
<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"/>
</a>
</div>
</footer>