Background and alignment in Blog page

kushinauwu / OBF-Homepage-New

Raw version of the new homepage

2 stars 13 forks source link

Background and alignment in Blog page #32

Closed kushinauwu closed 5 years ago

kushinauwu commented 5 years ago

[x] The top news item excerpt is centered, which looks a little odd, and the others are fully-justified. Make all of them left-justified (titles can be centered)
[x] Somehow the gray background with square boxes on it is not looking as nice. make this match some of the other pages on the site a little more closely
[x] The whiteish background in the top box (behind BIOPYTHON etc) is too gray-- match the white of the other boxes

yochannah commented 5 years ago

[x] add tags
[x] add date for posts

kushinauwu commented 5 years ago

I changed up the layout for this quite a lot! The blurred images just seemed a littlee cluttered. And the tag cloud + categories are up too ! :D

yochannah commented 5 years ago

Nice, this matches the rest of the site better!! A few small qs:

the obf logo - is that just being used as a default picture?
maybe have the images touch the very edge of the boxes without any black border
images all have good aspect ratios :+1: good one! I wonder if there's a way to make it look tidier when there are varying image heights?
- if this is flexbox (I haven't actually checked) I might set the text to align at flex-end
- max-height for images, beyond which we clip their height
- and possibly a background colour with a set height to compensate for short images

@nlharris your input would be appreciated too!

kushinauwu commented 5 years ago

the obf logo - is that just being used as a default picture?

yes! It looked a little weird without a picture for posts without any thumbnails, so I used that :)

if this is flexbox (I haven't actually checked) I might set the text to align at flex-end

max-height for images, beyond which we clip their height

and possibly a background colour with a set height to compensate for short images

No flexbox here, just a CSS grid. setting the max-height sounds like a good option. Or yeah we could have the same background color for shorter images! I'll try out both though. Gotta read up a little on flexbox!

kushinauwu commented 5 years ago

How about having a white background for this?

Or do we stick with the same background color?

I feel like white makes it seem like it is more evenly sized somehow!

nlharris commented 5 years ago

I see what you mean about the white making it look more evenly-sized; however, I think that is just an artifact of the BioPython logo being (1) short (vertically) and (2) white background. I mildly prefer the dark green background but don't feel strongly about it--either is ok.

yochannah commented 5 years ago

let's keep the dark