brief
parent
6dc0f3bde8
commit
d12ba96c98
@ -0,0 +1,88 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link href="style.css" rel="stylesheet" type="text/css">
|
||||||
|
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
|
||||||
|
<!-- <link href="interface-polyfill-master/interface.css" rel="stylesheet" type="text/css"> -->
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>A Brief Glossary of Glossaries</title>
|
||||||
|
<!-- <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script> -->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<di class="container">
|
||||||
|
<div class="info">
|
||||||
|
<h1>A Brief Glossary <br> of Glossaries</h1>
|
||||||
|
<div class="horizontal_line"></div>
|
||||||
|
<h2>Sequence/Loop:</h2>
|
||||||
|
<img src="images/glossary.gif">
|
||||||
|
<div class="horizontal_line"></div>
|
||||||
|
<h2>Context:</h2>
|
||||||
|
<p>
|
||||||
|
Glossaries are common elements inside books. They exist to clarify terminology, describe words, or give explanations. They create meaning and sense of the very base of a book. By explaining specific words within its context, each description makes part of the book's ground. They build up the soil to step on, without being the path to walk through. Glossaries don't guide the reader, glossaries accompany the reader.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Typically, glossaries use the same structure, a list of terms in alphabetical order placed at the beginning, or the end of a book. A common structure, I assume, makes it easier to access. At first sight, being the reader companion, a glossary can't be cryptic, it needs to be crystal clear. Then, it follows an order because it aims to communicate accurately. It wants to be useful for the reader.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
The etymology of the word glossary comes from the Latin term 'gloss' that means 'annotation', but also 'layer' in English. It suggests that a glossary may also be seen as the layer of the book that accompanies the reader by giving notes. The glossary as a 'layer of annotations'.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
I understand annotations as small gestures from the reader to the text. In the form of notes or short explanations, it is an act that makes a strong connection between them both. I think that, by annotating, the reader is giving back something to the text. The notes on the margins of a book expand the text by introducing new information that didn't exist before, but furthermore, give new thought to it.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
To me, the annotated thought inside the margins of the book becomes a conversation between the reader and the text. A conversation I like to think happens as an intimate act of reciprocity. Intimate because it appears from a close encounter, and reciprocal because both are giving from themselves to each other.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
However, seeing the glossary as a layer of annotations that come from an act of reciprocity and not just as a static list of terms, brings up ideas about its possibilities. Or at least questions about its tradicional structure.
|
||||||
|
</p>
|
||||||
|
<div class="horizontal_line"></div>
|
||||||
|
<h2>Diagram:</h2>
|
||||||
|
<img src="images/glossarymap.jpeg">
|
||||||
|
|
||||||
|
<div class="horizontal_line"></div>
|
||||||
|
<h2> Workshop: </h2>
|
||||||
|
<p>
|
||||||
|
On October of 2021, I proposed a quick collective workshop to creates'a glossary of glossaries' to explore this different perceptive of glossaries. This workshop took place at the library Leeszaal in Rotterdam as part of an event called Aquarium 1.0, which shared our final researches as XPUB master students. The idea was to propose an exploration of glossaries by searching for glossaries in the library, writing down words that pop up from reflecting about their structure, and collectively making annotations on them.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
During the workshop, some of the questions proposed to reflect on brought to light different aspects of the traditional glossary structure, like: How a vertical and closed structure of terminology can be conceived as a horizontal and open one? What is the voice of these annotations on the words, who is speaking? What does it mean conceptually to write down a list of terms, words, and explanations? If an annotation is seen as an act of reciprocity what can it explicitly say or look like?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
The workshop gave some options for the answer but also brought more questions that explore the idea of the language. When constructing knowledge, how to not prioritize written language? or Why when creating them there is a domination of monolingualism?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Overall, I understood that there is space in the glossary structure to experiment with from different approaches. For me, behind this common structure, there is most of all a lack of diversity. Conversations, thoughts, and notes are diverse. They can be slow and quiet but also laud and messy, and everything in between. I understand that being the reader companion, a glossary aims for clear communication, but I believe there are multiple types of company and threfore communication.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
The multiplicity and diverse approach of the glossaries may explore more than the design. Playing with typographies or layouts is just one of the possibilities. After the workshop experience, I think that some interesting experiments would be exploring different hierarchies than the alphabetical, or annotating in different languages even with non-written ones, or even changing the location inside the book; what if it exists across the book? What if is made collectively, will make the glossary as the actual result of a conversation?
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="vertical_line"></div>
|
||||||
|
<div class="pictures">
|
||||||
|
<h2>Vertical list: </h2>
|
||||||
|
<img src="images/word 1.jpeg">
|
||||||
|
<img src="images/word 2.jpeg">
|
||||||
|
<img src="images/word 3.jpeg">
|
||||||
|
<img src="images/word 4.jpeg">
|
||||||
|
<img src="images/word 5.jpeg">
|
||||||
|
<img src="images/word 6.jpeg">
|
||||||
|
<img src="images/word 7.jpeg">
|
||||||
|
<img src="images/word 8.jpeg">
|
||||||
|
<img src="images/word 9.jpeg">
|
||||||
|
<img src="images/word 10.jpeg">
|
||||||
|
<img src="images/word 11.jpeg">
|
||||||
|
<img src="images/word 12.jpeg">
|
||||||
|
<img src="images/word 13.jpeg">
|
||||||
|
<img src="images/word 14.jpeg">
|
||||||
|
<img src="images/word 15.jpeg">
|
||||||
|
<img src="images/word 16.jpeg">
|
||||||
|
<div class="horizontal_line"></div>
|
||||||
|
<h2>Pile:</h2>
|
||||||
|
<img src="images/word 17.jpeg">
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,256 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: Fluxisch;
|
||||||
|
src: url(fonts/FLuxisch_ElseWeb_font/FluxischElse-Regular.woff);
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: Fluxisch_bold;
|
||||||
|
src: url(fonts/FLuxisch_ElseWeb_font/FluxischElse-Bold.woff);
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: Junicode;
|
||||||
|
src: url(fonts/Junicode.ttf);
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: syne-italic;
|
||||||
|
src: url(fonts/Syne-Italic.otf);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
body{
|
||||||
|
/* background-color: red; */
|
||||||
|
background-color: #eeecf0;
|
||||||
|
margin: 0;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
will-change: overflow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
overflow: auto;
|
||||||
|
height: auto;
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pictures{
|
||||||
|
overflow: auto;
|
||||||
|
height: auto;
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vertical_line {
|
||||||
|
border-left: 2.5px solid red;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.horizontal_line{
|
||||||
|
border-bottom: 2.5px solid red;
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-top: 0.5vh;
|
||||||
|
margin-bottom: 0.5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
margin-left: 1.5vw;
|
||||||
|
margin-top: 3vh;
|
||||||
|
margin-bottom: 3vh;
|
||||||
|
font-family: syne-italic;
|
||||||
|
font-size: 5vw;
|
||||||
|
line-height: 5.5vw;
|
||||||
|
color: #2e1d69;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.5vw;
|
||||||
|
margin: 0;
|
||||||
|
margin-left: 1vw;
|
||||||
|
margin-top: 0;
|
||||||
|
text-decoration: underline;
|
||||||
|
font-family: Fluxisch;
|
||||||
|
line-height: 25pt;
|
||||||
|
color: #2e1d69;
|
||||||
|
}
|
||||||
|
|
||||||
|
p{
|
||||||
|
text-indent: 2em;
|
||||||
|
font-family: Fluxisch;
|
||||||
|
font-size: 1.5vw;
|
||||||
|
margin-left: 1vw;
|
||||||
|
margin-right: 2vw;
|
||||||
|
line-height: 2.7vh;
|
||||||
|
color: #2e1d69;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* @media print{
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 25pt;
|
||||||
|
margin: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
font-family: syne-italic;
|
||||||
|
line-height: 25pt;
|
||||||
|
color: #2e1d69;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 25pt;
|
||||||
|
margin: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
font-family: Fluxisch;
|
||||||
|
line-height: 25pt;
|
||||||
|
color: #2e1d69;
|
||||||
|
}
|
||||||
|
|
||||||
|
p{
|
||||||
|
text-indent: 2em;
|
||||||
|
font-family: Fluxisch;
|
||||||
|
font-size: 10pt;
|
||||||
|
margin-right: 2vw;
|
||||||
|
line-height: 10.5pt;
|
||||||
|
color: #2e1d69;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
will-change: overflow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
overflow: auto;
|
||||||
|
height: auto;
|
||||||
|
position: sticky;
|
||||||
|
width: 70%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pictures{
|
||||||
|
overflow: auto;
|
||||||
|
height: auto;
|
||||||
|
width: 30%;
|
||||||
|
margin: 0.5vh;
|
||||||
|
margin-top: 0;
|
||||||
|
height: 100%;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@page {
|
||||||
|
size: A5;
|
||||||
|
margin-top: 5mm;
|
||||||
|
margin-bottom: 5mm;
|
||||||
|
margin-left: 10mm;
|
||||||
|
margin-right: 5mm;
|
||||||
|
} */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 1000px) {
|
||||||
|
|
||||||
|
.container{
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
display: block;
|
||||||
|
height: auto;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.pictures{
|
||||||
|
display: block;
|
||||||
|
height: auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vertical_line {
|
||||||
|
border-top: 2.5px solid red;
|
||||||
|
border-left: 0;
|
||||||
|
margin-top: 1.5vh;
|
||||||
|
margin-bottom: 1.5vh;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.horizontal_line{
|
||||||
|
margin-top: 1.5vh;
|
||||||
|
margin-bottom: 1.5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin-top: 1.5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
margin-left: 5vw;
|
||||||
|
margin-top: 3vh;
|
||||||
|
margin-bottom: 3vh;
|
||||||
|
font-family: syne-italic;
|
||||||
|
font-size: 12.5vw;
|
||||||
|
line-height: 13.5vw;
|
||||||
|
color: #2e1d69;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 4vw;
|
||||||
|
margin: 0;
|
||||||
|
margin-left: 5vw;
|
||||||
|
margin-top: 0;
|
||||||
|
text-decoration: underline;
|
||||||
|
font-family: Fluxisch;
|
||||||
|
line-height: 25pt;
|
||||||
|
color: #2e1d69;
|
||||||
|
}
|
||||||
|
|
||||||
|
p{
|
||||||
|
text-indent: 2em;
|
||||||
|
font-family: Fluxisch;
|
||||||
|
font-size: 4vw;
|
||||||
|
margin-left: 4.5vw;
|
||||||
|
margin-right: 4.5vw;
|
||||||
|
line-height: 4.4vw;
|
||||||
|
color: #2e1d69;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 953 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 597 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 413 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 538 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 555 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 428 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 698 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 622 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 386 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 371 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 363 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 358 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 383 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 420 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 620 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 501 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 407 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 560 KiB |
@ -0,0 +1,88 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link href="style.css" rel="stylesheet" type="text/css">
|
||||||
|
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
|
||||||
|
<!-- <link href="interface-polyfill-master/interface.css" rel="stylesheet" type="text/css"> -->
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>A Brief Glossary of Glossaries</title>
|
||||||
|
<!-- <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script> -->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<di class="container">
|
||||||
|
<div class="info">
|
||||||
|
<h1>A Brief Glossary <br> of Glossaries</h1>
|
||||||
|
<div class="horizontal_line"></div>
|
||||||
|
<h2>Sequence/Loop:</h2>
|
||||||
|
<img src="images/glossary.gif">
|
||||||
|
<div class="horizontal_line"></div>
|
||||||
|
<h2>Context:</h2>
|
||||||
|
<p>
|
||||||
|
Glossaries are common elements inside books. They exist to clarify terminology, describe words, or give explanations. They create meaning and sense of the very base of a book. By explaining specific words within its context, each description makes part of the book's ground. They build up the soil to step on, without being the path to walk through. Glossaries don't guide the reader, glossaries accompany the reader.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Typically, glossaries use the same structure, a list of terms in alphabetical order placed at the beginning, or the end of a book. A common structure, I assume, makes it easier to access. At first sight, being the reader companion, a glossary can't be cryptic, it needs to be crystal clear. Then, it follows an order because it aims to communicate accurately. It wants to be useful for the reader.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
The etymology of the word glossary comes from the Latin term 'gloss' that means 'annotation', but also 'layer' in English. It suggests that a glossary may also be seen as the layer of the book that accompanies the reader by giving notes. The glossary as a 'layer of annotations'.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
I understand annotations as small gestures from the reader to the text. In the form of notes or short explanations, it is an act that makes a strong connection between them both. I think that, by annotating, the reader is giving back something to the text. The notes on the margins of a book expand the text by introducing new information that didn't exist before, but furthermore, give new thought to it.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
To me, the annotated thought inside the margins of the book becomes a conversation between the reader and the text. A conversation I like to think happens as an intimate act of reciprocity. Intimate because it appears from a close encounter, and reciprocal because both are giving from themselves to each other.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
However, seeing the glossary as a layer of annotations that come from an act of reciprocity and not just as a static list of terms, brings up ideas about its possibilities. Or at least questions about its tradicional structure.
|
||||||
|
</p>
|
||||||
|
<div class="horizontal_line"></div>
|
||||||
|
<h2>Diagram:</h2>
|
||||||
|
<img src="images/glossarymap.jpeg">
|
||||||
|
|
||||||
|
<div class="horizontal_line"></div>
|
||||||
|
<h2> Workshop: </h2>
|
||||||
|
<p>
|
||||||
|
On October of 2021, I proposed a quick collective workshop to creates'a glossary of glossaries' to explore this different perceptive of glossaries. This workshop took place at the library Leeszaal in Rotterdam as part of an event called Aquarium 1.0, which shared our final researches as XPUB master students. The idea was to propose an exploration of glossaries by searching for glossaries in the library, writing down words that pop up from reflecting about their structure, and collectively making annotations on them.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
During the workshop, some of the questions proposed to reflect on brought to light different aspects of the traditional glossary structure, like: How a vertical and closed structure of terminology can be conceived as a horizontal and open one? What is the voice of these annotations on the words, who is speaking? What does it mean conceptually to write down a list of terms, words, and explanations? If an annotation is seen as an act of reciprocity what can it explicitly say or look like?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
The workshop gave some options for the answer but also brought more questions that explore the idea of the language. When constructing knowledge, how to not prioritize written language? or Why when creating them there is a domination of monolingualism?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Overall, I understood that there is space in the glossary structure to experiment with from different approaches. For me, behind this common structure, there is most of all a lack of diversity. Conversations, thoughts, and notes are diverse. They can be slow and quiet but also laud and messy, and everything in between. I understand that being the reader companion, a glossary aims for clear communication, but I believe there are multiple types of company and threfore communication.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
The multiplicity and diverse approach of the glossaries may explore more than the design. Playing with typographies or layouts is just one of the possibilities. After the workshop experience, I think that some interesting experiments would be exploring different hierarchies than the alphabetical, or annotating in different languages even with non-written ones, or even changing the location inside the book; what if it exists across the book? What if is made collectively, will make the glossary as the actual result of a conversation?
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="vertical_line"></div>
|
||||||
|
<div class="pictures">
|
||||||
|
<h2>Vertical list: </h2>
|
||||||
|
<img src="images/word 1.jpeg">
|
||||||
|
<img src="images/word 2.jpeg">
|
||||||
|
<img src="images/word 3.jpeg">
|
||||||
|
<img src="images/word 4.jpeg">
|
||||||
|
<img src="images/word 5.jpeg">
|
||||||
|
<img src="images/word 6.jpeg">
|
||||||
|
<img src="images/word 7.jpeg">
|
||||||
|
<img src="images/word 8.jpeg">
|
||||||
|
<img src="images/word 9.jpeg">
|
||||||
|
<img src="images/word 10.jpeg">
|
||||||
|
<img src="images/word 11.jpeg">
|
||||||
|
<img src="images/word 12.jpeg">
|
||||||
|
<img src="images/word 13.jpeg">
|
||||||
|
<img src="images/word 14.jpeg">
|
||||||
|
<img src="images/word 15.jpeg">
|
||||||
|
<img src="images/word 16.jpeg">
|
||||||
|
<div class="horizontal_line"></div>
|
||||||
|
<h2>Pile:</h2>
|
||||||
|
<img src="images/word 17.jpeg">
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,256 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: Fluxisch;
|
||||||
|
src: url(fonts/FLuxisch_ElseWeb_font/FluxischElse-Regular.woff);
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: Fluxisch_bold;
|
||||||
|
src: url(fonts/FLuxisch_ElseWeb_font/FluxischElse-Bold.woff);
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: Junicode;
|
||||||
|
src: url(fonts/Junicode.ttf);
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: syne-italic;
|
||||||
|
src: url(fonts/Syne-Italic.otf);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
body{
|
||||||
|
/* background-color: red; */
|
||||||
|
background-color: #eeecf0;
|
||||||
|
margin: 0;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
will-change: overflow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
overflow: auto;
|
||||||
|
height: auto;
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pictures{
|
||||||
|
overflow: auto;
|
||||||
|
height: auto;
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vertical_line {
|
||||||
|
border-left: 2.5px solid red;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.horizontal_line{
|
||||||
|
border-bottom: 2.5px solid red;
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-top: 0.5vh;
|
||||||
|
margin-bottom: 0.5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
margin-left: 1.5vw;
|
||||||
|
margin-top: 3vh;
|
||||||
|
margin-bottom: 3vh;
|
||||||
|
font-family: syne-italic;
|
||||||
|
font-size: 5vw;
|
||||||
|
line-height: 5.5vw;
|
||||||
|
color: #2e1d69;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.5vw;
|
||||||
|
margin: 0;
|
||||||
|
margin-left: 1vw;
|
||||||
|
margin-top: 0;
|
||||||
|
text-decoration: underline;
|
||||||
|
font-family: Fluxisch;
|
||||||
|
line-height: 25pt;
|
||||||
|
color: #2e1d69;
|
||||||
|
}
|
||||||
|
|
||||||
|
p{
|
||||||
|
text-indent: 2em;
|
||||||
|
font-family: Fluxisch;
|
||||||
|
font-size: 1.5vw;
|
||||||
|
margin-left: 1vw;
|
||||||
|
margin-right: 2vw;
|
||||||
|
line-height: 2.7vh;
|
||||||
|
color: #2e1d69;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* @media print{
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 25pt;
|
||||||
|
margin: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
font-family: syne-italic;
|
||||||
|
line-height: 25pt;
|
||||||
|
color: #2e1d69;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 25pt;
|
||||||
|
margin: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
font-family: Fluxisch;
|
||||||
|
line-height: 25pt;
|
||||||
|
color: #2e1d69;
|
||||||
|
}
|
||||||
|
|
||||||
|
p{
|
||||||
|
text-indent: 2em;
|
||||||
|
font-family: Fluxisch;
|
||||||
|
font-size: 10pt;
|
||||||
|
margin-right: 2vw;
|
||||||
|
line-height: 10.5pt;
|
||||||
|
color: #2e1d69;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
will-change: overflow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
overflow: auto;
|
||||||
|
height: auto;
|
||||||
|
position: sticky;
|
||||||
|
width: 70%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pictures{
|
||||||
|
overflow: auto;
|
||||||
|
height: auto;
|
||||||
|
width: 30%;
|
||||||
|
margin: 0.5vh;
|
||||||
|
margin-top: 0;
|
||||||
|
height: 100%;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@page {
|
||||||
|
size: A5;
|
||||||
|
margin-top: 5mm;
|
||||||
|
margin-bottom: 5mm;
|
||||||
|
margin-left: 10mm;
|
||||||
|
margin-right: 5mm;
|
||||||
|
} */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 1000px) {
|
||||||
|
|
||||||
|
.container{
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
display: block;
|
||||||
|
height: auto;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.pictures{
|
||||||
|
display: block;
|
||||||
|
height: auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vertical_line {
|
||||||
|
border-top: 2.5px solid red;
|
||||||
|
border-left: 0;
|
||||||
|
margin-top: 1.5vh;
|
||||||
|
margin-bottom: 1.5vh;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.horizontal_line{
|
||||||
|
margin-top: 1.5vh;
|
||||||
|
margin-bottom: 1.5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin-top: 1.5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
margin-left: 5vw;
|
||||||
|
margin-top: 3vh;
|
||||||
|
margin-bottom: 3vh;
|
||||||
|
font-family: syne-italic;
|
||||||
|
font-size: 12.5vw;
|
||||||
|
line-height: 13.5vw;
|
||||||
|
color: #2e1d69;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 4vw;
|
||||||
|
margin: 0;
|
||||||
|
margin-left: 5vw;
|
||||||
|
margin-top: 0;
|
||||||
|
text-decoration: underline;
|
||||||
|
font-family: Fluxisch;
|
||||||
|
line-height: 25pt;
|
||||||
|
color: #2e1d69;
|
||||||
|
}
|
||||||
|
|
||||||
|
p{
|
||||||
|
text-indent: 2em;
|
||||||
|
font-family: Fluxisch;
|
||||||
|
font-size: 4vw;
|
||||||
|
margin-left: 4.5vw;
|
||||||
|
margin-right: 4.5vw;
|
||||||
|
line-height: 4.4vw;
|
||||||
|
color: #2e1d69;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue