Giter VIP home page Giter VIP logo

v4.chriskrycho.com's Introduction

v4.chriskrycho.com (ARCHIVED)

NOTE: this version of my website is now in archival mode; I am writing all future content at v5.chriskrycho.com – for which the source is available here.

ARCHIVED README CONTENT

Here I version control my website. Everything is public, because anything I have here is already public. Moreover, all of this material is provided open source so that others can learn from, remix, and otherwise make use of it. There is just one restriction on that: if you're going to use the material, please do me the favor of crediting me for it. That's just being kind.

Note that that typefaces are not licensed this way: I've bought my own license to commercial typefaces. You're welcome to use the same typefaces on your own site, but you're not welcome to use my copies of them. (For some great general recommendations on typography, see Butterick's Practical Typography, which includes specific recommendations for fonts of certain styles, and is just an excellent overall resource.)

For more details, and for the legalese, see the LICENSE file.

So... now what?

To see how the site works, look at the master branch, which has the Pelican configuration, Jinja2 templates, etc., as well as all the Markdown files which constitute the content of the site (but before conversion).

To get the site itself, look at the gh-pages branch. Because of the way Pelican and GitHub Pages play together, you can actually check out the site from any point in time since I started hosting it. That's only mildly interesting (at best!) from a content perspective, but it may be interesting if you are curious to see how the design aesthetic of the site has changed over time.

If you have any questions, feel free to ping me on Twitter.

v4.chriskrycho.com's People

Contributors

adamjmcgrath avatar chriskrycho avatar dependabot[bot] avatar reddraggone9 avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar

Forkers

adamjmcgrath

v4.chriskrycho.com's Issues

Featured posts?

It might be nice to feature content on some posts on the archive pages—but only if the archive page is on the index, most likely.

Edit and Issue links (post pull requests)

Among other links, each post should include an "edit" link, and each page should display a "submit issue" link. Tech-savvy folks will be able to submit corrections that way.

[Blocks #2]

Fix blockquotes for poetry

Test the different white-space CSS options. There has to be one that I can use in block quotes; if not, I may have to resort to embedding raw HTML in the Markdown, but that is a profoundly unsatisfactory choice.

Add Bible book tags for devotions posts?

That would be a nice way of cross-referencing different posts. On the other hand, it can very quickly lead to tag proliferation. And I suspect it may not be useful. Think about it before implementing it.

Poetry template

Make a template that adds a base class to the article element and then style all content appropriately in response (e.g. by setting the white space rules in CSS for those kinds of articles).

Add Spacewell

If I ever actually get around to implementing Spacewell, I'd like to apply it on this site.

But that is, unfortunately, a big if.

gh-pages commits have bad author

The author for these commits reads as b'Christopher Krycho' with an error message of "Invalid author email. If this commit was made by you, check your local git email setting."

e.g. 6500dd0, but the same problem exists with every commit on this branch. I'm guessing there is some error in the configuration you're using for simultaneously posting to master and (the output) to gh-pages.

Media queries

In addition to the obvious ones for phones, should I bump up the size for large views?

Add Colophon

I'd like to include the following info:

  • credit to Sarah for the logo
  • typography info
  • copyright date
  • link to license file (see #46)

This should go in the footer after all the other info.

Landing/about page

  • content
  • layout (with feature image to the side on large views, inline with text on smaller views)
  • set as index.html

Make bibleref and cite non-breakable

For typographical niceness and preventing odd placement of reftagger popups, any citation (whether <a class="bibleref">...</a> or <cite>...</cite>) should be prevented from breaking. This should be easy enough: just use white-space: no-wrap on them.

License file

Add a document with license info in it.

  • MIT for the tech content (with a plea not to rip off the theme)
  • All content (c) me, it may be reproduced freely if you notify me

Text-size adjustment

Allow users to bump up or down the text size as they please within certain limits.

Heading styles

By which I mean:

  • the headings in the text: article h1, article h2 etc.
  • archive page headings, e.g. #devotions or Theology and so on

[Blocks #1]

Logo!

Use Sarah's super sweet logo design work

  • on site header
  • as favicon

Switch to GitHub for hosting

Leave the naked domain on Stablehost (to handle redirects for old pages), but move the main domain to GitHub pages for convenience and speed.

Devotions template

Create a template dedicated to the devotions posts. It should be tiny: just {% block editorial %}<some content>{% endblock }% or something like that.

Jinja2 Templates

Build out the site using Jinja2 templates. Try to make them as easily extensible as possible, including adding convenient places for things like editorial text. Also make it easy to add classes to article elements so you can easily style things like poetry differently than code snippets than regular posts.

Templates To Be Built

  • Footer (#7)
  • Nav (#8)

Layout and Styles

CSS and HTML. Should be relatively straightforward, since there's no major new design to be done, all the color and vertical rhythm and typographical decisions are already made, etc.

  • Blockquotes [ #5 ]
  • Headings [ #6 ]
  • Footer styles [ #7 and #12 ]
  • Nav styles [ #8 ]
  • Media queries [ #9 ]
  • Images [ #10 ]

Landing page image

Add an image of me to the landing page. It works as it, but having that there will be a nice touch. Also supply it as the default value (instead of the CK logo) to the og:image tag.

Possibly use that as an opportunity to integrate featured images in general, all in the same general kind of layout: to the right side of the main text?

Bigfoot.js integration

Might be nice not to have to jump back and forth for footnotes. It'll need styling, though.

Footer styles/content

Styles

  • links
  • social icons via fontawesome
  • lists

Templates

  • social/contact --
    • Done: ADN, Twitter, GitHub, Bitbucket, Facebook, StackOverflow
    • To-do: Instagram, Runkeeper
  • recent posts -- section specific when on a post, don't display on archive pages at all
  • nav -- link to each section, home page, and main archives

[Blocks #1, #2, see also #12]

Dark theme

Essentially invert the colors. Also switch from Tomorrow to Tomorrow Night theme.

Footer :before to border

There's no particular reason to use :before instead of just a simple border-top given how the layout is implemented.

[Blocks #1]

Reading settings

Use fa-cogs as the visual cue.

  • Inverted: Create a simple variation on the theme that basically flips the colors of various elements (dimming the white a bit), and add a little Javascript (or CSS?) to enable it. A number of other elements will require further tweaks (e.g. link hovers and the top border), but it should be pretty simple. (#35)
  • Type size: Let the user adjust the typography upwards or downwards as they like, by sane intervals (2 pts at a go) (#36)

Fix list style in footer

Compress line height and add padding to individual elements. Net result should be the same as with current line height and lack of padding, but individual elements will be distinguishable.

Images

Responsive image layout. (Not bothering with actually responsive images at present, though perhaps I will do that in the Post-Launch Enhancements phase.)

[Blocks #1]

Marked stylesheet

It would be really nice to have a preview of the content via Marked styled in line with the actual site.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.