Switch to playful Baloo/Nunito web fonts

This commit is contained in:
2026-02-02 15:38:02 +01:00
parent 332a5b3d1b
commit 1479049785
2 changed files with 9 additions and 7 deletions

View File

@@ -4,6 +4,9 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>CoopGameChooser</title> <title>CoopGameChooser</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700&family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<!-- Optional: set data-app-base if served from a subfolder (e.g., /vote) --> <!-- Optional: set data-app-base if served from a subfolder (e.g., /vote) -->
<meta name="app-base" content=""> <meta name="app-base" content="">
@@ -55,8 +58,8 @@
<section> <section>
<div class="status-bar"> <div class="status-bar">
<img src="logo.png" alt="CoopGameChooser logo" class="logo-mark">
<div class="status-left"> <div class="status-left">
<img src="logo.png" alt="CoopGameChooser logo" class="logo-mark">
<span id="welcome-text" data-i18n="auth.welcome">Welcome!</span> <span id="welcome-text" data-i18n="auth.welcome">Welcome!</span>
<a id="logout" href="#" class="link inline-link" data-i18n="auth.logout">Logout</a> <a id="logout" href="#" class="link inline-link" data-i18n="auth.logout">Logout</a>
</div> </div>

View File

@@ -1,5 +1,5 @@
:root { :root {
font-family: "Segoe UI", system-ui, -apple-system, sans-serif; font-family: "Baloo 2", "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
background: #f6e9d6; background: #f6e9d6;
color: #2c1c0d; color: #2c1c0d;
} }
@@ -23,7 +23,7 @@
display: flex; display: flex;
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
gap: 20px; gap: 30px;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
border: 1px solid #e3d4bd; border: 1px solid #e3d4bd;
border-radius: 12px; border-radius: 12px;
@@ -31,12 +31,11 @@
padding: 10px 14px; padding: 10px 14px;
} }
.status-left, .status-center, .status-right { display: flex; align-items: center; gap: 10px; } .status-left, .status-center, .status-right { display: flex; align-items: center; gap: 10px; }
.inline-link { font-size: 14px; } .inline-link { font-size: 14px; margin-left: 5px; }
.logo-mark { .logo-mark {
height: 44px; height: 60px;
margin: -10px;
width: auto; width: auto;
object-fit: contain;
filter: drop-shadow(0 4px 10px rgba(0,0,0,0.18));
} }
.counts { .counts {