Skip to content

Commit d007ab1

Browse files
francelufrancelu
committed
feat: prepare text slides
1 parent f78acbc commit d007ab1

2 files changed

Lines changed: 158 additions & 62 deletions

File tree

‎website/index.html‎

Lines changed: 136 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,25 @@ <h2>How have sociocultural, economic, and geopolitical contexts been reflected i
5151
</div>
5252

5353
<div class="section" data-anchor="gender">
54-
<h2>How has gender representation evolved across Olympic sports and disciplines over time?</h2>
55-
<div class="container" data-anchor="gender-container">
54+
<div class="slide" data-anchor="gender-text">
55+
<h2>How has gender representation evolved across Olympic sports and disciplines over time?</h2>
56+
<p>
57+
TODO: add text.
58+
</p>
59+
<p>
60+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
61+
Donec a diam lectus.
62+
Sed sit amet ipsum mauris.
63+
Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
64+
Donec et mollis dolor.
65+
Praesent et diam eget libero egestas mattis sit amet vitae augue.
66+
Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
67+
Donec ut libero sed arcu vehicula ultricies a non tortor.
68+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
69+
Aenean ut gravida lorem.
70+
</p>
71+
</div>
72+
<div class="slide" data-anchor="gender-container">
5673
<div id="gender-viz">
5774
<div id="gender-pie"></div>
5875

@@ -76,6 +93,24 @@ <h2>How has gender representation evolved across Olympic sports and disciplines
7693
</div>
7794

7895
<div class="section" data-anchor="delegations">
96+
<div class="slide" data-anchor="delegations-text">
97+
<h2>Where do the medal winners come from?</h2>
98+
<p>
99+
TODO: add text.
100+
</p>
101+
<p>
102+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
103+
Donec a diam lectus.
104+
Sed sit amet ipsum mauris.
105+
Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
106+
Donec et mollis dolor.
107+
Praesent et diam eget libero egestas mattis sit amet vitae augue.
108+
Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
109+
Donec ut libero sed arcu vehicula ultricies a non tortor.
110+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
111+
Aenean ut gravida lorem.
112+
</p>
113+
</div>
79114

80115
<div class="slide" data-anchor="medal-flow">
81116
<h2>Where do the medal winners come from?</h2>
@@ -117,70 +152,121 @@ <h2>Who participates without reaching the podium?</h2>
117152
</div>
118153

119154
<div class="section" data-anchor="body-types">
120-
<h2>Which body type excels in a particular discipline?</h2>
155+
<div class="slide" data-anchor="body-types-text">
156+
<h2>Which body type excels in a particular discipline?</h2>
157+
<p>
158+
TODO: add text.
159+
</p>
160+
<p>
161+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
162+
Donec a diam lectus.
163+
Sed sit amet ipsum mauris.
164+
Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
165+
Donec et mollis dolor.
166+
Praesent et diam eget libero egestas mattis sit amet vitae augue.
167+
Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
168+
Donec ut libero sed arcu vehicula ultricies a non tortor.
169+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
170+
Aenean ut gravida lorem.
171+
</p>
172+
</div>
173+
<div class="slide" data-anchor="body-types-viz">
174+
<div id="bodytype-viz">
175+
<div class="bodytype-controls">
176+
<div class="bodytype-control">
177+
<label for="bodytype-season">Season:</label>
178+
<select id="bodytype-season"></select>
179+
</div>
121180

122-
<div id="bodytype-viz">
123-
<div class="bodytype-controls">
124-
<div class="bodytype-control">
125-
<label for="bodytype-season">Season:</label>
126-
<select id="bodytype-season"></select>
127-
</div>
181+
<div class="bodytype-control">
182+
<label for="bodytype-year">Year:</label>
183+
<select id="bodytype-year"></select>
184+
</div>
128185

129-
<div class="bodytype-control">
130-
<label for="bodytype-year">Year:</label>
131-
<select id="bodytype-year"></select>
132-
</div>
186+
<div class="bodytype-control">
187+
<label for="bodytype-gender">Gender:</label>
188+
<select id="bodytype-gender"></select>
189+
</div>
133190

134-
<div class="bodytype-control">
135-
<label for="bodytype-gender">Gender:</label>
136-
<select id="bodytype-gender"></select>
137-
</div>
191+
<div class="bodytype-control">
192+
<label for="bodytype-sport">Sports:</label>
193+
<select id="bodytype-sport"></select>
194+
</div>
138195

139-
<div class="bodytype-control">
140-
<label for="bodytype-sport">Sports:</label>
141-
<select id="bodytype-sport"></select>
196+
<div class="bodytype-control">
197+
<label for="bodytype-discipline">Discipline:</label>
198+
<select id="bodytype-discipline"></select>
199+
</div>
142200
</div>
143201

144-
<div class="bodytype-control">
145-
<label for="bodytype-discipline">Discipline:</label>
146-
<select id="bodytype-discipline"></select>
147-
</div>
202+
<div id="bodytype-podium"></div>
148203
</div>
149-
150-
<div id="bodytype-podium"></div>
151204
</div>
152205
</div>
153206

154207
<div class="section" data-anchor="geopolitics">
155-
<h2>How do geopolitical conflicts affect the Olympic Games?</h2>
156-
157-
<p class="geo-intro">
158-
Click an event to explore its Olympic context. For boycott years, open a participation comparison.
159-
Click on a highlighted country to compare its medal performance across nearby Games.
160-
</p>
161-
162-
<div class="geo-layout">
163-
<div class="geo-map-column">
164-
<div id="geopolitics-map-viz"></div>
165-
166-
<div class="geo-action-area">
167-
<button id="geo-participation-button" class="geo-action-button">
168-
Click to see how this boycott influenced participation
169-
</button>
170-
171-
<p id="geo-country-hint" class="geo-country-hint">
172-
Click on a highlighted country to see how many medals it won around this year.
173-
</p>
208+
<div class="slide" data-anchor="geopolitics-text">
209+
<h2>How do geopolitical conflicts affect the Olympic Games?</h2>
210+
<p>TODO: add text.</p>
211+
<p>
212+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
213+
Donec a diam lectus.
214+
Sed sit amet ipsum mauris.
215+
Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
216+
Donec et mollis dolor.
217+
Praesent et diam eget libero egestas mattis sit amet vitae augue.
218+
Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
219+
Donec ut libero sed arcu vehicula ultricies a non tortor.
220+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
221+
Aenean ut gravida lorem.
222+
</p>
223+
</div>
224+
<div class="slide" data-anchor="geopolitics-viz">
225+
<p class="geo-intro">
226+
Click an event to explore its Olympic context. For boycott years, open a participation comparison.
227+
Click on a highlighted country to compare its medal performance across nearby Games.
228+
</p>
229+
230+
<div class="geo-layout">
231+
<div class="geo-map-column">
232+
<div id="geopolitics-map-viz"></div>
233+
234+
<div class="geo-action-area">
235+
<button id="geo-participation-button" class="geo-action-button">
236+
Click to see how this boycott influenced participation
237+
</button>
238+
239+
<p id="geo-country-hint" class="geo-country-hint">
240+
Click on a highlighted country to see how many medals it won around this year.
241+
</p>
242+
</div>
174243
</div>
175-
</div>
176244

177-
<div id="geo-event-list"></div>
245+
<div id="geo-event-list"></div>
246+
</div>
178247
</div>
179248
</div>
180249

181250
<div class="section" data-anchor="fair">
182-
<h2>What would a fair distribution of Olympic medals look like?</h2>
183-
<div id="fair-viz"></div>
251+
<div class="slide" data-anchor="fair-text">
252+
<h2>What would a fair distribution of Olympic medals look like?</h2>
253+
<p>TODO: add text.</p>
254+
<p>
255+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
256+
Donec a diam lectus.
257+
Sed sit amet ipsum mauris.
258+
Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
259+
Donec et mollis dolor.
260+
Praesent et diam eget libero egestas mattis sit amet vitae augue.
261+
Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
262+
Donec ut libero sed arcu vehicula ultricies a non tortor.
263+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
264+
Aenean ut gravida lorem.
265+
</p>
266+
</div>
267+
<div class="slide" data-anchor="fair-viz">
268+
<div id="fair-viz"></div>
269+
</div>
184270
</div>
185271

186272
<div class="section" data-anchor="conclusion">
@@ -206,7 +292,7 @@ <h2>Conclusion</h2>
206292
<h2>About the Team</h2>
207293

208294
<div class="team-simple">
209-
<p>Hana Salvetová</p>
295+
<h3>Hana Salvetová</p>
210296
<p>Laura Taghizad</p>
211297
<p>France Lu</p>
212298
</div>

‎website/styles.css‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,26 @@ body {
9494
display: block;
9595
}
9696

97+
/* =============================================
98+
Paragraph in two columns
99+
=========================================== */
100+
101+
/* .slide[data-anchor$="-text"] {
102+
margin: 0 auto;
103+
}
104+
105+
.section[data-anchor="introduction"] p,
106+
.section[data-anchor="conclusion"] p,
107+
.slide[data-anchor$="-text"] p {
108+
column-count: 2;
109+
column-gap: 40px;
110+
} */
111+
112+
/* Optional: better spacing between paragraphs inside columns */
113+
/* .slide[data-anchor$="-text"] p + p {
114+
margin-top: 1em;
115+
} */
116+
97117
/* =============================================
98118
Typography
99119
=========================================== */
@@ -143,7 +163,7 @@ p {
143163
.section[data-anchor="title"] {
144164
box-sizing: border-box;
145165
background-attachment: fixed;
146-
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), var(--bg-img);
166+
background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), var(--bg-img);
147167
background-position: center;
148168
background-repeat: no-repeat;
149169
background-size: cover;
@@ -157,16 +177,6 @@ p {
157177
display: flex;
158178
flex-direction: column;
159179
}
160-
/*
161-
[data-anchor="introduction"] h2 {
162-
margin: 0 auto;
163-
width: 80%;
164-
}
165-
166-
[data-anchor="introduction"] p {
167-
margin: 0 auto;
168-
width: 60%;
169-
} */
170180

171181
/* =============================================
172182
Gender section
@@ -387,7 +397,7 @@ p {
387397
background: #000 !important;
388398
}
389399

390-
[data-anchor="geopolitics"] h2,
400+
[data-anchor="geopolitics"] h2,
391401
[data-anchor="geopolitics"] p {
392402
color: #fff;
393403
}

0 commit comments

Comments
 (0)