Responsive Round One

I recently took some time to make this site's layout more responsive. I made the mistake of loading it on my phone and I assure you the results were not pretty. While my efforts resulted in nothing fancy, it'll do for now and lays a good framework for adding responsive features in the future.

The widths of the header and content sections constrain to a max width, no matter how large the window is. As the window width becomes less than the max width, the header and main content sections shrink to keep consistent margins on the left and right sides. This worked perfectly until I checked the site on a mini tablet. The window width of the tablet was wider than the max width just enough so that the right margin was almost triple that of the left margin, giving the header and content sections the appearance of being uncentered.

The header and content sections are now centered by default to mitigate that problem. My first thought was to increase the max width of the site enough to trigger responsive layout on mini tablets. I'm satisfied with the max width of the site the way it is, so this idea came with much reluctance. Centering allowed me to not only keep the max width how I like it but also to keep the site's margins even on all device sizes.

Some other site components had to be modified to display in a friendly manner when short on space. The main navigation now adapts to most small screen sizes. Post date will drop below the dotted line if the window width becomes too small to contain both the post title and date on the same line. Content images maintain their allignment styles until the window width becomes less than the max width. At that point, the images become centered and push all text above or below them. These changes cover the content I have on the site currently, but won't suffice with things I plan on posting in the future. Expect to see those changes as I need them.