Meta post about making this blog responsive and not using px
Max Glenister
If you’re a returning visitor to blomg you might notice some changes to the design.
The juicy technical details are:
- It contains no jQuery
- It doesn’t use
pxfor any of the units of size - It only has JavaScript to highlight code snippets, and Google Analytics
- It’s based around your browser font size starting at
16px(and then it’s 1.125* that to make an18pxbase font size) - It’s hopefully very light, so great for mobile
- It’s responsive
I’ve had some great opportunities to play with stripping away useless fluff, using some fancy css3 (such as :target!), and planning the page structure so that the layout translates well to mobile responsively.
Try resizing your browser, I’ve added breakpoints at 1200px, 1024px, and 800px.
I’ve factored out some bits of code into Jekyll template includes, to reduce code duplication in my templates.
I’ve also spent some time going through all of the old posts on here, many of which were still using some messy HTML from way back when the blog was hosted on Tumblr, and bringing them up to scratch to use Markdown, and deleting some that were no longer useful.
I’m sure there will be some issues here and there, so if you spot anything odd, and you care enough, feel free to let me know!
Related posts
- Fluid video embeds for your responsive website
Recently I came across an interesting problem, fluidly scaling iframe/embed code on a responsive design. The problem surfaced because I was using a fluid width and a fixed height for my video embed, and so at some screen sizes the video would look fine, and at others it would have some black banding at the edges.
- Moving away from Twitter Bootstrap - Hello new design!
I decided it was time that I gave some attention to the design of my Jekyll-powered blog. I’ve been using a slightly modified version of the default Twitter Bootstrap theme since I moved to Jekyll, and that’s just not good enough. I’ve created the new theme from scratch, and I’ve thrown in some PJAX wizardry to make page-loading fancier. Gone are the old post-banners, and thumbnails (which to be honest I was adding just to make things look a bit less-boring), say hello to the new, larger hero banner for the latest post! You might notice some fancy effects on the homepage when you scroll, this is accomplished with a bit of jQuery and css3 to scale the title while parallaxing the hero banner. I’ve also made a forray in to a responsive layout, so if you’re viewing this on a screen smaller than 960px wide you will see some slight differences. But it’s not that different. Obviously the fancy stuff is dependant on your browser, but it should atleast look nice for anybody using Internet Explorer.
- Chasing build speed on Jekyll 4
I’ve been putting off upgrading from Jekyll 3.10. Partly late-adopter habit, partly because my setup worked fine, and a version bump seemed simple enough. I should know better by now. It mostly was.
Discussion
No interactions yet
Join the conversation
Reply from your own site with a Webmention (how?).