-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
439 lines (340 loc) · 15.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<title> Library of Infinities</title>
</head>
<header>
<h1><a href="index.html"> LIBRARY OF INFINITIES</a></h1>
<!-- <div id="menu">
<a href="#menu" class="active">MENU</a>
</div> -->
</header>
<nav id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNavright()">X</a>
<div class="overlay-content">
<a href="about.html">ABOUT</a>
<a href="team.html">TEAM</a>
<a href="index.html">LIBRARY</a>
<a href="writing3.html">WRITING</a>
<a href="programming.html">PROGRAMMING</a>
<a href="resources.html">RESOURCES</a>
<a href="mailto:[email protected]">CONTACT</a>
</div>
</nav>
<span id="trigger" onclick="openNavright()">MENU</span>
<script>
function openNavright() {
document.getElementById("myNav").style.right = "0%";
windowOpen =true;
}
function closeNavright() {
document.getElementById("myNav").style.right = "-50.5%";
windowOpen =false;
}
</script>
<body>
<script>
// var headerOffset = function() {
// var headerHeight = $('header').height();
// $('.content').css('margin-top', headerHeight);
// }
// $(document).ready(function() {
// headerOffset();
// });
</script>
<script>
var footerOffset = function() {
var footerHeight = $('footer').height();
$('.content').css('margin-bottom', footerHeight);
}
$(document).ready(function() {
footerOffset();
});
</script>
<main class="content">
<div class="row no-gutters">
<div class="col-md-6 no-gutters">
<div class="leftside">
<ul id="myUL">
<li class="buttons"><button id="button1" data-link="option1">
<a href="#">Dear Philomena <sup>Mugabi Byenkya</sup></a></button></li>
<li class="buttons"><button id="button1" data-link="option2">
<a href="#">Kintu <sup>Jennifer Nansubuga Makumbi</sup></a></button></li>
<!-- <li><a href="#">Parable of the Sower • Octavia Butler <p hidden>futurity</p>
</a></li> -->
<li class="buttons"><button id="button1" data-link="option3">
<a href="#">Tropical Fish <sup>Doreen Baingana</sup></a></button></li>
<li class="buttons"><button id="button1" data-link="option4">
<a href="#">March Volumes 1-3 <sup>John Lewis + Andrew Aydin</sup></a></button></li>
<li class="buttons"><button id="button1" data-link="option5">
<a href="#">A Small Place <sup>Jamaica Kincaid</sup></a></button></li>
<li class="buttons"><button id="button1" data-link="option6">
<a href="#">I Have To Live <sup> Aisha Sasha John</sup></a></button></li>
<li class="buttons"><button id="button1" data-link="option7">
<a href="#">Homegoing <sup> Yaa Gyasi</sup></a></button></li>
<li class="buttons"><button id="button1" data-link="option8">
<a href="#">Any Known Blood <sup> Lawrence Hilli</sup></a></button></li>
<li class="buttons"><button id="button1" data-link="option9">
<a href="#">The Hate You Give <sup> Angie Thomas</sup></a></button></li>
<li class="buttons"><button id="button1" data-link="option10">
<a href="#">The Autobiography of Malcolm X <sup>Malcolm X + Alex Haley</sup></a></button></li>
<li class="buttons"><button id="button1" data-link="option11">
<a href="#">Live From the Afrikan Resistance <sup> El Jones</sup></a></button></li>
<li class="buttons"><button id="button1" data-link="option12">
<a href="#">The Colour Purple <sup> Alice Walker</sup></a></button></li>
</ul>
<div class="spacer"></div>
</div>
</div>
<div class="col-md-6 no-gutters">
<div id="rightside">
</div>
</div>
</div>
<div id="hiddenDivs" style="display:none;">
<div class="rightside" id="option1">
<!-- <img src="images/DearPhilomena2.png" alt="Dear Philomena Book Cover">
--> <h1>Dear Philomena <sup>Mugabi Byenkya</sup></h1>
<!-- <h2>#VULNERABILITY</H2><h2>#STRENGTH</H2><h2>#MENTAL HEALTH</H2><h2>#DISABILITY</H2> <h2>#SEXUALITY</H2><h2>#RELIGION</H2><h2>#GENDER</H2><h2>#BLACKNESS</H2> -->
<p>Dear Philomena, is the story of two strokes, one boy, one girl and a whole lot of magical realism. July 1991, Leocardia Byenkya underwent an ultrasound that informed her to expect a baby girl. She chose the name Philomena. January 16 1992, her baby was born as a boy. Filled with shock and surprise, Leocardia named her baby boy Mugabi. December 2014, Mugabi suffered from two strokes within a week of each other. Mugabi was 22 years old. 'Dear Philomena,' is a series of thoughts and conversations between Mugabi and Philomena (the girl he was supposed to be) about the year he was supposed to die but somehow lived through.</p>
<hr>
<h3>Impact of Work</h3>
<p>This is my debut novel and was a work of vulnerability, strength and purpose that addresses mental health, disabilities, sexuality, religion, gender and their intersections with blackness.</p>
<hr>
<h3>Contributor</h3>
<p>Mugabi Byenkya</p>
<hr>
<div class="spacer"></div>
</div>
<div class="rightside" id="option2">
<h1>Kintu <sup>Jennifer Nansubuga Makumbi</sup></h1>
<h3>Impact of Work</h3>
<p>A Ugandan epic worthy of being a successor/Ugandan equivalent to Achebe’s Things Fall Apart.</p>
<hr>
<h3>Contributor</h3>
<p>Mugabi Byenkya</p>
<hr>
<div class="spacer"></div>
</div>
<div class="rightside" id="option3">
<h1>Tropical Fish <sup>Doreen Baingana</sup></h1>
<h3>Impact of Work</h3>
<p>A powerful narrative on sexual assault told through three sisters which parallels the experience of far too many black femmes.</p>
<hr>
<h3>Contributor</h3>
<p>Mugabi Byenkya</p>
<hr>
<div class="spacer"></div>
</div>
<div class="rightside" id="option4">
<h1>March Volumes 1-3 <sup>John Lewis and Andrew Aydin</sup></h1>
<h3>Impact of Work</h3>
<p>Powerful graphic novel that gives a behind the scenes look at the civil rights movement.</p>
<hr>
<h3>Contributor</h3>
<p>Mugabi Byenkya</p>
<hr>
<div class="spacer"></div>
</div>
<div class="rightside" id="option5">
<h1>A Small Place <sup>Jamaica Kincaid</sup></h1>
<h3>Impact of Work</h3>
<p>This book is so beautifully written + it does a wonderful job of illustrating the ways in which colonial contact is relieved/experienced in the everyday life/routine of a Caribbean tourism-based economy // it made me think of the ways in which my mother and father grew up in (ex) colonies and how my daily encounters with whiteness reiterate the violence of colonialism.</p>
<hr>
<h3>Contributor</h3>
<p>nènè myriam konaté</p>
<hr>
<div class="spacer"></div>
</div>
<div class="rightside" id="option6">
<h1>I Have To Live <sup>Aisha Sasha John</sup></h1>
<h3>Impact of Work</h3>
<p>I just read this book last week in a moment when I was feeling overwhelmed/exhausted and I feel like it called me back into my body + put things into perspective // it was like before reading it I had briefly lost sight of how important my body is, of what I actually need to sustain me // it made me realize that all the things I was feeling overwhelmed by were transient + that even after these things passed I would have to live and it made me ask myself ~how~ I want to live.</p>
<hr>
<h3>Contributor</h3>
<p>nènè myriam konaté</p>
<hr>
<div class="spacer"></div>
</div>
<div class="rightside" id="option7">
<h1>Homegoing <sup>Yaa Gyasi</sup></h1>
<h3>Impact of Work</h3>
<p>This book made me think of the power of ancestry + the importance of intergenerational exchange(s) // I cried so much as I read this book because it felt like the author had reached inside me and hugged a part of me that I didn't even know existed // I didn't know how much I needed to read Homegoing until I read it, it made me think of my parents and what cosmic energy might have brought them together + of how memories of the transatlantic slave trade haunt our collective subconscious // but most importantly it made me think of the various modes of resistance adopted by my ancestors that made my very existence possible.</p>
<hr>
<h3>Contributor</h3>
<p>nènè myriam konaté</p>
<hr>
<div class="spacer"></div>
</div>
<div class="rightside" id="option8">
<h1>Any Known Blood <sup>Lawrence Hilli</sup></h1>
<h3>Impact of Work</h3>
<p>It really helped reassure my black identity as a mixed race youth who was struggling with racial identity. </p>
<hr>
<h3>Contributor</h3>
<p>Andre Fenton</p>
<hr>
<div class="spacer"></div>
</div>
<div class="rightside" id="option9">
<h1>The Hate You Give <sup>Angie Thomas</sup></h1>
<h3>Impact of Work</h3>
<p>The Hate U Give by Angie Thomas is a very good book right now. It's an honest book. The dialogue, pop culture references, and the honesty really makes me feel like I'm represented within the book. It has some heavy content, but it's an important read. </p>
<hr>
<h3>Contributor</h3>
<p>Andre Fenton</p>
<hr>
<div class="spacer"></div>
</div>
<div class="rightside" id="option10">
<h1>The Autobiography of Malcolm X <sup>Malcolm X and Alex Haley</sup></h1>
<h3>Impact of Work</h3>
<p>The Autobiography of Malcolm X really opened my eyes to oppression, and the normalization of white supremacy in society.</p>
<hr>
<h3>Contributor</h3>
<p>Andre Fenton</p>
<hr>
<div class="spacer"></div>
</div>
<div class="rightside" id="option11">
<h1>Live From the Afrikan Resistance <sup>El Jones</sup> </h1>
<h3>Impact of Work</h3>
<p>El Jones' Live From The Afrikan Resistance needs to be in every black youth's life. El Jones's book influenced me with so much strength and resilience, and made me confident as a young black person.</p>
<hr>
<h3>Contributor</h3>
<p>Andre Fenton</p>
<hr>
<div class="spacer"></div>
</div>
<div class="rightside" id="option12">
<h1>The Colour Purple <sup>Alice Walker</sup> </h1>
<h3>Impact of Work</h3>
<p>This is a test paragraph</p>
<hr>
<h3>Contributor</h3>
<p>Shaya Ishaq</p>
<hr>
<div class="spacer"></div>
</div>
</div>
</main>
<div class="footer">
<!-- <div id="add">
<a href="#add" class="active">ADD</a>
</div> -->
<nav id="add" class="overlay2">
<a href="javascript:void(0)" class="closebtn2" onclick="closeAdd()">X</a>
<div class="overlay-content2">
<form action="contact.php" method="post">
<div class="elem-group">
<label for="title">Title</label>
<input type="text" id="title" name="title" required>
</div>
<div class="elem-group">
<label for="author">Author/Artist</label>
<input type="text" id="author" name="author_name" required>
</div>
<div class="elem-group">
<label for="description">Description of Work</label>
<textarea id="description" name="description" required></textarea>
</div>
<div class="elem-group">
<label for="description_affect">How The Work Has Affected You</label>
<textarea id="description_affect" name="affect" required></textarea>
</div>
<div class="elem-group">
<label for="link">Link to Work</label>
<input type="text" id="link" name="link_to_work" required>
</div>
<div class="elem-group">
<label for="name">Your Name</label>
<input type="text" id="name" name="contributor_name" required>
</div>
<div class="elem-group">
<label for="email">Your E-mail</label>
<input type="email" id="email" name="visitor_email" required>
</div>
<div class="elem-group">
<label for="category-selection">Display Your Name Publicly</label>
<select id="category-selection" name="concerned_category" required>
<option value="">Select</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<button id="submit-button" type="submit">SUBMIT</button>
</form>
</div>
</nav>
<span id="trigger2" onclick="openAdd()">SUBMIT</span>
<script>
function openAdd() {
document.getElementById("add").style.right = "0";
windowOpen =true;
}
function closeAdd() {
document.getElementById("add").style.right = "-50.5%";
windowOpen =false;
}
</script>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="SEARCH" title="Type in a name">
<!-- <div id="search">
<a href="#search" class="active">SEARCH</a>
</div> -->
</div>
<script>
function myFunction() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
<script>
$(document).ready(function (){
$('.buttons button').click(function (){
$('#rightside').empty();
$('#rightside').html($("#" + $(this).data('link')).html());
});
});
</script>
<script>
$(function(){
var scroll_text;
$('myUL').hover(
function () {
var $elmt = $(this);
scroll_text = setInterval(function(){scrollText($elmt);}, 5);
},
function () {
clearInterval(scroll_text);
$(this).find('myUL li a').css({
left: 0
});
}
);
var scrollText = function($elmt){
var left = $elmt.find('myUL li a').position().left - 1;
left = -left > $elmt.find('myUL li a').width() ? $elmt.find('myUL').width() : left;
$elmt.find('myUL li a').css({
left: left
});
};
});
</script>
</body>
</html>