Make links accessible
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
parent
b51e43f431
commit
046274bda8
10 changed files with 24 additions and 23 deletions
|
@ -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>
|
||||
|
|
10
src/components/tab-button.html
Normal file
10
src/components/tab-button.html
Normal 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>
|
|
@ -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">
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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)"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue