-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
587 lines (558 loc) · 39.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
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
<!DOCTYPE html>
<html>
<head>
<title>TYPANTHEON</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link rel="stylesheet" href="general-style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://typantheon.github.io/magazine/jsCode.js"></script>
</head>
<body>
<header>
<h1 id="logo"><a href="index.html">TYPANTHEON</a></h1>
<a href="#intro" class="btn btn-white btn-animated">GET STARTED</a>
</header>
<div id="img-box">
<img class="img-series" src="images/1.jpg">
<img class="img-series" src="images/2.jpg">
<img class="img-series" src="images/3.jpg">
</div>
<nav>
<ul>
<li>
<p><a href="https://typantheon.github.io/magazine/#intro">Introduction</a></p>
</li>
<li>
<p><a href="issues/reader.html">Issues</a></p>
</li>
<li>
<p><a href="https://typantheon.github.io/magazine/#documentation">Documentation</a></p>
</li>
<li>
<p><a href="https://typantheon.github.io/magazine/#contact">Meet the team</a></p>
</li>
</ul>
</nav>
<section id="intro" class="white-bg home-section">
<h2 class="title-section">Introduction</h2>
<p>Discover TyPantheon, the online magazine dedicated to mythology and ancient religions from all over the world!
<br>
Travel between eras, places and worlds to build your own personal pantheon.
In our most recent issues you can meet some of the most important gods and creatures of the old times, such as
Dionysus, Raijin and the Cailleach, and get to know their stories trough our personalized themes. </p>
<p> Play with what you see: you can choose between six different styles, starting from a manuscript of the XV century (inspired by the work of Cervantes)
and arriving into a futuristic yet familiar "solarpunk" display!</p>
<br>
<span class="bolder greater">Disclaimer</span>
<p> This magazine has been created as a University project within the University of Bologna course in Information Modelling and Web Technology held by Professor Fabio Vitali in the academic year 2021-2022, for the Master Degree in
Digital Humanities and Digital Knowledge: the articles contained in our issues, the fonts and the media contents used on this website do not belong to us and have been rightly credited to their original
publication platforms, editors, creators or writers.</p>
</section>
<section id="documentation" class="beige-bg border-top home-section">
<h2 class="title-section">Documentation</h2>
<br>
<span class="bolder greater">Typography</span>
<br>
<div id="documentationSelector">
<ul id="stylesList">
<div id="selector"></div>
<li class="stylesListItem">
XV century: Cervantes
</li>
<li class="stylesListItem">
XIX century: Industrial Revolution
</li>
<li class="stylesListItem">
1930s
</li>
<li class="stylesListItem">
1960s
</li>
<li class="stylesListItem">
Start of the XXI century
</li>
<li class="stylesListItem">
A glimpse of the future
</li>
</ul>
</div>
<div class="documentationParagraph active">
<br>
<span class="bolder greater">Cervantes</span>
<p>In this style I wanted to pay tribute to one of the greatest figures of the literary genre: <span class="bolder">Miguel de Cervantes</span>, focusing on the original version of his disruptive masterpiece, <span class="bolder">Don Quijote de la Mancha.</span>
As obviously at that time books only existed in the physical format, I first tried to recreate the full experience of reading the <span class="bolder">Don Quijote</span>, but it turned out to be quite hard to implement there any kind of text
<a href="issues/book_filled_template.html">(you can take a glance HERE)</a>. That's the reason I eventually opted for a more simpler but effective way. I tried to recreate the one column layout with symetrical borders, as well as a bigger first letter of each
new paragraph as it was done on the original version, like happened in many other books from that time. Here are the images I took references from:
</p>
<p class="bolder">References</p>
<div class="image-container" id="img-container-1">
<img src="https://espaciolibros.com//wp-content/uploads/2019/11/espaciolibros-don-quijote-resumen-comentario-de-texto-primera-edicion-600x525.jpg">
<img src="https://lavozdelbecario.es/wp-content/uploads/2020/08/donquijote.jpg">
<img src="https://cloud10.todocoleccion.online/libros-antiguos-clasicos/tc/2015/04/20/22/48969119.jpg">
</div>
<br>
<span class="bolder">Appearence and font</span>
<p>To give it that old appearence I applied shadowing on the borders, as well as using a noise image to give it that granular effect so it seems more antique.
Regarding the election of the font, I selected the Gutenberg font, alluding to the original style of Blackletter for the Gutenberg, called <span class="bolder">Donatus-Kalender</span>. The <span class="bolder">Gutenberg</span> font is the digital adaptation of the typeface.
</p>
<div class="image-container" id="img-container-1">
<img src="https://cdn.myfonts.com/cdn-cgi/image/width=720,height=360,fit=contain,format=auto/images/pim/10000/204199_67b9c3b648cad439c7e4ac18e78b3801.png">
<img src="http://4.bp.blogspot.com/-UGlCUVtDtKc/TbP7S2EFk5I/AAAAAAAABLM/5j5TelDW5eQ/s1600/Licencia2.JPG">
<img src="https://www.elindependientedegranada.es/sites/default/files/styles/large/public/blogs/ruido-blanco-eh.jpg?itok=A6sKvvvS">
</div>
<div>
<p class="bolder">Bibliography:</p>
<ul>
<li><a href="https://guity-novin.blogspot.com/2012/04/modern-newspaper-magazine-layouts.html">https://guity-novin.blogspot.com/2012/04/modern-newspaper-magazine-layouts.html</a></li>
<li><a href="https://www.fontfabric.com/blog/gutenberg-first-typeface-original-bible-typography-used/#:~:text=Over%20time%20a%20wide%20variety,in%20metal%20type%20since%20Gutenberg.">https://www.fontfabric.com/blog/gutenberg-first-typeface-original-bible-typography-used/#:~:text=Over%20time%20a%20wide%20variety,in%20metal%20type%20since%20Gutenberg.</a></li>
<li><a href="https://standardebooks.org/ebooks/miguel-de-cervantes-saavedra/don-quixote/john-ormsby">https://standardebooks.org/ebooks/miguel-de-cervantes-saavedra/don-quixote/john-ormsby</a></li>
</ul>
</div>
</div>
<div class="documentationParagraph">
<br>
<span class="bolder greater">Industrial Revolution</span>
<p>With the Industrial Revolution style, I tried to inspire in those first newspapers of the beginning of the 19th century that started being produced massively and industrially. I tried to apply the <span class="bolder">"inverted pyramid"</span><a href="https://ohiostate.pressbooks.pub/stratcommwriting/chapter/inverted-pyramid-style/"> technique</a> , that implies information is displayed in order of importance, displaying it in 5 columns regarding the importance.
However, to mantain the homogeinity with the rest of the project, I went with a single column display. Newspapers during the early 1800s started becoming cheaper when both sides of the page could be printed at once, but still their structure was quite simple and didn't change much from what was a century ago.</p>
<span class="bolder">References</span>
<br>
<div class="image-container" id="img-container-1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Hicky%27s_Bengal_Gazette%2C_March_10%2C_1781%2C_University_of_Heidelberg.jpg/800px-Hicky%27s_Bengal_Gazette%2C_March_10%2C_1781%2C_University_of_Heidelberg.jpg">
<img src="https://i.insider.com/5ba29ae2e361c033008b5dd8?width=1000&format=jpeg&auto=webp">
</div>
<br>
<p><span class="bolder">Appearence and font</span></p>
<p>As well as on the Cervantes' style, I aplied a noise image to give it that granular effect to look as an actual newspaper. Regarding the cursor, it is a <span class="bolder">steam machine</span>, representing the impact of Turing's machine.
As on the font, the one selected here is a Serif one, <span class="bolder">Old Newspaper Types,</span> designed by Manfred Klein.
</p>
<div class="image-container" id="img-container-1">
<img src="https://economipedia.com/wp-content/uploads/Maquina-de-vapor-1.png">
<img src="https://www.1001freefonts.com/font_preview_character_map.php?f=10264&c=000000&ffp=60a19084fdee4a5cb8ba53bb9f31a68d">
</div>
<div>
<p class="bolder">Bibliography:</p>
<ul>
<li><a href="https://en.wikipedia.org/wiki/History_of_newspaper_publishing#Modern_newspapers_since_1800">https://en.wikipedia.org/wiki/History_of_newspaper_publishing#Modern_newspapers_since_1800</a></li>
<li><a href="https://www.jstor.org/stable/2591261">https://www.jstor.org/stable/2591261</a></li>
</ul>
</div>
</div>
<div class="documentationParagraph">
<br>
<span class="bolder greater">1930s</span>
<p>The 1930s typographic style is inspired by the French painter and typeface designer <span
class="bolder">Adolphe Jean-Marie Mouron</span>, better known by his pseudonym <span
class="bolder">Cassandre</span>. Though his lifetime spans more than half of the XX century, many of
his most remarkable works and creations date back to the <span class="bolder">1920s</span> and the <span
class="bolder">1930s</span>. Here are some references from this period:</p>
<p class="bolder">Typefaces:</p>
<div class="image-container" id="img-container-1">
<img src="https://i.pinimg.com/564x/3d/a7/cf/3da7cfd3edc91940f6e03fc622c39a50.jpg">
<img src="https://i.pinimg.com/564x/c9/60/1f/c9601f08590f21af5dc815f761a56ddd.jpg">
<img src="https://i.pinimg.com/564x/fb/a4/cb/fba4cbac9b726fbcf11b95f0fc39921e.jpg">
</div>
<br>
<p class="bolder">Posters:</p>
<div class="image-container" id="img-container-2">
<img
src="https://static.wixstatic.com/media/f8ac0d_e9f56d6534894d2280982efe78ed8a36~mv2_d_4560_5760_s_4_2.jpg/v1/fill/w_529,h_669,al_c,q_80,usm_1.20_1.00_0.01,enc_auto/f8ac0d_e9f56d6534894d2280982efe78ed8a36~mv2_d_4560_5760_s_4_2.jpg">
<img
src="https://static.wixstatic.com/media/f8ac0d_eac3fd671cab44e2bbb5be019f55c908~mv2.jpg/v1/fill/w_503,h_669,al_c,q_80,usm_1.20_1.00_0.01,enc_auto/f8ac0d_eac3fd671cab44e2bbb5be019f55c908~mv2.jpg">
<img
src="https://static.wixstatic.com/media/f8ac0d_db158273a463449d99478f9363a0fada~mv2.jpg/v1/fill/w_421,h_669,al_c,q_80,usm_1.20_1.00_0.01,enc_auto/f8ac0d_db158273a463449d99478f9363a0fada~mv2.jpg">
</div>
<br>
<p class="bolder">Cover page:</p>
<p>Both the <span class="bolder">size</span> and the <span class="bolder">font family</span> comply with the
instructions provided by Cassandre and his colleagues. As suggested by a Bifur promotional brochure, the
<span class="bolder">Bifur font</span> was specifically designed for <span
class="bolder">headings</span>, while it should not be used for text. The same document also
introduces four different sizes: we have used the largest one (60pt) for the main heading of the whole
article, while the third size (36pt) was chosen to indicate the author. The remaining elements on the
cover require a simpler and more balanced style, thus, we have adopted the uppercase <span
class="bolder">Peignot font</span>, whose sizes have been suggested by the following example page:
</p>
<div class="image-container" id="img-container-3">
<img
src="https://carsonparkdesign.com/wp-content/uploads/2020/12/Bifur-Continental-Types-1930-scaled.jpg">
</div>
<br>
<p>This same document also inspired the layout of the page and the background of the cover. For those
articles whose cover has an opening image, the adopted filters are “greyscale (100%)” and “contrast
(300%)”. This style imitates some gouaches produced by Cassandre in the 1930s and characterizes all the
images of the article. Moreover, the cover image is shaped like a square</p>
<div class="image-container" id="img-container-4">
<img
src="https://d3ec1vt3scx7rr.cloudfront.net/files/styles/x_large/s3/files/images/1984/SAAM-1984.124.56_1.jpg?itok=TV-SNSvQ">
</div>
<br>
<p class="bolder">Article body:</p>
<p>The body of the articles contains many different elements. The page presents a special type of <span
class="bolder">borders</span>, created using the letter A of the Bifur font. This type of textual
ornament was suggested by both the above-mentioned brochure and the following document: <a
href="https://www.flickr.com/photos/46165392@N05/44555950915/in/dateposted/" target="_blank">click
here to open the link in a new tab</a>.</p>
<p>The <span class="bolder">headings</span> have different sizes depending on their level. Following the
idea expressed concerning the main title (h1), h2 will be 48pt large, h3 is 36pt, and h4 is 24pt.
Instead, the paragraph font size will be 14pt, except for the publication note/abstract (18pt) and
image-captions (12pt).</p>
<div class="image-container" id="img-container-5">
<img
src="https://64.media.tumblr.com/50401ae46d2950b8f40e3d2003a1c8b7/tumblr_mm35tkARQk1qcaxv1o1_1280.jpg">
</div>
<br>
<p class="bolder">Other elements:</p>
<ul>
<li><code class="bolder"><hr></code>: the horizontal rule is inspired by the same sources
concerning borders and decorative elements. The symbol used for this element is a repetition of the
number 4 (Bifur font).</li>
<li><code class="bolder"><table></code>: the style of the table follows the model offered by</li>
<div class="image-container" id="img-container-6">
<img
src="https://cdn.shopify.com/s/files/1/0606/8096/2306/products/AM085_1024x1024.png?v=1637853008">
</div>
</ul>
<p class="bolder">Colours:</p>
<p>We have already explained (above <em>Cover page</em>) the reason behind the choice of image filters and
the backgrounds. Now it’s time to deal with text colours: <code class="bolder"
style="color:#cf4b3a">#cf4b3a</code> and <code class="bolder" style="color:#656770">#656770</code>.
<p>These colours have been retrieved from Img. 2 (above) and perfectly fit the need to combine two of the
<span class="bolder">most frequent colours</span> used by Cassandre. Moreover, the bicoloured style is
suggested by the Bifur font brochure, while the red colour was often adopted by the typist for styling
the first letter of a Peignot font paragraph:
</p>
<div class="image-container" id="img-container-7">
<img src="images/peignot-facsimile.png">
</div>
<br>
<p>The same colours alternation characterizes the paragraphs’ title and the structure of boxes (<code
class="bolder"><div></code> elements) and tables.</p>
<p class="bolder">Bibliography:</p>
<ul>
<li>TYPOGRAPHY & LOGOS BY A.M.CASSANDRE: <a
href="https://www.cassandre-france.com/typography">https://www.cassandre-france.com/typography</a>
</li>
<li>POSTER GALLERY BY A.M.CASSANDRE: <a
href="https://www.cassandre-france.com/poster-gallery-by-am-cassandre">https://www.cassandre-france.com/poster-gallery-by-am-cassandre</a>
</li>
<li>Bifur in use: <a
href="https://fontsinuse.com/typefaces/3147/bifur">https://fontsinuse.com/typefaces/3147/bifur</a>
</li>
<li>Acier in use: <a
href="https://fontsinuse.com/typefaces/7258/acier">https://fontsinuse.com/typefaces/7258/acier</a>
</li>
<li>Peignot in use: <a
href="https://fontsinuse.com/typefaces/4336/peignot">https://fontsinuse.com/typefaces/4336/peignot</a>
</li>
<li>Smithsonian American Art Museum - A. Mouron Cassandre: <a
href="https://americanart.si.edu/artist/mouron-cassandre-768">https://americanart.si.edu/artist/mouron-cassandre-768</a>
</li>
</ul>
</div>
<div class="documentationParagraph">
<br>
<span class="bolder greater">1960s</span>
<p>The 1960s style is inspired by the <span class="bolder">hippie movement</span>, one of the best examples
of the XX century counterculture. The flower children were famous not only because of their ideology,
but also thanks to their <span class="bolder">eccentric and colourful style</span>, whose symbols still
characterizes many retro works of art.</p>
<p class="bolder">Examples:</p>
<div class="image-container" id="img-container-8">
<img src="https://i.pinimg.com/564x/1f/72/36/1f723667f7e5fc64db69d72f8f657049.jpg">
<img src="https://i.pinimg.com/564x/cc/e8/c9/cce8c9ef50b8d9390ef0aeb49975fcd7.jpg">
<img src="https://i.pinimg.com/564x/cd/b9/5a/cdb95acd23250f66d7bc6989a3df8586.jpg">
<img src="https://i.pinimg.com/564x/2a/5f/76/2a5f764e2b77f71e6d1b4fce83f207ee.jpg">
</div>
<br>
<p class="bolder">Headings and paragraphs:</p>
<p>The headings of the articles have been created following the <span class="bolder">bold and colourful
style</span> of the 60s posters and picture. In particular, the main title (h1) of the article
retrieves the multi-layered structure of the image on the left, while the headings (h2, h3, h4) of the
article body present a gradually simpler text-shadow depending on their level (image on the right).</p>
<div class="image-container" id="img-container-9">
<img src="https://i.pinimg.com/564x/4f/7c/bb/4f7cbb97ba2b55037216cec1a667b34c.jpg">
<img src="https://i.pinimg.com/564x/90/69/74/9069747eba4b6ecf9a7d7e0a1dfc870b.jpg">
</div>
<br>
<p>Two fonts synthetize the essence of the hippie style:</p>
<ul>
<li><span class="bolder">Scorpio</span> (left): one of the best examples of this groovy typography, it
was designed in 1968. This font emphasizes the <span class="bolder">bold</span> body of the
characters as well as their <span class="bolder">rounded shape</span>.</li>
<li><span class="bolder">Arnold Böcklin</span> (right): this font was invented in 1904, however, it saw
a major revival during the 1960s.</li>
</ul>
<div class="image-container" id="img-container-10">
<img
src="https://assets.fontsinuse.com/static/use-media-items/59/58926/full-2100x1409/59f7146c/Psychedelitypes 2.jpeg">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/ArnoldBocklinSpec.svg/330px-ArnoldBocklinSpec.svg.png">
</div>
<br>
<p class="bolder">Images:</p>
<p>The hippie style is characterized by <span class="bolder">colourful borders and curved lines</span>.
Thus, each image is included within a rounded border, while the applied filters <span
class="bolder">(sepia 40%)</span> attempt to recreate the colours of the 1960s photography.</p>
<div class="image-container" id="img-container-11">
<img src="https://i.pinimg.com/564x/4a/12/36/4a1236dcfe011f6422adb4cafdd1b793.jpg">
</div>
<br>
<p class="bolder">Colours:</p>
<p>The colours - <span class="bolder" style="color:#27315D">#27315D</span>, <span class="bolder"
style="color:#51AEA7">#51AEA7</span>, <span class="bolder" style="color:#F6AB5A">#F6AB5A</span>,
<span class="bolder" style="color:#D95852">#D95852</span> - of the articles (heading shadows, borders,
background image) are some of the most used ones and they have been extracted from the next image.
</p>
<div class="image-container" id="img-container-12">
<img src="https://pro-cdn.pixelmator.com/tutorials/guides/create-a-retro-text-effect/img_facebook.jpg">
</div>
<br>
</div>
<div class="documentationParagraph">
<br>
<span class="bolder greater">Start of the XXI century</span>
<p> In this theme, I decided to explore the manga style and its essential features.
<br> Specifically, I focused on the inner structure of a manga comic, composed by a set of panels, thin
lines and black ink.
<br> Mangas originated from scrolls dating back to the 12th century, but they started to be associated
with the concept of western comics just in the 18th century; at the start of the XXI century, mangas had
acquired a
characteristic font and an overall <span class="bolder"> essential </span> panel composition.
<br> For this specific style, I chose some of the most iconic and influential mangas of the start of the 21th century, namely
Neon Genesis Evangelion by mangaka Hideaki Anno, Berserk by mangaka Kentaro Miura and Devilman by mangaka Go Nagai. </p>
</p>
<p class="bolder">Examples:</p>
<div class="image-container" id="img-container-13">
<img
src="https://media-assets.wired.it/photos/615db851cefb88359923d3e3/master/w_1600%2Cc_limit/1_devilman.jpg">
<img src="https://ih1.redbubble.net/image.2573340137.0909/pp,504x498-pad,600x600,f8f8f8.jpg">
<img
src="https://i.pinimg.com/736x/c8/f8/d0/c8f8d03f992f8d51967c8e4cc2433f9a--neon-genesis-evangelion-posts.jpg">
<img src="https://read.mangadad.com/Mangadad/berserk/chapter-197/1.jpg">
</div>
<br>
<p class="bolder">Headings and paragraphs:</p>
<p> When considering the headings, I decided to take direct inspiration from the fonts used in the Neon
Genesis Evangelion franchise.
<br> My decision was guided primarily by the impact that this manga had during its production and
release time, and also by
its history: Neon Genesis Evangelion is one of the few cases in which the animation series (anime, in
Japanese) came before
its comic-book counterpart. This transition, however, didn't change the typographical or stylistic
nature of the franchise, but,
actually, contributed to making it iconic and unforgettable, a fundamental part of the narrative itself.
<p>
<div class="image-container" id="img-container-14">
<img src="https://i.redd.it/uik9w0c4kem71.jpg">
<img src="https://i.pinimg.com/originals/06/72/b5/0672b551852377fa5bf932da787432b7.jpg">
</div>
<br>
<p> It was, however, more difficult to integrate a classic manga panel structure within a dense wall of
text, our articles:
I tried, at first, to divide every paragraph in sections contained in boxes and to recreate the correct
way to read
a manga (from right to left and from top to bottom, as explained by this <a
href="https://study.soas.ac.uk/how-to-read-manga/#:~:text=Traditionally%2C%20manga%20stories%20are%20read,the%20bottom%20left%2Dhand%20corner.">
article<a>.)
However, at the end I decided to go for a more <span class="bolder">versatile asset</span>,
maybe simpler, but absolutely relevant to this style and
its main characteristics.
<br> Paragraphs in this theme use a <a href="https://www.dafont.com/anime-ace-bb.font">specific
font</a> created for manga and anime inspired content.<p>
<p> All the fonts present in this theme, have been chosen with the critical and theoretical
support given by
this <a href="https://fontsinuse.com/uses/28760/neon-genesis-evangelion"> article </a>:
<ul>
<li> <span class="bolder">Anime-ACE</span> is based on (left): CC Wild Words Roman, font
created for Jim Lee’s Wildstorm books,
and that was featured not only in western and asian comic series, but also in TIME
Magazine and the LEGO catalog.
<br> Wildstorm production was a an American comic book imprint company founded in
1991 by Jim Lee, and then became part
of DC Comics in 1999. It was recently revived in 2017 after a forced shut down in
2010
</li>
<li> <span class="bolder"> Roboto </span> has been used for all the articles' headings,
since it's the most similar option to
some of the fonts used for titles and headings in the Neon Genesis Evangelion
franchise, such as (right):
Helvetica (designed by Max Miedinger in 1956) and Neue Helvetica (a revised version
of Helvetica, created in 1982 at Linotype).
<br> The shadows applied to the titles and headings are a reference to the same
decoration used in the Neon Genesis Evangelion's episodes screens
to create more <span class="bolder">depth and contrast</span> between the header
section and the article structure.
</li>
</ul>
</p>
<br>
<p class="bolder">Images:</p>
<p> The images have been filtered in <span class="bolder">grey scale</span>, to recreate the
aesthetics of a manga illustration.
<div class="image-container" id="img-container 15">
<img
src="https://phantom-marca.unidadeditorial.es/8246657ecd0e1e9e3ef78f7e19abb3a6/resize/1200/f/webp/assets/multimedia/imagenes/2022/07/07/16572060638517.jpg">
</div>
<br>
<p class="bolder"> Bibliography:</p>
<ul>
<li>Peiran, T. (2019, October 17th). Neon Genesis Evangelion - Graphic designer Peiran
Tan plumbs the typographic psyche of the celebrated anime franchise, FontsInUse: <a
href="https://fontsinuse.com/uses/28760/neon-genesis-evangelion">https://fontsinuse.com/uses/28760/neon-genesis-evangelion</a>
</li>
<li>Wilson, K. (s.d.). What is a manga panel?, MangaScout: <a
href="https://mangascout.com/manga-panel/">https://mangascout.com/manga-panel/</a>
</li>
</ul>
</p>
</div>
<div class="documentationParagraph">
<br>
<span class="bolder greater">A glimpse of the future</span>
<p> The main inspiration behind this theme is the solarpunk aesthetic and its interpretations.
<br> We can define solarpunk as a science fiction literary subgenre and art movement, which investigates
and explores
an optimistic vision of the future: humans come together to win climate change's challenges and
obstacles, and therefore manage to
create a sustanaible existence for the entire planet.
As a complete opposite of the cyberpunk genre, solarpunk's aesthetic is <span
class="bolder">bright</span> and deeply influenced by Art Deco, while from a philosophical point of
view it takes many values from eco-modernism,
anti-consumerism and positive psychology.
</p>
<p class="bolder"> Examples:</p>
<div class="image-container" id="img-container-16">
<img src="https://www.cienciaficcion.es/wp-content/uploads/2020/08/que-es-el-solarpunk.jpg">
<img
src="https://www.lasepolturadellaletteratura.it/wp-content/uploads/2022/09/Solarpunk-copertina3.jpg">
<img src="https://pbs.twimg.com/media/FcDiNCcX0AgiOcv?format=jpg&name=large">
</div>
<br>
<p>
My interpretation of solarpunk is rooted in two different media sources: Nausicaa of the Valley of the
Wind, the videogame series Fallout
(specifically Fallout 4). </p>
<br>
<div class="image-container" id="img-container-17">
<img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/a0853366713907.5b1fbc9ae6234.jpg">
<img src="https://ae01.alicdn.com/kf/H1b525e0702da40b4a776587f61c6b0b28/Studio-Ghibli-Nausicaa-valley-of-the-wind-Anime-Art-print-Silk-poster-Home-Wall-Decor.jpg">
<img src="https://guides.gamepressure.com/fallout4/gfx/word/365154207.jpg">
</div>
</p>
<br>
<br>
<p class="bolder">Headings and paragraphs:</p>
<p> From Nausicaa of the Valley of the Wind I took the "retro" and art deco inspiration, while Fallout
contributed to shape the paragraphs'
style and structure: my idea was to create an interface similar to the one of an old cathode tube screen
(like <a
href="https://www.eljugondemovil.com/wp-content/uploads/2015/11/El-Jugon-De-Movil-Pip-Boy-Portada-1280x720.jpg">those</a>
that you could
find in the world of Fallout), with a dark background and a flickering display, and to complete it with
fonts and colors coming
directly from the solarpunk aesthetic (earth tones, various shades of green). </p>
<p> Let's now focus on this theme's fonts:</p>
<ul>
<li><span class="bolder"> Brassia </span> is a font created by Ariel Martín Pérez, member of the
Velvetyne Type Foundry,
during a workshop hold on February the 14th 2019 in occasion of the Fig. Festival in Liège, Belgium.
<br> Completely designed to represent a contemporary interpretation of the solarpunk genre,
Brassia's name derives from
the city of Brussels, Brasseurs and by a botanical genus of orchids; it is free to download, modify
and use.
</li>
<li><span class="bolder"> CourierPrime </span> was instead chosen for being one of the most economical
and eco-sustainable fonts,
according to multiple sources, and therefore it is perfect for a solarpunk interface.
This theme implements it in all of its paragraphs. </li>
</ul>
<div class="image-container" id="img-container-18">
<img src="https://velvetyne.fr/site/assets/files/1381/brassia01b.jpg">
<img src="https://velvetyne.fr/site/assets/files/1381/brassia04.jpg">
<img src="https://www.fontshmonts.com/wp-content/uploads/2019/11/courier-prime-02-1500x1000.jpg">
</div>
<br>
<p class="bolder"> Bibliography:</p>
<ul>
<li> coffeemug. (2014, August 27). CRTs vs. LCDs: Nostalgia and Environmental Impacts, VTSun - Virginia
Tech Sustainable Nanotechnology: <a
href="https://blogs.lt.vt.edu/sustainablenano/2014/08/27/crts-vs-lcds-nostalgia-and-environmental-impacts/">https://blogs.lt.vt.edu/sustainablenano/2014/08/27/crts-vs-lcds-nostalgia-and-environmental-impacts/</a>
</li>
<li>FormaFantasma. (s.d.). FormaFantasma - Studio, FormaFantasma:<a
href="https://formafantasma.com/studio">https://formafantasma.com/studio</a></li>
<li>Solarpunk Community. A Solarpunk Manifesto. Retrieved from Regenerative Design: <a
href="http://www.re-des.org/a-solarpunk-manifesto/">http://www.re-des.org/a-solarpunk-manifesto/</a>
</li>
<li>Velvetyne - Libre e Open Source Type Foundry. (2019, February 25). TYPEFACES FROM A SOLARPUNK FUTURE
AT FIG. FESTIVAL, Velvetyne: <a
href="https://velvetyne.fr/news/typefaces-from-a-solarpunk-future-at-fig-festival/">https://velvetyne.fr/news/typefaces-from-a-solarpunk-future-at-fig-festival/</a>
</li>
</ul>
</p>
</div>
</div>
<br>
<br>
<span class="bolder greater">Web Technolgies</span>
<p>This magazine is organized in two major pages: the <code>index.html</code> homepage and the <code>reader.html</code> page, which is entirely focused on our articles. The reading page exploits an AJAX algorithm to load the content of the articles' HTML pages. Moreover, a dedicated navbar allows the user to select and change the CSS stylesheet (six different themes). Finally, the working of the website is based on jQuery and JavaScript algorithms.</p>
<br>
</section>
<section id="contact" class="white-bg border-top home-section">
<div class="container">
<h2 class="title-section">Meet our team</h2>
<div class="row">
<div class="our-team">
<div class="picture">
<img class="icon" src="images/img-f.jpg">
</div>
<div class="team-info">
<h3 class="name"> Francesca Budel </h3>
</div>
<p class="email"> francesca.budel@studio.unibo.it</p>
</div>
<div class="our-team">
<div class="picture">
<img class="icon" src="images/img-s.PNG">
</div>
<div class="team-info">
<h3 class="name"> Sebastiano Giacomini </h3>
</div>
<p class="email"> sebastiano.giacomini@studio.unibo.it</p>
</div>
<div class="our-team">
<div class="picture">
<img class="icon" src="images/img-p.jpeg">
</div>
<div class="team-info">
<h3 class="name"> Pablo Martin </h3>
</div>
<p class="email"> pablo.martin@studio.unibo.it </p>
</div>
</div>
</div>
</section>
<button onclick="topFunction()" id="backToTop" title="Go to top">↑</button>
<footer>
<p class="footer-paragraph">Course "Information Modelling and Web Technologies"</p>
<i class="bi bi-github" style="color: white"></i>
<p class="footer-paragraph">© 2022 TYPHANTEON</p>
</footer>
<script>
var mybutton = document.getElementById("backToTop");
window.onscroll = function () { scrollFunction() };
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>