admin/felhom.eu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

website: fix the phone menu and the footer column - both live defects
gates / gates (push) Successful in 6m42s
Details

Browse Source 
Reported from a real phone. Both were mine, both shipped in the switch.

1. THE PHONE MENU WAS EMPTY. The drawer slid open correctly but had no items in
   it. site.css's OLD mobile nav was still reaching the shell's sidebar: under
   @media (max-width: 900px) it sets .nav-links to position:fixed; right:-100%,
   which parked the menu off-canvas INSIDE the drawer. Measured at 390px and
   860px: position fixed, right -280px.

   The cause is a hole in my own check. At STOP 1 I diffed the two stylesheets'
   declaration sets and found "exactly six" leaking declarations - but that diff
   EXCLUDED @media blocks. Re-run media-aware, the real number is FORTY, and the
   worst of them only apply below 900px, which is why desktop looked right and a
   phone did not. A check that silently skips part of its subject is not a check;
   this one reported a confident, wrong number.

   Fixed at the source rather than per-property: every selector belonging to the
   website's OLD chrome (nav, .nav-links*, .mobile-overlay, .hamburger, .logo*,
   .lang-globe-li - 29 occurrences) is now scoped `body:not(.shell)`. Scoped, not
   deleted, so a future non-shell page still works. .hamburger-box and
   .hamburger-line are deliberately left unscoped: the shell's burger uses them.
   Leaks after the fix: 40 -> 0.

2. THE FOOTER RENDERED AS A SECOND COLUMN at the top right on 16 pages. body is a
   flex row on a shell page, and my insert only moved the footer inside <main>
   when the page ENDED with </main>; pages with scripts after it fell through and
   left the footer as a direct child of body, i.e. a flex sibling of the sidebar.
   Moved inside <main> on all 16, each move asserted to have landed inside.

Both are now gated: gate 3b requires every shell page's footer to be INSIDE
<main class="content">, red-proofed by putting one outside and watching it convict.

site.css?v=23 / shell.css?v=23.
This commit is contained in:
authentik Default Admin
2026-10-11 16:25:01 +02:00
parent f92e81ee14
commit 5aeb36b5bd
22 changed files with 186 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/assets/site.css
+39 -61
View File
@@ -117,7 +117,7 @@ nav {
border-bottom: 1px solid var(--line);
z-index: 200;
}
nav .container { display: flex; justify-content: space-between; align-items: center; }
body:not(.shell) nav .container { display: flex; justify-content: space-between; align-items: center; }
/* The brand lockup is TWO images, not an image plus typed text (2026-10-09). logo.png carries its
own 'felhom.eu' lettering underneath the mark, so showing it beside a typed span said the name
twice and shrank the mark to fit.
@@ -134,19 +134,18 @@ nav .container { display: flex; justify-content: space-between; align-items: cen
the site deliberately loads NO external font: the published privacy notice says so, so matching it
with a webfont would make a public claim false. */
.logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.logo-mark { height: 54px; width: auto; }
.logo-word { height: 25px; width: auto; }
@media (max-width: 600px) { .logo-mark { height: 44px; } .logo-word { height: 21px; } }
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a {
body:not(.shell) .logo-mark { height: 54px; width: auto; }
body:not(.shell) .logo-word { height: 25px; width: auto; }
@media (max-width: 600px) { .logo-mark { height: 44px; } body:not(.shell) .logo-word { height: 21px; } }
body:not(.shell) .nav-links { display: flex; gap: 32px; list-style: none; }
body:not(.shell) .nav-links a {
color: var(--text-2);
text-decoration: none;
font-weight: 500;
font-size: 0.95rem;
transition: color 0.2s ease;
}
.nav-links a:hover,
.nav-links a.active { color: var(--blue-bright); }
body:not(.shell) .nav-links a:hover, body:not(.shell) .nav-links a.active { color: var(--blue-bright); }
/* --- Language globe (2026-10-08, matching the controller's lang_globe): a <details> list, no JavaScript.
The current language is marked by weight and a blue rule, not a check glyph (the emoji gate's range). --- */
@@ -157,9 +156,9 @@ nav .container { display: flex; justify-content: space-between; align-items: cen
.lang-globe-btn::marker { content: ""; }
.lang-globe-btn:hover, .lang-globe[open] .lang-globe-btn { color: var(--blue-bright); }
.lang-globe-menu { position: absolute; top: calc(100% + 12px); right: 0; margin: 0; padding: 4px; list-style: none; min-width: 8rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); z-index: 210; }
.nav-links .lang-globe-item { display: block; padding: 6px 10px; font-size: 0.9rem; white-space: nowrap; color: var(--text-2); border-left: 2px solid transparent; }
.nav-links .lang-globe-item:hover { color: var(--blue-bright); }
.nav-links .lang-globe-item.current { color: var(--text-1); font-weight: 700; border-left-color: var(--blue); }
body:not(.shell) .nav-links .lang-globe-item { display: block; padding: 6px 10px; font-size: 0.9rem; white-space: nowrap; color: var(--text-2); border-left: 2px solid transparent; }
body:not(.shell) .nav-links .lang-globe-item:hover { color: var(--blue-bright); }
body:not(.shell) .nav-links .lang-globe-item.current { color: var(--text-1); font-weight: 700; border-left-color: var(--blue); }
/* --- Two-tone heading (brand signature): accent span is solid blue-bright --- */
h1 span, h2 span, h3 span, h4 span { color: var(--blue-bright); }
@@ -268,10 +267,10 @@ footer a:hover, footer a:focus-visible { text-decoration: underline; }
transition: transform 0.3s ease, opacity 0.3s ease;
transform-origin: center;
}
.hamburger.is-active .hamburger-line:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger.is-active .hamburger-line:nth-child(2) { opacity: 0; }
.hamburger.is-active .hamburger-line:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
.mobile-overlay {
body:not(.shell) .hamburger.is-active .hamburger-line:nth-child(1) { transform: translateY(9px) rotate(45deg); }
body:not(.shell) .hamburger.is-active .hamburger-line:nth-child(2) { opacity: 0; }
body:not(.shell) .hamburger.is-active .hamburger-line:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
body:not(.shell) .mobile-overlay {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
@@ -280,11 +279,11 @@ footer a:hover, footer a:focus-visible { text-decoration: underline; }
opacity: 0;
transition: opacity 0.3s ease;
}
.mobile-overlay.is-visible { opacity: 1; }
body:not(.shell) .mobile-overlay.is-visible { opacity: 1; }
@media (max-width: 900px) {
.hamburger { display: block; }
.nav-links {
body:not(.shell) .nav-links {
display: flex;
flex-direction: column;
position: fixed;
@@ -301,17 +300,17 @@ footer a:hover, footer a:focus-visible { text-decoration: underline; }
transition: right 0.3s ease;
overflow-y: auto;
}
.nav-links.is-open { right: 0; }
.nav-links li { border-bottom: 1px solid var(--line-soft); }
.nav-links a { display: block; padding: 16px 0; font-size: 1.05rem; }
body:not(.shell) .nav-links.is-open { right: 0; }
body:not(.shell) .nav-links li { border-bottom: 1px solid var(--line-soft); }
body:not(.shell) .nav-links a { display: block; padding: 16px 0; font-size: 1.05rem; }
/* the globe in the phone menu: last item, its list opens in place (not a floating box the menu would cut off) */
.lang-globe-li { display: block; }
.lang-globe-btn { padding: 16px 0; }
.lang-globe-menu { position: static; min-width: 0; padding: 0 0 8px; background: none; border: none; }
.nav-links .lang-globe-menu li { border-bottom: none; }
.nav-links .lang-globe-item { padding: 10px 0 10px 12px; font-size: 1.05rem; }
.mobile-overlay { display: block; pointer-events: none; }
.mobile-overlay.is-visible { pointer-events: auto; }
body:not(.shell) .nav-links .lang-globe-menu li { border-bottom: none; }
body:not(.shell) .nav-links .lang-globe-item { padding: 10px 0 10px 12px; font-size: 1.05rem; }
body:not(.shell) .mobile-overlay { display: block; pointer-events: none; }
body:not(.shell) .mobile-overlay.is-visible { pointer-events: auto; }
body.menu-open { overflow: hidden; }
}
@@ -320,9 +319,9 @@ footer a:hover, footer a:focus-visible { text-decoration: underline; }
wrapped row instead, and the header scrolls with the page so it can grow. Script-on pages are unchanged. */
@media (max-width: 900px) and (scripting: none) {
nav { position: static; }
nav .container { flex-wrap: wrap; row-gap: 12px; }
.hamburger { display: none; }
.nav-links {
body:not(.shell) nav .container { flex-wrap: wrap; row-gap: 12px; }
body:not(.shell) .hamburger { display: none; }
body:not(.shell) .nav-links {
position: static;
flex-direction: row;
flex-wrap: wrap;
@@ -335,8 +334,8 @@ footer a:hover, footer a:focus-visible { text-decoration: underline; }
transition: none;
overflow: visible;
}
.nav-links li { border-bottom: none; }
.nav-links a { padding: 6px 0; font-size: 1rem; }
body:not(.shell) .nav-links li { border-bottom: none; }
body:not(.shell) .nav-links a { padding: 6px 0; font-size: 1rem; }
.lang-globe-btn { padding: 6px 0; }
}
@@ -1197,18 +1196,15 @@ footer a:hover, footer a:focus-visible { text-decoration: underline; }
transition: color 0.2s ease;
}
.page-technologiak .toc-links a:hover { color: var(--text-1); }
.page-technologiak .info-card,
.page-teszteles .info-card {
.page-technologiak .info-card, .page-teszteles .info-card {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 40px;
margin-bottom: 32px;
}
.page-technologiak .info-card:last-child,
.page-teszteles .info-card:last-child { margin-bottom: 0; }
.page-technologiak .info-card h3,
.page-teszteles .info-card h3 {
.page-technologiak .info-card:last-child, .page-teszteles .info-card:last-child { margin-bottom: 0; }
.page-technologiak .info-card h3, .page-teszteles .info-card h3 {
font-size: 1.4rem;
margin-bottom: 20px;
color: var(--text-1);
@@ -1216,29 +1212,23 @@ footer a:hover, footer a:focus-visible { text-decoration: underline; }
align-items: center;
gap: 12px;
}
.page-technologiak .info-card h3 .icon,
.page-teszteles .info-card h3 .icon { font-size: 1.6rem; }
.page-technologiak .info-card p,
.page-teszteles .info-card p {
.page-technologiak .info-card h3 .icon, .page-teszteles .info-card h3 .icon { font-size: 1.6rem; }
.page-technologiak .info-card p, .page-teszteles .info-card p {
color: var(--text-2);
font-size: 1rem;
line-height: 1.8;
margin-bottom: 16px;
}
.page-technologiak .info-card p:last-child,
.page-teszteles .info-card p:last-child { margin-bottom: 0; }
.page-technologiak .highlight-box,
.page-teszteles .highlight-box {
.page-technologiak .info-card p:last-child, .page-teszteles .info-card p:last-child { margin-bottom: 0; }
.page-technologiak .highlight-box, .page-teszteles .highlight-box {
background: var(--blue-dim);
border: 1px solid var(--blue);
border-radius: var(--radius);
padding: 20px 24px;
margin: 20px 0;
}
.page-technologiak .highlight-box p,
.page-teszteles .highlight-box p { color: var(--text-1); margin: 0; }
.page-technologiak .highlight-box strong,
.page-teszteles .highlight-box strong { color: var(--blue-bright); }
.page-technologiak .highlight-box p, .page-teszteles .highlight-box p { color: var(--text-1); margin: 0; }
.page-technologiak .highlight-box strong, .page-teszteles .highlight-box strong { color: var(--blue-bright); }
.page-technologiak .warning-box {
background: var(--bg-1);
border: 1px solid var(--warn);
@@ -2159,20 +2149,8 @@ footer a:hover, footer a:focus-visible { text-decoration: underline; }
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease;
}
.content-section p a:not(.cta-button):visited,
.content-section li a:not(.cta-button):visited,
.info-card a:not(.cta-button):visited,
.highlight-box a:not(.cta-button):visited,
.page-header p a:not(.cta-button):visited { color: var(--blue-bright); }
.content-section p a:not(.cta-button):hover,
.content-section li a:not(.cta-button):hover,
.info-card a:not(.cta-button):hover,
.highlight-box a:not(.cta-button):hover,
.page-header p a:not(.cta-button):hover,
.content-section p a:not(.cta-button):focus-visible,
.content-section li a:not(.cta-button):focus-visible,
.info-card a:not(.cta-button):focus-visible,
.highlight-box a:not(.cta-button):focus-visible { border-bottom-color: var(--blue-bright); }
.content-section p a:not(.cta-button):visited, .content-section li a:not(.cta-button):visited, .info-card a:not(.cta-button):visited, .highlight-box a:not(.cta-button):visited, .page-header p a:not(.cta-button):visited { color: var(--blue-bright); }
.content-section p a:not(.cta-button):hover, .content-section li a:not(.cta-button):hover, .info-card a:not(.cta-button):hover, .highlight-box a:not(.cta-button):hover, .page-header p a:not(.cta-button):hover, .content-section p a:not(.cta-button):focus-visible, .content-section li a:not(.cta-button):focus-visible, .info-card a:not(.cta-button):focus-visible, .highlight-box a:not(.cta-button):focus-visible { border-bottom-color: var(--blue-bright); }
/* Lists inside an info-card. The card rules styled only h3 and p, so a <ul> fell back to the
browser default: full-strength black-on-dark bullets at the wrong indent. Mirrors `.legal`. */