A classic website design

In a previous post I have shown which design I wanted for my website.

In Jekyll I use three different "layers" for this design. The first layer is found in the "_layout" folder, the second in the "_includes" folder and the third in the "_includes/widgets/" folder.

The default layout for my site looks as follows (note: This is not final!):



At the "_layout" level I like to use "panels" for positioning. The design is simple at this level, and there are only two things worth noticing:

1) The "right-aside.html" file is included twice.

I quite dislike doing this, but I currently see no other option to have one and the same content to appear in two places. Only one of those places will be actually shown in the browser. Based on the width of the browser window. The only reason why I think this is acceptable at all is because the contents of the right-aside.htlm is pretty short. Its just a few hundred bytes, so it does not inflate the file too much.  When compared to an image it is negligible.

2) The  tracking code at the end.

Most people will want to track the usage of their site. When developing we have to view the results again and again, and having these test-viewings also download the tracking code every time is simply not necessary. It will also skew the results and create additional load on your development machine. Hence I use a Liquid statement to test the environment variable to see if this is a production build or a development build.

By testing for "production" we make sure that the "$ jekyll serve" will not include the tracking-code.html.
For production we have to build the site with "$ JEKYLL_ENV=production jekyll build" to have the tracking code included.

Btw: The tracking code from Google is javascript... so much for my attempt not to use JS.

The "navbanner-panel"

This panel has a dual function. Originally I wanted to keep the navbar and the banner in separate  panels, but that was not possible due to the constraints on the CSS ":checked" selector. That selector can only used on siblings and child elements. Hence the banner -which contains a checkbox- had to be at the same level as the navigation bar (which is resized by the checkbox).