Dedupe styles.css and remove remaining inline styles
- 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
1 parent
b55c4f294f
commit
e4cd4f6cfb
3 files changed
+83
-52
No files matched your search
+6
-6
@@ -78,7 +78,7 @@ if (!$announcement) {
|
||||
<div class="container">
|
||||
<div class="dash-header">
|
||||
<p class="eyebrow">Content & Operations</p>
|
||||
<h1 style="margin-top: 0.4rem;">Site Announcements & Alerts</h1>
|
||||
<h1>Site Announcements & Alerts</h1>
|
||||
</div>
|
||||
|
||||
<?php if (!empty($successMsg)): ?>
|
||||
@@ -94,7 +94,7 @@ if (!$announcement) {
|
||||
<input type="hidden" name="announcement_id" value="<?= (int)($announcement['id'] ?? 0) ?>">
|
||||
|
||||
<div class="panel">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
|
||||
<div class="panel-head">
|
||||
<h2>
|
||||
<span>📢 Announcement Settings</span>
|
||||
</h2>
|
||||
@@ -107,7 +107,7 @@ if (!$announcement) {
|
||||
|
||||
<div class="form-grid">
|
||||
<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' : '' ?>>
|
||||
<strong>Enable Announcement on Site</strong>
|
||||
</label>
|
||||
@@ -139,14 +139,14 @@ if (!$announcement) {
|
||||
<label for="start_date">Start Date (Optional Auto-Schedule)</label>
|
||||
<input type="date" id="start_date" name="start_date" class="form-control"
|
||||
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 class="form-group">
|
||||
<label for="end_date">End Date (Optional Expiration)</label>
|
||||
<input type="date" id="end_date" name="end_date" class="form-control"
|
||||
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 class="form-group full-width">
|
||||
@@ -164,7 +164,7 @@ if (!$announcement) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 1.75rem;">
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Save & Update Site</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -99,8 +99,8 @@ $siteUrl = rtrim(SITE_URL, '/');
|
||||
<div class="about-grid">
|
||||
<div class="reveal">
|
||||
<p class="eyebrow">About the Pub</p>
|
||||
<h2 style="margin-top:0.6rem;">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>
|
||||
<h2>A proper Irish pub, right on Washington Street.</h2>
|
||||
<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>
|
||||
</div>
|
||||
<div class="stat-card reveal">
|
||||
@@ -226,7 +226,7 @@ $siteUrl = rtrim(SITE_URL, '/');
|
||||
<img class="knot" src="./assets/knot.png" alt="">
|
||||
<span>THE OLD FITZ PUBLIC HOUSE</span>
|
||||
</a>
|
||||
<address style="margin-top:1rem;">
|
||||
<address>
|
||||
100 N Washington Street<br>
|
||||
Marion, Indiana
|
||||
</address>
|
||||
@@ -242,7 +242,7 @@ $siteUrl = rtrim(SITE_URL, '/');
|
||||
<div>
|
||||
<p class="col-title">Get in Touch</p>
|
||||
<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">
|
||||
<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" />
|
||||
|
||||
+73
-42
@@ -11,6 +11,10 @@
|
||||
--ink: #f1e8d8;
|
||||
--ink-muted: #a89a83;
|
||||
--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;
|
||||
background: var(--ground);
|
||||
color: var(--ink);
|
||||
font-family: 'Karla', ui-sans-serif, system-ui, sans-serif;
|
||||
font-family: var(--font-sans);
|
||||
font-size: 1rem;
|
||||
line-height: 1.65;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@@ -57,7 +61,7 @@
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 600;
|
||||
line-height: 1.08;
|
||||
text-wrap: balance;
|
||||
@@ -65,7 +69,7 @@
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
@@ -100,7 +104,7 @@
|
||||
color: var(--ground-2);
|
||||
padding: 0.6rem 1rem;
|
||||
border-radius: 0.125rem;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85rem;
|
||||
transition: top .15s ease;
|
||||
z-index: 100;
|
||||
@@ -187,7 +191,7 @@
|
||||
}
|
||||
|
||||
.announcement-tag {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
@@ -250,7 +254,7 @@
|
||||
|
||||
.hours-alert strong {
|
||||
display: block;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
@@ -310,7 +314,7 @@
|
||||
align-items: center;
|
||||
gap: 0.65rem;
|
||||
text-decoration: none;
|
||||
font-family: 'Fraunces', serif;
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
font-size: 1.05rem;
|
||||
@@ -343,16 +347,11 @@
|
||||
color: var(--gold-bright) !important;
|
||||
padding: 0.45rem 0.9rem;
|
||||
border-radius: 0.125rem;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem !important;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.nav-cta:hover {
|
||||
border-color: var(--gold);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
@media (max-width: 47.5em) {
|
||||
nav.links {
|
||||
display: none;
|
||||
@@ -417,7 +416,7 @@
|
||||
}
|
||||
|
||||
.hero .sub {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-family: var(--font-serif);
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-size: clamp(1.15rem, 2.6vw, 1.55rem);
|
||||
@@ -431,7 +430,7 @@
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.6rem 0;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.82rem;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--ink-muted);
|
||||
@@ -456,7 +455,7 @@
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.8rem 1.5rem;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.05em;
|
||||
text-decoration: none;
|
||||
@@ -483,7 +482,9 @@
|
||||
color: var(--gold-bright);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
/* .nav-cta mirrors this hover treatment */
|
||||
.btn-outline:hover,
|
||||
.nav-cta:hover {
|
||||
border-color: var(--gold);
|
||||
background: var(--surface);
|
||||
}
|
||||
@@ -515,15 +516,30 @@
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.about-grid h2 {
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
|
||||
.about-grid h2 + .lede {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.about-grid .lede {
|
||||
max-width: 56ch;
|
||||
color: var(--ink);
|
||||
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);
|
||||
border: 1px solid var(--rule);
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 2rem;
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
@@ -534,7 +550,7 @@
|
||||
}
|
||||
|
||||
.stat-big {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
font-size: 3rem;
|
||||
@@ -560,7 +576,7 @@
|
||||
|
||||
.stat-source {
|
||||
margin-top: 1.5rem;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
color: var(--gold-dim);
|
||||
letter-spacing: 0.05em;
|
||||
@@ -584,8 +600,6 @@
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 0.2rem;
|
||||
padding: 2.25rem;
|
||||
}
|
||||
@@ -599,7 +613,7 @@
|
||||
.hours-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-family: var(--font-mono);
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
@@ -785,20 +799,15 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer-brand .knot {
|
||||
width: 1.625rem;
|
||||
height: 1.625rem;
|
||||
}
|
||||
|
||||
.footer-brand span {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
footer .col-title {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
@@ -807,14 +816,19 @@
|
||||
}
|
||||
|
||||
footer address {
|
||||
margin-top: 1rem;
|
||||
font-style: normal;
|
||||
color: var(--ink-muted);
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
footer .social-row {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
footer .hours-mini {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85rem;
|
||||
color: var(--ink-muted);
|
||||
font-variant-numeric: tabular-nums;
|
||||
@@ -882,8 +896,6 @@
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 0.25rem;
|
||||
padding: 2.5rem 2rem;
|
||||
width: 100%;
|
||||
@@ -908,7 +920,7 @@
|
||||
}
|
||||
|
||||
.login-header p {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
@@ -926,7 +938,7 @@
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
@@ -934,13 +946,17 @@
|
||||
margin-bottom: 0.45rem;
|
||||
}
|
||||
|
||||
.field-hint {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-input {
|
||||
width: 100%;
|
||||
background: var(--ground-2);
|
||||
border: 1px solid var(--rule);
|
||||
color: var(--ink);
|
||||
font-family: 'Karla', sans-serif;
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.95rem;
|
||||
padding: 0.7rem 0.85rem;
|
||||
border-radius: 0.125rem;
|
||||
@@ -991,7 +1007,7 @@
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 1.5rem;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
color: var(--ink-muted);
|
||||
text-decoration: none;
|
||||
@@ -1018,7 +1034,7 @@
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
text-decoration: none;
|
||||
font-family: 'Fraunces', serif;
|
||||
font-family: var(--font-serif);
|
||||
font-size: 1.15rem;
|
||||
color: var(--ink);
|
||||
}
|
||||
@@ -1027,7 +1043,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.25rem;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.82rem;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
@@ -1050,13 +1066,12 @@
|
||||
}
|
||||
|
||||
.dash-header h1 {
|
||||
margin-top: 0.4rem;
|
||||
font-size: 2rem;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 0.25rem;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
@@ -1071,6 +1086,13 @@
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.panel-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
@@ -1083,6 +1105,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 1.75rem;
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -1099,6 +1125,11 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox-label-lg {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.checkbox-label input[type="checkbox"] {
|
||||
width: 1.15rem;
|
||||
height: 1.15rem;
|
||||
@@ -1110,7 +1141,7 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
|
||||
Reference in new issue
Block a user