Notice of fork - Githubissues

Krinkle commented 4 years ago

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:

Source code:

https://github.com/Krinkle/timotijhof.net/tree/df3bea33af

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

Krinkle commented 4 years ago

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

samarsault commented 4 years ago

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🎉

samarsault / plainwhite-jekyll

Notice of fork #76

Add design for micro viewports

Design misc