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

implement saving settings & implement theme chooser
All checks were successful
/ build (push) Successful in 29s
Details

Browse source
This commit is contained in:
Ruben 2025-04-09 15:20:57 -05:00
commit 30f24affc8
No known key found for this signature in database
GPG key ID: 8EA836555FB6D9A5
8 changed files with 297 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

25
index.html
View file

@ -20,6 +20,7 @@
<meta property="og:url" content="https://synth.download/">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/alt-popup.js"></script>
<script src="/settings.js"></script>
<script src="/button.js"></script>
</head>
@ -59,12 +60,29 @@
<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;">Theme</p>
<p class="caption" style="color: var(--red);">Only works with JavaScript.</p>
<span>
<input type="radio" id="theme-auto" name="theme-setting" value="auto" checked />
<label for="theme-auto">System (Auto)</label><br>
</span>
<span>
<input type="radio" id="theme-light" name="theme-setting" value="light" />
<label for="theme-light">Light</label><br>
</span>
<span>
<input type="radio" id="theme-dark" name="theme-setting" value="dark" />
<label for="theme-dark">Dark</label><br>
</span>
</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>
@ -113,8 +131,7 @@
<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>
<p class="caption" style="padding: .6rem 0px;">These settings are done entirely with CSS (except the Theme settings), and will be saved into your browser if you have JavaScript enabled. Otherwise, <span style="color: var(--red);">your settings will not be saved.</span></p>
</li>
</ul>
</details>