Skip to content

Commit 44fc935

Browse files
adampageadampage
committed
rewrite example content theme
1 parent 2de0c88 commit 44fc935

2 files changed

Lines changed: 26 additions & 26 deletions

File tree

‎content/patterns/disclosure/examples/css/disclosure-card.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@
176176
box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.2);
177177
margin: 0.25em;
178178
border-radius: 0.25em;
179-
max-inline-size: calc(48rem * 10/16);
179+
max-inline-size: calc(56rem * 10/16);
180180

181181
header,
182182
hgroup {

‎content/patterns/disclosure/examples/disclosure-card.html‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -54,27 +54,27 @@ <h2 id="ex_label">Example</h2>
5454
</div>
5555
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
5656
<div id="ex1" class="disclosure-cards">
57-
<h3>Highwind Accessibility Conference</h3>
57+
<h3>Musical Education Conference</h3>
5858
<ol class="sessions">
5959
<li>
60-
<article class="disclosure-card session" aria-labelledby="from-fire-to-flare">
60+
<article class="disclosure-card session" aria-labelledby="symphonic-structure">
6161
<header>
6262
<hgroup>
63-
<h4 id="from-fire-to-flare">From Fire to Flare</h4>
64-
<p>Terra Branford</p>
63+
<h4 id="symphonic-structure">Symphonic Structure: Form, Function, and Feeling</h4>
64+
<p>Ludwig van Beethoven</p>
6565
</hgroup>
6666
<p>
67-
<span class="location">7 AM in Narshe</span>
68-
<button id="toggle-from-fire-to-flare" aria-labelledby="from-fire-to-flare toggle-from-fire-to-flare" aria-expanded="false" aria-controls="details-from-fire-to-flare" type="button">
67+
<span class="location">7 AM in Theater an der Wien</span>
68+
<button id="toggle-symphonic-structure" aria-labelledby="symphonic-structure toggle-symphonic-structure" aria-expanded="false" aria-controls="details-symphonic-structure" type="button">
6969
<svg role="image" aria-hidden="true" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/><polyline points="7,10 12,15 17,10" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
7070
Details
7171
</button>
7272
</p>
7373
</header>
74-
<div id="details-from-fire-to-flare" class="details" inert>
74+
<div id="details-symphonic-structure" class="details" inert>
7575
<div class="description">
76-
<p>Terra kicks off the conference by drawing parallels between her journey of self-discovery and the evolution of accessible design. Just as a simple Fire spell can grow into a powerful Flare, small accessibility improvements can build into transformative user experiences. She explains how <a href="#">progressive enhancement</a> — starting with a solid foundation and layering on more advanced functionality — mirrors the way magic strengthens over time, unlocking new potential without leaving anyone behind.</p>
77-
<p>With a mix of inspiration and technical insight, Terra dives into practical strategies for ensuring every user, regardless of ability or device, can experience a website’s full power. She reminds developers that accessibility isn’t a static checklist—it’s an ongoing progression, much like a hero’s growth. By embracing this mindset, designers and developers can craft experiences that don’t just function but truly <em>ignite</em>.</p>
76+
<p>Beethoven invites you to uncover the architectural principles that make a composition — or a curriculum — sing. He compares <a href="#">symphonic form</a> to effective educational frameworks, emphasizing how recurring motifs and variations foster retention, engagement, and deep emotional resonance. He asserts that structure should never constrain passion; rather, it channels it into something truly enduring.</p>
77+
<p>Blending musical theory with pedagogical insight, Beethoven encourages educators to embrace contrast, conflict, and resolution in their lesson planning. Just as the second movement of a symphony can be a quiet reflection following a turbulent first, so too should pacing and emotional cadence be considered in designing impactful learning experiences.</p>
7878
</div>
7979
<form>
8080
<h5>Session registration</h5>
@@ -88,24 +88,24 @@ <h5>Session registration</h5>
8888
</article>
8989
</li>
9090
<li>
91-
<article class="disclosure-card session" aria-labelledby="impostor-syndrome">
91+
<article class="disclosure-card session" aria-labelledby="folk-futures">
9292
<header>
9393
<hgroup>
94-
<h4 id="impostor-syndrome">Impostor syndrome</h4>
95-
<p>Gogo</p>
94+
<h4 id="folk-futures">Folk Futures: Tradition in the Classroom</h4>
95+
<p>Antonín Dvořák</p>
9696
</hgroup>
9797
<p>
98-
<span class="location">8 AM in Zone Eater’s Belly</span>
99-
<button id="toggle-impostor-syndrome" aria-labelledby="impostor-syndrome toggle-impostor-syndrome" aria-expanded="false" aria-controls="details-impostor-syndrome" type="button">
98+
<span class="location">8 AM in Rudolfinum Hall</span>
99+
<button id="toggle-folk-futures" aria-labelledby="folk-futures toggle-folk-futures" aria-expanded="false" aria-controls="details-folk-futures" type="button">
100100
<svg role="image" aria-hidden="true" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/><polyline points="7,10 12,15 17,10" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
101101
Details
102102
</button>
103103
</p>
104104
</header>
105-
<div id="details-impostor-syndrome" class="details" inert>
105+
<div id="details-folk-futures" class="details" inert>
106106
<div class="description">
107-
<p>Gogo takes the stage to explore the perilous and persnickety art of <a href="#">role hijacking</a> in web development. With his uncanny ability to imitate others, he explains how generic divs and spans can be repurposed to mimic native semantic elements. However, he warns that without careful consideration, essential functionality might be lost—much like an echo that never quite captures the original voice.</p>
108-
<p>Throughout his session, Gogo shares real-world examples where imitating components enhanced a design, but also instances where it led to confusion and usability issues. His playful yet insightful approach encourages developers to experiment boldly—but always with an eye on preserving accessibility and clarity.</p>
107+
<p>Dvořák explores the power of cultural roots in modern music education, drawing from his own deep connection to the folk melodies of Bohemia. He demonstrates how incorporating <a href="#">regional traditions</a> into teaching not only diversifies students’ musical vocabulary, but fosters a sense of identity and continuity across generations. Through examples from his own works, he illustrates how authenticity can coexist with innovation.</p>
108+
<p>Attendees will learn strategies to weave traditional forms into contemporary curricula, using rhythm, language, and storytelling as tools of engagement. Dvořák makes the case that honoring heritage doesn’t mean resisting progress—instead, it provides a vibrant foundation on which students can build their own musical voices.</p>
109109
</div>
110110
<form>
111111
<h5>Session registration</h5>
@@ -119,24 +119,24 @@ <h5>Session registration</h5>
119119
</article>
120120
</li>
121121
<li>
122-
<article class="disclosure-card session" aria-labelledby="blitzing-through-barriers">
122+
<article class="disclosure-card session" aria-labelledby="playful-dissonance">
123123
<header>
124124
<hgroup>
125-
<h4 id="blitzing-through-barriers">Blitzing through barriers</h4>
126-
<p>Sabin Rene Figaro</p>
125+
<h4 id="playful-dissonance">Playful Dissonance: Teaching with Wit and Wonder</h4>
126+
<p>Francis Poulenc</p>
127127
</hgroup>
128128
<p>
129-
<span class="location">8 AM in Duncan’s Dojo</span>
130-
<button id="toggle-blitzing-through-barriers" aria-labelledby="blitzing-through-barriers toggle-blitzing-through-barriers" aria-expanded="false" aria-controls="details-blitzing-through-barriers" type="button">
129+
<span class="location">9 AM in Église Saint-Roch</span>
130+
<button id="toggle-playful-dissonance" aria-labelledby="playful-dissonance toggle-playful-dissonance" aria-expanded="false" aria-controls="details-playful-dissonance" type="button">
131131
<svg role="image" aria-hidden="true" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/><polyline points="7,10 12,15 17,10" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
132132
Details
133133
</button>
134134
</p>
135135
</header>
136-
<div id="details-blitzing-through-barriers" class="details" inert>
136+
<div id="details-playful-dissonance" class="details" inert>
137137
<div class="description">
138-
<p>Sabin’s session is a high-energy exploration of performance and <a href="#">responsive design</a>, delivered with the force of his signature blitz techniques. He compares the need for rapid load times and smooth interactions to his own lightning-fast martial arts moves. Every pixel and piece of code should strike decisively, overcoming obstacles in the blink of an eye.</p>
139-
<p>Through dynamic demonstrations and lively anecdotes, Sabin shows that speed and accessibility go hand in hand. His message is clear: just as a well-timed attack can change the tide of battle, a swift and accessible website can win over even the most demanding users.</p>
138+
<p>Poulenc brings charm and surprise to the spotlight, making a compelling case for <a href="#">humor as pedagogy</a>. Through anecdotes, musical excerpts, and sly asides, he reveals how wit and whimsy can disarm resistance and unlock creativity in learners of all ages. He shows that even dissonance, when playfully framed, becomes an invitation rather than a disruption.</p>
139+
<p>This session challenges the notion that music education must be rigid or overly serious. Poulenc encourages instructors to embrace imperfection, joy, and even contradiction in their teaching. The result? A classroom atmosphere that not only nurtures skill but sparks lifelong curiosity and delight.</p>
140140
</div>
141141
<form>
142142
<h5>Session registration</h5>

0 commit comments

Comments
 (0)