Add photo and two-column layout to the Live Music section
Replaces the text-only Live Music section with a two-column layout (photo alongside copy) featuring resident musician Jesse Hart, with a responsive single-column fallback below 50em. Updates the section copy to name a resident musician plus guest performers rather than citing a single past artist by name. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
50eeb41375
commit
803d02d758
3 files changed
+70
-6
No files matched your search
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
@@ -201,16 +201,25 @@ $siteUrl = rtrim(SITE_URL, '/');
|
||||
<section id="music" class="music">
|
||||
<div class="container">
|
||||
<div class="rule-row reveal"><span class="line"></span><img class="knot" src="./assets/knot.png" alt=""><span class="line"></span></div>
|
||||
<div class="section-head reveal">
|
||||
|
||||
<div class="music-grid">
|
||||
<div class="music-photo-wrap reveal">
|
||||
<img src="./assets/jesse-hart.jpg" alt="Jesse Hart performing live acoustic music" class="music-photo" loading="lazy">
|
||||
</div>
|
||||
|
||||
<div class="music-content reveal">
|
||||
<div class="section-head">
|
||||
<p class="eyebrow">Live Music</p>
|
||||
<h2>Some nights, there's music.</h2>
|
||||
</div>
|
||||
<p class="body reveal">The Old Fitz brings in local musicians for live sets on select evenings — recent nights have featured artists like Casey Morris. There's no fixed weekly lineup here, so the surest way to catch a show is to follow along on Facebook or Instagram, where new dates get posted first.</p>
|
||||
<div class="hero-ctas reveal">
|
||||
<p class="body">The Old Fitz brings in live acoustic sets on select evenings, featuring resident musician <strong>Jesse Hart</strong> alongside guest performers. Because dates are announced as they are booked, the best way to catch an upcoming set is to follow along on Facebook or Instagram, where new dates get posted first.</p>
|
||||
<div class="hero-ctas">
|
||||
<a class="btn btn-outline" href="https://www.facebook.com/profile.php?id=100086635646712" target="_blank" rel="noopener">Follow on Facebook</a>
|
||||
<a class="btn btn-outline" href="https://www.instagram.com/theoldfitzpub/?hl=en" target="_blank" rel="noopener">Follow on Instagram</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="menu" class="menu-band">
|
||||
|
||||
+58
-3
@@ -740,8 +740,41 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.music-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 3.5rem;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.music-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.music-photo-wrap {
|
||||
position: relative;
|
||||
border-radius: 0.25rem;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(201, 163, 92, 0.35);
|
||||
box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.music-photo {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
aspect-ratio: 4 / 3;
|
||||
object-position: center top;
|
||||
}
|
||||
|
||||
.music .section-head {
|
||||
margin-bottom: 1.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.music .section-head .eyebrow {
|
||||
@@ -750,9 +783,10 @@
|
||||
|
||||
.music p.body {
|
||||
max-width: 58ch;
|
||||
margin: 0 auto;
|
||||
margin: 0;
|
||||
font-size: 1.02rem;
|
||||
color: #e4ddc9;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.music .btn-outline {
|
||||
@@ -760,7 +794,28 @@
|
||||
}
|
||||
|
||||
.music .hero-ctas {
|
||||
margin-top: 2.25rem;
|
||||
margin-top: 2rem;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@media (max-width: 50em) {
|
||||
.music-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.music-content {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.music .section-head {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.music .hero-ctas {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* menu band */
|
||||
|
||||
Reference in new issue
Block a user