You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

77 lines
3.3 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!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>