hjess/PunktFri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: IBM Carbon enterprise redesign
Some checks failed
Build and Deploy PunktFri / build-and-deploy (push) Failing after 10s
Details

Browse Source 
- Font: IBM Plex Sans + IBM Plex Mono (fra Google Fonts)
- Farver: IBM Blue #0043CE, IBM Dark #161616, neutrale grå
- Hero: lys grå baggrund, stort mørkt H1 — ikke dark panel
- Header: hvid med bottom border — ikke mørk grøn
- Signup-sektion: hvid baggrund, blå top-border
- Footer: lys grå — ikke mørk grøn
- Inputs: IBM Carbon bottom-border stil, ingen border-radius
- Knap: IBM Blue med hvid tekst
This commit is contained in:
Henrik Jess Nielsen
2026-04-26 22:39:45 +02:00
parent df365ec49f
commit 51a9e55cf8
2 changed files with 192 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

419
static/style.css
View File

@@ -1,20 +1,20 @@
:root { :root {
--suse-dark: #0C322C; --primary: #0043CE;
--suse-mid: #1a4a3f; --primary-d: #002D9C;
--suse-green: #30BA78; --primary-bg: #EEF4FF;
--suse-green-d: #22a065; --dark: #161616;
--suse-pale: #f2faf6; --text: #525252;
--suse-light: #e4f5ec; --muted: #8D8D8D;
--suse-border: #c8e8d8; --gray-20: #E0E0E0;
--text: #1a2a24; --gray-10: #F4F4F4;
--text-mid: #3a5248; --white: #FFFFFF;
--text-muted: #6b8880; --red: #DA1E28;
--border: #dde8e4; --red-bg: #FFF1F1;
--white: #ffffff; --red-border: #FFB3B8;
--red: #c0392b; --green: #198038;
--red-bg: #fdf2f1; --green-bg: #DEFBE6;
--red-border: #f5c4be; --green-bdr: #A7F0BA;
--mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; --mono: 'IBM Plex Mono', 'Fira Code', 'Consolas', monospace;
} }
*, *::before, *::after { *, *::before, *::after {
@@ -24,104 +24,93 @@
} }
body { body {
font-family: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif; font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
color: var(--text); color: var(--text);
line-height: 1.65; line-height: 1.65;
background: var(--white); background: var(--white);
font-size: 1rem; font-size: 1rem;
} }
/* ── Nav ─────────────────────────────── */ /* ── Header ─────────────────────────── */
header { header {
background: var(--suse-dark); background: var(--white);
border-bottom: 1px solid var(--gray-20);
padding: 0 1.5rem; padding: 0 1.5rem;
border-bottom: 2px solid var(--suse-green); position: sticky;
top: 0;
z-index: 100;
} }
header nav { header nav {
max-width: 900px; max-width: 860px;
margin: 0 auto; margin: 0 auto;
height: 54px; height: 56px;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.logo { .logo {
color: var(--white); color: var(--dark);
font-weight: 700; font-weight: 700;
font-size: 1.15rem; font-size: 1.1rem;
letter-spacing: 0.01em; letter-spacing: -0.01em;
text-decoration: none; text-decoration: none;
font-family: 'Source Sans 3', sans-serif; font-family: 'IBM Plex Sans', sans-serif;
} }
.logo span { .logo span {
color: var(--suse-green); color: var(--primary);
} }
/* ── Hero ────────────────────────────── */ /* ── Hero ────────────────────────────── */
.hero { .hero {
background: var(--suse-dark); background: var(--gray-10);
color: var(--white); border-bottom: 1px solid var(--gray-20);
padding: 4.5rem 1.5rem 4rem; padding: 5rem 1.5rem 4.5rem;
text-align: left;
position: relative;
overflow: hidden;
}
.hero::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, var(--suse-green) 0%, transparent 60%);
} }
.hero-inner { .hero-inner {
max-width: 760px; max-width: 860px;
margin: 0 auto; margin: 0 auto;
} }
.hero h1 { .hero h1 {
font-size: clamp(2.4rem, 6vw, 4rem); font-size: clamp(2.75rem, 7vw, 4.5rem);
font-weight: 700; font-weight: 700;
letter-spacing: -0.02em; letter-spacing: -0.03em;
margin-bottom: 0.5rem; margin-bottom: 0.75rem;
line-height: 1.05; line-height: 1.0;
color: var(--white); color: var(--dark);
} }
.hero h1 .accent { .hero h1 .accent {
color: var(--suse-green); color: var(--primary);
} }
.hero .tagline { .hero .tagline {
font-size: clamp(1rem, 2.2vw, 1.2rem); font-size: clamp(1rem, 2.2vw, 1.2rem);
color: #a8cfc0; color: var(--text);
margin-bottom: 2rem; margin-bottom: 2rem;
font-weight: 400; font-weight: 400;
font-style: italic;
} }
.hero .intro { .hero .intro {
font-size: 1rem; font-size: 1.05rem;
color: #c4ddd4; color: var(--text);
line-height: 1.75; line-height: 1.75;
max-width: 640px; max-width: 640px;
border-left: 3px solid var(--suse-green); border-left: 3px solid var(--primary);
padding-left: 1rem; padding-left: 1rem;
} }
/* ── Sections ────────────────────────── */ /* ── Sections ────────────────────────── */
.section { .section {
padding: 3rem 1.5rem; padding: 3.5rem 1.5rem;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--gray-20);
} }
.section-inner { .section-inner {
max-width: 760px; max-width: 860px;
margin: 0 auto; margin: 0 auto;
} }
@@ -130,45 +119,42 @@ header nav {
} }
.section:nth-child(even) { .section:nth-child(even) {
background: var(--suse-pale); background: var(--gray-10);
} }
.section h2 { .section h2 {
font-size: 1.35rem; font-size: 1.5rem;
font-weight: 700; font-weight: 700;
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
color: var(--suse-dark); color: var(--dark);
padding-left: 0.9rem; line-height: 1.2;
border-left: 3px solid var(--suse-green); letter-spacing: -0.01em;
line-height: 1.25;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.6rem; gap: 0.75rem;
flex-wrap: wrap; flex-wrap: wrap;
} }
.section p { .section p {
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: 0.975rem; font-size: 0.975rem;
color: var(--text-mid); color: var(--text);
} }
/* ── Problem list ────────────────────── */ /* ── Problem list ────────────────────── */
.problem-list { .problem-list {
list-style: none; list-style: none;
margin: 1rem 0 0; margin: 1.25rem 0 0;
border: 1px solid var(--border); border: 1px solid var(--gray-20);
border-radius: 4px; background: var(--white);
overflow: hidden;
} }
.problem-list li { .problem-list li {
padding: 0.85rem 1rem 0.85rem 3rem; padding: 1rem 1rem 1rem 3.25rem;
position: relative; position: relative;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--gray-20);
font-size: 0.95rem; font-size: 0.95rem;
color: var(--text-mid); color: var(--text);
background: var(--white);
} }
.problem-list li:last-child { .problem-list li:last-child {
@@ -176,41 +162,39 @@ header nav {
} }
.problem-list li::before { .problem-list li::before {
content: "✕"; content: "—";
position: absolute; position: absolute;
left: 1rem; left: 1rem;
top: 50%; top: 1rem;
transform: translateY(-50%);
color: var(--red); color: var(--red);
font-size: 0.75rem;
font-family: var(--mono); font-family: var(--mono);
font-weight: 500;
} }
.problem-list li strong { .problem-list li strong {
color: var(--text); color: var(--dark);
font-family: var(--mono); font-family: var(--mono);
font-size: 0.85rem; font-size: 0.82rem;
font-weight: 500; font-weight: 500;
display: block;
margin-bottom: 0.2rem;
} }
/* ── Target grid ─────────────────────── */ /* ── Target grid ─────────────────────── */
.target-grid { .target-grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 1rem; gap: 1.5rem;
margin-top: 1.25rem; margin-top: 1.5rem;
} }
@media (max-width: 580px) { @media (max-width: 580px) {
.target-grid { .target-grid { grid-template-columns: 1fr; }
grid-template-columns: 1fr;
}
} }
.target-box { .target-box {
padding: 1.25rem; padding: 1.5rem;
border: 1px solid var(--border); border: 1px solid var(--gray-20);
border-radius: 3px;
background: var(--white); background: var(--white);
border-top: 3px solid transparent; border-top: 3px solid transparent;
} }
@@ -223,28 +207,23 @@ header nav {
} }
.target-box.is-for { .target-box.is-for {
border-top-color: var(--suse-green); border-top-color: var(--green);
background: var(--suse-pale); background: var(--green-bg);
border-color: var(--suse-border); border-color: var(--green-bdr);
border-top-color: var(--suse-green); border-top-color: var(--green);
} }
.target-box h3 { .target-box h3 {
font-size: 0.72rem; font-size: 0.7rem;
font-weight: 700; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.1em; letter-spacing: 0.12em;
margin-bottom: 0.85rem; margin-bottom: 1rem;
font-family: var(--mono); font-family: var(--mono);
} }
.target-box.not-for h3 { .target-box.not-for h3 { color: var(--red); }
color: var(--red); .target-box.is-for h3 { color: var(--green); }
}
.target-box.is-for h3 {
color: var(--suse-green-d);
}
.target-box ul { .target-box ul {
list-style: none; list-style: none;
@@ -253,9 +232,9 @@ header nav {
.target-box ul li { .target-box ul li {
padding: 0.3rem 0 0.3rem 1.4rem; padding: 0.3rem 0 0.3rem 1.4rem;
font-size: 0.9rem; font-size: 0.9rem;
color: var(--text-mid); color: var(--text);
position: relative; position: relative;
line-height: 1.45; line-height: 1.5;
} }
.target-box.not-for ul li::before { .target-box.not-for ul li::before {
@@ -265,35 +244,33 @@ header nav {
color: var(--red); color: var(--red);
font-size: 0.7rem; font-size: 0.7rem;
font-family: var(--mono); font-family: var(--mono);
top: 0.4rem; top: 0.42rem;
} }
.target-box.is-for ul li::before { .target-box.is-for ul li::before {
content: "✓"; content: "✓";
position: absolute; position: absolute;
left: 0; left: 0;
color: var(--suse-green-d); color: var(--green);
font-size: 0.8rem; font-size: 0.8rem;
font-family: var(--mono); font-family: var(--mono);
top: 0.3rem; top: 0.35rem;
} }
/* ── Idea list ───────────────────────── */ /* ── Idea list ───────────────────────── */
.idea-items { .idea-items {
list-style: none; list-style: none;
margin-top: 1rem; margin-top: 1.25rem;
border: 1px solid var(--suse-border); border: 1px solid var(--gray-20);
border-radius: 3px; background: var(--white);
overflow: hidden;
} }
.idea-items li { .idea-items li {
padding: 0.8rem 1rem 0.8rem 2.75rem; padding: 0.9rem 1rem 0.9rem 2.75rem;
position: relative; position: relative;
border-bottom: 1px solid var(--suse-border); border-bottom: 1px solid var(--gray-20);
font-size: 0.95rem; font-size: 0.95rem;
color: var(--text-mid); color: var(--text);
background: var(--white);
} }
.idea-items li:last-child { .idea-items li:last-child {
@@ -304,98 +281,87 @@ header nav {
content: "→"; content: "→";
position: absolute; position: absolute;
left: 1rem; left: 1rem;
top: 50%; top: 0.9rem;
transform: translateY(-50%); color: var(--primary);
color: var(--suse-green);
font-family: var(--mono); font-family: var(--mono);
font-size: 0.85rem; font-size: 0.85rem;
} }
.status-badge { .status-badge {
display: inline-block; display: inline-block;
background: var(--suse-light); background: var(--primary-bg);
color: var(--suse-mid); color: var(--primary);
border: 1px solid var(--suse-border); border: 1px solid #B0C9FF;
border-radius: 3px; padding: 0.15rem 0.55rem;
padding: 0.1rem 0.5rem;
font-size: 0.65rem; font-size: 0.65rem;
font-weight: 700; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.08em; letter-spacing: 0.08em;
font-family: var(--mono); font-family: var(--mono);
vertical-align: middle; vertical-align: middle;
position: relative; position: relative;
top: -1px; top: -2px;
} }
/* ── Not-list ────────────────────────── */ /* ── Not-list ────────────────────────── */
.not-list { .not-list {
list-style: none; list-style: none;
margin-top: 1rem; margin-top: 1.25rem;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 0.5rem; gap: 0.5rem;
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.not-list { .not-list { grid-template-columns: 1fr; }
grid-template-columns: 1fr;
}
} }
.not-list li { .not-list li {
background: var(--white); background: var(--white);
border: 1px solid var(--border); border: 1px solid var(--gray-20);
border-radius: 3px; padding: 0.65rem 1rem;
padding: 0.6rem 0.9rem; color: var(--muted);
font-size: 0.875rem;
color: var(--text-muted);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.6rem;
font-family: var(--mono); font-family: var(--mono);
font-size: 0.82rem; font-size: 0.82rem;
} }
.not-list li::before { .not-list li::before {
content: "–"; content: "–";
color: var(--text-muted); color: var(--muted);
font-size: 0.85rem;
flex-shrink: 0; flex-shrink: 0;
font-family: var(--mono);
} }
/* ── Signup form ─────────────────────── */ /* ── Signup form ─────────────────────── */
.form-section { .form-section {
background: var(--suse-dark) !important; background: var(--white) !important;
color: var(--white); border-top: 2px solid var(--primary);
border-bottom: none;
}
.form-section h2 {
color: var(--white);
border-left-color: var(--suse-green);
} }
.form-section .lead { .form-section .lead {
color: #a8cfc0 !important; color: var(--dark) !important;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-size: 1rem !important; font-size: 1.05rem !important;
font-weight: 600;
} }
.form-section .disclaimer { .form-section .disclaimer {
color: #6b8880 !important; color: var(--muted) !important;
font-size: 0.875rem !important; font-size: 0.875rem !important;
margin-bottom: 1.75rem; margin-bottom: 2rem;
line-height: 1.6; line-height: 1.6;
border-left: 3px solid var(--gray-20);
padding-left: 1rem;
} }
.signup-form { .signup-form {
margin-top: 1.25rem; margin-top: 1.5rem;
} }
.form-group { .form-group {
margin-bottom: 1.25rem; margin-bottom: 1.5rem;
} }
.form-group label { .form-group label {
@@ -403,16 +369,15 @@ header nav {
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
margin-bottom: 0.4rem; margin-bottom: 0.4rem;
color: #c4ddd4; color: var(--dark);
letter-spacing: 0.01em;
} }
.form-group .hint { .form-group .hint {
display: block; display: block;
font-size: 0.78rem; font-size: 0.78rem;
color: #5a7870; color: var(--muted);
font-weight: 400; font-weight: 400;
margin-top: 0.25rem; margin-top: 0.3rem;
font-family: var(--mono); font-family: var(--mono);
} }
@@ -421,25 +386,26 @@ header nav {
.form-group input[type="number"], .form-group input[type="number"],
.form-group textarea { .form-group textarea {
width: 100%; width: 100%;
padding: 0.65rem 0.875rem; padding: 0.625rem 0.875rem;
background: var(--suse-mid); background: var(--white);
border: 1px solid #2d6050; border: 1px solid var(--gray-20);
border-radius: 3px; border-bottom: 2px solid var(--muted);
color: #e8f5f0; border-radius: 0;
color: var(--dark);
font-size: 0.975rem; font-size: 0.975rem;
font-family: inherit; font-family: inherit;
transition: border-color 0.15s, background 0.15s; transition: border-color 0.15s;
} }
.form-group input:focus, .form-group input:focus,
.form-group textarea:focus { .form-group textarea:focus {
outline: none; outline: none;
border-color: var(--suse-green); border-color: var(--primary);
background: #1f5545; border-bottom-color: var(--primary);
} }
.form-group textarea { .form-group textarea {
min-height: 90px; min-height: 100px;
resize: vertical; resize: vertical;
} }
@@ -455,35 +421,35 @@ header nav {
gap: 0.4rem; gap: 0.4rem;
font-weight: 400; font-weight: 400;
cursor: pointer; cursor: pointer;
color: #c4ddd4; color: var(--text);
font-size: 0.975rem; font-size: 0.975rem;
} }
.radio-group input[type="radio"] { .radio-group input[type="radio"] {
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
accent-color: var(--suse-green); accent-color: var(--primary);
flex-shrink: 0; flex-shrink: 0;
} }
.error-msg { .error-msg {
background: #3d1010; background: var(--red-bg);
border: 1px solid #c0392b; border: 1px solid var(--red-border);
color: #f5c4be; border-left: 3px solid var(--red);
padding: 0.75rem 1rem; color: var(--red);
border-radius: 3px; padding: 0.875rem 1rem;
margin-bottom: 1.25rem; margin-bottom: 1.5rem;
font-size: 0.9rem; font-size: 0.9rem;
} }
.submit-btn { .submit-btn {
background: var(--suse-green); background: var(--primary);
color: var(--suse-dark); color: var(--white);
border: none; border: none;
padding: 0.875rem 2rem; padding: 0.875rem 2rem;
font-size: 1rem; font-size: 0.975rem;
font-weight: 700; font-weight: 600;
border-radius: 3px; border-radius: 0;
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
transition: background 0.15s; transition: background 0.15s;
@@ -492,34 +458,34 @@ header nav {
} }
.submit-btn:hover { .submit-btn:hover {
background: var(--suse-green-d); background: var(--primary-d);
} }
/* ── Footer ──────────────────────────── */ /* ── Footer ──────────────────────────── */
footer { footer {
background: var(--suse-dark); background: var(--gray-10);
border-top: 1px solid var(--suse-mid); border-top: 1px solid var(--gray-20);
padding: 2rem 1.5rem; padding: 2.5rem 1.5rem;
} }
.footer-inner { .footer-inner {
max-width: 760px; max-width: 860px;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
} }
.footer-inner p { .footer-inner p {
font-size: 0.85rem; font-size: 0.875rem;
color: #6b8880; color: var(--muted);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.footer-inner strong { .footer-inner strong {
color: #a8cfc0; color: var(--dark);
} }
.footer-inner a { .footer-inner a {
color: var(--suse-green); color: var(--primary);
text-decoration: none; text-decoration: none;
} }
@@ -529,7 +495,7 @@ footer {
.footer-small { .footer-small {
font-size: 0.75rem !important; font-size: 0.75rem !important;
color: #3d5a52 !important; color: var(--gray-20) !important;
margin-top: 0.25rem; margin-top: 0.25rem;
font-family: var(--mono); font-family: var(--mono);
} }
@@ -541,23 +507,22 @@ footer {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 3rem 1.5rem; padding: 3rem 1.5rem;
background: var(--suse-pale); background: var(--gray-10);
} }
.tak-card { .tak-card {
max-width: 520px; max-width: 520px;
text-align: center; text-align: center;
background: var(--white); background: var(--white);
border: 1px solid var(--suse-border); border: 1px solid var(--gray-20);
border-top: 3px solid var(--suse-green); border-top: 3px solid var(--primary);
border-radius: 3px; padding: 3rem 2.5rem;
padding: 2.5rem 2rem;
} }
.tak-icon { .tak-icon {
font-size: 2rem; font-size: 2rem;
margin-bottom: 1rem; margin-bottom: 1rem;
color: var(--suse-green); color: var(--primary);
font-family: var(--mono); font-family: var(--mono);
font-weight: 500; font-weight: 500;
} }
@@ -566,21 +531,20 @@ footer {
font-size: 1.75rem; font-size: 1.75rem;
font-weight: 700; font-weight: 700;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
color: var(--suse-dark); color: var(--dark);
} }
.tak-card p { .tak-card p {
color: var(--text-mid); color: var(--text);
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
font-size: 0.95rem; font-size: 0.975rem;
} }
.back-link { .back-link {
display: inline-block; display: inline-block;
margin-top: 1.25rem; margin-top: 1.25rem;
color: var(--suse-green-d); color: var(--primary);
text-decoration: none; text-decoration: none;
font-size: 0.9rem;
font-weight: 600; font-weight: 600;
font-family: var(--mono); font-family: var(--mono);
font-size: 0.85rem; font-size: 0.85rem;
@@ -598,14 +562,14 @@ footer {
} }
.admin-section h1 { .admin-section h1 {
font-size: 1.4rem; font-size: 1.5rem;
font-weight: 700; font-weight: 700;
margin-bottom: 0.4rem; margin-bottom: 0.4rem;
color: var(--suse-dark); color: var(--dark);
} }
.admin-meta { .admin-meta {
color: var(--text-muted); color: var(--muted);
font-size: 0.875rem; font-size: 0.875rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
font-family: var(--mono); font-family: var(--mono);
@@ -618,70 +582,69 @@ footer {
.signups-table { .signups-table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
font-size: 0.85rem; font-size: 0.875rem;
} }
.signups-table th { .signups-table th {
background: var(--suse-dark); background: var(--dark);
color: var(--suse-green); color: var(--white);
padding: 0.6rem 0.75rem; padding: 0.75rem 0.875rem;
text-align: left; text-align: left;
font-weight: 600; font-weight: 600;
border-bottom: 2px solid var(--suse-green); border-bottom: 2px solid var(--primary);
white-space: nowrap; white-space: nowrap;
font-family: var(--mono); font-family: var(--mono);
font-size: 0.78rem; font-size: 0.75rem;
letter-spacing: 0.05em; letter-spacing: 0.06em;
text-transform: uppercase; text-transform: uppercase;
} }
.signups-table td { .signups-table td {
padding: 0.6rem 0.75rem; padding: 0.75rem 0.875rem;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--gray-20);
vertical-align: top; vertical-align: top;
color: var(--text-mid); color: var(--text);
} }
.signups-table tr:hover td { .signups-table tr:hover td {
background: var(--suse-pale); background: var(--gray-10);
} }
.badge-ja { .badge-ja {
background: var(--suse-light); background: var(--green-bg);
color: var(--suse-mid); color: var(--green);
padding: 0.1rem 0.45rem; padding: 0.15rem 0.5rem;
border-radius: 2px; font-size: 0.7rem;
font-size: 0.72rem; font-weight: 600;
font-weight: 700;
font-family: var(--mono); font-family: var(--mono);
text-transform: uppercase; text-transform: uppercase;
border: 1px solid var(--green-bdr);
} }
.badge-nej { .badge-nej {
background: var(--red-bg); background: var(--red-bg);
color: var(--red); color: var(--red);
padding: 0.1rem 0.45rem; padding: 0.15rem 0.5rem;
border-radius: 2px; font-size: 0.7rem;
font-size: 0.72rem; font-weight: 600;
font-weight: 700;
font-family: var(--mono); font-family: var(--mono);
text-transform: uppercase; text-transform: uppercase;
border: 1px solid var(--red-border);
} }
.empty-state { .empty-state {
text-align: center; text-align: center;
padding: 3rem; padding: 3rem;
color: var(--text-muted); color: var(--muted);
font-family: var(--mono); font-family: var(--mono);
} }
/* ── Mobile ──────────────────────────── */ /* ── Mobile ──────────────────────────── */
@media (max-width: 640px) { @media (max-width: 640px) {
.hero { .hero {
padding: 3rem 1.25rem 2.75rem; padding: 3.5rem 1.25rem 3rem;
text-align: left;
} }
.section { .section {
padding: 2.25rem 1.25rem; padding: 2.5rem 1.25rem;
} }
} }

2
templates/base.html
View File

@@ -7,7 +7,7 @@
<title>{% block title %}PunktFri{% endblock %}</title> <title>{% block title %}PunktFri{% endblock %}</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300;0,400;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head> </head>
<body> <body>