Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Notice of fork #76

Open
Krinkle opened this issue Jul 24, 2020 · 2 comments
Open

Notice of fork #76

Krinkle opened this issue Jul 24, 2020 · 2 comments

Comments

@Krinkle
Copy link
Contributor

Krinkle commented Jul 24, 2020 •
edited
Loading

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 About tags #8 (comment)
  • 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:

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
Copy link
Contributor Author

Krinkle commented Jul 24, 2020 •
edited
Loading

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 home-nokia8110-before1home-nokia8110-before2home-nokia8110-before3 content-nokia8110-before
After home-nokia8110-after1home-nokia8110-after2 content-nokia8110-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
Screenshot 2020-07-24 at 03 03 36 Screenshot 2020-07-24 at 03 03 48

@samarsault
Copy link
Owner

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 samarsault mentioned this issue Sep 10, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Krinkle @samarsault