bschlagel / canonize

Template for a "personal canon" website page.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Canonize

Template for a “personal canon” website page.

Canonize is a simple, extensible framework for showcasing your “personal canon” — the most important, influential, formative texts and media in your life. It's intended to be added as a page to your personal website, to serve as a kind of library of highlights, a résumé of personal influences, a peek at the threads that have led to your work and way of thinking.

Read more about why I made the Canonize project here:

Canonize: Creating a Personal Canon Template

To make your own “/canon” page:

  • Make an awesome list of your canon items — see the “items” folder in this repo for an example of how I made mine (iteratively narrowing down from a massive list to a manageable one)
  • Fork, clone, or otherwise appropriate the files from the “website” folder in this repo
  • Edit the “index.html” page to include the items of your own canon, and optionally any category groupings you may want (each living inside the wrapper div with class="category" and id=“$YOUR-CATEGORY-SLUG”)
  • Select one of the three included CSS “theme” files, and modify to your heart’s desire until your canon page looks hype as hell
  • Add this page to your site using your preferred method of wrangling web files
  • If, in the course of editing, you run into any bugs in these files, or have suggestions for improving them, feel free to submit a pull request
  • When you’re done, I’d love to check out your canon! Feel free to contact me via https://www.brendanschlagel.com/

Canon Themes:

I made three starter themes, each a simple CSS files you can use for your canon page: Light, Dark, and Manuscript. I actually started with the latter, to match the design on my current site, and more recently added the light / dark themes as a fun design exercise. You can use these as a rough starting point and modify as much or as little as you like. Here’s what each looks like:

Example: Light Theme

Example: Light Theme

Example: Dark Theme

Example: Dark Theme

Example: Manuscript Theme

Example: Manuscript Theme

Massive credit to the following for personal canon inspiration:

Thanks as well to the following great examples of similar projects:

Have a “/canon” page of your own? Add to this list and submit a PR :)

About

Template for a "personal canon" website page.

License:MIT License


Languages

Language:HTML 82.2%Language:CSS 17.8%