Alignment on Feed with Dawn Theme

I’m so sorry, @minimaluminium… this is getting super nitpicky, but have noticed that the alignment on the titles in the post feed on Dawn gets just ever-so-slightly off when you are dealing with long dates (e.g. MAY 26 vs DEC 09). I’m still fiddling, but any thoughts on a quick fix if you happen to see this?

Thanks so much,
Alex

Would something like this work?

Maybe position: relative with a minus number for left. It’d have to be only for the specific element in question though. In this case “Managing admin settings”.

Aha! That didn’t quite do it, but you set me down the path to a solution that did. Thank you!

The trick is to absolute position the blog post title (.feed-title) with a CSS left property (I used 6rem), and then add an auto margin to the .feed-right class to keep it on the right side of the table. So the updated CSS is:

.feed-title {
  flex-grow: 1;
  position: absolute;
  left: 6rem;
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 0;
  padding-right: 1rem;
  font-size: 1.6rem;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-base);
}

.feed-right {
  display: flex;
  align-items: center;
  transition: margin 0.2s var(--animation-base);
  margin-left: auto;
}

Update: One quick thing: you’ll also need to define a width for .feed-title so that it doesn’t overlap with the reading time on mobile. You’ll have to play with the width depending on how you have it set up, but I picked 80% standard and did a media query for mobile to set it at 63%.

2 Likes

Hey @alexpriest, no worries, I’m the one who should be thanking you for reporting those issues. Thanks a lot!

For the alignment issue, I just pushed a fix in this commit. The trick was giving a min-width to the feed date.

1 Like

Aha! That’s a much better fix. Thanks!