Skip to content

Commit 2b61d4d

Browse files
estelleestelle
committed
New example: Multicol module
1 parent bf39396 commit 2b61d4d

File tree

1 file changed

+249
-0
lines changed

1 file changed

+249
-0
lines changed

‎modules/multicol.html

+249
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
<!DOCTYPE html>
2+
<html lang="en-us">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<title>Module template</title>
7+
<style>
8+
article {
9+
column-count: 10;
10+
column-width: 10em;
11+
widows: 3;
12+
orphans: 3;
13+
gap: 1em;
14+
column-rule: 2px dashed #666;
15+
}
16+
.title {
17+
column-span: all;
18+
display: flex;
19+
align-items: baseline;
20+
gap: 1em;
21+
flex-wrap: wrap;
22+
}
23+
p {
24+
margin: 0 0 1em 0;
25+
line-height: 1.4;
26+
}
27+
#options {
28+
position: fixed;
29+
top: 1rem;
30+
right: 1rem;
31+
background: white;
32+
display: none;
33+
}
34+
[aria-expanded] {
35+
position: relative;
36+
top: 0;
37+
transition: 200ms;
38+
}
39+
[aria-expanded="false"] {
40+
top: 0.75em;
41+
}
42+
[aria-expanded="false"] + #controls {
43+
display: none;
44+
}
45+
legend {
46+
background-color: #dedede;
47+
padding: 0.5em;
48+
}
49+
[aria-expanded="false"] {
50+
margin: -1em;
51+
display: inline-block;
52+
}
53+
blockquote {
54+
border: 2px dashed red;
55+
margin: 0;
56+
}
57+
blockquote p {
58+
margin-bottom: 0;
59+
}
60+
blockquote p::before,
61+
blockquote p::after {
62+
content: '"';
63+
font-size: 1.2em;
64+
vertical-align: baseline;
65+
color: red;
66+
}
67+
</style>
68+
</head>
69+
<body>
70+
<article>
71+
<div class="title">
72+
<h1>A Lament for Confederation</h1>
73+
<p>&mdash;Chief Dan George, 1967</p>
74+
</div>
75+
76+
<p>
77+
How long have I known you, Oh Canada? A hundred years? Yes, a hundred
78+
years. And many, many tides more. And today, when you celebrate your
79+
hundred years, Oh Canada, I am sad for all the Indian people throughout
80+
the land.
81+
</p>
82+
83+
<p>
84+
For I have known you when your forests were mine; when they gave me my
85+
meat and my clothing. I have known you in your fruits and rivers where
86+
your fish flashed and danced in the sun, where the waters said ‘come and
87+
eat of my abundance.’ I have known you in the freedom of your winds. And
88+
my spirit, like your winds, once roamed this good lands.
89+
</p>
90+
91+
<blockquote>
92+
<p>
93+
But in long the hundred years since the white man came, I have seen
94+
that freedom disappear just like the salmon going mysteriously out to
95+
sea.
96+
</p>
97+
</blockquote>
98+
99+
<p>
100+
The white man’s strange customs I could not understand, pressed down
101+
upon me until I could no longer breathe.
102+
</p>
103+
104+
<p>
105+
When I fought to protect my home and my land, I was called a savage.
106+
When I neither understood nor welcomed this new way of life, I was
107+
called lazy. When I tried to rule my people, I was stripped of my
108+
authority.
109+
</p>
110+
111+
<p>
112+
My nation was ignored in your history textbooks – we were less important
113+
in the history of Canada than the buffalo that ranged the plains. I was
114+
ridiculed in your plays and motion pictures, and when I drank your
115+
fire-water, I got drunk – very, very drunk. And I forgot.
116+
</p>
117+
118+
<p>
119+
Oh Canada, how can I celebrate with you this centenary, this hundred
120+
years? Shall I thank you for the reserves that are left me of my
121+
beautiful forests? Shall I thank you for the canned fish of my rivers?
122+
Shall I thank you for the loss of my pride and authority, even among my
123+
own people? For the lack of my will to fight back? No! I must forget
124+
what is past and gone.
125+
</p>
126+
127+
<p>
128+
Oh God in heaven! Give me the courage of the olden chiefs. Let me
129+
wrestle with my surroundings. Let me once again, as in the days of old,
130+
dominate my environment. Let me humbly accept this new culture and
131+
through it rise up and go on.
132+
</p>
133+
134+
<p>
135+
Oh god, like the thunderbird of old, I shall rise again out of the sea.
136+
I shall grab the instruments of the white man’s success – his education,
137+
his skills, and with these new tools I shall build my race into the
138+
proudest segment of your society. And, before I follow the great chiefs
139+
who have gone before us, I shall see these things come to pass.
140+
</p>
141+
142+
<p>
143+
I shall see our young braves and our chiefs sitting in the house of law
144+
and government, ruling and being ruled by the knowledge and freedoms of
145+
our great land. So shall we shatter the barriers of our isolation. So
146+
shall the next hundred years be the greatest in the proud history of our
147+
tribes and nations.
148+
</p>
149+
</article>
150+
<fieldset id="options">
151+
<legend role="button" aria-expanded="true" aria-controls="controls">
152+
Column options
153+
</legend>
154+
<div id="controls">
155+
<p>
156+
<input type="range" min="0" max="10" value="10" id="colCount" />
157+
<label for="colCount">Max # of columns:</label>
158+
</p>
159+
<p>
160+
<input
161+
type="range"
162+
min="2"
163+
max="40"
164+
value="10"
165+
step="2"
166+
id="colWidth"
167+
/>
168+
<label for="colWidth">Min width of columns:</label>
169+
</p>
170+
<p>
171+
<input
172+
type="range"
173+
min="0"
174+
max="10"
175+
value="1"
176+
step="0.5"
177+
id="gapSize"
178+
/>
179+
<label for="gapSize">Gap size:</label>
180+
</p>
181+
<p>
182+
<input type="checkbox" checked id="colSpan" />
183+
<label for="colSpan">Byline spans all columns</label>
184+
</p>
185+
<p>
186+
<input type="checkbox" id="blockSpan" />
187+
<label for="blockSpan">Blockquote spans all columns</label>
188+
</p>
189+
</div>
190+
</fieldset>
191+
<script>
192+
const article = document.querySelector("article");
193+
const title = document.querySelector(".title");
194+
const options = document.querySelector("#options");
195+
const legend = document.querySelector("#options > legend");
196+
const colCount = document.getElementById("colCount");
197+
const colWidth = document.getElementById("colWidth");
198+
const gapSize = document.getElementById("gapSize");
199+
const colSpan = document.getElementById("colSpan");
200+
const blockSpan = document.getElementById("blockSpan");
201+
const blockquote = document.getElementsByTagName("blockquote")[0];
202+
203+
// make options visible if js is enabled
204+
options.style.display = "revert";
205+
206+
legend.addEventListener("click", () => {
207+
showAndHideMenu();
208+
});
209+
210+
colCount.addEventListener("change", () => {
211+
article.style.columnCount = colCount.value;
212+
});
213+
214+
colWidth.addEventListener("change", () => {
215+
article.style.columnWidth = `${colWidth.value}em`;
216+
});
217+
218+
gapSize.addEventListener("change", () => {
219+
article.style.gap = `${gapSize.value}em`;
220+
});
221+
222+
colSpan.addEventListener("change", () => {
223+
if (colSpan.checked) {
224+
title.style.columnSpan = "all";
225+
} else {
226+
title.style.columnSpan = "none";
227+
}
228+
});
229+
230+
blockSpan.addEventListener("change", () => {
231+
if (blockSpan.checked) {
232+
blockquote.style.columnSpan = "all";
233+
} else {
234+
blockquote.style.columnSpan = "none";
235+
}
236+
});
237+
238+
function showAndHideMenu() {
239+
if (legend.getAttribute("aria-expanded") === "true") {
240+
// close it
241+
legend.setAttribute("aria-expanded", "false");
242+
} else {
243+
// open it
244+
legend.setAttribute("aria-expanded", "true");
245+
}
246+
}
247+
</script>
248+
</body>
249+
</html>

0 commit comments

Comments
 (0)