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

D3 Part 2: index + kapcsolat on design system v2

Browse Source 
- Both pages: Google Fonts links + preconnects removed; ONE stylesheet
  (/assets/site.css?v=1); embedded <style> blocks deleted; body classes
  page-index/page-kapcsolat; canonical nav/footer (active marker per
  page; index's #szolgaltatasok href normalized to /#szolgaltatasok);
  all emoji -> sprite icons (feature tiles = .ico-tile 48px bg-2
  squares; headings .ico-lg; inline .ico) or plain text.
- kapcsolat: the contact form is functionally frozen — every field
  name/id, the submit JS, and the /api/contact endpoint byte-identical;
  only the visual layer changed (upload/paperclip + file-type icons as
  sprite refs in JS strings, the x button as &#215;, status-message
  emoji prefixes dropped).
- site.css: CSS-generated marks (content '✓'/'✗'/'⚠'/'★ …') replaced by
  currentColor mask-based marks / plain text (emoji-free stylesheet;
  gate now scans it too); .ico-tile is svg-as-tile (immune to container
  display rules), .ico-lg added.
- Gates: zero failures for the two converted pages; the remaining five
  convert in Part 3.
This commit is contained in:
authentik Default Admin
2026-07-02 22:06:27 +02:00
parent dd54e4cdf6
commit bed8675930
4 changed files with 83 additions and 1287 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/assets/site.css
+14 -15
View File
@@ -74,18 +74,17 @@ body {
vertical-align: -0.18em;
}
.ico-sm { width: 14px; height: 14px; }
/* Feature-tile icon: a 2px-radius bg-2 square, muted stroke — replaces the emoji tiles. */
.icon-tile {
display: inline-flex;
align-items: center;
justify-content: center;
.ico-lg { width: 22px; height: 22px; }
/* Feature-tile icon: the svg itself is a 2px-radius bg-2 square with a muted stroke —
replaces the emoji tiles; robust inside any container display mode. */
.ico-tile {
width: 48px;
height: 48px;
padding: 12px;
background: var(--bg-2);
border-radius: var(--radius);
color: var(--text-2);
}
.icon-tile .ico { width: 24px; height: 24px; }
/* Comparison marks: presence = blue, absence = muted (exception-color: x is not an error). */
.ico-yes { color: var(--blue-bright); }
.ico-no { color: var(--text-3); }
@@ -892,7 +891,7 @@ footer p { color: var(--text-2); font-size: 0.9rem; }
.page-alkalmazasok .disclaimer-banner h3 { font-size: 1rem; color: var(--blue-bright); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.page-alkalmazasok .disclaimer-banner ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.page-alkalmazasok .disclaimer-banner li { color: var(--text-2); font-size: 0.9rem; position: relative; padding-left: 24px; line-height: 1.5; }
.page-alkalmazasok .disclaimer-banner li::before { content: '✓'; color: var(--blue); font-weight: bold; position: absolute; left: 0; top: 0; }
.page-alkalmazasok .disclaimer-banner li::before { content: ''; display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; color: var(--blue); font-weight: bold; position: absolute; left: 0; top: 0; }
.page-alkalmazasok .disclaimer-banner li strong { color: var(--text-1); }
.page-alkalmazasok .disclaimer-banner a { color: var(--blue-bright); }
.page-alkalmazasok .category-section { margin-bottom: 64px; }
@@ -1162,14 +1161,14 @@ footer p { color: var(--text-2); font-size: 0.9rem; }
line-height: 1.6;
}
.page-technologiak .feature-list li::before {
content: '✓';
content: ''; display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
color: var(--blue);
font-weight: bold;
flex-shrink: 0;
margin-top: 2px;
}
.page-technologiak .feature-list.cons li::before {
content: '✗';
content: ''; display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;
color: var(--warn);
}
.page-technologiak .comparison-grid {
@@ -1194,7 +1193,7 @@ footer p { color: var(--text-2); font-size: 0.9rem; }
border-color: var(--blue-bright);
}
.page-technologiak .comparison-card.recommended::before {
content: '★ Ajánlott';
content: 'Ajánlott';
position: absolute;
top: -12px;
left: 24px;
@@ -1421,13 +1420,13 @@ footer p { color: var(--text-2); font-size: 0.9rem; }
margin-bottom: 8px;
}
.page-biztonsagimentes .method-pros li::before {
content: '✓';
content: ''; display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
color: var(--blue);
font-weight: bold;
flex-shrink: 0;
}
.page-biztonsagimentes .method-cons li::before {
content: '⚠';
content: ''; display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;
color: var(--warn);
}
.page-biztonsagimentes .backup-diagram {
@@ -1733,7 +1732,7 @@ footer p { color: var(--text-2); font-size: 0.9rem; }
line-height: 1.4;
}
.page-szolgaltatasok .service-card .includes li::before {
content: '✓';
content: ''; display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
color: var(--blue);
font-weight: bold;
flex-shrink: 0;
@@ -1792,7 +1791,7 @@ footer p { color: var(--text-2); font-size: 0.9rem; }
}
.page-szolgaltatasok .package-card.featured::before {
content: '★ Legnépszerűbb';
content: 'Legnépszerűbb';
position: absolute;
top: -12px;
left: 50%;
@@ -1849,7 +1848,7 @@ footer p { color: var(--text-2); font-size: 0.9rem; }
line-height: 1.4;
}
.page-szolgaltatasok .package-card .package-features li::before {
content: '✓';
content: ''; display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
color: var(--blue);
font-weight: bold;
flex-shrink: 0;