david/theoldfitz
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dedupe styles.css and remove remaining inline styles

Browse Source 
- Add --font-serif/--font-mono/--font-sans tokens to :root and point
  all ~24 hardcoded font-family declarations at them
- Drop an exact-duplicate .footer-brand .knot rule
- Merge the shared background/border of .stat-card, .card,
  .login-card, and .panel into one grouped selector
- Combine .btn-outline:hover and .nav-cta:hover into one rule
- Move remaining inline style="" attributes in index.php and
  admin/index.php into named classes/rules (.about-grid h2,
  footer address/.social-row spacing, .panel-head,
  .checkbox-label-lg, .field-hint, .form-actions)

No visual changes intended — values carried over as-is.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
David DyerandClaude Sonnet 5 committed 2026-08-29 22:37:02 -04:00
1 parent b55c4f294f
commit e4cd4f6cfb
3 files changed
+83 -52
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

admin/index.php
+6 -6
View File
@@ -78,7 +78,7 @@ if (!$announcement) {
<div class="container"> <div class="container">
<div class="dash-header"> <div class="dash-header">
<p class="eyebrow">Content & Operations</p> <p class="eyebrow">Content & Operations</p>
<h1 style="margin-top: 0.4rem;">Site Announcements & Alerts</h1> <h1>Site Announcements & Alerts</h1>
</div> </div>
<?php if (!empty($successMsg)): ?> <?php if (!empty($successMsg)): ?>
@@ -94,7 +94,7 @@ if (!$announcement) {
<input type="hidden" name="announcement_id" value="<?= (int)($announcement['id'] ?? 0) ?>"> <input type="hidden" name="announcement_id" value="<?= (int)($announcement['id'] ?? 0) ?>">
<div class="panel"> <div class="panel">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;"> <div class="panel-head">
<h2> <h2>
<span>📢 Announcement Settings</span> <span>📢 Announcement Settings</span>
</h2> </h2>
@@ -107,7 +107,7 @@ if (!$announcement) {
<div class="form-grid"> <div class="form-grid">
<div class="form-group full-width"> <div class="form-group full-width">
<label class="checkbox-label" style="font-size: 1.05rem; font-weight: 500;"> <label class="checkbox-label checkbox-label-lg">
<input type="checkbox" name="is_active" value="1" <?= !empty($announcement['is_active']) ? 'checked' : '' ?>> <input type="checkbox" name="is_active" value="1" <?= !empty($announcement['is_active']) ? 'checked' : '' ?>>
<strong>Enable Announcement on Site</strong> <strong>Enable Announcement on Site</strong>
</label> </label>
@@ -139,14 +139,14 @@ if (!$announcement) {
<label for="start_date">Start Date (Optional Auto-Schedule)</label> <label for="start_date">Start Date (Optional Auto-Schedule)</label>
<input type="date" id="start_date" name="start_date" class="form-control" <input type="date" id="start_date" name="start_date" class="form-control"
value="<?= htmlspecialchars($announcement['start_date'] ?? '') ?>"> value="<?= htmlspecialchars($announcement['start_date'] ?? '') ?>">
<span class="muted" style="font-size: 0.78rem;">Leave blank to show immediately while enabled.</span> <span class="muted field-hint">Leave blank to show immediately while enabled.</span>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="end_date">End Date (Optional Expiration)</label> <label for="end_date">End Date (Optional Expiration)</label>
<input type="date" id="end_date" name="end_date" class="form-control" <input type="date" id="end_date" name="end_date" class="form-control"
value="<?= htmlspecialchars($announcement['end_date'] ?? '') ?>"> value="<?= htmlspecialchars($announcement['end_date'] ?? '') ?>">
<span class="muted" style="font-size: 0.78rem;">Auto-hides after 11:59 PM on this date.</span> <span class="muted field-hint">Auto-hides after 11:59 PM on this date.</span>
</div> </div>
<div class="form-group full-width"> <div class="form-group full-width">
@@ -164,7 +164,7 @@ if (!$announcement) {
</div> </div>
</div> </div>
<div style="margin-top: 1.75rem;"> <div class="form-actions">
<button type="submit" class="btn btn-primary">Save &amp; Update Site</button> <button type="submit" class="btn btn-primary">Save &amp; Update Site</button>
</div> </div>
</div> </div>
index.php
+4 -4
View File
@@ -99,8 +99,8 @@ $siteUrl = rtrim(SITE_URL, '/');
<div class="about-grid"> <div class="about-grid">
<div class="reveal"> <div class="reveal">
<p class="eyebrow">About the Pub</p> <p class="eyebrow">About the Pub</p>
<h2 style="margin-top:0.6rem;">A proper Irish pub, right on Washington Street.</h2> <h2>A proper Irish pub, right on Washington Street.</h2>
<p class="lede" style="margin-top:1.5rem;">The Old Fitz Public House pours a traditional Irish pub experience in the middle of Marion — no pretense, no reservations, just a good pint and a warm room. Walk in Thursday through Saturday evening, grab a seat at the bar or a table for the family, and settle in.</p> <p class="lede">The Old Fitz Public House pours a traditional Irish pub experience in the middle of Marion — no pretense, no reservations, just a good pint and a warm room. Walk in Thursday through Saturday evening, grab a seat at the bar or a table for the family, and settle in.</p>
<p class="lede">The kitchen runs until 9, the bar stays open later for snacks, and regulars and first-timers get treated the same.</p> <p class="lede">The kitchen runs until 9, the bar stays open later for snacks, and regulars and first-timers get treated the same.</p>
</div> </div>
<div class="stat-card reveal"> <div class="stat-card reveal">
@@ -226,7 +226,7 @@ $siteUrl = rtrim(SITE_URL, '/');
<img class="knot" src="./assets/knot.png" alt=""> <img class="knot" src="./assets/knot.png" alt="">
<span>THE OLD FITZ PUBLIC HOUSE</span> <span>THE OLD FITZ PUBLIC HOUSE</span>
</a> </a>
<address style="margin-top:1rem;"> <address>
100 N Washington Street<br> 100 N Washington Street<br>
Marion, Indiana Marion, Indiana
</address> </address>
@@ -242,7 +242,7 @@ $siteUrl = rtrim(SITE_URL, '/');
<div> <div>
<p class="col-title">Get in Touch</p> <p class="col-title">Get in Touch</p>
<a class="email" href="mailto:info@theoldfitzpub.com">info@theoldfitzpub.com</a> <a class="email" href="mailto:info@theoldfitzpub.com">info@theoldfitzpub.com</a>
<div class="social-row" style="margin-top:1rem;"> <div class="social-row">
<a href="https://www.instagram.com/theoldfitzpub/?hl=en" target="_blank" rel="noopener" aria-label="Instagram"> <a href="https://www.instagram.com/theoldfitzpub/?hl=en" target="_blank" rel="noopener" aria-label="Instagram">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
<rect x="3" y="3" width="18" height="18" rx="5" /> <rect x="3" y="3" width="18" height="18" rx="5" />
styles.css
+73 -42
View File
@@ -11,6 +11,10 @@
--ink: #f1e8d8; --ink: #f1e8d8;
--ink-muted: #a89a83; --ink-muted: #a89a83;
--rule: #42362590; --rule: #42362590;
--font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
--font-sans: 'Karla', ui-sans-serif, system-ui, sans-serif;
} }
* { * {
@@ -31,7 +35,7 @@
margin: 0; margin: 0;
background: var(--ground); background: var(--ground);
color: var(--ink); color: var(--ink);
font-family: 'Karla', ui-sans-serif, system-ui, sans-serif; font-family: var(--font-sans);
font-size: 1rem; font-size: 1rem;
line-height: 1.65; line-height: 1.65;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@@ -57,7 +61,7 @@
h1, h1,
h2, h2,
h3 { h3 {
font-family: 'Fraunces', Georgia, 'Times New Roman', serif; font-family: var(--font-serif);
font-weight: 600; font-weight: 600;
line-height: 1.08; line-height: 1.08;
text-wrap: balance; text-wrap: balance;
@@ -65,7 +69,7 @@
} }
.eyebrow { .eyebrow {
font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-family: var(--font-mono);
font-size: 0.72rem; font-size: 0.72rem;
letter-spacing: 0.22em; letter-spacing: 0.22em;
text-transform: uppercase; text-transform: uppercase;
@@ -100,7 +104,7 @@
color: var(--ground-2); color: var(--ground-2);
padding: 0.6rem 1rem; padding: 0.6rem 1rem;
border-radius: 0.125rem; border-radius: 0.125rem;
font-family: 'IBM Plex Mono', monospace; font-family: var(--font-mono);
font-size: 0.85rem; font-size: 0.85rem;
transition: top .15s ease; transition: top .15s ease;
z-index: 100; z-index: 100;
@@ -187,7 +191,7 @@
} }
.announcement-tag { .announcement-tag {
font-family: 'IBM Plex Mono', monospace; font-family: var(--font-mono);
font-size: 0.75rem; font-size: 0.75rem;
letter-spacing: 0.12em; letter-spacing: 0.12em;
text-transform: uppercase; text-transform: uppercase;
@@ -250,7 +254,7 @@
.hours-alert strong { .hours-alert strong {
display: block; display: block;
font-family: 'IBM Plex Mono', monospace; font-family: var(--font-mono);
font-size: 0.75rem; font-size: 0.75rem;
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
@@ -310,7 +314,7 @@
align-items: center; align-items: center;
gap: 0.65rem; gap: 0.65rem;
text-decoration: none; text-decoration: none;
font-family: 'Fraunces', serif; font-family: var(--font-serif);
font-weight: 600; font-weight: 600;
letter-spacing: 0.02em; letter-spacing: 0.02em;
font-size: 1.05rem; font-size: 1.05rem;
@@ -343,16 +347,11 @@
color: var(--gold-bright) !important; color: var(--gold-bright) !important;
padding: 0.45rem 0.9rem; padding: 0.45rem 0.9rem;
border-radius: 0.125rem; border-radius: 0.125rem;
font-family: 'IBM Plex Mono', monospace; font-family: var(--font-mono);
font-size: 0.75rem !important; font-size: 0.75rem !important;
letter-spacing: 0.06em; letter-spacing: 0.06em;
} }
.nav-cta:hover {
border-color: var(--gold);
background: var(--surface);
}
@media (max-width: 47.5em) { @media (max-width: 47.5em) {
nav.links { nav.links {
display: none; display: none;
@@ -417,7 +416,7 @@
} }
.hero .sub { .hero .sub {
font-family: 'Fraunces', serif; font-family: var(--font-serif);
font-style: italic; font-style: italic;
font-weight: 400; font-weight: 400;
font-size: clamp(1.15rem, 2.6vw, 1.55rem); font-size: clamp(1.15rem, 2.6vw, 1.55rem);
@@ -431,7 +430,7 @@
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.6rem 0; gap: 0.6rem 0;
font-family: 'IBM Plex Mono', monospace; font-family: var(--font-mono);
font-size: 0.82rem; font-size: 0.82rem;
letter-spacing: 0.04em; letter-spacing: 0.04em;
color: var(--ink-muted); color: var(--ink-muted);
@@ -456,7 +455,7 @@
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
padding: 0.8rem 1.5rem; padding: 0.8rem 1.5rem;
font-family: 'IBM Plex Mono', monospace; font-family: var(--font-mono);
font-size: 0.8rem; font-size: 0.8rem;
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-decoration: none; text-decoration: none;
@@ -483,7 +482,9 @@
color: var(--gold-bright); color: var(--gold-bright);
} }
.btn-outline:hover { /* .nav-cta mirrors this hover treatment */
.btn-outline:hover,
.nav-cta:hover {
border-color: var(--gold); border-color: var(--gold);
background: var(--surface); background: var(--surface);
} }
@@ -515,15 +516,30 @@
margin-top: 1rem; margin-top: 1rem;
} }
.about-grid h2 {
margin-top: 0.6rem;
}
.about-grid h2 + .lede {
margin-top: 1.5rem;
}
.about-grid .lede { .about-grid .lede {
max-width: 56ch; max-width: 56ch;
color: var(--ink); color: var(--ink);
font-size: 1.05rem; font-size: 1.05rem;
} }
.stat-card { /* shared surface-panel look: also used by .card, .login-card, .panel below */
.stat-card,
.card,
.login-card,
.panel {
background: var(--surface); background: var(--surface);
border: 1px solid var(--rule); border: 1px solid var(--rule);
}
.stat-card {
padding: 2rem; padding: 2rem;
border-radius: 0.2rem; border-radius: 0.2rem;
} }
@@ -534,7 +550,7 @@
} }
.stat-big { .stat-big {
font-family: 'Fraunces', serif; font-family: var(--font-serif);
font-weight: 600; font-weight: 600;
font-style: italic; font-style: italic;
font-size: 3rem; font-size: 3rem;
@@ -560,7 +576,7 @@
.stat-source { .stat-source {
margin-top: 1.5rem; margin-top: 1.5rem;
font-family: 'IBM Plex Mono', monospace; font-family: var(--font-mono);
font-size: 0.7rem; font-size: 0.7rem;
color: var(--gold-dim); color: var(--gold-dim);
letter-spacing: 0.05em; letter-spacing: 0.05em;
@@ -584,8 +600,6 @@
} }
.card { .card {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 0.2rem; border-radius: 0.2rem;
padding: 2.25rem; padding: 2.25rem;
} }
@@ -599,7 +613,7 @@
.hours-list { .hours-list {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: 'IBM Plex Mono', monospace; font-family: var(--font-mono);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
font-size: 0.92rem; font-size: 0.92rem;
} }
@@ -785,20 +799,15 @@
text-decoration: none; text-decoration: none;
} }
.footer-brand .knot {
width: 1.625rem;
height: 1.625rem;
}
.footer-brand span { .footer-brand span {
font-family: 'Fraunces', serif; font-family: var(--font-serif);
font-weight: 600; font-weight: 600;
color: var(--ink); color: var(--ink);
font-size: 1rem; font-size: 1rem;
} }
footer .col-title { footer .col-title {
font-family: 'IBM Plex Mono', monospace; font-family: var(--font-mono);
font-size: 0.72rem; font-size: 0.72rem;
letter-spacing: 0.14em; letter-spacing: 0.14em;
text-transform: uppercase; text-transform: uppercase;
@@ -807,14 +816,19 @@
} }
footer address { footer address {
margin-top: 1rem;
font-style: normal; font-style: normal;
color: var(--ink-muted); color: var(--ink-muted);
font-size: 0.92rem; font-size: 0.92rem;
line-height: 1.7; line-height: 1.7;
} }
footer .social-row {
margin-top: 1rem;
}
footer .hours-mini { footer .hours-mini {
font-family: 'IBM Plex Mono', monospace; font-family: var(--font-mono);
font-size: 0.85rem; font-size: 0.85rem;
color: var(--ink-muted); color: var(--ink-muted);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
@@ -882,8 +896,6 @@
} }
.login-card { .login-card {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 0.25rem; border-radius: 0.25rem;
padding: 2.5rem 2rem; padding: 2.5rem 2rem;
width: 100%; width: 100%;
@@ -908,7 +920,7 @@
} }
.login-header p { .login-header p {
font-family: 'IBM Plex Mono', monospace; font-family: var(--font-mono);
font-size: 0.72rem; font-size: 0.72rem;
letter-spacing: 0.15em; letter-spacing: 0.15em;
text-transform: uppercase; text-transform: uppercase;
@@ -926,7 +938,7 @@
.form-group label { .form-group label {
display: block; display: block;
font-family: 'IBM Plex Mono', monospace; font-family: var(--font-mono);
font-size: 0.75rem; font-size: 0.75rem;
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
@@ -934,13 +946,17 @@
margin-bottom: 0.45rem; margin-bottom: 0.45rem;
} }
.field-hint {
font-size: 0.78rem;
}
.form-control, .form-control,
.form-input { .form-input {
width: 100%; width: 100%;
background: var(--ground-2); background: var(--ground-2);
border: 1px solid var(--rule); border: 1px solid var(--rule);
color: var(--ink); color: var(--ink);
font-family: 'Karla', sans-serif; font-family: var(--font-sans);
font-size: 0.95rem; font-size: 0.95rem;
padding: 0.7rem 0.85rem; padding: 0.7rem 0.85rem;
border-radius: 0.125rem; border-radius: 0.125rem;
@@ -991,7 +1007,7 @@
display: block; display: block;
text-align: center; text-align: center;
margin-top: 1.5rem; margin-top: 1.5rem;
font-family: 'IBM Plex Mono', monospace; font-family: var(--font-mono);
font-size: 0.75rem; font-size: 0.75rem;
color: var(--ink-muted); color: var(--ink-muted);
text-decoration: none; text-decoration: none;
@@ -1018,7 +1034,7 @@
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.75rem;
text-decoration: none; text-decoration: none;
font-family: 'Fraunces', serif; font-family: var(--font-serif);
font-size: 1.15rem; font-size: 1.15rem;
color: var(--ink); color: var(--ink);
} }
@@ -1027,7 +1043,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1.25rem; gap: 1.25rem;
font-family: 'IBM Plex Mono', monospace; font-family: var(--font-mono);
font-size: 0.82rem; font-size: 0.82rem;
color: var(--ink-muted); color: var(--ink-muted);
} }
@@ -1050,13 +1066,12 @@
} }
.dash-header h1 { .dash-header h1 {
margin-top: 0.4rem;
font-size: 2rem; font-size: 2rem;
color: var(--ink); color: var(--ink);
} }
.panel { .panel {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 0.25rem; border-radius: 0.25rem;
padding: 2rem; padding: 2rem;
margin-bottom: 2rem; margin-bottom: 2rem;
@@ -1071,6 +1086,13 @@
gap: 0.6rem; gap: 0.6rem;
} }
.panel-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.form-grid { .form-grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
@@ -1083,6 +1105,10 @@
} }
} }
.form-actions {
margin-top: 1.75rem;
}
.checkbox-group { .checkbox-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -1099,6 +1125,11 @@
cursor: pointer; cursor: pointer;
} }
.checkbox-label-lg {
font-size: 1.05rem;
font-weight: 500;
}
.checkbox-label input[type="checkbox"] { .checkbox-label input[type="checkbox"] {
width: 1.15rem; width: 1.15rem;
height: 1.15rem; height: 1.15rem;
@@ -1110,7 +1141,7 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.4rem; gap: 0.4rem;
font-family: 'IBM Plex Mono', monospace; font-family: var(--font-mono);
font-size: 0.72rem; font-size: 0.72rem;
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;