web/yksa-web-kit
4
Fork 0
Code Issues Pull requests Projects Releases Activity

revert padding fixes

Browse source
This commit is contained in:
ThePetrovich 2026-08-18 14:05:28 +08:00
parent eff21622f4
commit 2d1da2886d
2 changed files with 169 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

41
yksa_web/static/yksa/css/kit.css
View file

@ -65,42 +65,35 @@
}
/* Nav links fill the bar's height and butt against one another, so the active
item reads as a selected tab rather than a highlighted word.
The height comes from the chain below, not from padding. It used to come from a
hard-coded `padding-top: 12px` on top of a text line box, which meant any item
whose content was not text -- the language flag -- came out short. */
item reads as a selected tab rather than a highlighted word. */
.nav-full-height {
display: flex;
align-items: center;
height: 100%;
}
/* The top padding is deliberately larger than the bottom: it is what sits the link
text on the same optical line as the wordmark in the brand block. Do not
symmetrise it -- the alignment is the reason it is here. */
.nav-full-height.nav-link {
color: inherit;
padding-left: 1rem !important;
padding-right: 1rem !important;
padding-top: 0;
padding-bottom: 0;
padding-top: 12px;
background-color: var(--bs-body-bg);
margin-right: -1px;
}
@media (min-width: 992px) {
/* Give `height: 100%` above something definite to resolve against: the bar's
height has to reach the <a> through the container, the collapse and the
<li>, or it resolves to `auto` and the rule does nothing. */
.custom-navbar > .container,
.custom-navbar > .container-fluid,
.custom-navbar .navbar-collapse,
.custom-navbar .navbar-nav,
.custom-navbar .nav-item {
height: 100%;
}
/* The locale item's only content is a flag image. Because the link is a flex
container, an image child gives it no text line box to take its height from, so
the item came out ~9px shorter than every neighbour. Reserve the height one line
of body text would have occupied and letterbox the flag inside it: same box as
its neighbours, flag unscaled and undistorted.
.custom-navbar .navbar-nav {
align-items: stretch;
}
Scoped to .nav-link so the brand block's wordmark is untouched. */
.nav-full-height.nav-link > img {
min-height: calc(1em * var(--bs-body-line-height));
object-fit: contain;
}
.nav-full-height.nav-link:hover,
@ -329,12 +322,6 @@
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
/* Stacked, the rows size to their own content again. */
.custom-navbar .navbar-nav,
.custom-navbar .nav-item {
height: auto;
}
}
/* -----------------------------------------------------------------------------