Jekyll new theme redesign #2050
Conversation
…liarize users with includes structure
- use anchor instead of h1 for site title, for semantic accuracy, and because post h1’s should be the post title - implement nav wrapper for nav links - use div.wrap for design structure
- rework footer to use columns - add additional area for generic text
- add article tags around post content - creates post header - add conditionals for extra options in meta
Many users moving to Jekyll from other popular blogging options (like Wordpress) will be used to thinking in terms of pages/posts. Having a page template like this will be convenient for those users.
- Uses new typography, including Helvetica light, larger font-sizes, and px values - Wider site width, larger margins, and overall more whitespace - Responsive down to mobile
| markdown: redcarpet | ||
| highlighter: pygments | ||
| description: "Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." | ||
| url: "http://yourdomain.com" | ||
| permalink: /posts/:title |
There was a problem hiding this comment.
Is this considered standard these days?
There was a problem hiding this comment.
IDK if it's considered standard, per se, but it's certainly useful and in this theme I've made use of it in pre-populated meta tags (for SEO value) and for the feed.xml template which will require those values
There was a problem hiding this comment.
Can we go with what Jekyll has as its default, i.e. leave this out? To me, posts should be very date-oriented, and therefore have the date in their URLs.
There was a problem hiding this comment.
Can we go with what Jekyll has as its default, i.e. leave this out? To me, posts should be very date-oriented, and therefore have the date in their URLs.
@parkr do you mean just the permalink value? I can totes 🔥 the permalink line, but the description and url values are necessary for the feed.xml to work, and the head meta.
|
Ah crap, accidentally hit cmd+enter and submitted before I was finished... Anyway, I have a few more steps to complete, but feel free to dig in and look for any issues with what I've done that might need further addressed. One thing that I'm interested in hearing input on is the copy tweaks I made. For my own work on the theme I changed some of the default copy just for fun, and also to test out things like trying to break the design with longer or shorter values here and there. But stuff like "Dat site title tho" and use of "Bart Simpson" instead of "Your Name" were just for fun. Does anyone have a problem with shipping it this way, or do you think we should change it back to the boring, generic things like "Your site title goes here", "Your Name" and "Your Job Title". Personally, I'm love making software feel more human by making use of fun copy, but would be happy to hear any objections. |
| <nav class="site-nav"> | ||
| <a class="page-link" href="/about">About</a> | ||
| <a class="page-link" href="/projects">Projects</a> | ||
| </nav> |
There was a problem hiding this comment.
Maybe we can take advantage of the site.data object to populate this menu?
There was a problem hiding this comment.
If so, that would be ✨. I wasn't sure of a way to do it using site.data myself.
There was a problem hiding this comment.
This may help... #1953
Or I can fork your fork and make a PR myself 😉
There was a problem hiding this comment.
Using site.data will over-complicate things. I'd rather leave that out for now.
|
✨ ✨ ✨ |
|
This is looking so awesome. You can punt on the CSS ~> Sass or the syntax highlighting for now if you like. :) |
Okay, sounds good. I'll try to wrap it up tomorrow, then. |
|
Just took a pass over everything in Browserstack, and here's the issues I've noticed which I'll need to address:
|
|
@parkr as for updating the syntax highlighting, is it worth waiting a bit to get it in with this PR, or should I just open a new PR later to address that? |
I think we can ignore this.
I don't see a reason to continue supporting IE8 or IE7 with the new site template. |
|
Agreed with @mattr- on all counts.
Your call! I'd say punt unless you are super motivated to do it now. This PR is already ✨ the way it is now – the updated syntax coloring would just be icing on the 🍰 :) |
@mattr- @parkr great! I think we're all on the same page with browser support then. ⚡
Yeah, punt it is. I'd love to get this moving and address the syntax highlighting later. Let me just debug this issue with the mobile menu, and then it should be ready to 🤘 ! |
You rock! 👊 Let me know when you want me to take another look. |
|
@parkr k I got 'er all fixed up. Go ahead and take that second look bromie. |
|
Whoops - I had it fixed, but broke it again. Just pushed the real fix lol. |
|
So hawt. 😍 Merging this because I can't live another minute without it. |
* jglovier-master: (35 commits) Fix for menu at mobile again Fix site footer styles on mobile Fix for menu not working on mobile dat breathing room tho (expand site width slightly more) Replace footer github and twitter link text with inline SVG icons Post content styles for mobile Replace unicode menu icon with inline SVG Adds mobile styling for menu at sub 600px viewport widths 🔥 permalink option so default date permalink method is left in tact For the love of perf, add syntax.css rules to main.css and call only one stylesheet Adds another placeholder post to illustrate post content styles Dem new styles tho Copy tweaks - brevity FTW Use class instead of id for CSS specificity ❤️ Add link for RSS subscription Slightly friendlier and personal date formatting; classes for dem styles, yo Remove to avoid confusion with site.title demonstrate use of permalink settings Add site.url for use in head canonical meta and feed.xml template Add site.description for use in site head document meta, and feed.xml template ...
|
In case anyone else is interested in the new hawtness: |
|
|
|
|
|
so much ❤️ for this. Thanks @jglovier! |
|
May be worthwhile to move the footer stuff that's hardcoded (title, blurb, contact infos) to |
I love that idea, personally. I just left it that way cause that's how it was, but I'm totes +1 on moving as much global stuff like that as possible to the _config.yml. I can refactor it a bit with my CSS => Sass PR, or just make a new one for that? |
|
Also, Realize I'm a bit late to the game, so feel free to punt on these, rightfully so, just thinking how we can make this the best tool to lower the barrier to entry for non-developers to start using Jekyll, not necessarily how to make the best possible Jekyll site. |
|
awesome work; @jglovier |
This is a work in progress, but nearly complete. Opening PR early (GitHub style) for discussion and finally polish.
I did all of my work so far on a separate repo (jglovier/jekyll-new) to avoid cluttering the commit log with things I was exploring, then re-performed the work on the files within jekyll/lib/site_template for a more streamline commit log.
You can preview the intended design work via the live gh-pages branch from jglovier/jekyll-new at jekyll-new.joelglovier.com. I'm hoping I didn't miss anything in transfering the files over to my actual Jekyll repo, but for some reason I wasn't able to run
jekyll servelocally on the version within lib/site_template to double check.The work is mostly complete, although there are a few things I need to do before the PR is really ready to merge, including:
github.comandtwitter.comin footer with inline svg logo icons to conserve horizontal spacepossibly address the syntax highlighting (which I didn't touch)(move to another PR)convert CSS to Sass which is available in Jekyll 2.0 alpha(move to another PR)