search

ben-miles / subnauticapda

An unofficial second-screen companion app for the game "Subnautica."
https://subnauticapda.dev
Other
0 stars 0 forks source link

Improve View Title Underline #34

Closed ben-miles closed 2 months ago

ben-miles commented 2 months ago

I originally puzzled over how to accomplish this effect from the game in a web environment, but I think I have a better idea now.

We're talking about the yellow underline that appears under the "page" or view header. Right now, it's just a straight line, but in the game, there is a short, rotated segment at either end. I think maybe this could be accomplished in three parts:

  1. A border-bottom set on the heading element itself,
  2. A ::before pseudo-element that comprises the left "accent" segment, and
  3. A :after: pseudo-element that comprises the right "accent" segment.

Theoretically, this should work for page/view headings of any length, as the border-bottom element will match the width of the heading.

ben-miles commented 2 months ago

Closed by 4f33bdec07b47c849e524ea9748debfa5a158d90 and a8c4c301a080f15a947314d50cfc03bcc1b55245