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

website: the operator's seven notes - a services page, the hero, and 100 dead links
gates / gates (push) Failing after 6m51s
Details

Browse Source 
Reported from his own screens. Five defects, two design.

1. THE CATEGORY ANCHORS WERE DEAD - all 100 of them. The sidebar's five app-category
   links pointed at #fajlkezeles-irodai and friends; the ids are #fajlkezeles and
   friends. The sidebar is copied into every page, so one wrong fragment was wrong
   twenty times, and a dead fragment raises no error anywhere: the browser stays put.

   New gate 23 resolves every in-site #fragment against the page it names (360 today).
   It convicted two more on its first run: the home page's four hero tiles pointed at
   /alkalmazasok#immich, which no page had ever carried, and the FAQ's contact button
   pointed at a home-page section that had moved out. Every app card now carries its
   slug as an id - taken from the card's own logo file, which gate 21 already ties to
   the catalog, so the ids cannot drift from it silently.
   Decoy site/dead-fragment puts the operator's own bug back and the gate convicts.

2. SZOLGALTATASOK IS A PAGE: /szolgaltatasok + /en/services, registered in TWINS, URL
   and SHELL. The ten capability items moved VERBATIM out of the home page; the home
   keeps the promise sentence, the three group names as links and a button, and is 345
   Hungarian / 434 English words shorter. The .caps rules stopped being .page-index-
   scoped, because the block now lives on a page with a different body class.

3. THE HOME HEADLINE is back in the hero column beside the picture, two lines with the
   second in --blue-bright at clamp(2.1rem, 4.4vw, 3.2rem). M3 had moved it into
   .page-header - the INNER pages' heading - so it shrank to 2.1rem and the domain
   badge was stranded beside it.

4. THE HERO PICTURE is the real dashboard in a laptop. The frame is the operator's own
   supplied render; the screen is dashboard-start-{hu,en}.webp composited into it, so a
   visitor sees a real box's Launcher rather than a drawing of one - the supplied
   screens are AI-drawn and misspell app names. 57 KB, named dashboard-laptop-<lang>
   so gate 19 holds it to the page's language.

5. .page-lede HAD NO CSS AT ALL on 16 pages: a bare paragraph, full width of the
   content column, hard against the box beneath it. 760px measure, centred over the
   box, air beneath; left-aligned on /szolgaltatasok, which has no centred box.

6. THE SIDEBAR LOGO: the wordmark shipped at 0.67x the mark's width where the real
   lockup (assets/logo.png, measured: mark 492px wide, wordmark 631px) has it at 1.28x.
   Mark 112px, wordmark 25px tall, 28px less vertical padding.

7. SCROLLBARS are the page's own now. The first attempt missed the viewport's: it is
   painted from <html>, and a `body.shell ::-webkit-...` rule only reaches scrollers
   inside the page.

Also: the two Latin font subsets are preloaded. With font-display: swap the page
reflowed after first paint - measured at 1339px on /alkalmazasok#media.

Checked at 390px and 1440px on all 21 pages: no sideways scrolling, footer inside the
content column everywhere, drawer opens with all 13 items. site.css?v=24.
This commit is contained in:
authentik Default Admin
2026-10-12 08:58:42 +02:00
parent a7480172ab
commit 0ef0b106f6
31 changed files with 1150 additions and 474 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/assets/site.css
+118 -14
View File
@@ -2227,19 +2227,21 @@ body:not(.shell) .mobile-overlay.is-visible { opacity: 1; }
so they take --text-2. */
.page-index .lede-shot figcaption { margin-top: 10px; font-size: 0.85rem; color: var(--text-2); }
/* --- capabilities, grouped into three clusters instead of ten equal cards --- */
.page-index .caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 36px; }
.page-index .caps-group h3 {
/* --- capabilities, grouped into three clusters instead of ten equal cards.
UNSCOPED 2026-10-12: the block moved off the home page to /szolgaltatasok and
/en/services, which share a body class with each other and not with the home. --- */
.caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 36px; }
.caps-group h3 {
font-size: 0.95rem; font-weight: 700; color: var(--text-1);
padding-bottom: 10px; margin-bottom: 20px; border-bottom: 1px solid var(--line);
}
.page-index .caps-list { list-style: none; display: grid; gap: 22px; }
.page-index .caps-item h4 {
.caps-list { list-style: none; display: grid; gap: 22px; }
.caps-item h4 {
display: flex; gap: 10px; align-items: flex-start;
font-size: 1.02rem; font-weight: 600; color: var(--text-1); margin-bottom: 6px;
}
.page-index .caps-item h4 svg { flex: 0 0 auto; margin-top: 3px; color: var(--blue-bright); }
.page-index .caps-item p { color: var(--text-2); font-size: 0.93rem; line-height: 1.65; }
.caps-item h4 svg { flex: 0 0 auto; margin-top: 3px; color: var(--blue-bright); }
.caps-item p { color: var(--text-2); font-size: 0.93rem; line-height: 1.65; }
/* --- who is behind it: SHARED, not page-scoped. It lives on /kapcsolat and
/en/contact, and on the home page only as the compact .who-mini row below. */
@@ -2316,7 +2318,7 @@ body:not(.shell) .mobile-overlay.is-visible { opacity: 1; }
.page-index .lede { padding: 104px 0 56px; }
.page-index .lede-grid { grid-template-columns: 1fr; gap: 36px; }
.page-index .lede-text p { max-width: none; }
.page-index .caps { grid-template-columns: 1fr; gap: 36px; }
.caps { grid-template-columns: 1fr; gap: 36px; }
.who { grid-template-columns: 1fr; gap: 28px; }
.who-photo { max-width: 260px; }
.page-index .flow { grid-template-columns: 1fr; gap: 20px; }
@@ -2388,12 +2390,6 @@ body:not(.shell) .mobile-overlay.is-visible { opacity: 1; }
.hero-copy p { color: var(--text-2); font-size: 1.05rem; margin-bottom: 1.5rem; max-width: 34ch; }
.hero-logo { display: flex; justify-content: center; }
.hero-logo img { max-width: 340px; width: 100%; height: auto; }
.hero-window { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-1); overflow: hidden; }
.hero-window-bar { display: flex; align-items: center; gap: .4rem; padding: .55rem .8rem; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.hw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); display: inline-block; }
.hero-window-title { margin-left: .7rem; font-size: .78rem; color: var(--text-3); display: inline-flex; align-items: center; gap: .5rem; }
.hero-window-body { padding: 1.1rem; }
.hero-window-lede { font-size: .88rem; color: var(--text-2); margin-bottom: .9rem; }
.launch-grid--mini { grid-template-columns: repeat(4, 1fr); gap: .9rem; }
@media (max-width: 900px) {
@@ -2455,3 +2451,111 @@ body:not(.shell) .mobile-overlay.is-visible { opacity: 1; }
yields the whole unbroken string. The legal pages' words are untouched. */
code { overflow-wrap: anywhere; }
.page-adatkezeles a, .page-feltetelek a { overflow-wrap: anywhere; }
/* ============================================================================
Operator's tweaks, 2026-10-12 (reported from his own screens)
============================================================================ */
/* --- 1. the sidebar logo: less air, and the wordmark at the logo's own ratio ---
Measured on assets/logo.png (645x408), which is the original lockup:
the mark occupies x 76..568 (492 wide), the wordmark x 8..639 (631 wide) -
so in the real logo the TEXT IS WIDER THAN THE MARK, by 1.28x. The shell
shipped a 140px mark over a 16px-tall wordmark, which is 94px wide: 0.67x,
less than half the intended size. 112px mark + 25px wordmark keeps 1.29x and
fits the 192px of sidebar inside its padding. The header also lost 28px of
vertical padding. */
.shell .sidebar-header { padding: 1rem 1.5rem .9rem; }
.shell .sidebar-logo { width: 112px; margin: 0 auto .4rem; }
.shell .sidebar-word { height: 25px; }
/* --- 2. scrollbars: the page's own, not the platform default ---------------
The VIEWPORT's scrollbar is painted from <html>: a `body.shell ::-webkit-...`
rule only reaches scrollers INSIDE the page (the sidebar, the drawer), which
is why the first attempt left the big one on the right untouched. Firefox
takes the two standard properties, Chrome and Safari the pseudo-elements, and
neither inherits - so both are declared, for both scopes. */
html { scrollbar-width: thin; scrollbar-color: var(--line) var(--bg-1); }
.shell .sidebar, .shell .content { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
html::-webkit-scrollbar, .shell ::-webkit-scrollbar { width: 11px; height: 11px; }
html::-webkit-scrollbar-track { background: var(--bg-1); }
.shell ::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb, .shell ::-webkit-scrollbar-thumb {
background: var(--line); border-radius: var(--radius);
border: 2px solid transparent; background-clip: content-box;
}
html::-webkit-scrollbar-thumb:hover, .shell ::-webkit-scrollbar-thumb:hover {
background: var(--text-3); background-clip: content-box;
}
html::-webkit-scrollbar-corner, .shell ::-webkit-scrollbar-corner { background: transparent; }
/* --- 3. the home headline, back to where and what it was on the old site ----
Before M3 the home had a two-column hero: headline, one sentence and the
button on the left, the picture on the right, at clamp(2.5rem, 5vw, 3.5rem)
with the second line in --blue-bright. M3 moved it into .page-header, which
is the INNER pages' heading (2.1rem, above the content column) - so the
headline shrank and the badge ended up beside it. It is back in the hero
column, and only the home page has it. */
.shell.page-index .hero-copy h1 {
font-size: clamp(2.1rem, 4.4vw, 3.2rem);
font-weight: 700; line-height: 1.1; letter-spacing: -.03em;
margin-bottom: .6rem;
}
.shell.page-index .hero-copy .domain-badge { display: inline-block; margin-bottom: 1.1rem; }
.shell.page-index .hero-copy .hero-lede { max-width: 38ch; }
/* --- 6. the lede above a section box ---------------------------------------
.page-lede exists in the markup of 16 pages and had NO rule at all, so it
rendered as a bare paragraph the full width of the content column, hard
against the box beneath it. It now shares the box's 760px measure and sits
over its centre. */
.shell .page-lede {
max-width: 760px; margin: 0 auto 28px; text-align: center;
font-size: 1.05rem; line-height: 1.6; color: var(--text-2);
}
@media (max-width: 700px) {
.shell .page-lede { text-align: left; }
}
/* --- the home's pointer to /szolgaltatasok: the three group names, nothing invented --- */
.shell .caps-teaser {
list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
gap: 14px; margin-bottom: 1.5rem;
}
.shell .caps-teaser a {
display: block; padding: .85rem 1rem; border: 1px solid var(--line);
border-radius: var(--radius); color: var(--text-1); text-decoration: none;
font-weight: 600; font-size: .95rem; line-height: 1.35;
transition: border-color .2s ease, color .2s ease;
}
.shell .caps-teaser a:hover { border-color: var(--blue); color: var(--blue-bright); }
@media (max-width: 760px) {
.shell .caps-teaser { grid-template-columns: 1fr; gap: 10px; }
}
/* --- the hero's picture: the REAL dashboard, in a laptop ---------------------
The frame is the operator's own supplied render (2026-10-12); the SCREEN is
website/assets/dashboard-start-{hu,en}.webp composited into it, so what a
visitor sees is a real screenshot of a real box and not a drawing of one.
The file is named dashboard-laptop-<lang>.webp on purpose: gate 19 then holds
it to the page's language like every other dashboard picture. */
.hero-shot { margin: 0; }
.hero-shot img {
display: block; width: 100%; height: auto; max-width: 620px;
margin-inline: auto;
}
.hero-shot figcaption {
margin-top: .4rem; text-align: center;
font-size: .85rem; color: var(--text-2);
}
@media (max-width: 900px) {
.hero-shot img { max-width: 520px; }
}
/* --- an anchored target must not land under the sticky phone top bar -------- */
.shell [id] { scroll-margin-top: 1rem; }
@media (max-width: 768px) {
.shell [id] { scroll-margin-top: 4.25rem; }
}
/* The services page's lede heads three columns of its own, not a centred box: left there. */
.page-szolgaltatasok .page-lede { text-align: left; margin-left: 0; max-width: 52ch; }