Styling
This one I used to push away again and again, but now I think it’s time to start adding some looks and feel to the whole.
To start this off I’ll take care of the landing page (which might not be the best idea as this might need the most styling…) and to get a feeling for those css-magic I first went with expanding/collapsing the comment-sections with pure css.
So getting it going I added a style-section to the html-head and added some classes for the comment section, its header and body and the label of the checkbox which is used to achieve the toggling.
Yes, I went with the hidden-checkbox for toggling the comment-section-body-div as this is the easy way of achieving the toggle without the usage of JavaScript. Still I’m thinking about other solutions that don’t include JavaScript but work with a real link as I think the hidden-checkbox is inaccessible on screen readers (actually I have to grab my mouse to use this and can’t just use the follow-link command of my vim-browser-plugin). Yes I haven’t optimized the page for screen readers so far, but hey, this might be an additional goal.
A short trip around the mighty interwebs just left me thinking about replacing the checkbox with a span, div or something more suitable equipped with aria-roles. As I try to not use JavaScript this is unfortunately not an option as the checked-state has to be processed.
Also I might need to set up a screen reader for testing…
Let’s move the focus back to the real topic…
As writing css can easily lead to huge files with tons of repetitions I decided to go with SASS using the SCSS-syntax.
As it’s hard to write about writing css/sass I think that’s it for today.
So long,
Sven