YouHaveTrouble/youhavetrouble.github.io
1
0
Fork 0
mirror of https://github.com/YouHaveTrouble/youhavetrouble.github.io.git synced 2026-05-12 06:16:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

make screen readers ignore the images as the links already have a description and eagerly load the social media icons

Browse Source
This commit is contained in:
YouHaveTrouble
2024-07-22 21:58:55 +02:00
parent 1b9cbfa0a9
commit 8f936ced05
1 changed files with 47 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/index.astro
+25 -17
View File
@@ -13,49 +13,53 @@ const permalink = Astro.site.href;
<p>Feel free to check out what I got in store!</p> <p>Feel free to check out what I got in store!</p>
</div> </div>
<div class="hero-socials">
<h2>Socials</h2>
<div class="hero-socials-grid"> <div class="hero-socials-grid">
<a href="https://github.com/YouHaveTrouble" class="social-link" target="_blank" rel="external"> <a href="https://github.com/YouHaveTrouble" class="social-link" target="_blank" rel="external">
<img src="assets/icons/github.svg" alt="GitHub" draggable="false" loading="lazy"> <img src="assets/icons/github.svg" alt aria-hidden="true" draggable="false" loading="eager">
<span>GitHub</span> <span>GitHub</span>
</a> </a>
<a href="https://discord.youhavetrouble.me" class="social-link" target="_blank" rel="external"> <a href="https://discord.youhavetrouble.me" class="social-link" target="_blank" rel="external">
<img src="assets/icons/discord.svg" alt="Discord" draggable="false" loading="lazy"> <img src="assets/icons/discord.svg" alt aria-hidden="true" draggable="false" loading="eager">
<span>Discord</span> <span>Discord</span>
</a> </a>
<a href="https://ko-fi.com/youhavetrouble" class="social-link" target="_blank" rel="external"> <a href="https://ko-fi.com/youhavetrouble" class="social-link" target="_blank" rel="external">
<img src="assets/icons/kofi.svg" alt="Ko-fi" draggable="false" loading="lazy"> <img src="assets/icons/kofi.svg" alt aria-hidden="true" draggable="false" loading="eager">
<span>Ko-fi</span> <span>Ko-fi</span>
</a> </a>
<a href="https://steamcommunity.com/id/YouHavetrouble" class="social-link" target="_blank" rel="external"> <a href="https://steamcommunity.com/id/YouHavetrouble" class="social-link" target="_blank" rel="external">
<img src="assets/icons/steam.svg" alt="Steam" draggable="false" loading="lazy"> <img src="assets/icons/steam.svg" alt aria-hidden="true" draggable="false" loading="eager">
<span>Steam</span> <span>Steam</span>
</a> </a>
<a href="https://www.youtube.com/@YouHaveTrouble" class="social-link" target="_blank" rel="external"> <a href="https://www.youtube.com/@YouHaveTrouble" class="social-link" target="_blank" rel="external">
<img src="assets/icons/youtube.svg" alt="YouTube" draggable="false" loading="lazy"> <img src="assets/icons/youtube.svg" alt aria-hidden="true" draggable="false" loading="eager">
<span>YouTube</span> <span>YouTube</span>
</a> </a>
<a href="https://modrinth.com/user/YouHaveTrouble" class="social-link" target="_blank" rel="external"> <a href="https://modrinth.com/user/YouHaveTrouble" class="social-link" target="_blank" rel="external">
<img src="assets/icons/modrinth.svg" alt="Modrinth" draggable="false" loading="lazy"> <img src="assets/icons/modrinth.svg" alt aria-hidden="true" draggable="false" loading="eager">
<span>Modrinth</span> <span>Modrinth</span>
</a> </a>
<a href="https://wakatime.com/@YouHaveTrouble" class="social-link" target="_blank" rel="external"> <a href="https://wakatime.com/@YouHaveTrouble" class="social-link" target="_blank" rel="external">
<img src="assets/icons/wakatime.svg" alt="WakaTime" draggable="false" loading="lazy"> <img src="assets/icons/wakatime.svg" alt aria-hidden="true" draggable="false" loading="eager">
<span>WakaTime</span> <span>WakaTime</span>
</a> </a>
<a href="https://open.spotify.com/user/11144490753" class="social-link" target="_blank" rel="external"> <a href="https://open.spotify.com/user/11144490753" class="social-link" target="_blank" rel="external">
<img src="assets/icons/spotify.svg" alt="Spotify" draggable="false" loading="lazy"> <img src="assets/icons/spotify.svg" alt aria-hidden="true" draggable="false" loading="eager">
<span>Spotify</span> <span>Spotify</span>
</a> </a>
<a href="https://www.linkedin.com/in/pawel-youhavetrouble-michalewski/" class="social-link" target="_blank" rel="external"> <a href="https://www.linkedin.com/in/pawel-youhavetrouble-michalewski/" class="social-link" target="_blank" rel="external">
<img src="assets/icons/linkedin.svg" alt="LinkedIn" draggable="false" loading="lazy"> <img src="assets/icons/linkedin.svg" alt aria-hidden="true" draggable="false" loading="eager">
<span>LinkedIn</span> <span>LinkedIn</span>
</a> </a>
<a href="mailto://contact@youhavetrouble.me" class="social-link" target="_blank" rel="external"> <a href="mailto://contact@youhavetrouble.me" class="social-link" target="_blank" rel="external">
<img src="assets/icons/email.svg" alt="Email" draggable="false" loading="lazy"> <img src="assets/icons/email.svg" alt aria-hidden="true" draggable="false" loading="eager">
<span>Email</span> <span>Email</span>
</a> </a>
</div> </div>
</div> </div>
</div>
</BaseLayout> </BaseLayout>
<style> <style>
@@ -83,6 +87,12 @@ const permalink = Astro.site.href;
font-size: 1.4em; font-size: 1.4em;
} }
.hero-socials {
display: flex;
flex-direction: column;
max-width: min(100%, 450px);
text-align: center;
gap: 1.5rem;
.hero-socials-grid { .hero-socials-grid {
margin: 0 1em; margin: 0 1em;
display: flex; display: flex;
@@ -90,11 +100,8 @@ const permalink = Astro.site.href;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
max-width: min(100%, 450px);
gap: 0.75rem; gap: 0.75rem;
} a {
.hero-socials-grid a {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@@ -108,12 +115,13 @@ const permalink = Astro.site.href;
padding: 0.5rem; padding: 0.5rem;
gap: 0.25rem; gap: 0.25rem;
border-radius: 0.25rem; border-radius: 0.25rem;
} &:hover {
.hero-socials-grid a:hover {
color: var(--text-main); color: var(--text-main);
border-color: var(--text-main); border-color: var(--text-main);
} }
}
}
}
html:not(.theme-dark) .hero-socials-grid a img { html:not(.theme-dark) .hero-socials-grid a img {
filter: invert(0.8); filter: invert(0.8);