diff options
Diffstat (limited to 'meta/index.php')
| -rw-r--r-- | meta/index.php | 16 |
1 files changed, 12 insertions, 4 deletions
diff --git a/meta/index.php b/meta/index.php index 8850302..ea6700a 100644 --- a/meta/index.php +++ b/meta/index.php @@ -3,7 +3,6 @@ <head> <?php include($_SERVER['DOCUMENT_ROOT'] . '/boilerplate.php'); ?> <title>meta | <?php echo($_SERVER['HTTP_HOST']);?></title> - <link href="/style.css" rel="stylesheet" type="text/css" media="all"> </head> <body> <?php include($_SERVER['DOCUMENT_ROOT'] . '/header.php'); ?> @@ -44,15 +43,24 @@ </ul> <p>That's all well and good, but there are some other points I want to address:</p> <p>While the colour contrast meets <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Understanding_WCAG/Perceivable/Color_contrast">WCAG standards</a> in most places, the one major exception is links in areas with highlighted backgrounds, which have a contrast ratio of a bit over 3.5. I'm treating this as acceptable because it's still decently readable for most, and the high-contrast theme renders this a non-issue by removing those backgrounds.</p> - <p>You may notice that I've omitted any kind of direct toggle for themes, fonts, animations, etc. I've opted to use media queries for those purposes instead in order to automatically respect the viewer's system settings. My thinking is that most people who need those features will probably have them enabled at the browser or OS level anyway, so forcing them to set them using a Javascript-based toggle for my site in particular would be unnecessary extra work for both of us.</p> + <p>You may notice that I've omitted any kind of direct toggle for themes, animations, etc. I've opted to use media queries for those purposes instead in order to automatically respect the viewer's system settings. My thinking is that most people who need those features will probably have them enabled at the browser or OS level anyway, so forcing them to set them using a Javascript-based toggle for my site in particular would be unnecessary extra work for both of us.</p> <p>On the subject of media queries, there's a media query that allows the user to indicate a preference for lower contrast, but I've yet to find any way to trigger it or any information on how I'm supposed to respond to it. My stopgap solution for now is to apply a lowered-contrast filter to the whole page when that setting is active. I'm not confident this is the way to go here.</p> <p>Finally, the hamburger menu that materializes on small displays works using the CSS "checkbox hack". This is not keyboard friendly, but I've compensated for it by using the shiny new :has selector to open the nav menu automatically when you focus something in it with the keyboard. I'm aware this probably isn't great, but I'm hoping it won't pose much of a problem because being affected by this would require you to be using keyboard navigation, and be on a relatively small screen, and actually be reliant on sight to view the page (eg. blind people using screen readers shouldn't even notice the difference). In other words, I'm kind of banking on that overlap being small enough that nobody in it ever stumbles upon this site. If that's you, sorry.</p> <p>I'd like to eventually devise some sort of hybrid solution that uses accessible Javascript with <button>s and such and falls back to the checkbox hack if you have that disabled, but I've yet to do that as of writing.</p> + <p>This site now has a font toggle! It uses no Javascript, but has to set a cookie to work.</p> </section> <section> <h3>credits</h3> - <p>This site uses the font family <a href="https://fonts.google.com/specimen/B612+Mono">B612 Mono</a> pretty much everywhere.</p> - <img src="/images/reactions/thumbsup.png" alt="me giving an enthusiastic thumbs up" style="max-width: 7rem; float: left; margin-right: var(--stdpadding);"> + <p>This site uses the font family <a href="https://fonts.google.com/specimen/B612+Mono">B612 Mono</a> pretty much everywhere by default. Also available are:</p> + <ul> + <li>Regular <a href="https://fonts.google.com/specimen/B612">B612</a></li> + <li><a href="https://opendyslexic.org/">OpenDyslexic</a></li> + <li><a href="https://www.brailleinstitute.org/freefont/">Atkinson Hyperlegible</a></li> + <li><a href="https://fonts.google.com/specimen/Google+Sans">Google Sans</a> (<a href="https://fonts.google.com/specimen/Google+Sans+Code">Code</a>)</li> + <li><a href="https://fonts.google.com/noto/specimen/Noto+Serif">Noto Serif</a> (<a href="https://fonts.google.com/noto/specimen/Noto+Sans+Mono">Sans Mono</a>)</li> + <li><a href="https://fonts.google.com/specimen/Silkscreen">Silkscreen</a></li> + </ul> + <img src="/images/reactions/ada/thumbsup.webp" alt="me giving an enthusiastic thumbs up" style="max-width: 7rem; float: left; margin-right: var(--stdpadding);"> <p><-- As of now, all of these little portraits were drawn by me, as well as the isopod in the site header. You can tell because they use my trademark "style" of thick, scribbly lines and the Krita default brush.</p> <p>The main dark mode background image is a screenshot I took myself of Subnautica: Below Zero, a game that I've played for less than an hour since it left early access. All other backgrounds were taken from Duckduckgo image searches.</p> <p>Some resources I've found helpful:</p> |