YouHaveTrouble/youhavetrouble.github.io
1
0
Fork 0
mirror of https://github.com/YouHaveTrouble/youhavetrouble.github.io.git synced 2026-05-11 22:06:56 +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
+47 -39
View File
@@ -13,48 +13,52 @@ 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-grid"> <div class="hero-socials">
<h2>Socials</h2>
<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>
@@ -83,36 +87,40 @@ const permalink = Astro.site.href;
font-size: 1.4em; font-size: 1.4em;
} }
.hero-socials-grid { .hero-socials {
margin: 0 1em;
display: flex; display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 100%;
max-width: min(100%, 450px);
gap: 0.75rem;
}
.hero-socials-grid a {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column; flex-direction: column;
width: 5.5rem; max-width: min(100%, 450px);
height: 5.5rem; text-align: center;
text-decoration: none; gap: 1.5rem;
border-width: 1px; .hero-socials-grid {
border-style: solid; margin: 0 1em;
border-color: transparent; display: flex;
padding: 0.5rem; flex-wrap: wrap;
gap: 0.25rem; justify-content: center;
border-radius: 0.25rem; align-items: center;
} width: 100%;
gap: 0.75rem;
.hero-socials-grid a:hover { a {
color: var(--text-main); display: flex;
border-color: var(--text-main); justify-content: center;
align-items: center;
flex-direction: column;
width: 5.5rem;
height: 5.5rem;
text-decoration: none;
border-width: 1px;
border-style: solid;
border-color: transparent;
padding: 0.5rem;
gap: 0.25rem;
border-radius: 0.25rem;
&:hover {
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 {