camilo 2 years ago
parent 237d5fd519
commit 9f83d4ac18

@ -0,0 +1,77 @@
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>Binding GLossary</title>
<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 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 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 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. Thats 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 dont want it to get bended in to the wrong direction. <a href=";article=1"></a></p>
<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 &lt;3</p>
<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=""></a></p>
<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>
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 src="main.js"></script>