Refactor header.html

[sschwetz]

When working on the header.html include file, I noticed that it was mentioned at the top that it was a mess and needed refactoring.

I have completed my take on it 😃

[daattali]

Whoo, I completely forgot about that TODO! Luckily, I just did a search and saw that there are no other TODOs :) Thanks a lot for the initiative.

This is a very welcomed change, but it does need to fix one small issue. The reason for the current code being so awkward is because back in 2014 many phones still had very small screen widths. So small that when there was a cover image, I wanted the title to be below the image instead of on top of the image. It looked like this on screens smaller than 365px wide:

In order to support this, I had to add that entire no-img div in the header HTML, and some CSS:

beautiful-jekyll/assets/css/beautifuljekyll.css

Lines 743 to 774 in 8854d96

	.header-section.has-img .no-img {
	margin-top: 0;
	background-color: #FCFCFC;
	margin: 0 0 2.5rem;
	padding: 1.25rem 0;
	box-shadow: 0 0 0.3125rem #AAA;
	}
	/* Many phones are 320 or 360px, so make sure images are a proper aspect ratio in those cases */
	.header-section.has-img .intro-header.no-img {
	display: none;
	}
	@media (max-width: 365px) {
	.header-section.has-img .intro-header.no-img {
	display: block;
	}
	.intro-header.big-img {
	width: 100%;
	height: 13.75rem;
	}
	.intro-header.big-img .page-heading,
	.intro-header.big-img .post-heading {
	display: none;
	}
	.header-section.has-img .big-img {
	margin-bottom: 0;
	}
	}
	@media (max-width: 325px) {
	.intro-header.big-img {
	height: 12.5rem;
	}
	}

(Note the comment in that CSS code: "Many phones are 320 or 360px")

Your changes do not account for this case. This is how that same page looks with the new code:

But, I don't think it makes sense to "fix" it, because today there are almost no phones that are that small. So all that logic can be removed. For the few people in the world who still have phones from 2014, they'll just have to suffer with the title being on top of the image even on their small screens.

[daattali]

Everything related to the no-img div should be removed. That includes the HTML that creates it (

beautiful-jekyll/_includes/header.html

Line 62 in 8854d96

<div class="intro-header no-img">

) and any css for it

[sschwetz]

I did initially remove this but noticed that this would cause the Title and subtitle on posts to end up under the nav bar

If I remove the if statement, it screws with the formatting of the cover image.

[daattali]

I implemented this in 9424f6d
Thanks for getting this started. I think I got it to look the same as before in all cases, do you mind testing it as well?

[sschwetz]

I could not see any artifacts with #9424f6d

[daattali]

What do you mean by artifacts?

[sschwetz]

I could not see anything that was broken with my testing of your commit

[daattali]

Ah ok I was afraid you meant that you're not able to see some "assets" :) Sounds like it's all good then, closing