-
Notifications
You must be signed in to change notification settings - Fork 0
/
issue.html
918 lines (897 loc) · 72.4 KB
/
issue.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
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="apple-touch-icon" sizes="180x180" href="/LiterOCULAR/img/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/LiterOCULAR/img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/LiterOCULAR/img/favicons/favicon-16x16.png">
<!-- Styling -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<link rel="stylesheet" id="core-style-tag" href="/LiterOCULAR/static/css/core.css" type="text/css" />
<link rel="stylesheet" id="theme-style-tag" href="/LiterOCULAR/static/css/base.css" type="text/css" />
<!-- JQuery script-->
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title>Issue</title>
</head>
<body>
<div class="anim-layer"></div>
<div class="anim-layer anim-layer--2"></div>
<div class="anim-layer anim-layer--3"></div>
<div class="anim-layer anim-layer--4"></div>
<!-- OffCanvas -->
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel"
style="height: fit-content">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasBottomLabel">Metadata Binoculars</h5>
<button type="button" class="btn clear-highlights" onclick="resetHighlight()">Clear
highlights</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="offcanvas">Close</button>
</div>
<div class="offcanvas-body medium pt-0" style="height: fit-content">
<div class="row" id="issue-meta"></div>
<!-- Metadata viewer and theme switcher -->
<hr />
<div class="row justify-content-center m-0">
<div class="col-4 overflow-auto no-scrollbar">
<h6 class="binocular-header">Article 1</h6>
<div class="accordion accordion-flush" id="metadata1"></div>
</div>
<div class="col-4 overflow-auto no-scrollbar">
<h6 class="binocular-header">Article 2</h6>
<div class="accordion accordion-flush" id="metadata2"></div>
</div>
<div class="col-4 overflow-auto no-scrollbar">
<h6 class="binocular-header">Article 3</h6>
<div class="accordion accordion-flush" id="metadata3"></div>
</div>
</div>
</div>
</div>
<!-- Navbar with sticky behaviour -->
<nav class="navbar navbar-expand-md">
<div class="container-fluid">
<button class="navbar-toggler navbar-dark" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<a class="navbar-brand" href="/LiterOCULAR/"><span class="protect">Liter</span>OCULAR</a>
<a class="nav-link dropdown-toggle" href="#issues-dropdown" id="issues-dropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Issues
</a>
<ul class="dropdown-menu issues" aria-labelledby="issues-dropdown" id="issues-dropdown">
<li><a class="dropdown-item" id="kmd-issue" href="/LiterOCULAR/issue.html?issue=KMD">Death and Rebirth</a>
</li>
<li>
<a class="dropdown-item" id="timnit-issue" href="/LiterOCULAR/issue.html?issue=Timnit">Who Watches the
Admen?</a>
</li>
</ul>
<a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#docuModal">Documentation</a>
<a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#disclaimerModal">Disclaimer</a>
<a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#aboutModal">About</a>
<a class="nav-link" href="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom"
aria-controls="offcanvasBottom">Metadata</a>
<div class="theme-tab">
<a class="nav-link dropdown-toggle" href="#themes-dropdown" id="themes-dropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<img src="/LiterOCULAR/img/layers.svg" alt="theme switcher" class="themes-image">
Lenses
</a>
<ul class="dropdown-menu themes" id="themes-dropdown">
<li>
<a class="dropdown-item" id="theme-toggle-newspaper" onclick="switchTheme(this);">Newspaper</a>
</li>
<li>
<a class="dropdown-item" id="theme-toggle-deco" onclick="switchTheme(this);">Art Deco</a>
</li>
<li>
<a class="dropdown-item" id="theme-toggle-music" onclick="switchTheme(this);">The Source</a>
</li>
<li>
<a class="dropdown-item" id="theme-toggle-ml" onclick="switchTheme(this);">Transformer</a>
</li>
<li>
<a class="dropdown-item" id="theme-toggle-base" onclick="switchTheme(this);">Default</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- The container spans the whole viewport (vh-100) in height and all padding is removed from the sides (px-0) -->
<div class="container-fluid vh-100 vw-100 px-0">
<!-- Screen size modal -->
<div class="modal fade" id="minScreenModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
aria-labelledby="minScreenModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="minScreenModalLabel">Bigger screen required!</h5>
<!-- Removed closing button to make it un-closable -->
</div>
<div class="modal-body">
<p class="lead">Hi! Thanks for visiting our website, two quick things:<br /><br />
1. LiterOCULAR is intended as a reading framework with
rich functionality and interesting design. Unfortunately, this means screens smaller than a medium-sized
tablet won't work
very well, so we prevent access from
these devices. Please come back on a tablet, laptop, or desktop.<br /><br />
2. Chrome is the best browser which to view the site, though it will also work in Firefox and
Safari with some slight stylistic inconsistencies. No idea about Edge because, honestly, who cares?
</p>
</div>
</div>
</div>
</div>
<!-- Documentation modal-->
<div class="modal fade" id="docuModal" tabindex="-1" aria-labelledby="docuModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="docuModalLabel">This documentation rules the nation, with version</h5>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
<div class="modal-body">
<p id="alert-docs-theme" style="text-align: center;">⚠️ Please note this documentation is best viewed with
the base theme. Click
<a href="#" id="theme-toggle-base" onclick="switchTheme(this);">here</a> to switch. ⚠️
</p>
<div class="accordion accordion-flush" id="accordionDocu">
<!-- Issue and article -->
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Issue and Article Selection <span role="img" arial-label="nerd face">🤓</span>
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
data-bs-parent="#accordionDocu">
<div class="accordion-body">
<p>Source articles for the Death And Rebirth issue were taken from a personal archive of MF Doom
features and interviews downloaded following his death in late 2020. Text was extracted using the
<a href="https://pypi.org/project/pytesseract/" target="_blank">pytesseract</a> Python library,
and then manually cleaned up. Images were extracted via Photoshop.
</p>
<p>Source articles for Who Watches the Admen? were manually scraped and cleaned up from the source
code at <em>MIT
Review</em>, <em>The Washington Post</em>, and <em>The New York Times</em>.</p>
<p>The topics of both issues were chosen for their historical and specific differences, as well as
for their close relation to our personal interests and field of study in the Digital Humanities.
Death And Rebirth documents the artistic evolution of Daniel Dumile from his time as Zev Love X
within the group KMD to his rebirth as MF Doom following the death of his brother Dingilizwe
Dumile. Who Watches the Admen? details the controversy around the sudden departure of Timnit Gebru
from Google's Ethical AI team following the publication of a research paper she co-authored. Each
article within these issues was chosen to give a range of perspectives on its subject with some
cross over between both issues in the case of more specific topics such as identity and
representation.</p>
</div>
</div>
</div>
<!-- Text formatting -->
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Text Formatting <span role="img" arial-label="laptop">💻</span>
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo"
data-bs-parent="#accordionDocu">
<div class="accordion-body">
<p>Following the specifications for this project, the articles were formatted for metadata
extraction and reference at the article-level
(source, byline, publication date) and at the fragment-level with topic-specific metadata. We
chose to give the raw html for each article a
common layout: titles in <code>h1</code> tag, subheaders and bylines with their own specific
class, and the rest of the text in <code>p</code> tags. We added <code>figure</code> and
<code>blockquote</code> tags as necessary to handle images and pull out quotes. We also kept
external embeds when possible (a video in <em>The Washington Post</em> article was removed as it
went offline during development) and either left them in the text itself or put them in modals
when they couldn't easily be restyled due to using iframes. We also spent time reflecting on the
content to decide what
should be formatted with specific <code>span</code> tags for article- and fragment-level metadata
usage.
</p>
<figure style="float: right; width: 30%; padding: 0.625vw 0.625vw 0 0.625vw; margin-bottom: 0;">
<img src="/LiterOCULAR/img/typing.gif" class="img-fluid" alt="animated image of Jim Carey typing"
title="When the formatting hits">
<figcaption>Artist representation of formatting process</figcaption>
</figure>
<p>These <code>span</code> tags include ID attributes, which we ended up not using but have kept for
potential future development, a class instance of <code>mention-*</code>, where * would stand for
the topic the fragment refers to, and an <code>about=”*”</code> attribute, where * would refer to
a specific entity within the topic. This system, which was implemented partly by hand and partly
through regular expression matching, was designed to then plug into the dynamic functionality
requirements of the project: the classes would allow for population of article-level topics (e.g.
technology) while the attribute would allow for population of specific instances of the topic
(e.g. Artifical Intelligence).</p>
<p>After a first round of formatting we had a set of article-level topics for each issue (e.g.
person,
subject, organization etc...) which allowed us to evaluate the main themes, decide how to handle
abstract topics, and decide on whether or not to merge / remove certain entities for clarity and
focus. In the end we felt that there would be benefits in being able to view closely connected
topics (such as the different aliases of Daniel Dumile) alongside each other and so decided
against merging entities.</p>
</div>
</div>
</div>
<!-- Functionality and design -->
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
Base Functionality, Design, and Requirements <span role="img" arial-label="paper clip">📋</span> <span role="img" arial-label="thinking face">🤔</span>
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree"
data-bs-parent="#accordionDocu">
<div class="accordion-body">
<p>Not gonna lie, we spent a fair amount of time feeling like this while contemplating the
functionality requirements for
this project:<br />
<div style="display: flex; justify-content: center; padding: 0.625vw;"><img
src="/LiterOCULAR/img/maths.gif" class="img-fluid"
alt="animated image of the thinking equations meme" title="When the specs make you think"></div>
As a first step we built a virgin Bootstrap 5 skeleton with two pages: the home page, which would
act as both cover and table of contents for the digital magazine, and an issue page, within which
all articles
would be viewable inside columns. We also included a static navbar to enable navigation back and
forth as well as access to the metadata viewer and CSS themes. Towards the end of development we
also decided to adjust the navbar so that it would be partial on the cover (with access to the
about, documentation, and disclaimer pages and showing the metadata viewer as yet unavailable)
because access to issues and lenses are available on page in the ToC.</p>
<p>Early on we decided to use the following line from the
spec as an overall guiding principle when approaching the underlying design of the
magazine: "The canvas should be exactly as big as the viewport. Individual articles and
metadata viewer will scroll autonomously within the overall canvas."</p>
<p>As a result we locked the canvas of the issue page to viewport dimensions, <code>100vh/vw</code> and <code>position:fixed</code>, and the issue page was given a <code>position:relative</code> with <code>100vh</code> to account for browser window reszing and additional bars that might reduce visible canvas. We then spent some time
deciding the best approach for the metadata viewer, finally settling on using Bootstrap's
offcanvas functionality and placing the viewer on the bottom half of the screen with a height of
85 to enable us to have as much space within it as possible. This choice did end up affecting
another part of the spec, namely our ability to enable clicking on a fragment within the metadata
viewer to auto scroll to its position within the article. As the articles are partially covered by
the offcanvas while browsing the metadata viewer this would have required a fair amount of hoop
jumping via scripts that we felt was too complicated and with too many variables for a smooth user
experience. Furthermore, due to most topic fragments
having multiple instances, auto scroll to first instance with the viewer retracted felt somewhat
pointless as the user would then have no way to continue flipping through each topic instance.
<p>
<p>We justify this choice, as
well as others detailed in this documentation by referring to another part of the spec which we
also used as a guiding principle: "design deliberately."</p>
<p>The home page was laid out with a fluid container to tap into the viewport logic governing the
project (see below for more detail on this). This container was then split into two columns: the
left one acting as the cover / editor's letter and the right one acting as a ToC. They were
proportioned to emphasise the cover and their columns were set to medium breakpoint to ensure
consistency across all supported device sizes (see below for more on that). The ToC uses gutters
and margins of <code>0.5rem</code>. The issue page is essentially a navbar and three columns split
equally across the Bootstrap grid, with <code>0.5rem</code> of padding on the containing row to
ensure that functionality, design, and legibility aren't compromised.</p>
<p>The decision to adhere to the canvas lock also led us to decide that no part of the magazine
should be scrollable aside from the articles themselves (using the CSS <code>overflow</code>
property with scrollbar hidden by default) and the modals. In essence, we made the
design decision that this magazine would be constrained in a similar way as print magazines were
by their choice of paper size. Therefore we made all additional page requirements (disclaimer,
about, documentation) modals and designed the cover/content page to fit within the viewport at all
available sizes (see below).</p>
<figure style="float: left; width: 30%; padding: 0.625vw 0.625vw 0 0.625vw; margin-bottom: 0;">
<img src="/LiterOCULAR/img/res1.png" class="img-fluid"
alt="screenshot of base relative unit scaling" title="4K res without vw">
<figcaption style="float: left;">4K/2560x1357 res without vw</figcaption>
</figure>
<p>One last but important note regards typometry and the baseline measurement of
every element in this magazine. We started designing LiterOCULAR using <code>rem</code> as the
base relative unit, for two reasons: it is the unit used by Bootstrap's core css, and <a
href="https://www.sitepoint.com/understanding-and-using-rem-units-in-css/" target="_blank">it
simplifies nesting declarations</a>. However, once we'd gotten deeper into the various
historical designs we made the decision to switch our base relative unit to <code>vw</code>. This
was due to the fact that when viewing the magazine on higher resolution screens, Bootstrap's
framework can lead to an overall shrinking/stretching of the design within the canvas (see
screenshots).</p>
<figure style="float: right; width: 30%; padding: 0.625vw 0.625vw 0 0.625vw; margin-bottom: 0;">
<img src="/LiterOCULAR/img/res2.png" class="img-fluid"
alt="screenshot of base relative unit scaling" title="4K res without vw">
<figcaption>4K/2560x1357 res with vw</figcaption>
</figure>
<p>While experimenting with some design ideas we realised that by changing all the necessary base
relative units in our css as well as overiding key elements in the core css we could have a design
that scaled relative to screen resolution. As there is no such thing as a clean answer in web dev
— <span role="img" arial-label="squinting face">😆</span> — we then realised that this approach meant that once you went below a tablet in device size
you encountered the opposite problem: the device's smaller width lead to everything being
relatively too small to be readable or usable.
One option to get around this would have been to script a calculation function to change the base
relative unit in the css based on device so that anything below 768 would revert to px or rem and
anything above the most common resolutions for desktop and laptop used vw. As the decision to
switch to vw was made relatively late in the development process (keeping it <span role="img" arial-label="100">💯</span> it was Laurent who
made that decision in a CSS-induced fever and
essentially put Federico in front of it as an accomplished fact <span role="img" arial-label="keep quiet face">🤫</span>), by which point we already had
a
lot of scripts already implemented, we decided to instead block access to the site for any devices
below 768. Furthermore anything smaller than a tablet makes the experience of content-focused
interactive sites such as this difficult without a full rethinking of the layout. Again, we
justify these decisions by
invoking the "design deliberately" principle.</p>
</div>
</div>
</div>
<!-- Metadata viewer -->
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour">
Metadata Viewer <span role="img" arial-label="lens">🔎</span>
</button>
</h2>
<div id="flush-collapseFour" class="accordion-collapse collapse" aria-labelledby="flush-headingFour"
data-bs-parent="#accordionDocu">
<div class="accordion-body">
<p>With the metadata viewer being a central part of the spec we also spent some time deliberating
the best way to approach its requirements. In the end we settled on a design for the viewer
that imitates that of the issue page: three columns. The offcanvas is separated into three
rows: header with title and controls; issue-level metadata and usage instructions;
and article-level metadata. The latter is in turn split into three columns containing a series of
accordions populated by the article's topics (titled using the <code>mention-*</code> class). Each
accordion gives the user access to all topic instances (titled using the <code>about=”*”</code>
attribute), and selecting a topic instance will highlight it across the article. Lastly, each
topic instance auto-generates a Wikipedia search via a split button. Both the accordions and
topics within are presented in descending order of density within the article. A reset button
enables the user to remove their chosen highlights and start again.</p>
<p>Considering our design choices for the skeleton of the magazine we felt this approach allowed us
to fulfill as many of the project's requirements as possible while also taking an approach aligned
with the primary purpose of a magazine: reading.</p>
</div>
</div>
</div>
<!-- Historical theming -->
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingFive">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseFive" aria-expanded="false" aria-controls="flush-collapseFive">
Historical Theming (AKA CSS <span role="img" arial-label="clock">⏱️</span> <span role="img" arial-label="plane">✈️</span>)
</button>
</h2>
<div id="flush-collapseFive" class="accordion-collapse collapse" aria-labelledby="flush-headingFive"
data-bs-parent="#accordionDocu">
<div class="accordion-body">
<figure style="float: right; width: 20%; padding: 0 0.625vw 0 0.625vw; margin-bottom: 0;">
<img src="/LiterOCULAR/img/dawson-crying.gif" class="img-fluid"
style="display: flex; margin: auto;" alt="animated image of Dawson from Dawson Creek crying"
title="When the specs make you cry">
<img src="/LiterOCULAR/img/9000.gif" class="img-fluid"
style="display: flex; margin: auto; padding: 0.625vw 0 0 0;"
alt="animated image of Vegeta crushing his energy reader"
title="When the specs make you stronger">
</figure>
<p>If the functionality requirements of the spec left us feeling like the thinking equations meme,
then
the design requirements of creating four different historical CSS themes left us feeling like
Dawson.
Still the only choice was to embrace the pain and let it make us stronger, like Vegeta.</p>
<p>Based on the requirements we decided on the following four themes:<br />
<ul>
<li>19th century: Newspapers</li>
<li>1900-1950: Art Deco</li>
<li>Late 20th century print: 1990s hip-hop magazines</li>
<li>2030s: Promptism</li>
</ul>
Each theme was given an appropriate title. While Newspaper and Art Deco were self-evident, the name
for the 1990s hip-hop magazines theme was taken from the publication used as direct reference for
the
theme, <em>The Source</em>, and the name for the Promptism theme was taken from one of the <a
href="https://huggingface.co/docs/transformers/index" target="_blank">key libraries</a> used in
Machine Learning today, huggingface's transformers.</p>
<p>Having created a core css to handle the rules that would be needed regardless of stylistic theme
(such as canvas lock, offcanvas positioning, switching animation etc...) we then created each
individual theme
separately and built a functionality that would load a base theme by default and substitute it for
the relevant historical one when selected via the ToC or navbar menus. We also made the choice
to use a simple CSS animation, featuring the three primary colors of the base theme, to hide this
switch and make the user experience more pleasant.</p>
<p>As with all other main steps of the development of this project, CSS theming was an iterative
process. We began with a base theme, then created initial versions of both the Promptism and
Newspaper themes. However, it was during the creation of the Source theme that we refined and
improved our approach and made several decisions that were then rolled out to all other themes
ensuring a consistency that reflects the relevant historical periods without creating drastic
changes on the content. This decision was a by-product of a last key guiding principle we had
settled on: the content should the focus of this
magazine with the design requirements a complement to it.</p>
<p>The decisions that were made at this point and further refined in each theme include: switching
to <code>vw</code> as the base relative unit, splitting
the navbar contents between both pages, using the navbar brand as a home button with its own
specific font, applying
consistent and historically inspired styles to computer interactions (such as hover and focus),
replicating historically accurate layout touches, and consistent usage of a selection of fonts and
colors for each theme.</p>
<p>With regards to fonts, dropcaps, indents, and padding sizes around text and images these were
drawn from our historical references and replicated using visual estimation in the spirit of the
spec's requirement to update historical elements. Dropcaps were eyeballed using sentence heights
and indents using letter length. While dropcap heights did vary historically, we found that the
indent length was roughly the same across all three themes that use it and so kept it the same.
All fonts are taken from GoogleFonts aside from three in the Newspaper theme. This is due to some
issues we were having with loading local fonts outside the Newspaper theme, and so decided to pick
up the challenge of finding everything we needed solely in their collection.</p>
<p>The entire CSS process is best summed by another two memes (like all good things in life):
procrastination and bug squashing.</p>
<div style="display: flex; justify-content: center;">
<img src="/LiterOCULAR/img/bugs.jpg" class="img-fluid" style="width: 35%"
alt="squashing bugs meme" title="When you decide to look at the code">
<img src="/LiterOCULAR/img/bear.jpg" class="img-fluid" style="width: 35%"
alt="Kyle McLachlan running from a bear meme" title="When you refuse to face your fears">
</div>
</div>
</div>
</div>
<!-- Theme: base -->
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingSix">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseSix" aria-expanded="false" aria-controls="flush-collapseSix">
Base theme: Emojis and Minimalism <span role="img" arial-label="party popper">🎉</span>
</button>
</h2>
<div id="flush-collapseSix" class="accordion-collapse collapse" aria-labelledby="flush-headingSix"
data-bs-parent="#accordionDocu">
<div class="accordion-body">
<p><span role="img" arial-label="color palette">🎨</span> (base) <span style="background-color: #111; color:#fff;">#111</span> + <span
style="background-color: #f4f4f4; color:#111;">#f4f4f4</span> <br />
<span role="img" arial-label="color palette">🎨</span> (spot) <span style="background-color: #D2042D; color:#fff;">#D2042D</span> <br />
<span role="img" arial-label="writing hand">✍🏻</span> <code>Roboto Slab</code> (headers/branding) | <code>Lato</code> (body) | <code>Ubunto Mono</code> (menus, quotes)</p>
<hr>
<p><span style="text-decoration: underline;">Inspiration:</span> The base theme was first thought of
as a take on the greyscale aesthetic of current website design. In particular <a
href="https://widman.ski/" target="_blank">this site</a> was used as an early point of reference
following some research. The idea was that by keeping the base theme simple it would contrast
nicely with the historical themes. Eventually this approach was rethought as the Promptism theme
adopted a black background with white text and the Newspaper theme had potential for greyscale. In
the end we kept the white/black balance (#111 and
#f4f4f4) and desire for mininalism but ditched the original use of greys as spot colors and
instead used a cherry red highlight (#D2042D) that offered a perfect contrast. Inspired in part by
the way in which modern sites make use of emojis to enliven navigation and reading, we decided to
add them to article headers, byline, and cover/ToC as a visual cue signifying the theme's location
in
the current moment.</p>
<p><span style="text-decoration: underline;">Fonts:</span> <code>Roboto Slab</code> was chosen as an ideal header
font that would complement a sans-serif body font like <code>Lato</code>, which has a self-effacing simplicity.
Another option for the body would have been to use Roboto but we wanted to try something a little
different. <code>Ubunto Mono</code> was chosen for its contemporary style and the way in which its fixed-width
would contrast with the other fonts.</p>
<p><span style="text-decoration: underline;">Layout:</span> The idea was to keep the layout simple
so as not to distract from the historical themes while offering a sense of playfulness that would
invite the user to delve into the site's wider functionality and purpose. We repurposed
Bootstrap's inbuilt functionalities, such as cards on the homepage mimicking buttons. We also
decided to align headers, subs, and bylines to the right for a simple contrast with the other
themes.</p>
<figure style="display: flex; justify-content: center; padding: 0.625vw; margin: auto;">
<img src="/LiterOCULAR/img/greyscale.png" class="img-fluid" alt="screenshot of widman website"
title="Widman website">
</figure>
<figure style="display: flex; justify-content: center; padding: 0.625vw; margin: auto;">
<img src="/LiterOCULAR/img/huggingface.png" class="img-fluid"
alt="screenshot of huggingface website" title="Huggingface website">
</figure>
</div>
</div>
</div>
<!-- Theme: newspaper -->
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingSeven">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseSeven" aria-expanded="false" aria-controls="flush-collapseSeven">
19th century theme: Newspapers <span role="img" arial-label="newspaper">📰</span>
</button>
</h2>
<div id="flush-collapseSeven" class="accordion-collapse collapse" aria-labelledby="flush-headingSeven"
data-bs-parent="#accordionDocu">
<div class="accordion-body">
<p><span role="img" arial-label="color palette">🎨</span> (base) <span style="background-color: #111; color:#fff;">#111</span> + <span
style="background-color: #ebe7dd; color:#111;">#ebe7dd</span> + <span
style="background-color: #f4f4f4; color:#111;">#f4f4f4</span> <br />
<span role="img" arial-label="color palette">🎨</span> (spot) <span style="background-color: #f9eac8; color:#111;">#f9eac8</span> + <span
style="background-color: #353434; color:#fff;">#353434</span> + <span
style="background-color: #4a1520; color:#fff;">#4a1520</span><br />
<span role="img" arial-label="color palette">✍🏻</span> <code>Chomsky</code> (branding) | <code>Old Newspaper Type</code> (body) | <code>Chunkfive</code> (menus) | <code>Newsreader</code> (titles)</p>
<hr>
<p><span style="text-decoration: underline;">Inspiration:</span> For the Newspaper-inspired theme we
turned to Guilty Novin's exhaustive article for inspiration as well as a <a
href="https://www.loc.gov/newspapers/?dates=1800-1899" target="_blank">collection of 19th
century newspapers</a> from the USA available at the Library of Congress. The typical layout of
newspapers of the time was already preserved with our use of columns for the magazine skeleton and
we focused on picking up some of the quirks and details of the time (an approach that was repeated
for all historical themes). While we originally thought that this theme would make use of
dropcaps, upon closer inspection of the LoC collection we noticed dropcaps only appeared to be
used for classified adverts rather than articles themselves. For the color palette, we settled on
a yellow-ish gray for the background (#ebe7dd) and a slightly toned-down black (#111) and white
(#f4f4f4) for text, in order to maintain high contrast and legibility. A light shade of yellow
(#f9eac8), a dark gray (#353434), and a dark shade of pink-red (#4a1520) were chosen as spot
colors for drop down menus, buttons, and highlights. Images were greyscaled via CSS filter to
align them with the overall historical feel.</p>
<p><span style="text-decoration: underline;">Fonts:</span> The easiest font to choose was the
magazine header/title font, <code>Chomsky</code>: it looks just like 19th century newspaper titles.
Next, we needed to find a fitting font for both body and headings: after unsuccessfully browsing
multiple sources while comparing typefaces with our historical sources, we stumbled upon a font
called <code>Old Newspaper Type</code>. It was freely available and in open format, and the deed was
quickly done. The search for a heading font was a multi-step process: we initially used <code>Chunkfive</code>
for both menus and textual headings, but quickly realized it wasn't historically accurate for
article content. We opted for keeping <code>Chunkfive</code> as an extension of the theme in menus and
interactive components, which clearly didn't exist at the time, and to use a more plain-looking
typeface called <code>Newsreader</code> for article headings. This is also the only font for the newspaper
theme found in GoogleFonts.</p>
<p><span style="text-decoration: underline;">Layout:</span> Bottom margins were removed from
<code>p</code> tags, margins and padding were adjusted elsewhere (images, titles, menus etc...),
and text alignment was set to justified to emulate the condensed feel of the layouts of the time
as well as some their peculiar distortions. Solid, light lines were used to emulate the
demarcations and boxing of the time while a pointing hand was repurposed via Photoshop from <a
href="https://www.loc.gov/resource/sn83030312/1839-09-07/ed-1/?sp=1&r=0.075,0.112,1.02,0.467,0"
target="_blank">a 1839 edition of the Morning Herald</a> as a nod to the way in which newspapers
of the time made use of icons to enliven their layout and draw attention. Lastly, rounded edges
were removed from all boxes as they were not historically accurate.
</p>
<figure style="display: flex; justify-content: center; padding: 0.625vw; margin: auto;">
<img src="/LiterOCULAR/img/morningherald.png" class="img-fluid"
alt="screenshot of a 1839 edition of the Morning Herald" title="Morning Herald, 1839">
</figure>
<figure style="display: flex; justify-content: center; padding: 0.625vw; margin: auto;">
<img src="/LiterOCULAR/img/sydney_morning_herald_1890.png" class="img-fluid"
alt="screenshot of a 1890 edition of the Sydney Morning Herald"
title="Sydney Morning Herald, 1890">
</figure>
</div>
</div>
</div>
<!-- Theme: deco -->
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingEight">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseEight" aria-expanded="false" aria-controls="flush-collapseEight">
1900-1950 theme: Art Deco <span role="img" arial-label="triangular ruler">📐</span>
</button>
</h2>
<div id="flush-collapseEight" class="accordion-collapse collapse" aria-labelledby="flush-headingEight"
data-bs-parent="#accordionDocu">
<div class="accordion-body">
<p><span role="img" arial-label="color palette">🎨</span> (base) <span style="background-color: #111; color:#fff;">#111</span> + <span
style="background-color: #fff; color:#111;">#fff</span> <br />
<span role="img" arial-label="color palette">🎨</span> (spot) <span style="background-color: #68A469; color:#111;">#68A469</span> + <span
style="background-color: #6F1946; color:#fff;">#6F1946</span><br />
<span role="img" arial-label="writing hand">✍🏻</span> <code>Limelight</code> (branding) | <code>Prata</code> (body) | <code>Cormorant Garamond</code> (menus) | <code>Poiret One</code> (titles/quotes)
</p>
<hr>
<p><span style="text-decoration: underline;">Inspiration:</span> We chose Art Deco as it is an early
20th century style more readily associated with architecture and material design than print, which
we felt would be more interesting. After some research we honed in on two options: the more
flamboyant aesthetic typical of posters of the era or the more subdued but still striking
aesthetic of key print publications, namely <em>Harper's Bazaar</em> from NYC and <em>Arts &
Décoration</em> from Paris. We chose the second as more realistic to achieve. Time wise we
pulled from the first half of the Art Deco movement, before WWI, with references to a 1925 issue
of <em>Harper's Bazaar</em> and a 1921 issue of <em>Arts & Décoration</em>, taken from
the Internet Archive via <a
href="https://onlinebooks.library.upenn.edu/webbin/serial?id=artsanddecoration"
target="_blank">The Online Books Page resource</a>.</p>
<p>We chose to focus the colors on a simple palette. Black (#111) and white (#fff) for background
and text, largely due to the fact that we already made use of a yellow shade for the Newspaper
theme to imitate old paper and we were unable to ascertain the exact page color from the scans.
White seemed a likely historically accurate choice, with color primarily kept for covers. A dark
shade of magenta-pink (#6F1946) and a shade of green (#68A469) were used as complimentary colors,
inspired by a <em>Harper's Bazaar</em> 1922 cover. The magenta-pink allowed for an interesting
twist on background color for menus and metadata viewer while the green as a spot color was a nice
reference to jade, one of the natural materials used in Art Deco designs such as jewelry
and furniture.</p>
<p><span style="text-decoration: underline;">Fonts:</span> <code>Limelight</code> was an obvious choice for the
branding, with its high contrast, geometric style instantly evoking our current understanding of
the era. Likewise, <code>Poiret One</code> was chosen as another cursive, sans-serif font that easily evokes
the era and would be better suited to titling so as not to have titles become overbearing. <code>Prata</code>
was chosen for the body as it emulated the contrast between curves and serifs seen in our
reference magazines. After trying out <code>Poiret One</code> but finding it too light, we opted for <code>
Cormorant
Garamond
</code> as the menu type. It felt like a good emulation of some of the title fonts in our
references and also has direct historical relationship to the 1920s as it is an open-source
adaption of Garamond which itself saw a revival during that period.</p>
<p><span style="text-decoration: underline;">Layout:</span> One of the key layout elements we wanted
to emulate from our references was the use of geometric figures and embellishments as borders and
dividers. After doing some testing with images of historically accurate separators we opted to
instead make use of CSS pseudo-elements as these can more easily scale. We stumbled on two useful
bits of public code: a <a href="https://codepen.io/thewildmage/pen/ayewQw"
target="_blank">Codepen</a> with various Art Deco inspired separators, and a <a
href="https://stackoverflow.com/questions/65758024/art-deco-style-border-in-css"
target="_blank">StackOverflow</a> thread with a simple double border frame. The latter was used
for the ToC and the former to embellish the cover title and blockquotes with corners, diamond
separators, and full frames. Returning to our references, we opted for double solid lines to frame
the cover images of each article, with additional padding on the images themselves to emphasize
the frame.</p>
<p>Based on our references, we centered headers, subheaders, bylines, and captions and added italics
to subheaders and captions and uppercase to bylines. Dropcaps were added to the beginning of each
article, followed by indents, both using pseudo-elements to control all the necessary instances
across the six articles (and modals) using <code>*nth-child</code> logic. Due to the differences
in some of the html
structures of the articles, we also had to create additional classes to ensure that dropcaps
and indents behaved correctly across both issues (this was in turn taken across to other themes).
The remaining
letters of the first word of each line were also uppercased following a dropcap as was the norm.
Bottom margin
was removed from paragraphs, and padding was kept around images in line with historical
references. We only kept rounded edges on the top corners of boxes (buttons, modals etc...) as
based on our references that appeared
like the most accurate use of rounded edges at the time. </p>
<figure style="display: flex; justify-content: center; padding: 0.625vw; margin: auto;">
<img src="/LiterOCULAR/img/ArtDecoContents.png" class="img-fluid"
alt="screenshot of the content page of Art & Decoration 1921"
title="Art & Decoration, 1921">
</figure>
<figure style="display: flex; justify-content: center; padding: 0.625vw; margin: auto;">
<img src="/LiterOCULAR/img/ArtDeco2.png" class="img-fluid"
alt="screenshot of a feature page of Art & Decoration 1921"
title="Art & Decoration, 1921">
</figure>
<figure style="display: flex; justify-content: center; padding: 0.625vw; margin: auto;">
<img src="/LiterOCULAR/img/ArtDeco1.png" class="img-fluid"
alt="screenshot of a feature page of Art & Decoration 1921"
title="Art & Decoration, 1921">
</figure>
<figure style="display: flex; justify-content: center; padding: 0.625vw; margin: auto;">
<img src="/LiterOCULAR/img/Harper.png" class="img-fluid" style="width: 40%;"
alt="screenshot of a feature page of Harper's Bazaar 1925" title="Harper's Bazaar, 1925">
<img src="/LiterOCULAR/img/Erte_Harpers_Bazar_cover_Feb_1922.jpeg" class="img-fluid"
alt="screenshot of a 1922 Harper's Bazaar cover" title="Harper's Bazaar, 1922">
</figure>
</div>
</div>
</div>
<!-- Theme: musicmag -->
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingNine">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseNine" aria-expanded="false" aria-controls="flush-collapseNine">
Late 20th Century print theme: 1990s Hip-Hop Magazines <span role="img" arial-label="microphone">🎤</span>
</button>
</h2>
<div id="flush-collapseNine" class="accordion-collapse collapse" aria-labelledby="flush-headingNine"
data-bs-parent="#accordionDocu">
<div class="accordion-body">
<p><span role="img" arial-label="color palette">🎨</span> (base) <span style="background-color: #222125; color:#fff;">#222125</span> + <span
style="background-color: #e1dcd8; color:#111;">#e1dcd8</span> + <span
style="background-color: #DBBC9F; color:#111;">#DBBC9F</span> <br />
<span role="img" arial-label="color palette">🎨</span> (spot) <span style="background-color: #d5473b; color:#111;">#d5473b</span> + <span
style="background-color: #70557D; color:#fff;">#70557D</span> + <span
style="background-color: #8c485f; color:#fff;">#8c485f</span> <br />
<span role="img" arial-label="writing hand">✍🏻</span> <code>Alfa Slab One</code> (branding/titles) | <code>Libre Baskerville</code> (body) | <code>Glegoo</code> (menus) | <code>Oswald</code> (quotes)
</p>
<hr>
<p><span style="text-decoration: underline;">Inspiration:</span> The choice of 1990s hip-hop
magazines for this theme was clear from the beginning, as the articles of the Death And Rebirth
issue were taken from issues of <em>The Source</em> and <em>Ego Trip Magazine</em>, two key US
publications for fans of the music at the time. With access to a large personal collection of
scans from publications of the time (<em>XXL</em>, <em>Rap Pages</em>, and <em>Hip-Hop
Connection</em> among others) we first began to look for key aesthetic elements common to this
subset of music magazines. While each of these publications had a certain style,
there was an undeniable common aesthetic to hip-hop magazines of the time and we originally
considered making direct references to different publications before ultimately deciding that
<em>The Source</em> would be the direct reference, essentially speaking for all. Part of the
reason for this was that we had access to many different <em>Source</em> articles as reference,
compared with other magazines, and that it is historically one of the most important publications
of this specific subset.
</p>
<p>For our primary palette we decided on a very light shade of orange (#e1dcd8) as the main
background color and a medium shade (#DBBC9F) for the metada viewer, modals, and buttons. This
choice was inspired by some of the specific backgrounds in our reference documents, in particular
a fact box that became the basis for the theme's boxes. Text used a
very dark shade of blue-magenta (#222125) extracted from scans, which was also used for the navbar
in the spirit of how content pages and regular columns were presented. For primary spot colors we
used a shade of red (#d5473b) which was a common balance to the black in many issues as well as
magenta (#70557D) and pink (#8c485f) for borders and highlights. The articles themselves feature
additional color combinations in the titles, which was inspired by the way in which 1990s music
magazines often called on a wide range of color combinations with each article often featuring its
own specific palette.</p>
<p><span style="text-decoration: underline;">Fonts:</span> After trying to analyse fonts used at the
time and doing some research we settled on a combination that we think evokes the spirit of the
times. <code>Alfa Slab One</code> was chosen for branding and titling as an old-style serif with a strong
visual effect that brings to mind some of the title fonts used by <em>The Source</em> in its early
days. <code>Oswald</code> was chosen as a clean gothic sans-serif ideal for blockquotes and dropcaps, evoking
some of the extra bold sans-serif used at the time. <code>Glegoo</code> felt ideal for menus with its lighter
slab
serif evoking print in very clear ways. Lastly, <code>Libre Baskerville</code> was chosen for the body, as
serifs tended to be common in body text at the time (though there was a switch to sans-serif in
the decade) and it is optimised for body usage on computers. </p>
<p><span style="text-decoration: underline;">Layout:</span> The aim with the layout of this theme
was to try and capture how diverse the design of each article in <em>The Source</em> could often
be. Common
elements were chosen to tie it together, especially as we didn't have the luxury of multiple
pages: the use of uppercase for bylines and menus; straight corners; no background hover colors;
the use of a small black square to indicate the end of an
article. After this we opted to recreate the layouts of the three different articles in Death And
Rebirth as these were most directly related to our magazine. Each article has therefore been as
closely recreated as possible, with the 1991 <em>Source</em> article about KMD featuring a
different, but historically accurate, lead photo to allow us to recreate the title's positioning.
For the second issue, we drew from the color combination and design styles of Source articles from
1991 and 1992 including the use of image cropping (recreated via CSS <code>clip-path</code>
property thanks to this <a href="https://bennettfeely.com/clippy/" target="_blank">handy
resource</a>), line boxing around titles, and color alternation. Subheaders within article were
also styled in homage of the times with solid background colors, center alignment and small
dropcaps and letter spacing to control their stretching across the available space. Lastly, bottom
margins were removed from paragraphs, an
underline given to bylines, and text justified.</p>
<figure style="display: flex; justify-content: center; padding: 0.625vw; margin: auto;">
<img src="/LiterOCULAR/img/KMDSource.jpeg" class="img-fluid"
alt="screenshot of a 1991 Source feature on KMD" title="The Source, 1991">
</figure>
<figure style="display: flex; justify-content: center; padding: 0.625vw; margin: auto;">
<img src="/LiterOCULAR/img/KMD94_1.jpg" class="img-fluid" style="width: 50%;"
alt="screenshot of a 1994 Source feature" title="The Source, 1994">
<img src="/LiterOCULAR/img/KMD94_2.jpg" class="img-fluid" style="width: 50%;"
alt="screenshot of a 1994 Source feature" title="The Source, 1994">
</figure>
<figure style="display: flex; justify-content: center; padding: 0.625vw; margin: auto;">
<img src="/LiterOCULAR/img/KMDegotrip.jpg" class="img-fluid" style="width: 50%;"
alt="screenshot of a 1998 Ego Trip feature page" title="Ego Trip, 1998">
</figure>
<figure style="display: flex; justify-content: center; padding: 0.625vw; margin: auto;">
<img src="/LiterOCULAR/img/SourceContents.png" class="img-fluid" style="width: 40%;"
alt="screenshot of a 1993 Source content page" title="The Source, 1993">
<img src="/LiterOCULAR/img/SourceBox.png" class="img-fluid"
alt="screenshot of a 1993 Source feature" title="The Source, 1993">
</figure>
<figure style="display: flex; justify-content: center; padding: 0.625vw; margin: auto;">
<img src="/LiterOCULAR/img/SourceBoxes.jpg" class="img-fluid" style="width: 50%;"
alt="screenshot of a 1992 Source feature page" title="The Source, 1992">
<img src="/LiterOCULAR/img/SourceEditorial.png" class="img-fluid"
alt="screenshot of a 1993 Source editorial" title="The Source, 1993">
</figure>
<figure style="display: flex; justify-content: center; padding: 0.625vw; margin: auto;">
<img src="/LiterOCULAR/img/tooshort_source892.jpg" class="img-fluid" style="width: 50%;"
alt="screenshot of a 1992 Source feature page" title="The Source, 1992">
<img src="/LiterOCULAR/img/Spike.Charles1.jpg" class="img-fluid" style="width: 50%;"
alt="screenshot of a 1992 Source feature" title="The Source, 1992">
</figure>
<figure style="display: flex; justify-content: center; padding: 0.625vw; margin: auto;">
<img src="/LiterOCULAR/img/QuikSource.jpeg" class="img-fluid" style="width: 50%;"
alt="screenshot of a 1991 Source feature page" title="The Source, 1991">
<img src="/LiterOCULAR/img/SourceColors.jpg" class="img-fluid" style="width: 50%;"
alt="screenshot of a 1992 Source feature" title="The Source, 1992">
</figure>
</div>
</div>
</div>
<!-- Theme: transformers -->
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTen">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseTen" aria-expanded="false" aria-controls="flush-collapseTen">
2030: Promptism <span role="img" arial-label="robot head">🤖</span>
</button>
</h2>
<div id="flush-collapseTen" class="accordion-collapse collapse" aria-labelledby="flush-headingTen"
data-bs-parent="#accordionDocu">
<div class="accordion-body">
<p><span role="img" arial-label="color palette">🎨</span> (base) <span role="img" arial-label="shrugging emoji">🤷🏻♂️</span> <br />
<span role="img" arial-label="color palette">🎨</span> (spot) <span role="img" arial-label="shrugging emoji">🤷🏻♂️</span> <br />
<span role="img" arial-label="writing hand">✍🏻</span> <span role="img" arial-label="shrugging emoji">🤷🏻♂️</span> </p>
<hr>
<blockquote class="blockquote" style="text-align: center; font-size: 1.4vw;">Promptism is a movement
rooted in the technological advances of the 21st century that holds the potential to completely
transform artistic practices. Promptism was founded in response to the growing concern that
traditional art had become irrelevant to the modern world. Going beyond painting and sculpture,
Promptist art involves the manipulation of new media, specifically computer generated imagery,
animation, and the Internet. Its unique dynamism makes Promptism a dynamic vehicle for the
expression of identity and the implementation of real-time feedback between itself and the
spectator.</blockquote>
<figcaption class="blockquote-footer" style="text-align: center;">The Promptist Manifesto, GPT-3
</figcaption>
<p><span style="text-decoration: underline;">Inspiration:</span> For our last trick we gave some
serious thought to how best to approach the spec's requirement that one of the themes be an
imagination of what the future of design might look like. Keeping it <span role="img" arial-label="100">💯</span> we're not fans of
predictions,
they just always seem so forced and rarely hit the spot (unless we're talking about speculative
fiction but let's not go there because it's too depressing). One early idea was to mint an NFT and
just make the entire website redirect to a blockchain entry, but we didn't have the money to be
honest and it felt like too much of a cop out (still think it's funny in a conceptual art kinda
way). Eventually we
decided that it would be just as fun to use the current Promptist movement and advances in Machine
Learning to generate most of the CSS code via prompts given to a GPT model: <a
href="https://6b.eleuther.ai/" target="_blank">Eleuther AI's GPT-J-6B</a>.</p>
<p>That's right, all of the CSS in this theme was generated from prompts with the model's
suggestions refined and aligned to ensure the result wasn't too chaotic. The color scheme and
fonts were picked from simple prompts of partial Google Fonts URLs and CSS properties and then we
fed it the selectors we needed based on the default theme and continued along until we had
something workable.</p>
<p>In addition, we also generated new versions of all the images in our magazine using VGAN+CLIP <a
href="https://colab.research.google.com/drive/1_4Jl0a7WIJeqy5LTjPJfZOwMZopG5C-W"
target="_blank">Colab</a> <a
href="https://colab.research.google.com/drive/1nWkU3HlGBF5Gl_XjWs_k-QIDDB18nDpK"
target="_blank">notebooks</a>. The cover images were generated based on source image and title
as prompt using the CLIP Guided Diffusion approach by Katherine Crowson, while article images were
generated with source image and title as prompt using standard VGAN+CLIP models.</p>
<p>The original idea was to have the entire site be generated by prompts, including the text, and we
actually did generate alternate versions of each article but in the end finding a way to cleanly
subsitute everything proved too demanding so we settled for simply swapping the images using
Javascript.</p>
<p>While this theme started as a bit of a joke and pushback against the spec requirements, we do
think that Promptism, as the current movement of machine-enabled art has been coined by some,
offers a genuinely interesting take on what the future of art and content will look like. The
Promptist Manifesto, written by GPT-3, can be read <a
href="https://deeplearn.art/the-promptist-manifesto/" target="_blank">here</a>.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Disclaimer modal-->
<div class="modal fade" id="disclaimerModal" tabindex="-1" aria-labelledby="disclaimerModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="disclaimerModalLabel">This is not the content you are looking for</h5>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
<div class="modal-body">
<p><span class="deco-drop">The</span> purpose of this web site is to explore various types of typographic and layout
style for text documents, as an end-of-course project for the Information Modeling and Web
Technologies course of the Master's Degree in Digital Humanities and Digital Knowledge,
University of Bologna, a/y 2020-21, held by professor Fabio Vitali.
</p>
<p>
The documents contained in this web site have been selected for their length and complexity. Their
publication here is not intended to be an alternative or replace their original locations. The documents
in the <b>Death and Rebirth</b> issue are taken from print copies of <em>The Source</em> magazine (1991,
1994) and <em>Ego Trip</em> magazine (1998). The documents in the <b>Who Watches the Admen?</b> issue
are taken from <a
href="https://www.nytimes.com/2021/03/15/technology/artificial-intelligence-google-bias.html"
target="_blank"><em>The New York Times</em></a>, the <a
href="https://www.technologyreview.com/2020/12/04/1013294/google-ai-ethics-research-paper-forced-out-timnit-gebru/"
target="_blank"><em>MIT Technology Review</em></a>, and
<a href="https://www.washingtonpost.com/technology/2020/12/23/google-timnit-gebru-ai-ethics/"
target="_blank"><em>The Washington Post</em></a>.
</p>
<p>
All copyrights and related rights on the content remain with their original owners. All copyright on the
typographic and layout choices are 2021 © Federico Cagnola, Laurent Fintoni
</p>
</div>
</div>
</div>
</div>
<!-- About modal-->
<div class="modal fade" id="aboutModal" tabindex="-1" aria-labelledby="aboutModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="aboutModalLabel">Why would you do this?</h5>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
<div class="modal-body">
<p>
<span class="deco-drop">It's</span> a question we asked ourselves repeatedly during the process of completing this project. Sometimes
the doing is the answer.
</p>
<p>
Built by <a href="https://twitter.com/laurent_fintoni" target="_blank">@laurent_fintoni</a> and
<a href="https://twitter.com/fcagnola" target="_blank">@fcagnola</a> over countless hours. Technically
this makes us the editors, publishers, and designers of this imaginary magazine.
</p>
</div>
</div>
</div>
</div>
<!-- Content row (three cols of equal size spanning whole viewport width) -->
<div class="row p-2">
<div id="article1" class="col-4 overflow-auto no-scrollbar"></div>
<div id="article2" class="col-4 overflow-auto no-scrollbar"></div>
<div id="article3" class="col-4 overflow-auto no-scrollbar"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script src="/LiterOCULAR/static/js/main.js"></script>
</body>
</html>