-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
565 lines (478 loc) · 25 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
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="./styles/styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.underline{
border-bottom: 1px solid rgb(0, 0, 0);
padding:2px;
}
.tab {
overflow: visible;
text-align:center;
}
.tab button {
background-color: inherit;
float: auto;
border: 1px solid #ccc;
outline: none;
cursor: pointer;
padding: 10px 10px;
transition: 0s;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 15px;
font-weight: lighter;
}
.tab button:hover {
background-color: #ccc;
}
.tab button.active {
background-color: #ccc;
}
.tabcontent {
display: none;
}
/*for responsive layout*/
div.index {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
letter-spacing: .16mm;
}
/*for wider screen displays*/
@media screen and (min-width: 931px) {
div.index {
margin-left: 25%;
margin-right: 25%;
font-size: 12.5pt;
font-weight: lighter;
line-height: 2;
text-align:justify;
}
}
/*for medium screen displays*/
@media screen and (max-width: 930px) {
div.index {
margin-left: 5%;
margin-right: 5%;
font-size: 12.5pt;
font-weight: lighter;
line-height: 2;
text-align:justify;
}
}
/*for smaller screen displays like phone*/
@media screen and (max-width: 700px) {
div.index {
margin-left: 3%;
margin-right: 3%;
font-size: 11pt;
font-weight: 300;
line-height: 1.5;
text-align: left;
}
}
/*CARD DECK*/
/*styling for card set deck*/
img {
vertical-align: middle;
}
/* Position the image container (needed to position the left and right arrows) */
.container {
position: relative;
}
/* EACH SUBSEQUENT SLIDE DECK MUST BE DECLARED A NEW VARIABLE, AND SLIDE INDEX RENAMED AS WELL */
.mySlides1 {
display: none;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: arrow;
}
.slideshow-container1 {
max-width: 70%;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
background-color: #71717168;
font-weight: bold;
font-size: 18px;
transition: 0.1s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Fading animation */
.fade {
animation-name: none;
/* animation-duration: 1.5s; */
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
/* EACH NEW SLIDE DECK ALSO NEEDS UNIQUE DOT */
.dot1 {
cursor: pointer;
height: 7px;
width: 7px;
margin: 0 2px;
background-color: #bbb;
border-radius: 10%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot1:hover {
background-color: #717171;
}
</style>
</head>
<body>
<!--navigate elsewhere - table of contents-->
<div>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="./disorientation.html">disorientation</a>
<a href="./practice.html">practice</a>
<a href="./interference.html">interference</a>
<a href="./tactics.html">tactics</a>
<a href="./rendering.html">rendering</a>
<a href="./superposition.html">superposition</a>
<a href="./rhythmanalysis.html">rhythmanalysis</a>
<br><br>
<a href="https://github.com/negative-spaces/negative-spaces.github.io/blob/main/index.html" style="font-size:13px" target="_blank">CODE_SIDE </a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!-- <a href="https://github.com/negative-spaces/negative-spaces.github.io" target="_blank" style="font-size:13px">PROJECT_REPOSITORY</a> -->
<!-- <a href="https://github.com/negative-spaces/negative-spaces.github.io/commits/main/" target="_blank" style="font-size:13px">COMMIT_HISTORY</a> -->
</div>
<div id="main">
<span style="font-size:17px;cursor:alias" onclick="openNav()">☰ navigate elsewhere>></span>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
window.onscroll = function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
</div>
<br>
<video autoplay muted loop style="width: 40%; margin-left:29%" src="./media/field/thinfilm-interference.mp4"></video>
<br><br>
<!--METADATA-->
<div class="tab">
<button class="tablinks" onclick="openMetadata(event, 'title-page')">Title Page</button>
<button class="tablinks" onclick="openMetadata(event, 'committee-page')">Committee Page</button>
<button class="tablinks" onclick="openMetadata(event, 'abstract')">Abstract</button>
<button class="tablinks" onclick="openMetadata(event, 'lay-summary')">Lay Summary</button>
<button class="tablinks" onclick="openMetadata(event, 'preface')">Preface</button>
<button class="tablinks" onclick="openMetadata(event, 'table-of-contents')">Table of Contents</button>
<button class="tablinks" onclick="openMetadata(event, 'acknowledgements')">Acknowledgements</button>
<button class="tablinks" onclick="openMetadata(event, 'dedication')">Dedication</button>
</div>
<!--required metadata components -->
<!--TITLE PAGE -->
<div id="title-page" class="tabcontent">
<div class="index" style="text-align:center">
<br><br>
<span style=" font-weight:500">
MAKING SPACE FOR DEEP MAPPING: RENDERING THEORY AS PRAXIS
</span>
<br>
<br>
by
<br>
<br>
LILY DEMET CRANDALL-ORAL
<br>
B.S. Honors in Geography, University of Massachusetts Amherst, 2021
<br>
<br>
<br>
A THESIS SUBMITTED IN PARTIAL FULFILLMENT OF<br>
THE REQUIREMENTS FOR THE DEGREE OF
<br><br>
MASTER OF ARTS
<br>
<br>
in
<br>
<br>
THE FACULTY OF GRADUATE AND POSTDOCTORAL STUDIES
<br>
<br>
(Geography)
<br>
<br>
THE UNIVERSITY OF BRITISH COLUMBIA
<br>
(Vancouver)
<br>
<br>
August 2024
<br>
<br>
© Lily Demet Crandall-Oral, 2024
<br><br><br>
</div>
</div>
<!-- COMMITTEE PAGE -->
<div id="committee-page" class="tabcontent">
<div class="index">
<div style="text-align:left;">
<br>
<span class="brmedium"></span>
The following individuals certify that they have read, and recommend to the Faculty of Graduate and Postdoctoral Studies for acceptance, the thesis entitled:
<br><br>
<span class="underline">Making Space For Deep Mapping: Rendering Theory As Praxis</span>
<br><br>
submitted by <span class="underline">Lily Demet Crandall-Oral</span> in partial fulfillment of the requirements for
<span class="brmedium"></span>
the degree of <span class="underline">Master of Arts</span>
<span class="brmedium"></span>
in <span class="underline">Geography</span>
<br><br>
<span style="font-weight:400">Examining Committee:</span><br>
<span class="underline">Dr. Trevor Barnes, Professor, Department of Geography, UBC
</span><br>
Co-supervisor
<br><br>
<span class="underline">Dr. Luke Bergmann, Associate Professor, Department of Geography, UBC
</span><br>
Co-supervisor
<br><br>
</div>
<br><br>
</div>
</div>
<!-- ABSTRACT -->
<div id="abstract" class="tabcontent">
<div class="index">
<br>
What could it mean to think <i>with</i> place? To <i>feel</i> the city? I explore and respond to these questions through deep mapping, or situated, embodied inhabitation as a practice of ongoing and open-ended dialogue with the world. Deep mapping is not defined by opposition so much as articulated through iterative acts of interference with hegemonic forms of representing place, producing geographic knowledge, and rendering spatial research public. This is my theory, at least. My master's research-creation amounts to cultivating a practice of deep mapping, theorizing my interpretation of this capacious practice <i>through</i> practice, and enacting my theory as praxis. I submit as my thesis a .zip file whose uncompressed contents comprise the website <code>negative-spaces</code>. <code>negative-spaces</code> employs form as a tactic for refiguring the boundaries of intelligibility around what counts as a thesis, as fieldwork, and as intellecting others (i.e., interlocutors). In my research practice, which includes the creation of this webbed site, I am guided by slow scholarship and bricolage as necessary self-accommodations as much as an interference with dominant economies of knowledge production. What is rendered here is not a substitution for practice. Rather, <code>negative-spaces</code> sites a partial account of an ongoing interference praxis. To engage my work, please download the compressed file <code>ubc_2024_november_crandalloral_lily_negative_spaces.zip</code> from the University of British Columbia's institutional open collection of Theses and Dissertations (see <a href="https://open.library.ubc.ca/cIRcle/collections/ubctheses" target="_blank">https://open.library.ubc.ca/cIRcle/collections/ubctheses</a>). It can be located by searching my name, Lily Demet Crandall-Oral, in the collection's search bar. Once <code>ubc_2024_november_crandalloral_lily_negative_spaces.zip</code> is downloaded to a folder on your physical computer (such as Desktop or Downloads), unzip it. You can unzip it either by double clicking the file, or control-clicking it and choosing to unzip with a compression software. Once unzipped, enter the folder <code>negative-spaces</code>. Control-click (right-click) the file <code>index.html</code> and "open with" a web browser. Google Chrome is recommended. If the steps to download my thesis locally are not accessible to you due to technical issues or lack of a personal computer, the website which constitutes my thesis can also be accessed by navigating to <a href="https://negative-spaces.github.io/" target="_blank">negative-spaces.github.io/</a>. If this site ever ceases to exist, an internet archive can be found here: <a href="https://web.archive.org/web/20240820234412/https://negative-spaces.github.io/" target="_blank">https://web.archive.org/web/20240820234412/https://negative-spaces.github.io/</a>.
<br><br><br><br>
</div>
</div>
<!-- LAY SUMMARY -->
<div id="lay-summary" class="tabcontent" >
<div class="index">
<br>
What could it mean to think <i>with</i> place? To <i>feel</i> the city? How might everyday spatial practices be employed to interfere with hegemonies of knowledge production from within? This project emerged as an exploration and response to these questions through deep mapping, or situated, embodied inhabitation as a practice of ongoing and open-ended dialogue with the world. My master's research-creation amounts to cultivating a practice of deep mapping, theorizing my interpretation of this capacious practice <i>through</i> practice, and enacting my theory as praxis. My thesis is the first MA thesis in the University of British Columbia's history of Electronic Thesis and Dissertation submissions to consist entirely of a website, without a significant research component submitted as text in .pdf form.
<br><br><br>
</div>
</div>
<!-- PREFACE -->
<div id="preface" class="tabcontent">
<div class="index">
<br>
We live in a moment where locative technology is ubiquitous. Becoming lost no longer requires going out of one's way. Instead, 'disoriented discovery' (Kurgan 2013) begins with a choice to <i>not</i> reference Google Maps, to turn location off and allow position to remain indeterminate. Spatial awareness of my surroundings has evolved not by following Google Maps from A to B or memorizing its aerial contours, but rather through becoming lost and wandering around. Thus disoriented, I find areas of familiarity connected in surprising ways. I realize the city is not a site with fixed boundaries and determinate properties which preexist encounter and which I, as inhabitant-geographer-cartographer, may irresponsibly separate myself from in order to map from a distanced, exterior position. Rather, the city is performatively constituted as a physical-conceptual field whose emergent topology is iteratively drawn through everyday navigations. As such, the city of my inhabitation and I are entangled, figured and continuously reconfiguring in dynamic relation. My work is research-creation in that it initiates a dialogue with the world and is driven by intellectual and spatial topoi which grasp and lure me forwards even before I comprehend where they lead (Loveless 2019). My thesis is process rather than destination oriented. It renders the story of my journey navigating the field of possibilities opened up when A and B are recognized to be but place holders like latitude and longitude. Take the lemniscate, or infinity symbol, as a figure for practice. The iteration of this form reveals beginning and end to be merely places of turning and return.
<br><br>
</div>
</div>
<!-- TABLE OF CONTENTS -->
<div id="table-of-contents" class="tabcontent">
<div class="index">
<br>
<code>negative-spaces</code> is a webbed site itself a space for deep mapping, for nonlinear exploration following ideas that grasp and pull the visitor. For evaluating supervisors and those desiring a guided tour, I have ordered the left-hand menu (<span style="font-family: 'Courier New', Courier, monospace">navigate elsewhere>></span>) by my recommended navigation. My argument unfolds across six pages as follows: <code><a href="./disorientation.html" target="_blank">negative-spaces/disorientation.html</a></code> introduces my research questions, aims, and the importance of learning through disorientation; <code><a href="./practice.html" target="_blank">negative-spaces/practice.html</a></code> thinks through practice towards the formulation of a theory of deep mapping; <code><a href="./interference.html" target="_blank">negative-spaces/interference.html</a></code> further elaborates on my theorization by situating it within a theoretical and methodological framework of diffraction; <code><a href="./tactics.html" target="_blank">negative-spaces/tactics.html</a></code> describes my tactics of practice and how they interfere with hegemonic economies of knowledge production in ways that matter; <code><a href="./rendering.html" target="_blank">negative-spaces/rendering.html</a></code> argues that making space for deep mapping renders theory as praxis; <code><a href="./superposition.html" target="_blank">negative-spaces/superposition.html</a></code> acknowledges that many stories exist in the landscape, this being but one whose determinacy necessarily excludes all other possible configurations. <code><a href="./rhythmanalysis.html" target="_blank">negative-spaces/rhythmanalysis.html</a></code>, the seventh page, is a collection of rhythms and patternings that exceed measure. On each page of <code>negative-spaces</code>, you will notice two additional links in the left-hand menu (<span style="font-family: 'Courier New', Courier, monospace">navigate elsewhere>></span>). <code>FRONT_MATTER</code> will bring you back to this, the index, page. <code><a href="https://github.com/negative-spaces/negative-spaces.github.io/blob/main/index.html" target="_blank">CODE_SIDE</a></code> will open the code that formats the contents of the page in an external window. This view is hosted by Github, and therefore not technically part of my submitted thesis. If you have a source code editor (like Visual Studio Code) installed on your personal computer you can open any .html document within <code>negative-spaces</code> with this software and view the code in this manner.
<br><br><br>
</div>
</div>
<!-- ACKNOWLEDGEMENTS -->
<div id="acknowledgements" class="tabcontent">
<div class="index" style="line-height:1.4em;">
<br> <br>
To my co-supervisors Dr. Luke Bergmann and Dr. Trevor Barnes: Thank you for bearing with me as I got my bearings. Thank you both for your patience, understanding, and encouragement along the way. Trevor, thank you for your good faith readings, your insistence on clarification, and for framing what I perceived to be blunders as 'performance art'. Luke, thank you for advocating on my behalf, believing in me, and all the thoughtful conversations shared.
<br><br>
I want to acknowledge Dr. Andrea Tesolin at Foundry Vancouver-Granville. Navigating healthcare in a foreign country is stressful, especially when you rely on medicalization to receive accommodations and medications that support your thriving. I am truly grateful for the care I received at Foundry without which persisting in this work would not have been possible.
<br><br>
To Ceall Quinn, thank you for reading my work with enthusiasm, for suggesting literature I might find interesting, and for talking and walking through ideas in practice with me since day one. Thank you also to Catman, my most dedicated Research Assistant without whose purring affection I could not have persisted through this past year. How appropriate that you claimed my box of tactics readings and a salvaged sweater that sat on my desk as your day bed. To my intra-locutor Bella Pojuner: my thinking and being are deeply diffracted through our praxis. Thankful for the dialogue we could share.
<br><br>
Thank you to my godmother for loving me my whole life long. Thank you to my parents for forever supporting my artistry and education. Mom, I credit our year spent backpacking and roadtripping together for my interest in maps, navigation, and spatial thinking; look where all our getting lost landed me! Baba, thank you for teaching me anything is possible. I am proud to be, as you say, a third generation geo- academic: geology, geophysics, and now geography.
<br> <br>
Lastly, part of my acknowledgement practice was sending a hand written card to each teacher and mentor I've had in my academic or otherwise life. I sent my acknowledgements on cards I designed and printed myself using the Epson Workforce Pro 4740 I found on the curbside, paper and ink I bought with my Faculty of Arts Graduate Research Award, Larry Bell Grant, and Emily Acheson Support Fund, and of course, sitations made within and as part of the city.
<br><br>
<!--card deck-->
<div>
<div class="slideshow-container1">
<div class="mySlides1 fade" style="display: none;">
<div class="numbertext">1 / 9</div>
<img src="./media/sites/creations/card1.jpg" style="width:100%">
<!--<div class="capt-text">Caption Text</div>-->
</div>
<div class="mySlides1 fade">
<div class="numbertext">2 / 9</div>
<img src="./media/sites/creations/card2.jpg" style="width:100%">
</div>
<div class="mySlides1 fade">
<div class="numbertext">3 / 9</div>
<img src="./media/sites/creations/card3.jpg" style="width:100%">
</div>
<div class="mySlides1 fade">
<div class="numbertext">4 / 9</div>
<img src="./media/sites/creations/card4.jpg" style="width:100%">
</div>
<div class="mySlides1 fade">
<div class="numbertext">5 / 9</div>
<img src="./media/sites/creations/card5.jpg" style="width:100%">
</div>
<div class="mySlides1 fade">
<div class="numbertext">6 / 9</div>
<img src="./media/sites/creations/card6.jpg" style="width:100%">
</div>
<div class="mySlides1 fade">
<div class="numbertext">7 / 9</div>
<img src="./media/sites/creations/card7.jpg" style="width:100%">
</div>
<div class="mySlides1 fade">
<div class="numbertext">8 / 9</div>
<img src="./media/sites/creations/card8.jpg" style="width:100%">
</div>
<div class="mySlides1 fade">
<div class="numbertext">9 / 9</div>
<img src="./media/sites/creations/card9.jpg" style="width:100%">
</div>
<!--remember to update function name here-->
<a class="prev" onclick="plusSlides1(-1)">❮</a>
<a class="next" onclick="plusSlides1(1)">❯</a>
</div>
<br>
<!--dots must be unique class well in css head style for each deck-->
<div style="text-align:center">
<span class="dot1" onclick="currentSlide(1)"></span>
<span class="dot1" onclick="currentSlide(2)"></span>
<span class="dot1" onclick="currentSlide(3)"></span>
<span class="dot1" onclick="currentSlide(4)"></span>
<span class="dot1" onclick="currentSlide(5)"></span>
<span class="dot1" onclick="currentSlide(6)"></span>
<span class="dot1" onclick="currentSlide(7)"></span>
<span class="dot1" onclick="currentSlide(8)"></span>
<span class="dot1" onclick="currentSlide(9)"></span>
</div>
<!--script for set 1-->
<!--function names and slidindex variables must be unique-->
<script>
let slideIndex1 = 1;
showSlides1(slideIndex1);
function plusSlides1(n) {
showSlides1(slideIndex1 += n);
}
function currentSlide(n) {
showSlides1(slideIndex1 = n);
}
// function for set 1
function showSlides1(n) {
let i;
let slides = document.getElementsByClassName("mySlides1");
let dots = document.getElementsByClassName("dot1");
if (n > slides.length) {slideIndex1 = 1}
if (n < 1) {slideIndex1 = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex1-1].style.display = "block";
dots[slideIndex1-1].className += " active";
}
</script>
</div>
<br><br><br>
</div>
</div>
<!-- DEDICATION -->
<div id="dedication" class="tabcontent">
<div class="index" style="text-align:center">
<br>
This work is dedicated to the Granville Bridge.
<br><br>
<img src="./media/field/feeling-the-bridge2.jpg" style="width:70%;">
<br><br>
</div>
</div>
<script>
function openMetadata(evt, metadataName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(metadataName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
<!--footer nav elsewhere-->
<div class="footer">
<!--Navigate Elsewhere-->
<div>
<div id="mySidenav2" class="sidenav2">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav2()">×</a>
<a href="./disorientation.html"> disorientation</a>
<a href="./practice.html">practice</a>
<a href="./interference.html">interference</a>
<a href="./tactics.html">tactics</a>
<a href="./rendering.html">rendering</a>
<a href="./superposition.html">superposition</a>
<a href="./rhythmanalysis.html">rhythmanalysis</a>
<br>
<a href="https://github.com/negative-spaces/negative-spaces.github.io/blob/main/index.html" style="font-size:13px" target="_blank">CODE_SIDE </a>
</div>
<div id="main2">
<span style="font-size:17px;cursor:alias; position:left; background-color:#fffffffa" onclick="openNav2()">☰ navigate elsewhere>></span>
</div>
<script>
function openNav2() {
document.getElementById("mySidenav2").style.width = "250px";
document.getElementById("main2").style.marginLeft = "250px";
}
function closeNav2() {
document.getElementById("mySidenav2").style.width = "0";
document.getElementById("main2").style.marginLeft= "0";
}
document.onscroll = function closeNav2() {
document.getElementById("mySidenav2").style.width = "0";
document.getElementById("main2").style.marginLeft= "0";
}
</script>
</div>
</div>
</body>
</html>