Apply Domine and Figtree typography

This commit is contained in:
2026-03-14 13:29:26 +01:00
parent 839241ea62
commit 1e9407bd3e
6 changed files with 50 additions and 13 deletions

View File

@@ -6,6 +6,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" /> <base href="/" />
<ResourcePreloader /> <ResourcePreloader />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Domine:wght@400&family=Figtree:wght@400;500&display=swap" />
<link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" /> <link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" />
<link rel="stylesheet" href="@Assets["app.css"]" /> <link rel="stylesheet" href="@Assets["app.css"]" />
<link rel="stylesheet" href="@Assets["RolemasterDb.App.styles.css"]" /> <link rel="stylesheet" href="@Assets["RolemasterDb.App.styles.css"]" />

View File

@@ -9,7 +9,7 @@
<div class="top-row"> <div class="top-row">
<div> <div>
<span class="eyebrow">Starter stack</span> <span class="eyebrow">Starter stack</span>
<strong>.NET 10 + Blazor + Minimal API + EF Core + SQLite</strong> <span class="top-row-title">.NET 10 + Blazor + Minimal API + EF Core + SQLite</span>
</div> </div>
<span class="status-pill">Seeded for attack and critical lookups</span> <span class="status-pill">Seeded for attack and critical lookups</span>
</div> </div>

View File

@@ -22,7 +22,7 @@
.navbar-brand { .navbar-brand {
font-size: 1.45rem; font-size: 1.45rem;
font-family: Cambria, Georgia, serif; font-family: "Figtree", "Segoe UI", sans-serif;
letter-spacing: 0.04em; letter-spacing: 0.04em;
color: #fff1d2; color: #fff1d2;
text-decoration: none; text-decoration: none;
@@ -71,6 +71,7 @@
} }
.nav-item ::deep .nav-link { .nav-item ::deep .nav-link {
font-family: "Figtree", "Segoe UI", sans-serif;
color: #f3ddbc; color: #f3ddbc;
background: none; background: none;
border: none; border: none;

View File

@@ -187,7 +187,7 @@ else
@foreach (var attackTable in referenceData.AttackTables) @foreach (var attackTable in referenceData.AttackTables)
{ {
<div class="table-list-item"> <div class="table-list-item">
<strong>@attackTable.Label</strong> <span class="table-list-title">@attackTable.Label</span>
<span class="muted">Attack table key: <code>@attackTable.Key</code></span> <span class="muted">Attack table key: <code>@attackTable.Key</code></span>
</div> </div>
} }

View File

@@ -1,5 +1,5 @@
<div class="table-list-item"> <div class="table-list-item">
<strong>@Table.Label</strong> <span class="table-list-title">@Table.Label</span>
<div class="detail-grid"> <div class="detail-grid">
<div class="detail-item"> <div class="detail-item">
<span class="detail-label">Key</span> <span class="detail-label">Key</span>

View File

@@ -8,6 +8,8 @@
--panel: rgba(255, 250, 240, 0.82); --panel: rgba(255, 250, 240, 0.82);
--line: rgba(111, 87, 59, 0.18); --line: rgba(111, 87, 59, 0.18);
--shadow: 0 18px 40px rgba(41, 22, 11, 0.12); --shadow: 0 18px 40px rgba(41, 22, 11, 0.12);
--font-body: "Domine", Georgia, serif;
--font-heading: "Figtree", "Segoe UI", sans-serif;
} }
html, body { html, body {
@@ -16,13 +18,48 @@ html, body {
radial-gradient(circle at top, rgba(240, 223, 185, 0.55), transparent 28%), radial-gradient(circle at top, rgba(240, 223, 185, 0.55), transparent 28%),
linear-gradient(180deg, #eadbc0 0%, #f4ecda 38%, #e2d3b7 100%); linear-gradient(180deg, #eadbc0 0%, #f4ecda 38%, #e2d3b7 100%);
color: var(--ink); color: var(--ink);
font-family: Georgia, "Palatino Linotype", serif; font-family: var(--font-body);
font-weight: 400;
} }
body { body {
margin: 0; margin: 0;
} }
h1,
h2,
h3,
h4,
h5,
h6,
label,
button,
summary,
th,
.eyebrow,
.panel-title,
.page-title,
.detail-label,
.branch-condition,
.critical-branch-condition,
.effect-stack h5,
.tag,
.stat-pill,
.status-pill,
.chip,
.affix-badge,
.table-list-title,
.top-row-title,
.legend-label {
font-family: var(--font-heading);
font-weight: 400;
}
strong,
b {
font-weight: 400;
}
a, .btn-link { a, .btn-link {
color: var(--accent); color: var(--accent);
} }
@@ -42,7 +79,7 @@ textarea {
font-size: clamp(2.2rem, 4vw, 3.5rem); font-size: clamp(2.2rem, 4vw, 3.5rem);
line-height: 0.95; line-height: 0.95;
margin: 0; margin: 0;
font-family: Cambria, Georgia, serif; font-family: var(--font-heading);
} }
.lede { .lede {
@@ -243,7 +280,6 @@ textarea {
.branch-condition { .branch-condition {
font-size: 0.82rem; font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.06em; letter-spacing: 0.06em;
text-transform: uppercase; text-transform: uppercase;
color: #75562f; color: #75562f;
@@ -263,7 +299,6 @@ textarea {
.critical-cell-description { .critical-cell-description {
margin: 0; margin: 0;
font-weight: 600;
color: #2c1a10; color: #2c1a10;
} }
@@ -286,7 +321,6 @@ textarea {
font-size: 0.75rem; font-size: 0.75rem;
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
font-weight: 700;
color: #6b4c29; color: #6b4c29;
} }
@@ -365,7 +399,7 @@ textarea {
} }
.affix-badge-value { .affix-badge-value {
font-weight: 700; letter-spacing: 0.04em;
} }
.affix-badge-fallback { .affix-badge-fallback {
@@ -388,9 +422,10 @@ textarea {
border: 1px solid rgba(127, 96, 55, 0.12); border: 1px solid rgba(127, 96, 55, 0.12);
} }
.table-list-item strong { .table-list-title {
display: block; display: block;
margin-bottom: 0.6rem; margin-bottom: 0.6rem;
color: var(--ink);
} }
.chip-row { .chip-row {
@@ -420,7 +455,6 @@ textarea {
.details-block summary { .details-block summary {
cursor: pointer; cursor: pointer;
color: var(--accent); color: var(--accent);
font-weight: 600;
margin-bottom: 0.6rem; margin-bottom: 0.6rem;
} }
@@ -496,7 +530,6 @@ textarea {
.critical-table th { .critical-table th {
background: rgba(238, 223, 193, 0.45); background: rgba(238, 223, 193, 0.45);
font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
} }