|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
<link rel="stylesheet" href="style.css">
|
|
|
<title>Binding GLossary</title>
|
|
|
</head>
|
|
|
<style> .fact-s{color:green;}.process-s{color:aqua;}.love-s{color:orange;}.tool-s{color:blue;} </style>
|
|
|
<body id="glo_body">
|
|
|
|
|
|
<div class="head">
|
|
|
<h1> Glossary for a Diffractive Publishing Practice </h1>
|
|
|
</div>
|
|
|
<hr>
|
|
|
<div class="description">
|
|
|
<p>This glossary gathers words around bookbiding. It was made as an example to use the tool living-glossary.</p>
|
|
|
<p> facts, processs, loves, tools, are the properties that organize and make connections between words.</p>
|
|
|
</div>
|
|
|
<div id="legend" class="legend">
|
|
|
<button class="btn active" onclick="filterSelection('all')">properties</button> <button id="fact" class="btn fact-s" onclick="filterSelection('fact')">fact</button>
|
|
|
<button id="process" class="btn process-s" onclick="filterSelection('process')">process</button>
|
|
|
<button id="love" class="btn love-s" onclick="filterSelection('love')">love</button>
|
|
|
<button id="tool" class="btn tool-s" onclick="filterSelection('tool')">tool</button>
|
|
|
|
|
|
</div>
|
|
|
<hr>
|
|
|
<div class="words">
|
|
|
<div class="word fact process hyperlink">
|
|
|
<h1 id="grain-direction" class="title">○ Grain direction</h1>
|
|
|
<p>⤷ All paper sheets have a direction</p>
|
|
|
<p>⤷ I usually know what is it by holding it with one finger underneath and then seeing where it bends. That’s the grain direction.</p>
|
|
|
<p>⤷ It is usuful to know it when doing bookbinding because paper usually gets wet due to the glue and bends. You don’t want it to get bended in to the wrong direction. <a href="https://www.hewit.com/skin_deep/?volume=10&article=1">⤴</a></p>
|
|
|
</div>
|
|
|
<div class="word love tool">
|
|
|
<h1 id="bone-folding" class="title">○ Bone Folding</h1>
|
|
|
<p>⤷ People uses a wooden stick for this</p>
|
|
|
<p>⤷ One of the most valuable tools for book binders <3</p>
|
|
|
</div>
|
|
|
<div class="word form process">
|
|
|
<h1 id="yotsume-toji" class="title">○ Yotsume Toji</h1>
|
|
|
<p>⤷ Book binding style from Japan.</p>
|
|
|
<p>⤷ You can find some examples here. <a href="https://www.japanhousesp.com.br/artigo/yotsume-toji-aprenda-encadernacao-japonesa/">⤴</a></p>
|
|
|
</div>
|
|
|
<div class="word form process">
|
|
|
<h1 id="threads" class="title">○ Threads</h1>
|
|
|
<p>⤷ traditional biding techniques uses threads and needles to bind multiple papersheets or folios</p>
|
|
|
<p>⤷ they are usually covered by wax to protect the paper.</p>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</body>
|
|
|
<script>
|
|
|
const fact = document.getElementsByClassName("fact");
|
|
|
for (let i = 0; i < fact.length; i++){
|
|
|
fact[i].innerHTML += "<span class='symbol fact-s'>A</span>";
|
|
|
}
|
|
|
|
|
|
const process = document.getElementsByClassName("process");
|
|
|
for (let i = 0; i < process.length; i++){
|
|
|
process[i].innerHTML += "<span class='symbol process-s'>S</span>";
|
|
|
}
|
|
|
|
|
|
const love = document.getElementsByClassName("love");
|
|
|
for (let i = 0; i < love.length; i++){
|
|
|
love[i].innerHTML += "<span class='symbol love-s'>L</span>";
|
|
|
}
|
|
|
|
|
|
const tool = document.getElementsByClassName("tool");
|
|
|
for (let i = 0; i < tool.length; i++){
|
|
|
tool[i].innerHTML += "<span class='symbol tool-s'>T</span>";
|
|
|
}
|
|
|
|
|
|
|
|
|
</script>
|
|
|
<script src="main.js"></script>
|
|
|
</html> |