change font and font sizes

This commit is contained in:
dreamer committed 2026-10-14 08:43:58 +02:00
1 parent eef10b12fa
commit 2428072d16
2 files changed
+17 -16

No files matched your search

+2 -1
View File
@@ -5,7 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>VANDAAG — Filmhuis Den Haag</title> <title>VANDAAG — Filmhuis Den Haag</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/style.css"> <link rel="stylesheet" href="/static/style.css">
</head> </head>
<body> <body>
+15 -15
View File
@@ -9,7 +9,7 @@
* { margin: 0; padding: 0; box-sizing: border-box; } * { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; } html, body { height: 100%; }
body { body {
font-family: "Poppins", "Futura", sans-serif; font-family: "Figtree", "Futura", sans-serif;
background: var(--bg); background: var(--bg);
color: var(--ink); color: var(--ink);
overflow: hidden; overflow: hidden;
@@ -19,9 +19,9 @@ body {
/* ---------- left: film list ---------- */ /* ---------- left: film list ---------- */
.programme { padding: 28px 40px 40px 48px; display: flex; flex-direction: column; } .programme { padding: 28px 40px 40px 48px; display: flex; flex-direction: column; }
.programme h1 { .programme h1 {
font-size: 122px; font-weight: 600; letter-spacing: 6px; font-size: 152px; font-weight: 600; letter-spacing: 6px;
text-transform: uppercase; line-height: 1; text-transform: uppercase; line-height: 1;
margin-bottom: -35px; margin-bottom: -50px;
position: relative; z-index: 0; position: relative; z-index: 0;
} }
.film { .film {
@@ -35,8 +35,8 @@ body {
} }
.film-spacer { min-height: 0; padding: 0; } .film-spacer { min-height: 0; padding: 0; }
.times { line-height: 1.25; } .times { line-height: 1.25; }
.times .start { font-size: 20px; font-weight: 600; } .times .start { font-size: 25px; font-weight: 600; }
.times .end { font-size: 20px; color: var(--muted); } .times .end { font-size: 25px; color: var(--muted); }
.icons { .icons {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
@@ -52,19 +52,19 @@ body {
.icons .dot { .icons .dot {
width: 26px; height: 26px; border-radius: 50%; width: 26px; height: 26px; border-radius: 50%;
background: var(--badge); color: #fff; background: var(--badge); color: #fff;
font-size: 13px; font-weight: 600; font-size: 18px; font-weight: 600;
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
} }
.info { padding-top: 3px; } .info { padding-top: 3px; }
.info .title { font-size: 22px; font-weight: 500; } .info .title { font-size: 25px; font-weight: 500; }
.info .meta { .info .meta {
margin-top: 14px; font-size: 13px; font-weight: 600; margin-top: 14px; font-size: 18px; font-weight: 400;
letter-spacing: 1.5px; text-transform: uppercase; letter-spacing: 1.5px; text-transform: uppercase;
display: flex; gap: 18px; align-items: center; display: flex; gap: 18px; align-items: center;
} }
.pill { .pill {
background: var(--bg-side); border-radius: 14px; background: var(--bg-side); border-radius: 14px;
padding: 4px 14px; font-size: 12px; font-weight: 600; padding: 4px 14px; font-size: 18px; font-weight: 600;
letter-spacing: 1px; letter-spacing: 1px;
text-transform: none; /* "Boutique Cinema" reads like the photo */ text-transform: none; /* "Boutique Cinema" reads like the photo */
} }
@@ -74,7 +74,7 @@ body {
.badge-last { .badge-last {
justify-self: end; align-self: start; margin-top: -16px; justify-self: end; align-self: start; margin-top: -16px;
background: var(--badge); color: #fff; background: var(--badge); color: #fff;
font-size: 11px; font-weight: 600; letter-spacing: 1.5px; font-size: 15px; font-weight: 600; letter-spacing: 1.5px;
padding: 6px 12px; text-transform: uppercase; white-space: nowrap; padding: 6px 12px; text-transform: uppercase; white-space: nowrap;
} }
@@ -93,8 +93,8 @@ body {
margin-bottom: 4px; margin-bottom: 4px;
} }
.sidebar .date { .sidebar .date {
font-size: 56px; font-size: 66px;
font-weight: 600; font-weight: 700;
line-height: 1; line-height: 1;
} }
.sidebar .date .colon { .sidebar .date .colon {
@@ -113,7 +113,7 @@ body {
height: 46px; height: 46px;
width: auto; width: auto;
} }
.sidebar h2 { margin-top: 56px; font-size: 20px; font-weight: 600; margin-bottom: 14px; } .sidebar h2 { margin-top: 56px; font-size: 28px; font-weight: 600; margin-bottom: 14px; }
.price-row { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 9px; font-size: 17px; } .price-row { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 9px; font-size: 20px; }
.price-row .price { white-space: nowrap; } .price-row .price { white-space: nowrap; }
.sidebar h3 { margin-top: 34px; font-size: 17px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 14px; } .sidebar h3 { margin-top: 34px; font-size: 20px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 14px; }