-
Notifications
You must be signed in to change notification settings - Fork 0
/
documentation.html
586 lines (560 loc) · 40.2 KB
/
documentation.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Documentation</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Personal stylesheet -->
<link rel="stylesheet" href="style.css">
<style>
.navbar {
background-color: rgba(0, 0, 0, .6)!important;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="index.html" id="color">MIMIC_LAB</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="emulator.html">Emulator</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="documentation.html">Documentation</a>
</li>
<li class="nav-item">
<!-- Button trigger modal -->
<a class="nav-link" href="#" role="button" data-toggle="modal" data-target="#disclaimerModal">
Disclaimer
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">Team</a>
</li>
</ul>
</div>
</nav>
<!--- Start Documentation Section -->
<div id="documentation">
<div class="jumbotron container-fluid">
<div class="col-12 text-center">
<h3 class="heading">Documentation</h3>
<p class="lead">Below you can discover all the secrets behind the styles that we created.<br> If you are interested in testing them yourself, scroll down: you will find all the information that you need.</p>
<div class="heading-underline"></div>
</div>
<div class="row no-padding">
<div class="col-md-6">
<div class="portfolio">
<a type="button" data-toggle="modal" data-target="#modal1">
<img src="images/img1.jpg">
</a>
</div>
</div>
<div class="col-md-6">
<div class="portfolio">
<a type="button" data-toggle="modal" data-target="#modal2">
<img src="images/img2.jpg">
</a>
</div>
</div>
<div class="col-md-6">
<div class="portfolio">
<a type="button" data-toggle="modal" data-target="#modal3">
<img src="images/img3.jpg">
</a>
</div>
</div>
<div class="col-md-6">
<div class="portfolio">
<a type="button" data-toggle="modal" data-target="#modal4">
<img src="images/img4.jpg">
</a>
</div>
</div>
<div class="narrow text-center">
<div class="col-12">
<p class="lead">Want to try yourself? Download the css files and follow the HTML sample.</p>
<a class="btn btn-secondary btn-md" href="themes.zip">Download</a>
</div>
</div>
</div> <!-- End Row -->
</div>
</div>
<!-- Modal 1-->
<div class="modal fade modalDoc" id="modal1" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="#modal1Label" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="modal1Label">Roman Inscriptions</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<p>
The inscriptions, which the Romans called <em>tituli</em> or <em>inscriptiones</em>, were a powerful means of mass communication, widespread and exposed throughout the territory of the Roman Empire.
This style is inspired, in its general lines, by public inscriptions from the reign of Augustus, when monumental inscriptions developed into what we might term their “classical” form.
</p>
</div>
</div>
<div class="row">
<div class="col-12">
<h5>The Background</h5>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-12 d-flex align-items-start">
<img src="images/Titulus_cecilia_metella.jpg" alt="roman inscription" class="img-fluid rounded">
</div>
<div class="col-md-8 col-sm-12">
<p>
Marble was extremely available in Rome thanks to the expansion of the Carrara marble quarries and was the most commonly used material for public inscriptions. The image I used represents a white marble wall, which I used to recreate a slab, a typical support on which texts were engraved and then affixed to public monuments.
On the plate, the inscription can appear in a free field or in a mirror delimited by a relief frame, as in the case of the example that I reproduced using the shadow box (<a href="http://s.muz.li/YmRhYjU4ODY0?fbclid=IwAR1Ge24Mw_o72ZaxoTr3aPakj3RdhNQ5MZO_d1oOZZ4hhPSs3Qd0D5e_SsA">Neumorphism.io</a>).
</p>
</div>
</div>
<div class="row">
<div class="col-12">
<h5>TEXT LAYOUT</h5>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p>
The larger the plate and the more letters an inscription contained, the higher the cost. For this reason, even in the case of public inscriptions, the spaces were expertly used and reduced to a minimum, without however neglecting the clarity.
Two key stages were involved in the production of inscriptions: first, the arranging of the text on the stone’s surface (the <em>ordinatio</em>) and, second, the actual carving of the text (<em>sculptio</em>).
In the <em>ordinatio</em> the stonecutter would use an L-shaped carpenter’s square and measure stick to ensure that the inscribed field was as near to a true rectangle as possible. Then the surface was slightly scratched in order to create vertical lines that delimited the surface and horizontal lines, in pairs, which were used to delimit the letters.
</p>
</div>
</div>
<div class="row">
<div class="col-12">
<h5>LETTERS AND ENGRAVING TECHNIQUES</h5>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-12 d-flex align-items-start">
<img src="images/Sant'Apollinare-inscription_of_Marcus_Appuleius.jpg" alt="roman inscription" class="img-fluid rounded">
</div>
<div class="col-md-8 col-sm-12">
<p>The basic technique of inscribing a text on stone involved the use of a wooden-headed mallet and an iron chisel, or usually a variety of chisels. To give the idea of an engraved text I used the text-shadow property.</p>
<P>During the reign of Agustus the lettering that is known as “monumental square capitals” (<em>scriptura monumentalis</em> or <em>capitales quadratae</em>) started to become widespread.
The letters are characterized by harmony, tendency to geometrize the shape, right angles and regular proportion between height and width, elegant apexes and search for pleasant chiaroscuro effects.
To reproduce the resemblance, I chose <a href="https://fonts.google.com/specimen/Cinzel" target="_blank">Cinzel</a> typeface, inspired in first century roman inscriptions, and based on classical proportions.
Cursive writing was typical of private writing such as letters and graffiti and was practiced mainly on other types of materials. However, there is no lack of examples of the use of some cursive characters within texts engraved in capital writing. In this case I used <a href="https://fonts.google.com/specimen/Cinzel+Decorative" target="_blank">Cinzel Decorative</a>.
</p>
</div>
</div>
<div class="row">
<div class="col-12">
<h5>visibility</h5>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-12 d-flex align-items-start">
<img src="images/rubricatura.jpg" alt="roman inscription" class="img-fluid rounded">
</div>
<div class="col-md-8 col-sm-12">
<p>
After carving a text, the stonecutter might add certain features to aid its legibility or, at the very least, its visibility, especially in case the inscriptions were hanging on a wall.
In general, in longer texts, paragraphing and layout helped readers or viewers make better sense of the overall architecture of the text.</p>
<P>Two more “colorful” ways to aid visibility were the <em>rubricatura</em> and the use of “mobile letters”.
The first case was the application of cinnabar (<em>minium</em>) to pick out the letters in red, which as a result came to be known as <em>litterae rubricatae</em>. I used it for small headers, bold and link.
The second was a technique that consisted of engraving a wide and deep groove for each letter on the surface, inside which mobile letters made of metal (bronze, gilded bronze, but also gold) were fixed. I reproduced this technique for the headings of the header, using the gold color and the text-shadow to make the text appear slightly raised.</P>
<p>Moreover, sometimes individual letters or groups of letters were surmounted by a horizontal line, which served to indicate to the reader the abbreviation character. I decided to use this feature for link decoration instead of the classic underline.
Interpuncts helped indicate where one word ended and the next one began when the <em>scriptio</em> continua was used (a style of writing without spaces). Triangles were the most common form, and I used them for unordered list.
</p>
</div>
</div>
<div class="row">
<div class="col-12">
<h5>images</h5>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-12 d-flex align-items-start">
<img src="images/relif.jpg" alt="roman inscription" class="img-fluid rounded">
</div>
<div class="col-md-8 col-sm-12">
<p>
The figures represented inside inscriptions were very often made in relief. For this reason, I used box-shadow to create a similar effect.
</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-12">
<h6>BIBLIOGRAPHY AND SITOGRAPHY</h6>
<ul>
<li>A. Buonopane, <em>Manuale di epigrafia latina</em>, Roma 2013.</li>
<li><a href="https://www.academia.edu/9578796/_Inscribing_Roman_Texts_Officinae_Layout_and_Carving_Techniques_in_The_Oxford_Handbook_of_Roman_Epigraphy_eds._C._Bruun_and_J._Edmondson._New_York_and_Oxford_Oxford_University_Press_2015_2014_ch._7_pp._111-130_">The Oxford Handbook of ROMAN EPIGRAPHY</a></li>
<li><a href="https://en.wikipedia.org/wiki/Epigraphy#Latin_inscriptions">Latin Inscriptions, Wikipedia</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12">
<h6>Image credits</h6>
<ul>
<li>Cover: Photo by Emiliano Cicero on Unsplash</li>
<li>Roman Theme Background: Photo by Augustine Wong on Unsplash</li>
<li><a href="https://commons.wikimedia.org/w/index.php?curid=34367548" target="_blank">First image</a>: Di Livioandronico2013 - Opera propria, CC BY-SA 4.0</li>
<li><a href="https://commons.wikimedia.org/w/index.php?curid=9937241" target="_blank">Second image</a>: Di © Matteo Ianeselli / Wikimedia Commons, CC BY-SA 3.0</li>
<li><a href="https://bollettinodiarcheologiaonline.beniculturali.it/wp-content/uploads/2018/12/2016_3-4_Contino_DAlessandro-.pdf" target="_blank">Third image</a>: Photo A. BETORI – A. CORRAO</li>
<li><a href="http://www.museionline.info/musei/museo-archeologico-di-milano" target="_blank">Fourth image</a>: http://www.museionline.info/</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 2-->
<div class="modal fade modalDoc" id="modal2" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="#modal2Label" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="modal2Label">Bauhaus</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<p>
We decided to select for the time period of the first part of the XX century the typographical style of the Bauhaus, as this art school influnced in a consistent way its time:
It's complete name was <em>Staatliches Bauhaus</em>, an art school and design movement active in Germany from 1919 to 1933, started by Walter Gropius. It was strongly related to the <b>functctionalism</b> and the <b>rationalism</b></p>
<p> The artist movement of the Bauhaus was the heir of the pre-war avant-garde movement, related to the Industrial Revolution and the cultural field taht took place in Europe around the 1800. One of its main purpose was a new educative method that was able to connect art and handicraft and to integrate in the functionalism of the industry.
</p>
</div>
</div>
<div class="row">
<div class="col-12">
<h5>Style and Simplicity</h5>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-12 d-flex flex-wrap">
<img src="images/Bauhaus_logo.png" class="img-fluid rounded pb-1">
<img src="images/spaces.jpg" class="img-fluid rounded">
</div>
<div class="col-md-8 col-sm-12">
<p> We decided to reproduce the Bauhaus Style basing on its basic and essential structures and forms. We paid particular attention to the idea related to the geometrical uses of the spaces, the geometrical forms and the attentive selection of the primary colors of this style. Architecture and design were the main disciplines of this school.</p>
<p>The basic background we choosen it's an image of paper ruined by water from which we changed the attribute color in sepia, in order to underline the idea of antique paper.
We took this image from Unsplash.
</p>
</div>
</div>
<div class="row">
<div class="col-12">
<h5>LAYOUT AND COLORS</h5>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-12 d-flex align-items-start">
<img src="images/primary.png" class="img-fluid rounded">
</div>
<div class="col-md-8 col-sm-12">
<p>The colors selected are taken from the Bauhaus Style idea of primary colors, we concentrated particularly on <b>red</b>, <b>white</b> and <b>black</b>. The exact code of the red we selecte is #FF0000, while for the links we selected another grade of red, which is #B22222, in order to distinguish the links already checked.</p>
<p>The space was regulated through the use of fixed flexboxes aligned in the extreme right(flex-end) or left(flex-end) of the page, and we decided to rotate the title and to add some geometrical shapes to the borders in order to mark the idea of the space's schematism.
The interline was placed at 1.8 also to respect the organisation of the spaces.</p>
</div>
</div>
<div class="row">
<div class="col-12">
<h5>FONT</h5>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-12 d-flex align-items-start">
<img src="images/ABayer.png" class="img-fluid rounded">
</div>
<div class="col-md-8 col-sm-12">
<p>For the font our choice was the Righteous font, a geometrical and grid based typographical style, inspired by the all capitals letterforms from the deco posters of Hungarian artist Robert Berény for Modiano (1930). This artist operated in the Bauhaus's period and was strongly influenced by this movement, so we recognized in this font some of thr characteristic of the typhographical style of the Bauhaus: the attention to the space, the serif and coursive decorativeness, the shapes inspired to the capital letters and the bold appearance.</p>
</div>
</div>
<div class="row">
<div class="col-12">
<h5>IMAGES</h5>
</div>
</div>
<div class="row">
<p>
The images are shown in black and white and are considered part of the designing structure of the page. They are placed with the technique of flexboxes at the flex-start of the page, on the opposite side of the p elements. The result is a nice formed and shaped space similar to a chessboard.
</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-12">
<h6>BIBLIOGRAPHY AND SITOGRAPHY</h6>
<ul>
<li> Wikipedia - https://it.wikipedia.org/wiki/Bauhaus</li>
<li> Treccani - http://www.treccani.it/enciclopedia/bauhaus/</li>
<li> ilPost- https://www.ilpost.it/2019/04/01/bauhaus-100-anni/</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12">
<h6>Image credits</h6>
<ul>
<li><a href="https://mail.google.com/mail/u/0/#inbox/KtbxLzfldxWWVnHmFzjRNzZhxrKQZrtfsq" target="_blank">Presentation</a>- Photo by Ross Sokolovski on Unsplash</li>
<li><a href="https://unsplash.com/photos/xvU-X0GV9-o" target="_blank">Background</a> - Photo by Annie Spratt on Unsplash</li>
<li>Staatliches Bauhaus Weimar 1919-1923 — Lazlo Moholy-Nagy. From History of graphic design.<a href="https://creativecommons.org/licenses/by-sa/2.5/deed.en" target="_blank">Creative Commons Attribution-Share Alike 2.5 Generic</a></li>
<li>Signet of the Staatliche Bauhaus, designed by Oskar Schlemmer and used from 1922 (Wingler, Hans M.; Wolfgang Jabs and Basil Gilbert, transl. (1969) [1962] Joseph Stein , ed. Bauhaus: Weimar, Dessau, Berlin, Chicago, Cambridge: MIT Press ISBN: 0-262-23033-X. )</li>
<li>Johannes Itten, Farbkreis.</li>
<li>Herbert Bayer, architype bayer, 1927, il redesign by Freda Sack and David Quay, 1997. <a href="https://creativecommons.org/licenses/by-sa/2.5/deed.en" target="_blank">Creative Commons Attribution-Share Alike 2.5 Generic</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 3-->
<div class="modal fade modalDoc" id="modal3" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="#modal1Label" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="modal3Label">Keith Haring</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<p>
Keith Haring was an American artist whose pop art and graffiti art grew out of the New York City street culture of the 1980s. In the context of the Street and Graffiti Art Movement he brought elements of popular culture, considered as "low art", into the formerly exclusive "high art" spaces of museums and galleries. He mostly employed bright and artificial colors and kept imagery accessible in order to grab the eyes and minds of viewers and get them both to enjoy themselves and to engage with important topics such as AIDS, drug addiction, illicit love, and apartheid.
</p>
</div>
</div>
<div class="row">
<div class="col-12">
<h5>Background and Space</h5>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-12 d-flex align-items-start">
<img src="images/subway_08.jpg" alt="drawing" class="img-fluid rounded">
</div>
<div class="col-md-8 col-sm-12">
<p>
<cite>"One day, riding the subway, I saw this empty black panel where an advertisement was supposed to go. I immediately realized that this was the perfect place to draw.</cite> Struck by this anecdote, I decided to draw inspiration from Haring's first period of activity, that of the subway environment. So, the background of the article is of a black (#0D0D0D) slightly modified to mimic the empty advertisement space, and almost everything else is of a gray almost white (#F9F9F9) as chalk. The space is exploited in an irregular way in its entirety. For this reason, the spaces between elements are reduced to a minimum.
</p>
</div>
</div>
<div class="row">
<div class="col-12">
<h5>Handwriting</h5>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-12 d-flex align-items-start">
<img src="images/handwriting_examples.jpg" alt="drawing" class="img-fluid rounded">
</div>
<div class="col-md-8 col-sm-12">
<p>
Haring's commitment to clean lines and simple images is reproduced in the selected typefaces and the frames that often delimit spaces.
For typefaces I took inspiration from his handwriting, simple and very clear:</p>
<ul>
<li>For the headings I used a font that recreates an hallow space inside the border of the letter (and the filled version for smaller ones): <a href="https://www.1001fonts.com/just-a-dream-font.html#styles" target="_blank">justadream_hollow.ttf</a></li>
<li>For the main part of the text I used <a href="https://fonts.google.com/specimen/Walter+Turncoat?selection.family=Walter+Turncoat" target="_blank">Walter Turncoat</a>, a handwritten font with irregular border that evokes of a chalky writing.</li>
<li>And finally <a href="https://fonts.google.com/specimen/La+Belle+Aurore?selection.family=La+Belle+Aurore" target="_blank">La Belle Aurore</a> for the caption of the images to mimic Haring’s signature.</li>
</ul>
<p>To better give off the idea of handwriting I also applied a small inclination to the main text, as if it is really written on a wall standing and played with the border-radius property to simulate irregular borders (<a href="https://9elements.github.io/fancy-border-radius/" target="_blank">simulator</a>).</p>
</div>
</div>
<div class="row">
<div class="col-12">
<h5>Colors</h5>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-12 d-flex align-items-start">
<img src="images/colori.jpg" alt="drawing" class="img-fluid rounded">
</div>
<div class="col-md-8 col-sm-12">
<p>
Looking at his works, the will to use fresh and vivid colors is clear. For this reason, despite my choice of black and white, I decided to insert some colors (taken the image on the left) with specific purposes: #0E93B2 for links and #FE0471 for bold. For the same reasons, the images have been modified with the filter: hue-rotate() property, in order to represent bright colors that doesn’t correspond to real-life subjects.
</p>
</div>
</div>
<div class="row">
<div class="col-12">
<h5>Movement</h5>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-12 d-flex align-items-start">
<img src="images/editions86_p62b.jpg" alt="drawing" class="img-fluid rounded">
</div>
<div class="col-md-8 col-sm-12">
<p>
Movement is one of the main characteristics that define the subjects that populate his creations and is visually reproduced with curved lines around the figures.
For this reason, I have made several choices.</p>
<ol>
<li>Images and blockquotes shake when you pass the mouse over them thanks to an animation keyframe that I took from <a href="https://animista.net/">animista.net</a>.</li>
<li>With the same mouse action, links enlarge and display a wavy underline.</li>
<li>I used a vectorial icon from <a href="https://fontawesome.com/" target="_blank">Font Awsome</a> for the <hr> element and <ul> elements.</li>
</ol>
</div>
</div>
<hr>
<div class="row">
<div class="col-12">
<h6>SITOGRAPHY</h6>
<ul>
<li><a href="https://www.theartstory.org/artist/haring-keith/" target="_blank">Keith Haring from The Art Story site</a></li>
<li><a href="http://www.haring.com/" target="_blank">Keith Haring Foundation Official Website</a></li>
<li><a href="https://en.wikipedia.org/wiki/Keith_Haring" target="_blank">Keith Haring, Wikipedia</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12">
<h6>Image credits</h6>
<ul>
<li>Cover: Photo credit: Thibaut Fleuret on VisualHunt.com / CC BY-NC-SA</li>
<li><a href="http://www.haring.com/!/art-work/485#.XkwItShKjD4" target="_blank">Keith Haring theme background</a></li>
<li><a href="http://www.haring.com/!/art-work/40#.XkxuBChKjD4" target="_blank">First photo</a>: Keith Haring Foundation</li>
<li><a href="http://www.haring.com/!/art-work/572#.XkxuoihKjD4" target="_blank">Second photo</a>: Keith Haring Foundation</li>
<li><a href="http://www.haring.com/!/art-work/768#.Xkxu8ChKjD4" target="_blank">Third photo</a>: Keith Haring Foundation</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 4-->
<div class="modal fade modalDoc" id="modal4" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="#modal4Label" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="modal4Label">Future</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<p> In our idea we percived a possible futuristic scenario in which there will not be necessary to have a physical device for accessing internet and other functiones nowadays only available through devices(PC, tablets, smartphones...).
All these functions would be olographically generated by a microchip placed in your cornea that you could access easily with some tactile sensations related to environment around you. For example to activate an olographich surface from which you could read an article you just have to open your hand in front of you and to connect to the browser.
</p>
</div>
</div>
<div class="row">
<div class="col-12">
<h5>Style and Idea</h5>
</div>
</div>
<div class="col-sm-12">
<p> In this template we used an image taken from Flickr in which is shown an open hand and in which we have placed a transparent and fixed central background for the articles.
The color of the background is light red, in code border: 5px solid rgba(185, 73, 73, 0.7);, while the color of the font is white. There is also a little animation that changes the colors of the container of the text.
For the different tags we selected shades from red to white.
</p>
<p> The font family we used is called Neucha, it seems similar to handwritten text. In the future we think that the handwritten fonts would be really popular as nobody would be able to write anymore and so a style like that would be cosidered vintage and fancy. </p>
<p>The image shape is quite circular as well as the shape of the text contaire, because we thought that this would be the shape of the future. Moreover when the mause is over the images, they have a little animation and they enlarge. </p>
</div>
</div>
<div class="row">
<div class="col-12">
<h6>Image credits</h6>
<ul>
<li><a href="https://unsplash.com/photos/xU5Mqq0Chck" target="_blank">Presentation</a>- Photo by Drew Beamer on Unsplash</li>
<li><a href="">Background</a>- Mucky hand by Jayne on Flickr, license <a href="https://creativecommons.org/licenses/by-nc/2.0/" target="_blank">Creative Commons</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--- End Documentation Section -->
<!-- Disclaimer Modal -->
<div class="modal" id="disclaimerModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Disclaimer</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>The 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 Degree in Digital
Humanities and Digital Knowledge of the University of Bologna, under prof. Fabio
Vitali.
</p>
<p>
The documents contained in this web site have been selected for their length and
complexity among the best picks of 2018 of www.longreads.com. Their
publication here is not intended to be an alternative or replace their original
locations:
<ol>
<li> Pressler, Jessica. "Maybe She Had So Much Money She Just Lost Track of It". The Cut, 28th May 2018: <a href=" https://www.thecut.com/2018/05/how-anna-delvey-tricked-new-york.html" target="_blank"> https://www.thecut.com/2018/05/how-anna-delvey-tricked-new-york.html</a></li>
<li> Perry, Imani. "As Goes the South, so Goes the Nation". Harpers, July 2018: <a href="https://harpers.org/archive/2018/07/as-goes-the-south-so-goes-the-nation/" target="_blank">https://harpers.org/archive/2018/07/as-goes-the-south-so-goes-the-nation/</a></li>
<li> Miller, Carl. "God is in the machine". Times Literary Supplement: <a href="https://www.the-tls.co.uk/articles/ridiculously-complicated-algorithms/" target="_blank">https://www.the-tls.co.uk/articles/ridiculously-complicated-algorithms/</a></li>
<li> Fukada, Shiho. "Japan's Prisons Are a Haven for Elderly Women". Bloomberg, 16th March 2018:<a href="https://www.bloomberg.com/news/features/2018-03-16/japan-s-prisons-are-a-haven-for-elderly-women" target="_blank">https://www.bloomberg.com/news/features/2018-03-16/japan-s-prisons-are-a-haven-for-elderly-women</a></li>
<li> Fagone, Jason. "Jerry and Marge Go Large". The Huffington Post: <a href="https://highline.huffingtonpost.com/articles/en/lotto-winners/" target="_blank">https://highline.huffingtonpost.com/articles/en/lotto-winners/</a></li>
<li> "L 125/75, DIRECTIVE 2009/41/EC OF THE EUROPEAN PARLIAMENT AND OF THE COUNCIL of 6 May 2009 on the contained use of genetically modified micro-organisms": <a href=" https://eur-lex.europa.eu/legal-content/it/TXT/?uri=CELEX:32009L0041" target="_blank"> https://eur-lex.europa.eu/legal-content/it/TXT/?uri=CELEX:32009L0041</a></li>
</ol>
<p>
All copyrights and related rights on the content remain with their original owners.
All copyright on the typographic and layout choices are 2019 © XY
</p>
</div>
</div>
</div>
</div>
<!--- Start Contact Section -->
<div id="contact" class="offset">
<footer>
<div class="row justify-content-center bg-dark pt-1">
<div class="col-md-5 text-center">
<p><strong>Contact Details</strong></p>
<p>Università di Bologna<br>
Via Zamboni 33<br>
40126 Bologna, Italy</p>
<p>[email protected]<br>[email protected]</p>
<a href="https://www.facebook.com/DHDK.unibo/" target="_blank"><i class="fab fa-facebook-square"></i></a>
<a href="" target="_blank"><i class="fab fa-twitter-square"></i></a>
</div>
<hr class="socket">
<p>© MIMIC_LAB - Milena Corbellini, Giulia Renda.</p>
</div> <!-- End of Row -->
</footer>
</div>
<!--- End Contact Section -->
<!--- Script Source Files -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/releases/v5.12.1/js/all.js"></script>
<!--- End of Script Source Files -->
</body>
</html>