Potential CSS for Header and Shortcuts

[saxamaphone69]

Following the SVG alignment issues, thought I'd open an issue to discuss potential changes.

/* Icons */
:root.shortcut-icons #shortcuts .icon--alt-text,
:root:not(.shortcut-icons) #shortcuts .icon {
  display: none;
}
:root.shortcut-icons .shortcut.brackets-wrap::before,
:root.shortcut-icons .shortcut.brackets-wrap::after{
  display: none;
}
.icon {
  height: 14px;
}
#header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#shortcuts {
  float: none;
  gap: 3px;
}
.shortcut {
  margin: 0;
  vertical-align: unset;
  display: inline-flex;
  align-items: center;
}
.shortcut > a:first-child {
  display: inline-flex;
}
@keyframes spin {
  0% {transform:rotate(0deg);}
  100% {transform:rotate(359deg);}
}

• Give .icon the 14px instead
• Make #header-bar flex by default (would also allow for people to put #shortcuts on the left with order) and space them apart
• Remove any weird float (would be done within the earlier bit of CSS) and don't rely on margin when gap exists
• .shortcut doesn't need any aligning fixes with vertical-align because we use and used align-items: center earlier and now again`
• inline-flex keeps box models nice and simple - though due to the a child being an inline element as opposed to block, we gotta make it inline-flex again

Without thinking too much, this probably affects the media query which shrinks and changes the #full-board-list to flex and changes things with wrap and flex items. But even that CSS is... interesting...

I've also noticed that the #custom-board-list is given 13px font size instead of 12px like mostly everything else. Another reason why I replace the whole thing.

And with compared to how it is now:

But in reality, I think all you need is:

.icon {
    height: 14px;
}
.shortcut {
    display: inline-flex;
    align-items: center;
}
.shortcut > a:first-child {
    display: inline-flex;
}

And I think it alone does the job - and then I think you don't need to mess about with any other parts.

[TuxedoTako]

I have no idea what I'm doing.

svg.icon already has a height of 14px, why drop the svg part?

It seems that .shortcut { align-items: center; } at least fixes the oneechan boxes around the thread stats: But without OneeChan, the icons look less horizontally centerend to me:

with: without:

I've also noticed that the #custom-board-list is given 13px font size instead of 12px like mostly everything else. Another reason why I replace the whole thing.

According to git blame, that 13px is 10 years old.

I personally prefer how float lets the navigation wrap above the icons. Also, we should be careful not to break the centerend links option, which I broke before: https://github.com/TuxedoTako/4chan-xt/pull/45.

[saxamaphone69]

Hm, probably needs some flex-wrap: nowrap and min-width / flex: 0 stuff before it looks the same as it did or could be considered an improvement. I think ccd0 and I ran into similar issues when I did the SVG PR switch about things not always playing nice (speaking of PRs, I'm sure a few could be cherrypicked to implement on XT!)

The CSS is more to get rid of the .shortcut { height: 14px; }, which was causing the OneeChan styled thread stats issue. As for why you might not be seeing my changes, it could be happening if you're chucking that as Custom CSS because it's not resetting what is there - it would just be overriding existing properties and adding extras (i.e. keeping below).

:root.shortcut-icons #shortcuts .shortcut {
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  height: 14px; /* the main issue */
  min-width: 16px;
}

I think the issue of not looking centred vertically is because #header-bar has padding, the inconsistent font-size, which then affects the line-height - which is different to the actual cap height of the font. Then the icons are 14px, but have padding sometimes and sometimes don't, along with margin and a vertical-align that does nothing. Then the fact the (width of) lightning bolt icon isn't a square and the eye for the thread watcher is just shy of 16px (wide) throws another spanner into the mix. Plus the fact a and span are inline elements messes with the box model once again. If you chuck it in Paint and draw little red pixels:

But I tend to just right click, inspect element, and toggle any values and use the rulers in built in DevTools.

I'll work on some stripped down examples that show all variations at the same time over the weekend. It's not a mega breaking bug/issue anyway, just a discussion I feel.

[saxamaphone69]

With flex I think the closest you get to float: right; is having the shortcuts appear on "a new line" below it as a block element, rather than inline. Not exactly ideal.