plainwhite-jekyll
plainwhite-jekyll copied to clipboard
samarsault
Notice of fork
Hi @samarsault,
❤️ Thanks for open-sourcing this elegant Jekyll theme!
I'd like to let you know that I've used this for my blog for about a year now and like it a lot. I've made numerous changes that you're free to port back if they're of interest to you.
- Support Dark Mode with toggle, temporary cookie, and detection of native preference.
- Support "Safari Reader" mode (to display author and date meta data).
- Support "Open Graph" metadata in
<head>to improve the way previews of articles render as Twitter Cards, and in other messaging apps and social media. - Support RSS feeds built-in and promote via an icon (no Jekyll plugin required).
- Support Matomo analytics (self-hosted open-source alternative to Google Analytics).
- Add tag pages that filter articles by tag (no plugin and no client-side JavaScript). Details at https://github.com/samarsault/plainwhite-jekyll/issues/8#issuecomment-609052874
- Add way to easily open original image on click, for touch screens, by double tap. (one line of optional JavaScript)
- Improve reading experience on tiny viewports such as KaiOS feature phones and smart watches (a new "micro" media query).
- On mobile, use the large "About" header only when viewing the home page. Replace with consensed version when viewing articles.
- (Design change) Blocks are pulled out to full width (image, blockquote, pre-formatted code). This makes images larger especially on tablets and mobile. It also makes the text of quotes and code align with paragraphs (re-pad after negative margin).
- (Design change) System UI fonts for sans-serif headings, also as performance optimisation.
- Performance optimisation: Make JavaScript code async or embed at end of HTML stream.
- Performance optimisation: Replace large icon font with extracted SVG icons embedded directly in the stylesheet.
Example links from my blog:
- https://timotijhof.net/posts/2019/protect-yourself-from-npm/
- https://timotijhof.net/posts/2018/measuring-wikipedia-page-load-times/
Source code:
Thanks again, and I hope perhaps some of this is useful to you. If you have questions about anything, feel free to ask. I'm happy to help answer anything I can :)
-- Timo
Add design for micro viewports
This was to optimise for smart watches and KaiOS feature phones. See also blogpost by @nolanlawson on this topic.
| Home | Post | |
|---|---|---|
| Before |    |
 |
| After |   |
 |
Design misc
There is a full-width pull out for images, figures, code snippets, block quotes, and horizontal lines:
Condensed header on post pages (full header remains, but on the home only):
| Before | After |
|---|---|
 |
 |
Your site looks really great @Krinkle, amazed to see what you turned plainwhite into! Moreover, thanks for the detailed list & explanation about the changes, i'd love to incorporate them :)
I didn't have a chance to get into the code, but will surely have questions when I sit down to add the changes. Kudos🎉
