sd/site
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add an accessibility menu
All checks were successful
/ build (push) Successful in 32s
Details

Browse source
This commit is contained in:
Ruben 2025-04-09 13:51:07 -05:00
commit 5f36cc80ed
No known key found for this signature in database
GPG key ID: 8EA836555FB6D9A5
31 changed files with 668 additions and 293 deletions
Download patch file Download diff file Expand all files Collapse all files

80
me/index.html
View file

@ -20,7 +20,7 @@
<meta lang="en-US">
<meta property="og:url" content="https://synth.download/">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/script.js"></script>
<script src="/alt-popup.js"></script>
<script defer src="https://booping.synth.download/embed.js"></script>
</head>
@ -28,8 +28,8 @@
<!-- top navbar -->
<div class="navbar">
<a class="nav-base nav-baselink" href="/"><span class="tabler--grid-dots"></span> synth download!</a>
<details class="nav-base nav-baselink-mobile">
<a class="nav-base nav-left nav-baselink" href="/"><span class="tabler--grid-dots"></span> synth download!</a>
<details class="nav-base nav-left nav-baselink-mobile">
<summary><span class="tabler--grid-dots"></span> s <span aria-hidden="true" class="dot" style="background-color: var(--background) !important;"></span> d!</summary>
<ul>
<li>
@ -46,16 +46,80 @@
</li>
</ul>
</details>
<nav class="nav-base nav-links">
<nav class="nav-base nav-left nav-links">
<a href="/"><span class="tabler--home"></span> home</a>
<div aria-hidden="true" class="dot"></div>
<div class="dot"></div>
<a href="/me"><span class="tabler--user"></span> about me</a>
<div aria-hidden="true" class="dot"></div>
<div class="dot"></div>
<a href="https://notebook.synth.download"><span class="tabler--notebook"></span> notebook</a>
<div aria-hidden="true" class="dot"></div>
<div class="dot"></div>
<a href="/me#links"><span class="tabler--link"></span> links</a>
</nav>
<p aria-hidden="true" class="nav-base nav-systray">
<details aria-label="Accessibility Settings" class="nav-base nav-right nav-accessibility">
<summary><span aria-label="Accessibility Settings" class="tabler--accessible"></span></summary>
<ul>
<li>
<p>Accessibility Settings</p>
<p class="caption">Done with pure CSS! <span style="color: var(--red);">Settings do not save, sorry.</span></p>
</li>
<li>
<span aria-hidden="true" class="seperator"></span>
<p class="caption section" style="font-size: smaller; opacity: .9;">Font</p>
<span>
<input type="radio" id="font-jbm" name="font-setting" value="jbm" checked />
<label for="font-jbm" style="font-family: 'JetBrains Mono', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">JetBrains Mono</label><br>
</span>
<span>
<input type="radio" id="font-ahn" name="font-setting" value="ahn" />
<label for="font-ahn" style="font-family: 'Atkinson Hyperlegible Next', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Atkinson Hyperlegible Next</label><br>
</span>
<span>
<input type="radio" id="font-inter" name="font-setting" value="inter" />
<label for="font-inter" style="font-family: 'Inter', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Inter</label><br>
</span>
<p class="caption" style="padding: .2rem 0px;">Support not guaranteed, but provided as options anyways:</p>
<span>
<input type="radio" id="font-sans-serif" name="font-setting" value="sans-serif" />
<label for="font-sans-serif" style="font-family: sans-serif, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, serif !important;">Sans Serif</label><br>
</span>
<span>
<input type="radio" id="font-serif" name="font-setting" value="serif" />
<label for="font-serif" style="font-family: serif, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Serif</label><br>
</span>
<span>
<input type="radio" id="font-monospace" name="font-setting" value="monospace" />
<label for="font-monospace" style="font-family: monospace, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Monospace</label><br>
</span>
</li>
<li>
<span aria-hidden="true" class="seperator"></span>
<span>
<input type="checkbox" id="uncapitalization" name="uncapitalization" />
<label for="uncapitalization">Disable forced uncapitalization</label><br>
</span>
<span>
<input type="checkbox" id="disable-bg" name="disable-bg" />
<label for="disable-bg">Disable background gradient</label><br>
</span>
<span>
<input type="checkbox" id="disable-focus-animations" name="focus-animations" />
<label for="disable-focus-animations">Disable focus animations</label><br>
</span>
<span>
<input type="checkbox" id="disable-alttext" name="disable-alttext" />
<label for="disable-alttext">Disable alt-text popup</label>
</span>
</li>
<li>
<span aria-hidden="true" class="seperator"></span>
<p class="caption">Disabling the alt-text popup or forced uncapitalization does not affect "normal" accessibility. The alt-text pop-up is custom made in replacement of using the <span class="code">title</span> attribute, and forced uncapitalization is done using CSS's <span class="code">text-transform</span>.</p>
<p class="caption" style="padding: .6rem 0px;">Dark/Light mode toggling will be available whenever I figure out how to do so entirely just using CSS or until I decide to remake this with JavaScript.</p>
<p class="caption">Saving these settings will also be available whenever I decide to remake this using/attach some JavaScript to this instead.</p>
</li>
</ul>
</details>
<p aria-hidden="true" class="nav-base nav-right nav-systray">
<span class="tabler--bell"></span>
<span class="tabler--volume"></span>
<span class="tabler--wifi"></span>

74
me/ruben/index.html
View file

@ -18,15 +18,15 @@
<meta lang="en-US">
<meta property="og:url" content="https://synth.download/">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/script.js"></script>
<script src="/alt-popup.js"></script>
</head>
<body>
<!-- top navbar -->
<div class="navbar">
<a class="nav-base nav-baselink" href="/"><span class="tabler--grid-dots"></span> synth download!</a>
<details class="nav-base nav-baselink-mobile">
<a class="nav-base nav-left nav-baselink" href="/"><span class="tabler--grid-dots"></span> synth download!</a>
<details class="nav-base nav-left nav-baselink-mobile">
<summary><span class="tabler--grid-dots"></span> s <span aria-hidden="true" class="dot" style="background-color: var(--background) !important;"></span> d!</summary>
<ul>
<li>
@ -43,7 +43,7 @@
</li>
</ul>
</details>
<nav class="nav-base nav-links">
<nav class="nav-base nav-left nav-links">
<a href="/"><span class="tabler--home"></span> home</a>
<div class="dot"></div>
<a href="/me"><span class="tabler--user"></span> about me</a>
@ -52,7 +52,71 @@
<div class="dot"></div>
<a href="/me#links"><span class="tabler--link"></span> links</a>
</nav>
<p aria-hidden="true" class="nav-base nav-systray">
<details aria-label="Accessibility Settings" class="nav-base nav-right nav-accessibility">
<summary><span aria-label="Accessibility Settings" class="tabler--accessible"></span></summary>
<ul>
<li>
<p>Accessibility Settings</p>
<p class="caption">Done with pure CSS! <span style="color: var(--red);">Settings do not save, sorry.</span></p>
</li>
<li>
<span aria-hidden="true" class="seperator"></span>
<p class="caption section" style="font-size: smaller; opacity: .9;">Font</p>
<span>
<input type="radio" id="font-jbm" name="font-setting" value="jbm" checked />
<label for="font-jbm" style="font-family: 'JetBrains Mono', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">JetBrains Mono</label><br>
</span>
<span>
<input type="radio" id="font-ahn" name="font-setting" value="ahn" />
<label for="font-ahn" style="font-family: 'Atkinson Hyperlegible Next', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Atkinson Hyperlegible Next</label><br>
</span>
<span>
<input type="radio" id="font-inter" name="font-setting" value="inter" />
<label for="font-inter" style="font-family: 'Inter', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Inter</label><br>
</span>
<p class="caption" style="padding: .2rem 0px;">Support not guaranteed, but provided as options anyways:</p>
<span>
<input type="radio" id="font-sans-serif" name="font-setting" value="sans-serif" />
<label for="font-sans-serif" style="font-family: sans-serif, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, serif !important;">Sans Serif</label><br>
</span>
<span>
<input type="radio" id="font-serif" name="font-setting" value="serif" />
<label for="font-serif" style="font-family: serif, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Serif</label><br>
</span>
<span>
<input type="radio" id="font-monospace" name="font-setting" value="monospace" />
<label for="font-monospace" style="font-family: monospace, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Monospace</label><br>
</span>
</li>
<li>
<span aria-hidden="true" class="seperator"></span>
<span>
<input type="checkbox" id="uncapitalization" name="uncapitalization" />
<label for="uncapitalization">Disable forced uncapitalization</label><br>
</span>
<span>
<input type="checkbox" id="disable-bg" name="disable-bg" />
<label for="disable-bg">Disable background gradient</label><br>
</span>
<span>
<input type="checkbox" id="disable-focus-animations" name="focus-animations" />
<label for="disable-focus-animations">Disable focus animations</label><br>
</span>
<span>
<input type="checkbox" id="disable-alttext" name="disable-alttext" />
<label for="disable-alttext">Disable alt-text popup</label>
</span>
</li>
<li>
<span aria-hidden="true" class="seperator"></span>
<p class="caption">Disabling the alt-text popup or forced uncapitalization does not affect "normal" accessibility. The alt-text pop-up is custom made in replacement of using the <span class="code">title</span> attribute, and forced uncapitalization is done using CSS's <span class="code">text-transform</span>.</p>
<p class="caption" style="padding: .6rem 0px;">Dark/Light mode toggling will be available whenever I figure out how to do so entirely just using CSS or until I decide to remake this with JavaScript.</p>
<p class="caption">Saving these settings will also be available whenever I decide to remake this using/attach some JavaScript to this instead.</p>
</li>
</ul>
</details>
<p aria-hidden="true" class="nav-base nav-right nav-systray">
<span class="tabler--bell"></span>
<span class="tabler--volume"></span>
<span class="tabler--wifi"></span>