Make links accessible
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

This commit is contained in:
Isaac Mills 2025-07-12 19:08:20 -06:00
parent b51e43f431
commit 046274bda8
Signed by: fnmain
GPG key ID: B67D7410F33A0F61
10 changed files with 24 additions and 23 deletions

View file

@ -11,7 +11,7 @@
<div class="figure">
<slot:img></slot:img>
</div>
<if condition="text != ''">
<if condition="text != '' && !$slots.text?.filled">
<p style="font-size: 200px; text-align: center; margin: 0; padding: 0;">{{text}}</p>
</if>
<markdown>

View file

@ -0,0 +1,10 @@
<script props>
module.exports = {
page: props.page,
aria_selected: Boolean(props.selected)
}
</script>
<button hx-get="/partials/{{page}}" hx-push-url="/{{page}}" role="tab" aria-selected="{{aria_selected}}"
aria-controls="tab-content">
<yield></yield>
</button>

View file

@ -4,18 +4,10 @@
}
</script>
<nav class="tab-list" role="tablist" hx-indicator="#indicator">
<button hx-get="/partials/projects.html" hx-push-url="/projects.html" class="{{ selected-- == 0 ? 'selected' : '' }}"
role="tab" aria-selected="{{ selected == -1 ? 'true' : 'false' }}" aria-controls="tab-content">Our
Projects</button>
<button hx-get="/partials/who_we_are.html" hx-push-url="/who_we_are.html"
class="{{ selected-- == 0 ? 'selected' : '' }}" role="tab" aria-selected="{{ selected == -1 ? 'true' : 'false' }}"
aria-controls="tab-content">Who we are</button>
<button hx-get="/partials/interests.html" hx-push-url="/interests.html"
class="{{ selected-- == 0 ? 'selected' : '' }}" role="tab" aria-selected="{{ selected == -1 ? 'true' : 'false' }}"
aria-controls="tab-content">Our Interests</button>
<button hx-get="/partials/page_four.html" hx-push-url="/page_four.html"
class="{{ selected-- == 0 ? 'selected' : '' }}" role="tab" aria-selected="{{ selected == -1 ? 'true' : 'false' }}"
aria-controls="tab-content">Page Four</button>
<x-tab-button page="projects.html" selected="{{ selected-- == 0 }}">Our Projects</x-tab-button>
<x-tab-button page="who_we_are.html" selected="{{ selected-- == 0 }}">Who we are</x-tab-button>
<x-tab-button page="interests.html" selected="{{ selected-- == 0 }}">Our Interests</x-tab-button>
<x-tab-button page="page_four.html" selected="{{ selected-- == 0 }}">Page Four</x-tab-button>
</nav>
<hr style="margin: 0">
<div id="tab-content" role="tabpanel" class="tab-content">

View file

@ -3,7 +3,7 @@
href: props.href,
}
</script>
<a href="https://github.com/{{href}}" target="_blank">
<a href="https://github.com/{{href}}" target="_blank" alt="{{href}} on GitHub">
<svg width="16.405pt" height="16pt" version="1.1" viewBox="0 0 16.405 16" xml:space="preserve"
xmlns="http://www.w3.org/2000/svg">
<path

View file

@ -3,7 +3,7 @@
href: props.href,
}
</script>
<a href="https://www.linkedin.com/in/{{href}}" target="_blank">
<a href="https://www.linkedin.com/in/{{href}}" target="_blank" alt="{{href}} on LinkedIn">
<svg width="18.79pt" height="16pt" version="1.1" viewBox="0 0 18.79 16" xml:space="preserve"
xmlns="http://www.w3.org/2000/svg">
<g fill="#fff" stroke-width=".78292">

View file

@ -3,7 +3,7 @@
href: props.href,
}
</script>
<a href="https://listenbrainz.org/user/{{href}}" target="_blank">
<a href="https://listenbrainz.org/user/{{href}}" target="_blank" alt="{{href}} on ListenBrainz">
<svg width="14.286pt" height="16pt" version="1.1" viewBox="0 0 14.286 16" xml:space="preserve"
xmlns="http://www.w3.org/2000/svg">
<polygon class="st0" transform="matrix(.57143 0 0 .57143 -1.3714 -.62857)"

View file

@ -3,7 +3,7 @@
href: props.href,
}
</script>
<a href="{{href}}" target="_blank">
<a href="{{href}}" target="_blank" alt="Associated webpage">
<svg id="Filled" width="16pt" height="16pt" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path
d="m8 0a8 8 0 1 0 8 8 8.0087 8.0087 0 0 0-8-8zm2.148 4.6667h-4.296a13.076 13.076 0 0 1 2.148-3.0587 13.047 13.047 0 0 1 2.148 3.0587zm0.53333 1.3333a6.8073 6.8073 0 0 1 0.31733 2 6.8073 6.8073 0 0 1-0.31733 2h-5.364a6.8073 6.8073 0 0 1-0.31733-2 6.8073 6.8073 0 0 1 0.31733-2zm-4.4147-4.4293a13.117 13.117 0 0 0-1.884 3.096h-2.1473a6.6873 6.6873 0 0 1 4.0313-3.096zm-4.9333 6.4293a6.6573 6.6573 0 0 1 0.30733-2h2.2927a8.0107 8.0107 0 0 0-0.26667 2 8.0107 8.0107 0 0 0 0.26667 2h-2.2927a6.6573 6.6573 0 0 1-0.30733-2zm0.902 3.3333h2.1473a13.117 13.117 0 0 0 1.884 3.096 6.6873 6.6873 0 0 1-4.0313-3.096zm3.6167 0h4.296a13.076 13.076 0 0 1-2.148 3.0587 13.047 13.047 0 0 1-2.148-3.0587zm3.8847 3.096a13.117 13.117 0 0 0 1.8807-3.096h2.1473a6.6873 6.6873 0 0 1-4.028 3.096zm4.93-6.4293a6.6573 6.6573 0 0 1-0.30733 2h-2.2927a8.0107 8.0107 0 0 0 0.26667-2 8.0107 8.0107 0 0 0-0.26667-2h2.2913a6.6573 6.6573 0 0 1 0.30867 2zm-3.0493-3.3333a13.117 13.117 0 0 0-1.8807-3.096 6.6873 6.6873 0 0 1 4.028 3.096z"

View file

@ -3,7 +3,7 @@
href: props.href,
}
</script>
<a href="https://x.com/{{href}}" target="_blank">
<a href="https://x.com/{{href}}" target="_blank" alt="{{href}} on X">
<svg width="17.7pt" height="16pt" version="1.1" viewBox="0 0 17.7 16" xmlns="http://www.w3.org/2000/svg">
<path
d="m13.939 0h2.7155l-5.931 6.7769 6.9767 9.2231h-5.4612l-4.2804-5.5924-4.8926 5.5924h-2.7199l6.3425-7.2503-6.6884-8.7497h5.5998l3.8652 5.1116 4.4729-5.1116zm-0.95358 14.377h1.5038l-9.7084-12.838h-1.6151l9.819 12.838z"

View file

@ -3,7 +3,7 @@
href: props.href,
}
</script>
<a href="https://www.youtube.com/channel/{{href}}" target="_blank">
<a href="https://www.youtube.com/channel/{{href}}" target="_blank" alt="{{href}} on YouTube">
<svg width="22.711pt" height="16pt" version="1.1" viewBox="0 0 22.711 16" xml:space="preserve"
xmlns="http://www.w3.org/2000/svg">
<path

View file

@ -125,7 +125,7 @@ html {
font-size: 16pt;
}
.tab-list button.selected {
.tab-list button[aria-selected=true] {
font-weight: bold;
border-bottom: solid 6px #eee;
}
@ -149,7 +149,7 @@ html {
.person {
clip-path: circle(50%);
margin: 10px 0;
margin: 15px 0;
}
body {
@ -225,7 +225,6 @@ a {
.project p {
font-size: 14pt;
text-align: left;
}
}
@ -240,7 +239,7 @@ a {
font-size: 16pt;
}
.tab-list button.selected {
.tab-list button[aria-selected=true] {
background-color: #eee;
font-weight: bold;
color: black;