pagedjs folder

master
Camilo G 2 years ago
parent 9075297745
commit 7a696cc75c

BIN
.DS_Store vendored

Binary file not shown.

@ -4,10 +4,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<!-- <script src="pagedjs/polyfill.js"></script>
<link href="pagedjs/interface.css" rel="stylesheet" type="text/css"> -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Glossary</title> <title>Living Glossary</title>
</head> </head>
<!-- <style> .action-s:hover{color:green;}.situation-s:hover{color:aqua;}.logic-s:hover{color:orange;}.proposition-s:hover{color:blue;}.hyperlink-s:hover{color:pink;}.process-s:hover{color:gray;}.language-s:hover{color:violet;}.agent-s:hover{color:purple;}.tool-s:hover{color:lightblue;}.form-s:hover{color:gold;} </style> -->
<body id="glo_body"> <body id="glo_body">
<div class="head"> <div class="head">
<h1 id="title"> Living Glossary for a Diffractive Publishing Practice </h1> <h1 id="title"> Living Glossary for a Diffractive Publishing Practice </h1>
@ -23,9 +24,7 @@
<p>The current state of the glossary was made during different workshop sessions were practitioners are invited to question, reflect and diffract on the current publishing practice. Based on the previous state of the glossary, this sessions are called Rumination Sessions as a performance of multiple digestion. The participants added new entries, annotated on previous ones, highlighted snippets of it, bring up questions. The process aims to re-think and create collectively every word definition as a layering of annotations. Unlike traditional glossaries, in this glossary words are open to interpretation, expansion and mostly transformation. </p> <p>The current state of the glossary was made during different workshop sessions were practitioners are invited to question, reflect and diffract on the current publishing practice. Based on the previous state of the glossary, this sessions are called Rumination Sessions as a performance of multiple digestion. The participants added new entries, annotated on previous ones, highlighted snippets of it, bring up questions. The process aims to re-think and create collectively every word definition as a layering of annotations. Unlike traditional glossaries, in this glossary words are open to interpretation, expansion and mostly transformation. </p>
</div> </div>
<div id="legend" class="legend"></div> <div id="legend" class="legend"></div>
<div id="words" class="words"> <div id="words" class="words"></div>
</div>
</div> </div>
</body> </body>
<script src="main.js"></script> <script src="main.js"></script>

@ -0,0 +1,181 @@
/* CSS for Paged.js interface v0.2 */
/* Change the look */
:root {
--color-background: rgb(48, 48, 48);
--color-pageSheet: #cfcfcf;
--color-pageBox: violet;
--color-paper: white;
--color-marginBox: transparent;
--pagedjs-crop-color: black;
--pagedjs-crop-shadow: white;
--pagedjs-crop-stroke: 1px;
}
/* To define how the book look on the screen: */
@media screen {
body {
background-color: var(--color-background);
}
.pagedjs_pages {
display: flex;
width: calc(var(--pagedjs-width) * 2);
flex: 0;
flex-wrap: wrap;
margin: 0 auto;
}
.pagedjs_page {
background-color: var(--color-paper);
box-shadow: 0 0 0 1px var(--color-pageSheet);
margin: 0;
flex-shrink: 0;
flex-grow: 0;
margin-top: 10mm;
}
.pagedjs_first_page {
margin-left: var(--pagedjs-width);
}
.pagedjs_page:last-of-type {
margin-bottom: 10mm;
}
.pagedjs_pagebox{
box-shadow: 0 0 0 1px var(--color-pageBox);
}
.pagedjs_left_page{
z-index: 20;
width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width))!important;
}
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop {
border-color: transparent;
}
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
width: 0;
}
.pagedjs_right_page{
z-index: 10;
position: relative;
left: calc(var(--pagedjs-bleed-left)*-1);
}
/* show the margin-box */
.pagedjs_margin-top-left-corner-holder,
.pagedjs_margin-top,
.pagedjs_margin-top-left,
.pagedjs_margin-top-center,
.pagedjs_margin-top-right,
.pagedjs_margin-top-right-corner-holder,
.pagedjs_margin-bottom-left-corner-holder,
.pagedjs_margin-bottom,
.pagedjs_margin-bottom-left,
.pagedjs_margin-bottom-center,
.pagedjs_margin-bottom-right,
.pagedjs_margin-bottom-right-corner-holder,
.pagedjs_margin-right,
.pagedjs_margin-right-top,
.pagedjs_margin-right-middle,
.pagedjs_margin-right-bottom,
.pagedjs_margin-left,
.pagedjs_margin-left-top,
.pagedjs_margin-left-middle,
.pagedjs_margin-left-bottom {
box-shadow: 0 0 0 1px inset var(--color-marginBox);
}
/* uncomment this part for recto/verso book : ------------------------------------ */
/*
.pagedjs_pages {
flex-direction: column;
width: 100%;
}
.pagedjs_first_page {
margin-left: 0;
}
.pagedjs_page {
margin: 0 auto;
margin-top: 10mm;
}
.pagedjs_left_page{
width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width) + var(--pagedjs-bleed-left))!important;
}
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop{
border-color: var(--pagedjs-crop-color);
}
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
width: var(--pagedjs-cross-size)!important;
}
.pagedjs_right_page{
left: 0;
}
*/
/*--------------------------------------------------------------------------------------*/
/* uncomment this par to see the baseline : -------------------------------------------*/
/* .pagedjs_pagebox {
--pagedjs-baseline: 22px;
--pagedjs-baseline-position: 5px;
--pagedjs-baseline-color: cyan;
background: linear-gradient(transparent 0%, transparent calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) var(--pagedjs-baseline)), transparent;
background-size: 100% var(--pagedjs-baseline);
background-repeat: repeat-y;
background-position-y: var(--pagedjs-baseline-position);
} */
/*--------------------------------------------------------------------------------------*/
}
/* Marks (to delete when merge in paged.js) */
.pagedjs_marks-crop{
z-index: 999999999999;
}
.pagedjs_bleed-top .pagedjs_marks-crop,
.pagedjs_bleed-bottom .pagedjs_marks-crop{
box-shadow: 1px 0px 0px 0px var(--pagedjs-crop-shadow);
}
.pagedjs_bleed-top .pagedjs_marks-crop:last-child,
.pagedjs_bleed-bottom .pagedjs_marks-crop:last-child{
box-shadow: -1px 0px 0px 0px var(--pagedjs-crop-shadow);
}
.pagedjs_bleed-left .pagedjs_marks-crop,
.pagedjs_bleed-right .pagedjs_marks-crop{
box-shadow: 0px 1px 0px 0px var(--pagedjs-crop-shadow);
}
.pagedjs_bleed-left .pagedjs_marks-crop:last-child,
.pagedjs_bleed-right .pagedjs_marks-crop:last-child{
box-shadow: 0px -1px 0px 0px var(--pagedjs-crop-shadow);
}

File diff suppressed because it is too large Load Diff

@ -0,0 +1,159 @@
:root {
--color_uno: black;
--color_dos: black;
--color_tres: black;
}
@page {
size: 14.5cm 10.5cm;
margin-top:0.5cm;
margin-bottom:0.5cm;
margin-right: 0.5cm;
margin-left: 0.5cm;
@right-middle{
content: "Permeable Territories";
font-family: monospace;
font-size: 7pt;
margin-top: 6cm;
margin-right: 2mm;
writing-mode: vertical-rl;
text-orientation: mixed;
}
}
@page cards {
@left-top {
content: "Glossary Cards";
font-family: monospace;
font-size: 7pt;
margin-top: 1cm;
margin-left: 4mm;
writing-mode: vertical-rl;
text-orientation: mixed;
}
}
@page intro {
@left-middle {
content: "Description";
font-size: 7pt;
font-family: monospace;
margin-top: 1cm;
margin-left: 4mm;
writing-mode: vertical-rl;
text-orientation: mixed;
}
}
.head{
page: intro;
}
.head a{
display: none;
}
.description{
page: intro;
}
.question{
page: intro;
display: none;
}
.legend{
page: intro;
display:flex;
flex-direction: column wrap;
flex-flow: column wrap;
margin-left: 15pt;
margin-right: 15pt;
margin-top: 10pt;
margin-bottom: 10pt;
}
.words {
page: cards;
margin: 0;
}
.word {
break-before: page;
margin: 0;
margin-bottom: 0.3cm;
padding-right: 1cm;
/* width: 13cm;
height: 9.2cm; */
}
.title {
margin-top: 0.5cm;
}
h1 {
font-family: monospace;
font-size: 20pt;
margin: 0%;
}
hr {
display: none;
}
p{
margin-top: 5pt;
text-indent: 2em;
font-family: monospace;
font-size: 10pt;
margin-left: 0.5cm;
line-height: 11pt;
color: black;
}
strong {
font-weight: normal;
text-decoration: underline;
text-decoration-style: wavy;
}
a {
color: black;
font-size: 10pt;
}
.btn {
font-size: 12pt;
display: flex;
border: none;
color: black;
padding-top: 2pt;
padding-right: 8pt;
padding-left: 8pt;
padding-bottom: 2pt;
justify-content: flex-start;
}
.btn:hover {
box-shadow: none;
}
.btn.active {
border: 1pt solid black;
box-shadow: none;
}
.symbol {
position:relative;
order:1;
margin-top: 15pt;
margin-left: 2pt;
margin-right: 2pt;
font-family: Sans-Serif;
}
Loading…
Cancel
Save