Free to use CSS tweaks for the purposes of accessibility :) Feel free to make suggestions or requests. I am down to make modifications to any version of my already existing code, or potentially making new code depending how quick it would be.
Bigger Body Fonts
Increases the size of text around the site by a % amount. This edits the size of most text around the site. I left the sidebar/dashboard alone since it's quite slim and increasing the size could create some weird text wrapping issues.
/** ACCESSIBILITY CSS BY rat_boy https://subeta.net/users/rat_boy **/
.container-fluid {font-size: 1.2em;} .card-header {font-size: 1.2em;} .card-body {font-size: 1.2em;} form {font-size: 1.2em !important;} form font {font-size: 0.8em !important} .ui p {font-size: 1.2em;} [role=menuitem] {font-size: 1.2em;}
Link Underliner
Forces a link underline for most body links to create more easily visible link text.
/** ACCESSIBILITY CSS BY rat_boy https://subeta.net/users/rat_boy **/
.container-fluid a {text-decoration: underline;}
.card-body a {text-decoration: underline;}
form a {text-decoration: underline;}
.ui p a {text-decoration: underline;}
Link Reddener
A more extreme variation of the above which forces most body links to be red.
/** ACCESSIBILITY CSS BY rat_boy https://subeta.net/users/rat_boy **/
.container-fluid a {color: }
.card-body a {color: }
form a {color: }
.ui p a {color: }
Link Purpler
A purple variation of the above which forces most body links to be purple.
/** ACCESSIBILITY CSS BY rat_boy https://subeta.net/users/rat_boy **/
.container-fluid a {color: }
.card-body a {color: }
form a {color: }
.ui p a {color: }
Link Greener
A green variation of the above which forces most body links to be green.
/** ACCESSIBILITY CSS BY rat_boy https://subeta.net/users/rat_boy **/
.container-fluid a {color: }
.card-body a {color: }
form a {color: }
.ui p a {color: }
Link Bluer
A blue variation of the above which forces most body links to be blue.
/** ACCESSIBILITY CSS BY rat_boy https://subeta.net/users/rat_boy **/
.container-fluid a {color: blue}
.card-body a {color: blue}
form a {color: blue}
.ui p a {color: blue}
Header Hider
Exactly what it says on the tin. Hides the header.
/** ACCESSIBILITY CSS BY rat_boy https://subeta.net/users/rat_boy **/
{display: none}
{display: none}
🐀
Hello I was looking for something similar to what you have done but just in mobile and just for the search shop results, cause those are kinda tiny in my screen. I managed to fin out how to make it work on mobile only, but I can't figure out how to make it work only in the shop search page, and for some reasons your code work on almost everything but the shop search result page. Could you give a hand on this?
hiya ! i was not aware there was a mobile version of subeta. is there a specific way to access it?
🐀
No, as long as I know there is no specific mobile version, is the nornal version in a smaller screen, I justo do the trick adding to the code that only do the thing coded when the screen is smaller than x pixels
huh... interesting... well, if subeta itself doesn't change their code for a smaller device, then it should work the same as it would on desktop as my code uses em, which is a relative font size measurement. my test previews also show the shop search results to be the same size on larger and smaller window sizes... in this case, i think it may be something specific to your device.
that said, you could try adding the following and it should work! this code modifies ONLY shop search results.
also you will need to take the / out after the @ for whatever reason even thought it's in a code block, subeta tried to ping lol.
/** ACCESSIBILITY CSS BY rat_boy https://subeta.net/users/rat_boy **/
@/media only screen and (max-width: 600px) { .row > * { font-size: 1.2em !important; }
.row a { font-size: 1.2em !important; } }
🐀