commit 1d51f9039f27ad94234a719c010f1fac3e38beec
Author: camilo <camilo@sandbot>
Date:   Mon Jun 6 17:49:17 2022 +0200

    BackUp and ready to start

diff --git a/.ipynb_checkpoints/Database-making-checkpoint.ipynb b/.ipynb_checkpoints/Database-making-checkpoint.ipynb
new file mode 100644
index 0000000..d924c40
--- /dev/null
+++ b/.ipynb_checkpoints/Database-making-checkpoint.ipynb
@@ -0,0 +1,779 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 59,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from bs4 import BeautifulSoup\n",
+    "import json"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 147,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "with open(\"index.html\") as file_in:\n",
+    "    soup = BeautifulSoup(file_in, 'html.parser')"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "jupyter": {
+     "outputs_hidden": true
+    },
+    "tags": []
+   },
+   "source": [
+    "TITLE"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 148,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "title = soup.find(id=\"title\")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "tags": []
+   },
+   "source": [
+    "WORDS"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 157,
+   "metadata": {
+    "collapsed": true,
+    "jupyter": {
+     "outputs_hidden": true
+    },
+    "tags": []
+   },
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "[<div class=\"word logic situation action\">\n",
+       " <h1 class=\"title\" id=\"reflection\">Reflection</h1>\n",
+       " <p>⤷ “Stop and look at your own process and understand it. Eventually, I suppose you do run into the infinite recursion problem, but I guess you get used to that.” (Mary Catherine Bateson)</p>\n",
+       " <p>⤷ Es como un círculo: un punto que en su recorrido vuelve a <strong>sí mismo</strong></p>\n",
+       " <p>⤷ The projection of an <strong>image on the mirror</strong></p>\n",
+       " <p>⤷ It is a useful way to think when finding <strong>common ground</strong></p>\n",
+       " <p>⤷ to see the same elsewhere</p>\n",
+       " </div>,\n",
+       " <div class=\"word logic proposition action\">\n",
+       " <h1 class=\"title\" id=\"diffraction\">Diffraction</h1>\n",
+       " <p>⤷ To perform connection between things</p>\n",
+       " <p>⤷ Its when a wave encounters a obstacle and find a slit in it where it bends and make a pattern.</p>\n",
+       " <p>⤷ It creates a <strong>pattern of differences</strong></p>\n",
+       " <p>⤷ “There is no sharp boundary separating the light from the darkness”</p>\n",
+       " <p>⤷ Thinking the differences within el medio, el espacio que nos conecta y nos separa simultáneamente.</p>\n",
+       " <p>⤷ “About taking responsability for the fact that our practices matter; the world is materialized differently through different practices.”</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition logic\">\n",
+       " <h1 class=\"title\" id=\"property\">Property</h1>\n",
+       " <p>⤷ An attribute, characteristic, or quality</p>\n",
+       " <p>⤷ From etymology the word comes from properte which means “nature, quality, distinctive character always present in an individual or class”</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition logic hyperlink\">\n",
+       " <h1 class=\"title\" id=\"atata\">Atata</h1>\n",
+       " <p>⤷ It is a composition of two ideograms (fig.1)in the Mhuysqa dead language . ATATA can be defined as ‘ I give myself and you give yourself , ’ where giving is an act of receiving , because what you do for others is also affecting yourself . This exercise oofreciprocity is a very important vibration of life because nobody can live without others , this includes all living creatures with whom we share the Earth .</p>\n",
+       " <p>⤷ Reciprocity awarness. <a href=\"https://issue.xpub.nl/13/ATATA/\">⤴</a></p>\n",
+       " <p>⤷ to be reciprocal</p>\n",
+       " </div>,\n",
+       " <div class=\"word form\">\n",
+       " <h1 class=\"title\" id=\"paratext\">Paratext</h1>\n",
+       " <p>⤷ thresholds to the text</p>\n",
+       " <p>⤷ thresholds to a publication</p>\n",
+       " <p>⤷ Interesting to be aware of the spaces that open, close, introduce and mediate the publication.</p>\n",
+       " </div>,\n",
+       " <div class=\"word form\">\n",
+       " <h1 class=\"title\" id=\"glosario\">Glosario</h1>\n",
+       " <p>⤷ a paratext</p>\n",
+       " <p>⤷ from the term gloss which means <strong>annotation</strong> and <strong>layer</strong></p>\n",
+       " <p>⤷ This publication see its origin in the idea of <strong>layering of annotations</strong></p>\n",
+       " </div>,\n",
+       " <div class=\"word action hyperlink\">\n",
+       " <h1 class=\"title\" id=\"urgencia\">Urgencia</h1>\n",
+       " <p>⤷ Tener la urgencia como guía para la acción implica una búsqueda constante para posibilitar la publicación de <strong>contenidos relevantes</strong> de forma accesible y democrática. (…) Es importante decir que cuando hablamos de relevancia, no necesariamente estamos hablando de <strong>panfletos</strong> y obras explícitamente políticas. En una sociedad adversa a las diferencias y violentamente estandarizada, las obras que dan visibilidad a <strong>subjetividades no hegemónicas</strong> son potencialmente transformadoras, además de jugar un papel importante en el registro de diferentes formas de existencia, algo profundamente político en sí mismo. <a href=\"https://files.cargocollective.com/c1032387/publicacion-independiente-PRINT.pdf\">⤴</a></p>\n",
+       " <p>⤷ Being different as a political act itself.</p>\n",
+       " <p>⤷ Understanding my needs and collective needs to make something public.</p>\n",
+       " <p>⤷ Activating agency</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition hyperlink\">\n",
+       " <h1 class=\"title\" id=\"post-growth\">Post growth</h1>\n",
+       " <p>⤷ to challenge the dominant narratives about growth and progress, and re-envision social metabolism through an understanding of the energy it requires, reconnecting human survival with the living, material qualities of the biosphere, drawing on ecofeminism, indigenous knowledge, environmental accounting and historical materialism. <a href=\"http://postgrowth.art/\">⤴</a></p>\n",
+       " <p>⤷ To leave behind an activity of accumulation, to find yourselve in a different work rhythm</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition hyperlink\">\n",
+       " <h1 class=\"title\" id=\"non-teleological-reading\">Non-teleological reading</h1>\n",
+       " <p>⤷ what if instead of reflecting about the why, we focus about the how? <a href=\"https://tdingsun.github.io/reading-machines/\">⤴</a></p>\n",
+       " <p>⤷ What is teleological? <a href=\"https://en.wikipedia.org/wiki/Teleology\">⤴</a></p>\n",
+       " <p>⤷ Have you question how would it be the reading process of your publication?</p>\n",
+       " <p>⤷ ¿Por qué publicamos lo que publicamos, en la forma en que lo publicamos? Habrá momentos en que no será necesario preguntar por qué, sino cómo.</p>\n",
+       " </div>,\n",
+       " <div class=\"word hyperlink\">\n",
+       " <h1 class=\"title\" id=\"urgent-artifact\">Urgent artifact</h1>\n",
+       " <p>⤷ The visible act of “commoning-in-the-crisis.” An outcome of solidarity and coming together in urgent times using modest tools and materials. It’s the manifestation that we can work from shared, <strong>common positions</strong>, in common, and on <strong>common ground</strong>. Examples: collaborative spreadsheets, online petitions, protests, surveys,letter-writing, essay writing, <strong>note-taking</strong>, shared open access writing spaces, streaming workshops, <strong>performances</strong>, talks, teach-ins, raw and unedited poetry, and quickly made zines. <a href=\"https://soulellis.com/writing/urgentcraft2/\">⤴</a></p>\n",
+       " <p>⤷ Is a set of principles that works to resist oppression-based design ideologies, especially in art and design education. URGENTCRAFT isn’t a manifesto, but rather a constellation of tactics — a series of incomplete observations. A note to self. A reminder that we can use art and design to loosen hegemonic power. <a href=\"https://soulellis.com/work/urgentcraft/index.html\">⤴</a></p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition action\">\n",
+       " <h1 class=\"title\" id=\"urgentcraft\">Urgentcraft</h1>\n",
+       " <p>⤷ Do what you can</p>\n",
+       " <p>⤷ Use modest tools and materials</p>\n",
+       " <p>⤷ Practice a <strong>slow approach to fast making</strong></p>\n",
+       " <p>⤷ Dismantle white supremacy / be anti-racist</p>\n",
+       " <p>⤷ Commit to maintenance and self-care as a form of urgency</p>\n",
+       " <p>⤷Think big but make small</p>\n",
+       " <p>⤷ Resist, loosen, and <strong>dismantle ableism</strong>, heteropatriachy, and <strong>settler colonialism</strong></p>\n",
+       " <p>⤷ Prioritize <strong>communal care</strong> as a never-ending practice</p>\n",
+       " <p>⤷ Undestard the politics of your platforms</p>\n",
+       " <p>⤷ Redistribute wealth and accumulation</p>\n",
+       " <p>⤷ <strong>Resit capitalist</strong> strategies</p>\n",
+       " <p>⤷ Practice media hybridity</p>\n",
+       " <p>⤷ Agitate/interfere (“make good trouble”)</p>\n",
+       " <p>⤷ <strong>Fail to provide</strong> the perfect read (resist legibility)</p>\n",
+       " <p>⤷ Refuse design perfection / stay with the mess</p>\n",
+       " <p>⤷ Work in public (self-publish!)</p>\n",
+       " <p>⤷ Work towards the then and there of queer futurity (while acknowledging past struggles and privileges)</p>\n",
+       " <p>⤷ Question linearity and other hieratchical structures</p>\n",
+       " <p>⤷ [⤴] (https://soulellis.com/writing/urgentcraft2/)</p>\n",
+       " </div>,\n",
+       " <div class=\"word logic\">\n",
+       " <h1 class=\"title\" id=\"complexity\">Complexity</h1>\n",
+       " <p>⤷ Complexity does not mean complicated. Complex systems can in fact be relatively simple.</p>\n",
+       " <p>⤷ La complejidad es múltiple, en el sentido que nunca se logra desenredar en sí, siempre resulta irresoluble. Viene de la mano mano con no entender lo que se quiere explicar. Alguna vez leí que la complejidad es aquello que no se puede resumir a una sola palabra. Este glossario, por ejemplo, intenta explicar con múltiples palabras aquello que parece complejo. Falla en el intento.</p>\n",
+       " <p>⤷ Humans use metaphors often to deal with complexity.</p>\n",
+       " </div>,\n",
+       " <div class=\"word situation\">\n",
+       " <h1 class=\"title\" id=\"contradiction\">Contradiction</h1>\n",
+       " <p>⤷ Two different forces that go against each other. Develop a project having in mind that some decisions will go against your own will.</p>\n",
+       " <p>⤷ is also aboout the lack of purity when acting.</p>\n",
+       " </div>,\n",
+       " <div class=\"word form\">\n",
+       " <h1 class=\"title\" id=\"rhizome\">Rhizome</h1>\n",
+       " <p>⤷ Term adapted from plant biology by Gilles <em>Deleuze and Félix </em>Guattari to conceptualize <em>non-linear relations in both the realm of pure thought and the concrete and the </em>everyday.</p>\n",
+       " <p>⤷ Thinking multiplicity as a substantive</p>\n",
+       " <p>⤷ connection, heterogeneity, multiplicity, signifying rupture, cartography</p>\n",
+       " <p>⤷ Los rizhomas son también estructuras porosas</p>\n",
+       " <p>⤷ Being permeable, letting relate yourself within the environment</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition action\">\n",
+       " <h1 class=\"title\" id=\"interference\">Interference</h1>\n",
+       " <p>⤷ On publishing, the possibility to block and reduce the legibility of a matter too enhance other. For example:</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition action logic\">\n",
+       " <h1 class=\"title\" id=\"illegivility\">Illegivility</h1>\n",
+       " <p>⤷ Its about being cryptic, hidden. But also to create a safe space. Not being in the spotlight may protect you.</p>\n",
+       " </div>,\n",
+       " <div class=\"word hyperlink action\">\n",
+       " <h1 class=\"title\" id=\"collaborative-spreadsheets\">Collaborative spreadsheets</h1>\n",
+       " <p>⤷ Son hojas de cálculo elavoradas colectivamente.</p>\n",
+       " <p>⤷ It is a interesting tool to use when gathering information collectively</p>\n",
+       " <p>⤷ <a href=\"https://docs.google.com/spreadsheets/d/1UkgIsDpFMuA0_hvqf5f4ytPTKX4wfPp8ByRs3Uymvag/edit#gid=0\">⤴</a></p>\n",
+       " </div>,\n",
+       " <div class=\"word form hyperlink\">\n",
+       " <h1 class=\"title\" id=\"epub\">EPUB</h1>\n",
+       " <p>⤷ Acronym for Electronic Publication. An ebook format developed by the international Digital Publishing Forum (IDPF). EPUB is an open standard and the most commonly used and supported file format for electronic books. EPUB was designed to accommodate reflow-able content. <a href=\"https://networkcultures.org/digitalpublishing/\">⤴</a></p>\n",
+       " </div>,\n",
+       " <div class=\"word form logic\">\n",
+       " <h1 class=\"title\" id=\"electronic-publication\">Electronic publication</h1>\n",
+       " <p>⤷ Beyond EPUB, A Electronic Publication is a publication generated, created and shown by an electronic device.</p>\n",
+       " </div>,\n",
+       " <div class=\"word form situation\">\n",
+       " <h1 class=\"title\" id=\"book\">Book</h1>\n",
+       " <p>⤷ The codex,</p>\n",
+       " <p>⤷ by folded paper,</p>\n",
+       " <p>⤷ unfolded</p>\n",
+       " <p>⤷ stapled matter</p>\n",
+       " <p>⤷ drawn space</p>\n",
+       " <p>⤷ wrapped by glue ~ threads,</p>\n",
+       " <p>⤷ inhabid by drawings, letters, words, images,</p>\n",
+       " <p>⤷ containing containers such as prologues, colophon, glossaries</p>\n",
+       " <p>⤷ the interface,</p>\n",
+       " <p>⤷ the simple and the whole</p>\n",
+       " <p>⤷ A format</p>\n",
+       " </div>,\n",
+       " <div class=\"word action proposition situation\">\n",
+       " <h1 class=\"title\" id=\"autonomous-practice\">Autonomous practice</h1>\n",
+       " <p>⤷ On publishing, to be able and to have the energy to create, make, produce and share with self autonomy.</p>\n",
+       " <p>⤷ Etymologicaly, autonomous comes from auto- (“self”) and -nomy (“a system of rules or laws about a particular field”).</p>\n",
+       " <p>⤷ Autonomous practice suggests drawing your own rules and own systems of creating, making, producing and distributing in order to publish.</p>\n",
+       " </div>,\n",
+       " <div class=\"word action\">\n",
+       " <h1 class=\"title\" id=\"publishing\">Publishing</h1>\n",
+       " <p>⤷ To make something public.</p>\n",
+       " <p>⤷ To circulate.</p>\n",
+       " <p>⤷ To filter and amplify.</p>\n",
+       " <p>⤷ A big spectrum of practices interested into making public</p>\n",
+       " <p>⤷ To publish is to make a public through the circulation of material, generating discourse.</p>\n",
+       " </div>,\n",
+       " <div class=\"word form\">\n",
+       " <h1 class=\"title\" id=\"hybrid-publication\">Hybrid publication</h1>\n",
+       " <p>⤷ the act of publishing through differents mediums and techniches in order to adapt and contextualize to a specific project or part of it. A hybrid publication can offer a varied spectrum of objects and processes that together construct the body of it.</p>\n",
+       " </div>,\n",
+       " <div class=\"word form\">\n",
+       " <h1 class=\"title\" id=\"printed-publication\">Printed publication</h1>\n",
+       " <p>⤷ A type of publication that uses a printing technique such as offset, inkjet, risoprint, and so on.</p>\n",
+       " <p>⤷ commonly use surfaces and ink as primarily elements</p>\n",
+       " </div>,\n",
+       " <div class=\"word form process\">\n",
+       " <h1 class=\"title\" id=\"riso-printing\">RISO printing</h1>\n",
+       " <p>⤷ Risograph is a brand of digital duplicators that are designed mainly for high-volume photocopying and printing.</p>\n",
+       " <p>⤷ The process creates <strong>micro-imperfections in printing</strong>, similar to spontaneity, or even comparable to how improvisation in jazz can lead to an unexpected but pleasant result. <a href=\"https://odotoo.com/risograph/\">⤴</a></p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition\">\n",
+       " <h1 class=\"title\" id=\"agency\">Agency</h1>\n",
+       " <p>⤷ It is defined as the capacity of individuals to act independently and to make their own free choices. On publishing it suggests to take responsability of the public-action. Publication as an act. See with Urgent-craft.</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition action\">\n",
+       " <h1 class=\"title\" id=\"responsability\">Responsability</h1>\n",
+       " <p>⤷ The ability to respond.</p>\n",
+       " <p>⤷ Being aware that publishing acts have an impact</p>\n",
+       " </div>,\n",
+       " <div class=\"word form\">\n",
+       " <h1 class=\"title\" id=\"word-processors\">Word processors</h1>\n",
+       " <p>⤷ Like Microsoft word. There is plenty open-source ones. See:</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition situation\">\n",
+       " <h1 class=\"title\" id=\"future-trash\">Future-trash</h1>\n",
+       " <p>⤷ Resisting burnout and future trash puts artist and their work in a good position to solve problems. By sustaining a publishing practice over time and creating objects that persist with meaning as their inherent value, artist publishers can continue to create, contribute to, and maintain the radically open, imaginative, accessible and inclusive community that makes up artist publishing. (Alex Arzt, pag 20, What Problems Can Artist Publishers Solve?)</p>\n",
+       " <p>⤷¿Cuándo este objeto dejará de existir?</p>\n",
+       " </div>,\n",
+       " <div class=\"word situation proposition\">\n",
+       " <h1 class=\"title\" id=\"promiscuous-publishing\">Promiscuous Publishing</h1>\n",
+       " <p>⤷ “A promiscuous publication is NOT like parallel, hybrid, or cross-media publishing. It is a multi-headed and polycentric form of making public. It enjoys its various forms, and embraces their idiosyncracies. As a multi-headed publication it is NOT obsessed with providing uniform outcomes across diverse media. Having many centers, it can produce new focal points and obfuscate its origins. It explores playfully a spectral diversity with sibling out-comes and bastard children that operate out of sync or tune.” (Christoph Haag, make make do in: The Techno-Galactic Guide to Software Observation, 2016) <a href=\"https://constantvzw.org/wefts/webpublications.en.html\">⤴</a></p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition process\">\n",
+       " <h1 class=\"title\" id=\"do-it-yourself-diy\">Do-it-yourself (DIY)</h1>\n",
+       " <p>⤷ Using your own resources and skills to make possible a publication.</p>\n",
+       " <p>⤷ La autogestion y procesos autonomos están relacionados con DIY</p>\n",
+       " </div>,\n",
+       " <div class=\"word process proposition\">\n",
+       " <h1 class=\"title\" id=\"do-it-yourself-with-others-diywo\">Do-it-yourself-with-others (DIYWO)</h1>\n",
+       " <p>⤷ It reminds me Sympoesis.</p>\n",
+       " <p>⤷ Hacer las cosas con otros</p>\n",
+       " <p>⤷ Is a difficult process that requiares a lot of energy</p>\n",
+       " </div>,\n",
+       " <div class=\"word form hyperlink\">\n",
+       " <h1 class=\"title\" id=\"fanzine\">Fanzine</h1>\n",
+       " <p>⤷ El fanzine es el libro más simple del mundo. <a href=\"https://files.cargocollective.com/c1032387/publicacion-independiente-PRINT.pdf#page=12\">⤴</a></p>\n",
+       " <p>⤷ Se puede hacer e imprimir de infinitas formas. Es normal hacer fotocopias, siendo la opción más barata, accesible, y democrática. <a href=\"https://files.cargocollective.com/c1032387/publicacion-independiente-PRINT.pdf#page=12\">⤴</a></p>\n",
+       " <p>⤷ Considerado más “under”/rudimentario, es una excelente herramienta para difundir ideas políticas y urgentes. <a href=\"https://files.cargocollective.com/c1032387/publicacion-independiente-PRINT.pdf#page=12\">⤴</a></p>\n",
+       " <p>⤷ Usually free or just to cover production expenses and transportation</p>\n",
+       " <p>⤷ Produced using home office equipment</p>\n",
+       " <p>⤷ Quick, cheap, small and non-pretentious</p>\n",
+       " </div>,\n",
+       " <div class=\"word form situation\">\n",
+       " <h1 class=\"title\" id=\"festival\">Festival</h1>\n",
+       " <p>⤷ On publishing, festivals are events that congregates creators, editors, publishers and readers that are interested into share and encounter books, fanzines, panflets, objects and so on.</p>\n",
+       " <p>⤷ Events created to enhance community building</p>\n",
+       " <p>⤷ Festival may expand the individual practice into multiple collective ones.</p>\n",
+       " </div>,\n",
+       " <div class=\"word form language\">\n",
+       " <h1 class=\"title\" id=\"markdown-word-processing-format\">Markdown: word processing format</h1>\n",
+       " <p>⤷ Markdown’s syntax is intended for one purpose: to be used as a format for writing for the web.</p>\n",
+       " <p>⤷ Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a publishing format; Markdown is a writing format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in plain text. <a href=\"https://daringfireball.net/projects/markdown/syntax#overview\">⤴</a></p>\n",
+       " <p>⤷ This format can be useful for text projects that need to adapt to different formats</p>\n",
+       " <p>⤷ This glossary uses the markdown format. Check it here: <a href=\"https://hub.xpub.nl/soupboat/pad/p/camilo_glossary\">⤴</a></p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition action process\">\n",
+       " <h1 class=\"title\" id=\"small-edition\">Small-edition</h1>\n",
+       " <p>⤷ Make less than 1000 units of a publication.</p>\n",
+       " <p>⤷ Small editions may focus their energies on circulating through individuals that care about it</p>\n",
+       " </div>,\n",
+       " <div class=\"word logic\">\n",
+       " <h1 class=\"title\" id=\"low-cost\">Low cost</h1>\n",
+       " <p>⤷ Using a small budget to produce a publication.</p>\n",
+       " </div>,\n",
+       " <div class=\"word form situation\">\n",
+       " <h1 class=\"title\" id=\"archive\">Archive</h1>\n",
+       " <p>⤷ A <strong>collection of pieces</strong> of information generally related to past times.</p>\n",
+       " <p>⤷ made by records providing evidential information</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition logic action\">\n",
+       " <h1 class=\"title\" id=\"sustainability\">Sustainability</h1>\n",
+       " <p>⤷ On publishing, to be aware of the resources used to create, maintain and circulate a publication</p>\n",
+       " <p>⤷ What type of printing process are you using? Do you know where the materias come from? What type of inks are you using? What’s the impact of your digital publication’s infrastructure?</p>\n",
+       " </div>,\n",
+       " <div class=\"word propositon action\">\n",
+       " <h1 class=\"title\" id=\"open-source\">Open source</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word process\">\n",
+       " <h1 class=\"title\" id=\"infrastructure\">Infrastructure</h1>\n",
+       " <p>⤷ What makes possible the structure. The underneath processes and materials that sustain a publication.</p>\n",
+       " <p>⤷ It could be the tools we use to create, host or publish them.</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition process action\">\n",
+       " <h1 class=\"title\" id=\"self-hosting\">Self-Hosting</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word form process situation\">\n",
+       " <h1 class=\"title\" id=\"layout\">Layout</h1>\n",
+       " <p>⤷ How things are organized in the space</p>\n",
+       " <p>⤷ Visual structures can suggest conceptual structures</p>\n",
+       " </div>,\n",
+       " <div class=\"word form\">\n",
+       " <h1 class=\"title\" id=\"e-reader-hardware\">E-reader hardware</h1>\n",
+       " <p>⤷ The device used to display EPUBs such as Kindle, Komo…etc.</p>\n",
+       " </div>,\n",
+       " <div class=\"word process language\">\n",
+       " <h1 class=\"title\" id=\"e-reader-software\">E-reader software</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word process tool\">\n",
+       " <h1 class=\"title\" id=\"bookbinding\">bookbinding</h1>\n",
+       " <p>⤷ Bookbinding is the process of physically assembling a book of codex format from an ordered stack of paper sheets that are folded together.</p>\n",
+       " <p>⤷ There are different types of binding, here you can find a usefull guide for</p>\n",
+       " </div>,\n",
+       " <div class=\"word form tool\">\n",
+       " <h1 class=\"title\" id=\"plain-text\">Plain text</h1>\n",
+       " <p>⤷ Text without any visual formatting (such as bold, italic, font types and sizes, clickable hyperlinks, etc.)</p>\n",
+       " <p>⤷ ASCII is the oldest and still most common plain-text format</p>\n",
+       " </div>,\n",
+       " <div class=\"word form process\">\n",
+       " <h1 class=\"title\" id=\"wysiwyg\">WYSIWYG</h1>\n",
+       " <p>⤷ (what you see is what you get)</p>\n",
+       " </div>,\n",
+       " <div class=\"word\">\n",
+       " <h1 class=\"title\" id=\"logical-semantic-markup\">Logical-semantic markup</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word language\">\n",
+       " <h1 class=\"title\" id=\"html\">HTML</h1>\n",
+       " <p>⤷ (hyper text Markup Language)</p>\n",
+       " </div>,\n",
+       " <div class=\"word situation action\">\n",
+       " <h1 class=\"title\" id=\"paged-centred\">Paged-centred</h1>\n",
+       " <p>⤷ Publications that are tought around the idea of a page.</p>\n",
+       " <p>⤷ What is beyond a page within publishing?</p>\n",
+       " </div>,\n",
+       " <div class=\"word form process\">\n",
+       " <h1 class=\"title\" id=\"reflow-able-layout\">Reflow-able layout</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word logic form\">\n",
+       " <h1 class=\"title\" id=\"hyperlinks\">Hyperlinks</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word form hyperlink\">\n",
+       " <h1 class=\"title\" id=\"website\">Website</h1>\n",
+       " <p>⤷ At its simplest, a website is a folder of text files broadcast from a computer to the rest of the world. [⤴] (https://solarpunk.cool/zines/web-zine-01/introduction.html)</p>\n",
+       " </div>,\n",
+       " <div class=\"word form proposition hyperlink\">\n",
+       " <h1 class=\"title\" id=\"web-zine\">Web-zine</h1>\n",
+       " <p>⤷ I want to see more personal websites because a handmade web is magical and good.</p>\n",
+       " <p>⤷ [⤴] (https://solarpunk.cool/zines/web-zine-01/introduction.html)</p>\n",
+       " </div>,\n",
+       " <div class=\"word process action\">\n",
+       " <h1 class=\"title\" id=\"one-to-one\">One-to-one:</h1>\n",
+       " <p>⤷ Single publication published in different media</p>\n",
+       " </div>,\n",
+       " <div class=\"word process action\">\n",
+       " <h1 class=\"title\" id=\"one-to-many\">One-to-many:</h1>\n",
+       " <p>⤷ Single publication that has different appearances in different media</p>\n",
+       " </div>,\n",
+       " <div class=\"word process action\">\n",
+       " <h1 class=\"title\" id=\"one-to-database\">One-to-database:</h1>\n",
+       " <p>⤷ Publication based on the content of the data base which can be used in a number of ways</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition action\">\n",
+       " <h1 class=\"title\" id=\"discourse\">Discourse</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word situation logic\">\n",
+       " <h1 class=\"title\" id=\"speed\">Speed</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition logic situation\">\n",
+       " <h1 class=\"title\" id=\"afterlife\">Afterlife</h1>\n",
+       " <p>⤷ How to make the <strong>content relevant again</strong>? Re-using it for different contexts.</p>\n",
+       " </div>,\n",
+       " <div class=\"word action proposition\">\n",
+       " <h1 class=\"title\" id=\"non-hasty\">Non-hasty</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word process situation\">\n",
+       " <h1 class=\"title\" id=\"reader\">Reader</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word situation action proposition\">\n",
+       " <h1 class=\"title\" id=\"post-digital\">Post-digital</h1>\n",
+       " <p>⤷ Utilizar los recursos que sean necesarios con las circuntancias contextuales particulares actuales.</p>\n",
+       " <p>⤷ To leave behind the digital hype?</p>\n",
+       " <p>⤷ The “post-digital mindset” allows a more inclusive research framework of the publishing field, in which e-books and book-apps aren’t the only object of study and where “old” and “new” media are not in a natural opposition. In the field of post-digital publishing, printed matter doesn’t belong to the past and digital tools are not inherently innovative. <a href=\"https://ia800509.us.archive.org/15/items/p-dpa_booklet/p-dpa_booklet.pdf\">⤴</a></p>\n",
+       " <p>⤷ Beyond hyped mediums, what is the one that adjust the most to this project?</p>\n",
+       " <p>⤷ To make <strong>contextual decisions</strong> within a publication.</p>\n",
+       " </div>,\n",
+       " <div class=\"word form action project\">\n",
+       " <h1 class=\"title\" id=\"anaphora\">Anaphora</h1>\n",
+       " <p>⤷ Insistent prosody.</p>\n",
+       " <p>⤷ To insist. To state. To make an insistent statement <a href=\"https://thenewbridgeproject.com/product/why-publish-noise-miekal-and/\">⤴</a></p>\n",
+       " </div>,\n",
+       " <div class=\"word form process\">\n",
+       " <h1 class=\"title\" id=\"manifesto\">Manifesto</h1>\n",
+       " <p>⤷ A reflection that <strong>drives action</strong>.</p>\n",
+       " </div>,\n",
+       " <div class=\"word situation action logic\">\n",
+       " <h1 class=\"title\" id=\"post-colonial\">Post-colonial</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word form proposition logic\">\n",
+       " <h1 class=\"title\" id=\"fragmented\">Fragmented</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word situation\">\n",
+       " <h1 class=\"title\" id=\"habit\">Habit</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word situation process form\">\n",
+       " <h1 class=\"title\" id=\"frustration\">Frustration</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word form action\">\n",
+       " <h1 class=\"title\" id=\"newsletter\">Newsletter</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word form action\">\n",
+       " <h1 class=\"title\" id=\"syllabus\">Syllabus</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word situation action\">\n",
+       " <h1 class=\"title\" id=\"audience\">Audience</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition action situation process\">\n",
+       " <h1 class=\"title\" id=\"meme-ability\">Meme-ability</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word situation logic\">\n",
+       " <h1 class=\"title\" id=\"communal\">Communal</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word situation action form\">\n",
+       " <h1 class=\"title\" id=\"community\">Community</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word situation action process proposition\">\n",
+       " <h1 class=\"title\" id=\"community-building\">Community-building</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word action logic\">\n",
+       " <h1 class=\"title\" id=\"political-act\">Political act</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word agent logic\">\n",
+       " <h1 class=\"title\" id=\"editor\">Editor</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word process logic\">\n",
+       " <h1 class=\"title\" id=\"filtering\">Filtering</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word process logic\">\n",
+       " <h1 class=\"title\" id=\"amplification\">Amplification</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word process logic action\">\n",
+       " <h1 class=\"title\" id=\"caring\">Caring</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word logic situation\">\n",
+       " <h1 class=\"title\" id=\"ambiguity\">Ambiguity</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word process situation\">\n",
+       " <h1 class=\"title\" id=\"continuity\">Continuity</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word logic form\">\n",
+       " <h1 class=\"title\" id=\"dialogue\">Dialogue</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word form action proposition\">\n",
+       " <h1 class=\"title\" id=\"dissonance\">Dissonance</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word logic situation\">\n",
+       " <h1 class=\"title\" id=\"gathering\">Gathering</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition logic action\">\n",
+       " <h1 class=\"title\" id=\"mutation\">Mutation</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word logic situation action proposition\">\n",
+       " <h1 class=\"title\" id=\"reciprocity\">Reciprocity</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word action logic proposition\">\n",
+       " <h1 class=\"title\" id=\"regenerative\">Regenerative</h1>\n",
+       " <p>⤷ Regeneration has its origins in ecology: <strong>taking care</strong> of the soil and preventing it from depletion. Nowadays, the idea has broadened and refers to caring in a general sense: caring for the living world, the cultural heritage and our fellow human beings, both now and in the future. [⤴] (https://common-in.nl/slider/#slide3)</p>\n",
+       " </div>,\n",
+       " <div class=\"word logic situation\">\n",
+       " <h1 class=\"title\" id=\"autopoiesis\">Autopoiesis</h1>\n",
+       " <p>⤷ The term autopoiesis (from Greek αὐτo- (auto-) ‘self’, and ποίησις (poiesis) ‘creation, production’) refers to a system capable of reproducing and <strong>maintaining itself</strong> by creating its own parts and eventually further components.</p>\n",
+       " <p>⤷ De qué manera lo vivo se crea a sí mismo?</p>\n",
+       " </div>,\n",
+       " <div class=\"word logic situation proposition\">\n",
+       " <h1 class=\"title\" id=\"sympoiesis\">Sympoiesis</h1>\n",
+       " <p>⤷ It is a term that referes the act of <strong>‘making with’</strong></p>\n",
+       " <p>⤷ Beyond Autopoiesis, Sympoiesis is a form of self-making that can only happen collectively and collaboratively.</p>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition logic action\">\n",
+       " <h1 class=\"title\" id=\"transformation\">Transformation</h1>\n",
+       " </div>,\n",
+       " <div class=\"word form action\">\n",
+       " <h1 class=\"title\" id=\"drawing\">Drawing</h1>\n",
+       " <p>⤷ The act to trace on a surface.</p>\n",
+       " <p>⤷ Explore with a pencil the shape of things.</p>\n",
+       " <p>⤷ A <strong>tool for meditation</strong>.</p>\n",
+       " </div>,\n",
+       " <div class=\"word form action logic\">\n",
+       " <h1 class=\"title\" id=\"knoting\">Knoting</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word form action logic\">\n",
+       " <h1 class=\"title\" id=\"link\">Link</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word form action logic\">\n",
+       " <h1 class=\"title\" id=\"tangle\">Tangle</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word action\">\n",
+       " <h1 class=\"title\" id=\"cross-references\">Cross-references</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word form process\">\n",
+       " <h1 class=\"title\" id=\"real-time-data\">Real-time data</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word form process logic tool\">\n",
+       " <h1 class=\"title\" id=\"rss-really-simple-syndication\">RSS: Really Simple Syndication</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word form tool\">\n",
+       " <h1 class=\"title\" id=\"screen\">Screen</h1>\n",
+       " <p>⤷ “screen based publishing is intimate in my opinion, as it reaches the space of personal screens often in intimate spaces, but it establishes a <strong>remote intimacy</strong>, as the publisher is not necessarily meant to be present on the other side and his or her body is certainly distant and invisible” (alessandro Ludovico)</p>\n",
+       " </div>,\n",
+       " <div class=\"word situation action logic\">\n",
+       " <h1 class=\"title\" id=\"rumiante\">Rumiante</h1>\n",
+       " <p>⤷ lentitud / animalidad / el estigma vaca / la carne / el no saber cómo decir pero ir rumiando</p>\n",
+       " <p>⤷ Los rumiantes, como los bovinos, tienen un complejo sistema de digestión que les permite aprovechar eficientemente los nutrientes de los alimentos, inclusive los de baja calidad nutricional. La rumia debe hacerse en un lugar cómodo, plano, con sombra, para poder echarse. El rumiante procurará contar con las condiciones necesarias para poder rumiar cómodamente. Buscará entonces las condiciones de posibilidad, es decir lugar cómodo y seguro, entre afines que lo sostengan.</p>\n",
+       " <p>⤷ El rumiante es irreverente e iconoclasta.</p>\n",
+       " <p>⤷ No cree en ideas propias, se sabe no original. Sabe que siempre que habla, traduce</p>\n",
+       " <p>⤷ El rumiante apuesta por un ejercicio de <strong>invención política</strong> que es colectivo, siempre. Procura darse, para sí y su comunidad, herramientas, y entiende que estas herramientas no son algo a lo que se llega, sino que están en constante construcción.</p>\n",
+       " <p>⤷ En su acción de rumiar, rinde tributo al proceso y no al producto acabado.</p>\n",
+       " <p>⤷ El rumiante es precaria, y como precaria ha desafiado al futuro.</p>\n",
+       " <p>⤷ <strong>El futuro no es nuestro</strong>. <strong>No hay futuro</strong>. No hay tiempo. <strong>El rumiante es lento</strong>. (Lucresia Masson, Epistemología rumiante)</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition form action process\">\n",
+       " <h1 class=\"title\" id=\"procesual-book\">Procesual Book</h1>\n",
+       " <p>⤷ Its a book that is in constant creation and formation</p>\n",
+       " <p>⤷ <strong>Living Books</strong> about life is one example <a href=\"https://www.livingbooksaboutlife.org/\">⤴</a></p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition action\">\n",
+       " <h1 class=\"title\" id=\"proposition\">Proposition</h1>\n",
+       " <p>⤷ The <strong>act of offering</strong> (an idea) for consideration.</p>\n",
+       " </div>,\n",
+       " <div class=\"word form\">\n",
+       " <h1 class=\"title\" id=\"form\">Form</h1>\n",
+       " <p>⤷ The shape and structure of something as distinguished from its material</p>\n",
+       " </div>,\n",
+       " <div class=\"word action\">\n",
+       " <h1 class=\"title\" id=\"action\">Action</h1>\n",
+       " <p>⤷ The shape and structure of something as distinguished from its material</p>\n",
+       " </div>,\n",
+       " <div class=\"word logic\">\n",
+       " <h1 class=\"title\" id=\"logic\">Logic</h1>\n",
+       " <p>⤷ the arrangement of circuit elements (as in a computer) needed for computation.</p>\n",
+       " <p>⤷ Any system of thought, whether rigorous and productive or not.</p>\n",
+       " <p>⤷ A system of reasons and processes articulated.</p>\n",
+       " </div>,\n",
+       " <div class=\"word hyperlink\">\n",
+       " <h1 class=\"title\" id=\"project\">Project</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word logic proposition\">\n",
+       " <h1 class=\"title\" id=\"madularity\">Madularity</h1>\n",
+       " <p>⤷ Building blocks logic to build up something.</p>\n",
+       " <p>⤷ What aspects of modularity in publishing are making meaningful connections between parts?</p>\n",
+       " <p>⤷</p>\n",
+       " </div>]"
+      ]
+     },
+     "execution_count": 157,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "words"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 161,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "glossary_bag = [] \n",
+    "word_no = 1\n",
+    "words = soup.find_all('div',attrs={'class':'word'})\n",
+    "\n",
+    "for word in words:\n",
+    "    \n",
+    "    title = word.find('h1').text\n",
+    "    \n",
+    "    voices = word.find_all('p')\n",
+    "    \n",
+    "    links = word.find_all('a')\n",
+    "    \n",
+    "    properties = word.get('class')\n",
+    "    \n",
+    "    li_voices = []\n",
+    "    \n",
+    "    li_links = []\n",
+    "    \n",
+    "    for voice in voices:\n",
+    "        li_voices.append(voice.text)\n",
+    "    \n",
+    "    for link in links:\n",
+    "        p = link.text\n",
+    "        url = link.get('href')\n",
+    "        li_links.append(p)\n",
+    "        li_links.append(url)\n",
+    "        \n",
+    "    word = {\n",
+    "        'Word#': str(word_no), \n",
+    "        'title': title, \n",
+    "        'properties': properties,\n",
+    "        'voices': li_voices,\n",
+    "        'links': li_links\n",
+    "    }\n",
+    "    \n",
+    "    glossary_bag.append(word)\n",
+    "    \n",
+    "    word_no += 1\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 159,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 160,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "['word', 'logic', 'proposition']"
+      ]
+     },
+     "execution_count": 160,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 162,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    " with open('glossary.json', 'w+', encoding='utf-8') as f:\n",
+    "        json.dump(glossary_bag, f, indent=5, ensure_ascii=False)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "```\n",
+    "glossary = {\n",
+    "    'title': f'{title}',\n",
+    "    'properties': {\n",
+    "    }\n",
+    "    'words':{\n",
+    "        'reflection': {\n",
+    "            'voices': ['','',''],\n",
+    "            'properties': ['','',''],\n",
+    "    }\n",
+    "    'version': '0.1',\n",
+    "}\n",
+    "```"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 140,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "<_io.TextIOWrapper name='glossary.json' mode='w' encoding='utf-8'>"
+      ]
+     },
+     "execution_count": 140,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.7.3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}
diff --git a/.ipynb_checkpoints/Glossary_making-checkpoint.ipynb b/.ipynb_checkpoints/Glossary_making-checkpoint.ipynb
new file mode 100644
index 0000000..eebb81f
--- /dev/null
+++ b/.ipynb_checkpoints/Glossary_making-checkpoint.ipynb
@@ -0,0 +1,419 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Glossary Making Tool"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "This is a Work-in-progress experiment tool to make living glossaries Webpages using simple Python, Javascript, and CSS from an markdown file written in a Etherpad instance.\n",
+    "\n",
+    "**What makes it living?** \n",
+    "\n",
+    "* The glossary structure uses the idea of 'gloss' that means annottation and layer. It makes the glossary a layering of anotations rather than a list of definitions. The pad template uses each word as a card with multiple annotations. See the example.\n",
+    "\n",
+    "* This tool also offers the option of add properties to each word in order to find connections and multiple types of organization. \n"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "tags": []
+   },
+   "source": [
+    "## Words\n",
+    "Communicating via **API** with the glossary **Pad** and translating the text written in **Markdown** format using **Pandoc** library."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 43,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "import json, pypandoc\n",
+    "from urllib.request import urlopen\n",
+    "from urllib.parse import urlencode\n",
+    "\n",
+    "\n",
+    "with open(\"/opt/etherpad/APIKEY.txt\") as f:\n",
+    "    api_key = f.read().strip()\n",
+    "\n",
+    "api_url = \"https://hub.xpub.nl/soupboat/pad/api/1.2.15/\"\n",
+    "\n",
+    "# wrap in a convenient function (APICALL)\n",
+    "def ep (api_fn, api_url, api_key, **data):\n",
+    "    data['apikey'] = api_key\n",
+    "    return json.load(urlopen(f\"{api_url}{api_fn}\", data=urlencode(data).encode()))\n",
+    "\n",
+    "\n",
+    "glossary = ep(\"getText\", api_url, api_key, padID=\"camilo_glossary\")\n",
+    "\n",
+    "text = glossary[\"data\"][\"text\"]\n",
+    "\n",
+    "words = pypandoc.convert_text(text, 'html', format='md')"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "From a local markdown text file"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "tags": []
+   },
+   "source": [
+    "## Properties"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "The following is a word property dictionary "
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 44,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "properties = [\n",
+    "\t{\n",
+    "\t\t'title':'action',\n",
+    "\t\t'symbol':'A',\n",
+    "        'color': 'green'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'situation',\n",
+    "\t\t'symbol':'S',\n",
+    "\t\t'color': 'aqua'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'logic',\n",
+    "\t\t'symbol':'C',\n",
+    "\t\t'color': 'orange'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'proposition',\n",
+    "\t\t'symbol':'T',\n",
+    "\t\t'color': 'blue'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'hyperlink',\n",
+    "\t\t'symbol':'N',\n",
+    "\t\t'color': 'pink'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'process',\n",
+    "\t\t'symbol':'P',\n",
+    "\t\t'color': 'gray'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'language',\n",
+    "\t\t'symbol':'G',\n",
+    "\t\t'color': 'violet'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'agent',\n",
+    "\t\t'symbol':'E',\n",
+    "\t\t'color': 'purple'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'tool',\n",
+    "\t\t'symbol':'T',\n",
+    "\t\t'color': 'lightblue'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'form',\n",
+    "\t\t'symbol':'Y',\n",
+    "\t\t'color': 'gold'\n",
+    "\t}\n",
+    "]"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Writing the Website"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Write properties legend"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 45,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "description = ''\n",
+    "\n",
+    "i = 0\n",
+    "\n",
+    "for title, symbol, color in properties:\n",
+    "    title = properties[i]['title']\n",
+    "    description += (f''' {title}s,''')\n",
+    "    i += 1"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 46,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "legend = ''\n",
+    "\n",
+    "i = 0\n",
+    "\n",
+    "for title, symbol, color in properties:\n",
+    "    title = properties[i]['title']\n",
+    "    symbol = properties[i]['symbol']\n",
+    "    legend += f'''<button id=\"{title}\" class=\"btn {title}-s\" onclick=\"filterSelection('{title}')\">{title}→  <span class='symbol {title}-s'>{symbol}</span> </button>\\n'''\n",
+    "    i += 1"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Write Script that will add properties to each word"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 47,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "script = ''\n",
+    "\n",
+    "i = 0 \n",
+    "\n",
+    "for title, symbol, color in properties:\n",
+    "    title = properties[i]['title']\n",
+    "    symbol = properties[i]['symbol']\n",
+    "    script += (f\"\"\"const {title} = document.getElementsByClassName(\"{title}\");\n",
+    "    for (let i = 0; i < {title}.length; i++)\"\"\"'{\\n' \n",
+    "               f\"\"\"{title}[i].innerHTML += \"<span class='symbol {title}-s'>{symbol}</span>\";\"\"\" \n",
+    "    '\\n}\\n\\n')\n",
+    "    i += 1"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Assign a different color for each property "
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 48,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "style = ''\n",
+    "\n",
+    "i = 0 \n",
+    "\n",
+    "for title, symbol, color in properties:\n",
+    "    title = properties[i]['title']\n",
+    "    color = properties[i]['color']\n",
+    "    style += f'''.{title}-s:hover''' + '{' + f'''color:{color};''''}'\n",
+    "    i += 1"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 55,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "body = f'''<!DOCTYPE html>\n",
+    "    <html>\n",
+    "    <head>\n",
+    "        <meta charset=\"utf-8\">\n",
+    "        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n",
+    "        <link rel=\"stylesheet\" href=\"style.css\"> \n",
+    "        <title>Attempt to Glossary</title>\n",
+    "    </head>\n",
+    "        <style> {style} </style>\n",
+    "    <body id=\"glo_body\">\n",
+    "    <div class=\"head\">\n",
+    "        <h1>  Permeable Glossary for a Living Publishing Practice </h1>\n",
+    "            <div class=\"question\">\n",
+    "        <input id=\"search\" type=\"text\" ><span onclick=\"document.getElementById('search').value= ''\">X</span>\n",
+    "    </div>\n",
+    "        <a href=\"rss.xml\">\n",
+    "            <p>follow what is new (rss)</p>\n",
+    "        </a>\n",
+    "    </div>\n",
+    "    <div class='diffraction'>\n",
+    "        <img src='images/pattern-01.svg'>\n",
+    "        <img src='images/pattern-02.svg'>\n",
+    "        <img src='images/pattern-03.svg'>\n",
+    "        <img src='images/pattern-04.svg'>\n",
+    "        <img src='images/pattern-05.svg'>\n",
+    "        <img src='images/pattern-06.svg'>\n",
+    "        <img src='images/pattern-07.svg'>\n",
+    "        <img src='images/pattern-08.svg'>\n",
+    "    </div>\n",
+    "    <div class=\"description\">\n",
+    "        <p>From creating, designing and conceptualising to filtering, circulating and amplifying, publishing practices involve different processes and matters. Even though there are multiple theories and authors that approach each of them in a particular way, I propose to make a pause on defining them individually and focus on possible entanglements. Not to find a generalized idea of publishing but to see it as a complex and interwoven materiality. </p> \n",
+    "        <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>\n",
+    "    </div>\n",
+    "    <div class;\n",
+    "    <div id=\"legend\" class=\"legend\"> \n",
+    "        <button class=\"btn active\" onclick=\"filterSelection('all')\">properties</button> {legend}\n",
+    "    </div>\n",
+    "    <div class=\"words\">\n",
+    "        {words} \n",
+    "    </div>\n",
+    "    </body>\n",
+    "        <script>\n",
+    "            {script}\n",
+    "        </script>\n",
+    "        <script src=\"main.js\"></script>\n",
+    "    </html>'''\n",
+    "\n",
+    "website = open('index.html','w')\n",
+    "\n",
+    "website.write(body)\n",
+    "website.close()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "print(words)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "from time import sleep\n",
+    "\n",
+    "while True:\n",
+    "    print('hey')\n",
+    "    sleep(5)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.7.3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}
diff --git a/.ipynb_checkpoints/glossary-checkpoint.json b/.ipynb_checkpoints/glossary-checkpoint.json
new file mode 100644
index 0000000..7d026a9
--- /dev/null
+++ b/.ipynb_checkpoints/glossary-checkpoint.json
@@ -0,0 +1,878 @@
+[
+        {
+                "Word#": "1",
+                "title": "Reflection",
+                "voices": [
+                        "⤷ “Stop and look at your own process and understand it. Eventually, I suppose you do run into the infinite recursion problem, but I guess you get used to that.” (Mary Catherine Bateson)",
+                        "⤷ Es como un círculo: un punto que en su recorrido vuelve a sí mismo",
+                        "⤷ The projection of an image on the mirror",
+                        "⤷ It is a useful way to think when finding common ground",
+                        "⤷ to see the same elsewhere"
+                ]
+        },
+        {
+                "Word#": "2",
+                "title": "Diffraction",
+                "voices": [
+                        "⤷ To perform connection between things",
+                        "⤷ Its when a wave encounters a obstacle and find a slit in it where it bends and make a pattern.",
+                        "⤷ It creates a pattern of differences",
+                        "⤷ “There is no sharp boundary separating the light from the darkness”",
+                        "⤷ Thinking the differences within el medio, el espacio que nos conecta y nos separa simultáneamente.",
+                        "⤷ “About taking responsability for the fact that our practices matter; the world is materialized differently through different practices.”"
+                ]
+        },
+        {
+                "Word#": "3",
+                "title": "Property",
+                "voices": [
+                        "⤷ An attribute, characteristic, or quality",
+                        "⤷ From etymology the word comes from properte which means “nature, quality, distinctive character always present in an individual or class”"
+                ]
+        },
+        {
+                "Word#": "4",
+                "title": "Atata",
+                "voices": [
+                        "⤷ It is a composition of two ideograms (fig.1)in the Mhuysqa dead language . ATATA can be defined as ‘ I give myself and you give yourself , ’ where giving is an act of receiving , because what you do for others is also affecting yourself . This exercise oofreciprocity is a very important vibration of life because nobody can live without others , this includes all living creatures with whom we share the Earth .",
+                        "⤷ Reciprocity awarness. ⤴",
+                        "⤷ to be reciprocal"
+                ]
+        },
+        {
+                "Word#": "5",
+                "title": "Paratext",
+                "voices": [
+                        "⤷ thresholds to the text",
+                        "⤷ thresholds to a publication",
+                        "⤷ Interesting to be aware of the spaces that open, close, introduce and mediate the publication."
+                ]
+        },
+        {
+                "Word#": "6",
+                "title": "Glosario",
+                "voices": [
+                        "⤷ a paratext",
+                        "⤷ from the term gloss which means annotation and layer",
+                        "⤷ This publication see its origin in the idea of layering of annotations"
+                ]
+        },
+        {
+                "Word#": "7",
+                "title": "Urgencia",
+                "voices": [
+                        "⤷ Tener la urgencia como guía para la acción implica una búsqueda constante para posibilitar la publicación de contenidos relevantes de forma accesible y democrática. (…) Es importante decir que cuando hablamos de relevancia, no necesariamente estamos hablando de panfletos y obras explícitamente políticas. En una sociedad adversa a las diferencias y violentamente estandarizada, las obras que dan visibilidad a subjetividades no hegemónicas son potencialmente transformadoras, además de jugar un papel importante en el registro de diferentes formas de existencia, algo profundamente político en sí mismo. ⤴",
+                        "⤷ Being different as a political act itself.",
+                        "⤷ Understanding my needs and collective needs to make something public.",
+                        "⤷ Activating agency"
+                ]
+        },
+        {
+                "Word#": "8",
+                "title": "Post growth",
+                "voices": [
+                        "⤷ to challenge the dominant narratives about growth and progress, and re-envision social metabolism through an understanding of the energy it requires, reconnecting human survival with the living, material qualities of the biosphere, drawing on ecofeminism, indigenous knowledge, environmental accounting and historical materialism. ⤴",
+                        "⤷ To leave behind an activity of accumulation, to find yourselve in a different work rhythm"
+                ]
+        },
+        {
+                "Word#": "9",
+                "title": "Non-teleological reading",
+                "voices": [
+                        "⤷ what if instead of reflecting about the why, we focus about the how? ⤴",
+                        "⤷ What is teleological? ⤴",
+                        "⤷ Have you question how would it be the reading process of your publication?",
+                        "⤷ ¿Por qué publicamos lo que publicamos, en la forma en que lo publicamos? Habrá momentos en que no será necesario preguntar por qué, sino cómo."
+                ]
+        },
+        {
+                "Word#": "10",
+                "title": "Urgent artifact",
+                "voices": [
+                        "⤷ The visible act of “commoning-in-the-crisis.” An outcome of solidarity and coming together in urgent times using modest tools and materials. It’s the manifestation that we can work from shared, common positions, in common, and on common ground. Examples: collaborative spreadsheets, online petitions, protests, surveys,letter-writing, essay writing, note-taking, shared open access writing spaces, streaming workshops, performances, talks, teach-ins, raw and unedited poetry, and quickly made zines. ⤴",
+                        "⤷ Is a set of principles that works to resist oppression-based design ideologies, especially in art and design education. URGENTCRAFT isn’t a manifesto, but rather a constellation of tactics — a series of incomplete observations. A note to self. A reminder that we can use art and design to loosen hegemonic power. ⤴"
+                ]
+        },
+        {
+                "Word#": "11",
+                "title": "Urgentcraft",
+                "voices": [
+                        "⤷ Do what you can",
+                        "⤷ Use modest tools and materials",
+                        "⤷ Practice a slow approach to fast making",
+                        "⤷ Dismantle white supremacy / be anti-racist",
+                        "⤷ Commit to maintenance and self-care as a form of urgency",
+                        "⤷Think big but make small",
+                        "⤷ Resist, loosen, and dismantle ableism, heteropatriachy, and settler colonialism",
+                        "⤷ Prioritize communal care as a never-ending practice",
+                        "⤷ Undestard the politics of your platforms",
+                        "⤷ Redistribute wealth and accumulation",
+                        "⤷ Resit capitalist strategies",
+                        "⤷ Practice media hybridity",
+                        "⤷ Agitate/interfere (“make good trouble”)",
+                        "⤷ Fail to provide the perfect read (resist legibility)",
+                        "⤷ Refuse design perfection / stay with the mess",
+                        "⤷ Work in public (self-publish!)",
+                        "⤷ Work towards the then and there of queer futurity (while acknowledging past struggles and privileges)",
+                        "⤷ Question linearity and other hieratchical structures",
+                        "⤷ [⤴] (https://soulellis.com/writing/urgentcraft2/)"
+                ]
+        },
+        {
+                "Word#": "12",
+                "title": "Complexity",
+                "voices": [
+                        "⤷ Complexity does not mean complicated. Complex systems can in fact be relatively simple.",
+                        "⤷ La complejidad es múltiple, en el sentido que nunca se logra desenredar en sí, siempre resulta irresoluble. Viene de la mano mano con no entender lo que se quiere explicar. Alguna vez leí que la complejidad es aquello que no se puede resumir a una sola palabra. Este glossario, por ejemplo, intenta explicar con múltiples palabras aquello que parece complejo. Falla en el intento.",
+                        "⤷ Humans use metaphors often to deal with complexity."
+                ]
+        },
+        {
+                "Word#": "13",
+                "title": "Contradiction",
+                "voices": [
+                        "⤷ Two different forces that go against each other. Develop a project having in mind that some decisions will go against your own will.",
+                        "⤷ is also aboout the lack of purity when acting."
+                ]
+        },
+        {
+                "Word#": "14",
+                "title": "Rhizome",
+                "voices": [
+                        "⤷ Term adapted from plant biology by Gilles Deleuze and Félix Guattari to conceptualize non-linear relations in both the realm of pure thought and the concrete and the everyday.",
+                        "⤷ Thinking multiplicity as a substantive",
+                        "⤷ connection, heterogeneity, multiplicity, signifying rupture, cartography",
+                        "⤷ Los rizhomas son también estructuras porosas",
+                        "⤷ Being permeable, letting relate yourself within the environment"
+                ]
+        },
+        {
+                "Word#": "15",
+                "title": "Interference",
+                "voices": [
+                        "⤷ On publishing, the possibility to block and reduce the legibility of a matter too enhance other. For example:"
+                ]
+        },
+        {
+                "Word#": "16",
+                "title": "Illegivility",
+                "voices": [
+                        "⤷ Its about being cryptic, hidden. But also to create a safe space. Not being in the spotlight may protect you."
+                ]
+        },
+        {
+                "Word#": "17",
+                "title": "Collaborative spreadsheets",
+                "voices": [
+                        "⤷ Son hojas de cálculo elavoradas colectivamente.",
+                        "⤷ It is a interesting tool to use when gathering information collectively",
+                        "⤷ ⤴"
+                ]
+        },
+        {
+                "Word#": "18",
+                "title": "EPUB",
+                "voices": [
+                        "⤷ Acronym for Electronic Publication. An ebook format developed by the international Digital Publishing Forum (IDPF). EPUB is an open standard and the most commonly used and supported file format for electronic books. EPUB was designed to accommodate reflow-able content. ⤴"
+                ]
+        },
+        {
+                "Word#": "19",
+                "title": "Electronic publication",
+                "voices": [
+                        "⤷ Beyond EPUB, A Electronic Publication is a publication generated, created and shown by an electronic device."
+                ]
+        },
+        {
+                "Word#": "20",
+                "title": "Book",
+                "voices": [
+                        "⤷ The codex,",
+                        "⤷ by folded paper,",
+                        "⤷ unfolded",
+                        "⤷ stapled matter",
+                        "⤷ drawn space",
+                        "⤷ wrapped by glue ~ threads,",
+                        "⤷ inhabid by drawings, letters, words, images,",
+                        "⤷ containing containers such as prologues, colophon, glossaries",
+                        "⤷ the interface,",
+                        "⤷ the simple and the whole",
+                        "⤷ A format"
+                ]
+        },
+        {
+                "Word#": "21",
+                "title": "Autonomous practice",
+                "voices": [
+                        "⤷ On publishing, to be able and to have the energy to create, make, produce and share with self autonomy.",
+                        "⤷ Etymologicaly, autonomous comes from auto- (“self”) and -nomy (“a system of rules or laws about a particular field”).",
+                        "⤷ Autonomous practice suggests drawing your own rules and own systems of creating, making, producing and distributing in order to publish."
+                ]
+        },
+        {
+                "Word#": "22",
+                "title": "Publishing",
+                "voices": [
+                        "⤷ To make something public.",
+                        "⤷ To circulate.",
+                        "⤷ To filter and amplify.",
+                        "⤷ A big spectrum of practices interested into making public",
+                        "⤷ To publish is to make a public through the circulation of material, generating discourse."
+                ]
+        },
+        {
+                "Word#": "23",
+                "title": "Hybrid publication",
+                "voices": [
+                        "⤷ the act of publishing through differents mediums and techniches in order to adapt and contextualize to a specific project or part of it. A hybrid publication can offer a varied spectrum of objects and processes that together construct the body of it."
+                ]
+        },
+        {
+                "Word#": "24",
+                "title": "Printed publication",
+                "voices": [
+                        "⤷ A type of publication that uses a printing technique such as offset, inkjet, risoprint, and so on.",
+                        "⤷ commonly use surfaces and ink as primarily elements"
+                ]
+        },
+        {
+                "Word#": "25",
+                "title": "RISO printing",
+                "voices": [
+                        "⤷ Risograph is a brand of digital duplicators that are designed mainly for high-volume photocopying and printing.",
+                        "⤷ The process creates micro-imperfections in printing, similar to spontaneity, or even comparable to how improvisation in jazz can lead to an unexpected but pleasant result. ⤴"
+                ]
+        },
+        {
+                "Word#": "26",
+                "title": "Agency",
+                "voices": [
+                        "⤷ It is defined as the capacity of individuals to act independently and to make their own free choices. On publishing it suggests to take responsability of the public-action. Publication as an act. See with Urgent-craft."
+                ]
+        },
+        {
+                "Word#": "27",
+                "title": "Responsability",
+                "voices": [
+                        "⤷ The ability to respond.",
+                        "⤷ Being aware that publishing acts have an impact"
+                ]
+        },
+        {
+                "Word#": "28",
+                "title": "Word processors",
+                "voices": [
+                        "⤷ Like Microsoft word. There is plenty open-source ones. See:"
+                ]
+        },
+        {
+                "Word#": "29",
+                "title": "Future-trash",
+                "voices": [
+                        "⤷ Resisting burnout and future trash puts artist and their work in a good position to solve problems. By sustaining a publishing practice over time and creating objects that persist with meaning as their inherent value, artist publishers can continue to create, contribute to, and maintain the radically open, imaginative, accessible and inclusive community that makes up artist publishing. (Alex Arzt, pag 20, What Problems Can Artist Publishers Solve?)",
+                        "⤷¿Cuándo este objeto dejará de existir?"
+                ]
+        },
+        {
+                "Word#": "30",
+                "title": "Promiscuous Publishing",
+                "voices": [
+                        "⤷ “A promiscuous publication is NOT like parallel, hybrid, or cross-media publishing. It is a multi-headed and polycentric form of making public. It enjoys its various forms, and embraces their idiosyncracies. As a multi-headed publication it is NOT obsessed with providing uniform outcomes across diverse media. Having many centers, it can produce new focal points and obfuscate its origins. It explores playfully a spectral diversity with sibling out-comes and bastard children that operate out of sync or tune.” (Christoph Haag, make make do in: The Techno-Galactic Guide to Software Observation, 2016) ⤴"
+                ]
+        },
+        {
+                "Word#": "31",
+                "title": "Do-it-yourself (DIY)",
+                "voices": [
+                        "⤷ Using your own resources and skills to make possible a publication.",
+                        "⤷ La autogestion y procesos autonomos están relacionados con DIY"
+                ]
+        },
+        {
+                "Word#": "32",
+                "title": "Do-it-yourself-with-others (DIYWO)",
+                "voices": [
+                        "⤷ It reminds me Sympoesis.",
+                        "⤷ Hacer las cosas con otros",
+                        "⤷ Is a difficult process that requiares a lot of energy"
+                ]
+        },
+        {
+                "Word#": "33",
+                "title": "Fanzine",
+                "voices": [
+                        "⤷ El fanzine es el libro más simple del mundo. ⤴",
+                        "⤷ Se puede hacer e imprimir de infinitas formas. Es normal hacer fotocopias, siendo la opción más barata, accesible, y democrática. ⤴",
+                        "⤷ Considerado más “under”/rudimentario, es una excelente herramienta para difundir ideas políticas y urgentes. ⤴",
+                        "⤷ Usually free or just to cover production expenses and transportation",
+                        "⤷ Produced using home office equipment",
+                        "⤷ Quick, cheap, small and non-pretentious"
+                ]
+        },
+        {
+                "Word#": "34",
+                "title": "Festival",
+                "voices": [
+                        "⤷ On publishing, festivals are events that congregates creators, editors, publishers and readers that are interested into share and encounter books, fanzines, panflets, objects and so on.",
+                        "⤷ Events created to enhance community building",
+                        "⤷ Festival may expand the individual practice into multiple collective ones."
+                ]
+        },
+        {
+                "Word#": "35",
+                "title": "Markdown: word processing format",
+                "voices": [
+                        "⤷ Markdown’s syntax is intended for one purpose: to be used as a format for writing for the web.",
+                        "⤷ Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a publishing format; Markdown is a writing format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in plain text. ⤴",
+                        "⤷ This format can be useful for text projects that need to adapt to different formats",
+                        "⤷ This glossary uses the markdown format. Check it here: ⤴"
+                ]
+        },
+        {
+                "Word#": "36",
+                "title": "Small-edition",
+                "voices": [
+                        "⤷ Make less than 1000 units of a publication.",
+                        "⤷ Small editions may focus their energies on circulating through individuals that care about it"
+                ]
+        },
+        {
+                "Word#": "37",
+                "title": "Low cost",
+                "voices": [
+                        "⤷ Using a small budget to produce a publication."
+                ]
+        },
+        {
+                "Word#": "38",
+                "title": "Archive",
+                "voices": [
+                        "⤷ A collection of pieces of information generally related to past times.",
+                        "⤷ made by records providing evidential information"
+                ]
+        },
+        {
+                "Word#": "39",
+                "title": "Sustainability",
+                "voices": [
+                        "⤷ On publishing, to be aware of the resources used to create, maintain and circulate a publication",
+                        "⤷ What type of printing process are you using? Do you know where the materias come from? What type of inks are you using? What’s the impact of your digital publication’s infrastructure?"
+                ]
+        },
+        {
+                "Word#": "40",
+                "title": "Open source",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "41",
+                "title": "Infrastructure",
+                "voices": [
+                        "⤷ What makes possible the structure. The underneath processes and materials that sustain a publication.",
+                        "⤷ It could be the tools we use to create, host or publish them."
+                ]
+        },
+        {
+                "Word#": "42",
+                "title": "Self-Hosting",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "43",
+                "title": "Layout",
+                "voices": [
+                        "⤷ How things are organized in the space",
+                        "⤷ Visual structures can suggest conceptual structures"
+                ]
+        },
+        {
+                "Word#": "44",
+                "title": "E-reader hardware",
+                "voices": [
+                        "⤷ The device used to display EPUBs such as Kindle, Komo…etc."
+                ]
+        },
+        {
+                "Word#": "45",
+                "title": "E-reader software",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "46",
+                "title": "bookbinding",
+                "voices": [
+                        "⤷ Bookbinding is the process of physically assembling a book of codex format from an ordered stack of paper sheets that are folded together.",
+                        "⤷ There are different types of binding, here you can find a usefull guide for"
+                ]
+        },
+        {
+                "Word#": "47",
+                "title": "Plain text",
+                "voices": [
+                        "⤷ Text without any visual formatting (such as bold, italic, font types and sizes, clickable hyperlinks, etc.)",
+                        "⤷ ASCII is the oldest and still most common plain-text format"
+                ]
+        },
+        {
+                "Word#": "48",
+                "title": "WYSIWYG",
+                "voices": [
+                        "⤷ (what you see is what you get)"
+                ]
+        },
+        {
+                "Word#": "49",
+                "title": "Logical-semantic markup",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "50",
+                "title": "HTML",
+                "voices": [
+                        "⤷ (hyper text Markup Language)"
+                ]
+        },
+        {
+                "Word#": "51",
+                "title": "Paged-centred",
+                "voices": [
+                        "⤷ Publications that are tought around the idea of a page.",
+                        "⤷ What is beyond a page within publishing?"
+                ]
+        },
+        {
+                "Word#": "52",
+                "title": "Reflow-able layout",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "53",
+                "title": "Hyperlinks",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "54",
+                "title": "Website",
+                "voices": [
+                        "⤷ At its simplest, a website is a folder of text files broadcast from a computer to the rest of the world. [⤴] (https://solarpunk.cool/zines/web-zine-01/introduction.html)"
+                ]
+        },
+        {
+                "Word#": "55",
+                "title": "Web-zine",
+                "voices": [
+                        "⤷ I want to see more personal websites because a handmade web is magical and good.",
+                        "⤷ [⤴] (https://solarpunk.cool/zines/web-zine-01/introduction.html)"
+                ]
+        },
+        {
+                "Word#": "56",
+                "title": "One-to-one:",
+                "voices": [
+                        "⤷ Single publication published in different media"
+                ]
+        },
+        {
+                "Word#": "57",
+                "title": "One-to-many:",
+                "voices": [
+                        "⤷ Single publication that has different appearances in different media"
+                ]
+        },
+        {
+                "Word#": "58",
+                "title": "One-to-database:",
+                "voices": [
+                        "⤷ Publication based on the content of the data base which can be used in a number of ways"
+                ]
+        },
+        {
+                "Word#": "59",
+                "title": "Discourse",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "60",
+                "title": "Speed",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "61",
+                "title": "Afterlife",
+                "voices": [
+                        "⤷ How to make the content relevant again? Re-using it for different contexts."
+                ]
+        },
+        {
+                "Word#": "62",
+                "title": "Non-hasty",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "63",
+                "title": "Reader",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "64",
+                "title": "Post-digital",
+                "voices": [
+                        "⤷ Utilizar los recursos que sean necesarios con las circuntancias contextuales particulares actuales.",
+                        "⤷ To leave behind the digital hype?",
+                        "⤷ The “post-digital mindset” allows a more inclusive research framework of the publishing field, in which e-books and book-apps aren’t the only object of study and where “old” and “new” media are not in a natural opposition. In the field of post-digital publishing, printed matter doesn’t belong to the past and digital tools are not inherently innovative. ⤴",
+                        "⤷ Beyond hyped mediums, what is the one that adjust the most to this project?",
+                        "⤷ To make contextual decisions within a publication."
+                ]
+        },
+        {
+                "Word#": "65",
+                "title": "Anaphora",
+                "voices": [
+                        "⤷ Insistent prosody.",
+                        "⤷ To insist. To state. To make an insistent statement ⤴"
+                ]
+        },
+        {
+                "Word#": "66",
+                "title": "Manifesto",
+                "voices": [
+                        "⤷ A reflection that drives action."
+                ]
+        },
+        {
+                "Word#": "67",
+                "title": "Post-colonial",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "68",
+                "title": "Fragmented",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "69",
+                "title": "Habit",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "70",
+                "title": "Frustration",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "71",
+                "title": "Newsletter",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "72",
+                "title": "Syllabus",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "73",
+                "title": "Audience",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "74",
+                "title": "Meme-ability",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "75",
+                "title": "Communal",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "76",
+                "title": "Community",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "77",
+                "title": "Community-building",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "78",
+                "title": "Political act",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "79",
+                "title": "Editor",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "80",
+                "title": "Filtering",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "81",
+                "title": "Amplification",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "82",
+                "title": "Caring",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "83",
+                "title": "Ambiguity",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "84",
+                "title": "Continuity",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "85",
+                "title": "Dialogue",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "86",
+                "title": "Dissonance",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "87",
+                "title": "Gathering",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "88",
+                "title": "Mutation",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "89",
+                "title": "Reciprocity",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "90",
+                "title": "Regenerative",
+                "voices": [
+                        "⤷ Regeneration has its origins in ecology: taking care of the soil and preventing it from depletion. Nowadays, the idea has broadened and refers to caring in a general sense: caring for the living world, the cultural heritage and our fellow human beings, both now and in the future. [⤴] (https://common-in.nl/slider/#slide3)"
+                ]
+        },
+        {
+                "Word#": "91",
+                "title": "Autopoiesis",
+                "voices": [
+                        "⤷ The term autopoiesis (from Greek αὐτo- (auto-) ‘self’, and ποίησις (poiesis) ‘creation, production’) refers to a system capable of reproducing and maintaining itself by creating its own parts and eventually further components.",
+                        "⤷ De qué manera lo vivo se crea a sí mismo?"
+                ]
+        },
+        {
+                "Word#": "92",
+                "title": "Sympoiesis",
+                "voices": [
+                        "⤷ It is a term that referes the act of ‘making with’",
+                        "⤷ Beyond Autopoiesis, Sympoiesis is a form of self-making that can only happen collectively and collaboratively.",
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "93",
+                "title": "Transformation",
+                "voices": []
+        },
+        {
+                "Word#": "94",
+                "title": "Drawing",
+                "voices": [
+                        "⤷ The act to trace on a surface.",
+                        "⤷ Explore with a pencil the shape of things.",
+                        "⤷ A tool for meditation."
+                ]
+        },
+        {
+                "Word#": "95",
+                "title": "Knoting",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "96",
+                "title": "Link",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "97",
+                "title": "Tangle",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "98",
+                "title": "Cross-references",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "99",
+                "title": "Real-time data",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "100",
+                "title": "RSS: Really Simple Syndication",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "101",
+                "title": "Screen",
+                "voices": [
+                        "⤷ “screen based publishing is intimate in my opinion, as it reaches the space of personal screens often in intimate spaces, but it establishes a remote intimacy, as the publisher is not necessarily meant to be present on the other side and his or her body is certainly distant and invisible” (alessandro Ludovico)"
+                ]
+        },
+        {
+                "Word#": "102",
+                "title": "Rumiante",
+                "voices": [
+                        "⤷ lentitud / animalidad / el estigma vaca / la carne / el no saber cómo decir pero ir rumiando",
+                        "⤷ Los rumiantes, como los bovinos, tienen un complejo sistema de digestión que les permite aprovechar eficientemente los nutrientes de los alimentos, inclusive los de baja calidad nutricional. La rumia debe hacerse en un lugar cómodo, plano, con sombra, para poder echarse. El rumiante procurará contar con las condiciones necesarias para poder rumiar cómodamente. Buscará entonces las condiciones de posibilidad, es decir lugar cómodo y seguro, entre afines que lo sostengan.",
+                        "⤷ El rumiante es irreverente e iconoclasta.",
+                        "⤷ No cree en ideas propias, se sabe no original. Sabe que siempre que habla, traduce",
+                        "⤷ El rumiante apuesta por un ejercicio de invención política que es colectivo, siempre. Procura darse, para sí y su comunidad, herramientas, y entiende que estas herramientas no son algo a lo que se llega, sino que están en constante construcción.",
+                        "⤷ En su acción de rumiar, rinde tributo al proceso y no al producto acabado.",
+                        "⤷ El rumiante es precaria, y como precaria ha desafiado al futuro.",
+                        "⤷ El futuro no es nuestro. No hay futuro. No hay tiempo. El rumiante es lento. (Lucresia Masson, Epistemología rumiante)"
+                ]
+        },
+        {
+                "Word#": "103",
+                "title": "Procesual Book",
+                "voices": [
+                        "⤷ Its a book that is in constant creation and formation",
+                        "⤷ Living Books about life is one example ⤴"
+                ]
+        },
+        {
+                "Word#": "104",
+                "title": "Proposition",
+                "voices": [
+                        "⤷ The act of offering (an idea) for consideration."
+                ]
+        },
+        {
+                "Word#": "105",
+                "title": "Form",
+                "voices": [
+                        "⤷ The shape and structure of something as distinguished from its material"
+                ]
+        },
+        {
+                "Word#": "106",
+                "title": "Action",
+                "voices": [
+                        "⤷ The shape and structure of something as distinguished from its material"
+                ]
+        },
+        {
+                "Word#": "107",
+                "title": "Logic",
+                "voices": [
+                        "⤷ the arrangement of circuit elements (as in a computer) needed for computation.",
+                        "⤷ Any system of thought, whether rigorous and productive or not.",
+                        "⤷ A system of reasons and processes articulated."
+                ]
+        },
+        {
+                "Word#": "108",
+                "title": "Project",
+                "voices": [
+                        "⤷"
+                ]
+        },
+        {
+                "Word#": "109",
+                "title": "Madularity",
+                "voices": [
+                        "⤷ Building blocks logic to build up something.",
+                        "⤷ What aspects of modularity in publishing are making meaningful connections between parts?",
+                        "⤷"
+                ]
+        }
+]
\ No newline at end of file
diff --git a/.ipynb_checkpoints/index-checkpoint.html b/.ipynb_checkpoints/index-checkpoint.html
new file mode 100644
index 0000000..63fbb65
--- /dev/null
+++ b/.ipynb_checkpoints/index-checkpoint.html
@@ -0,0 +1,630 @@
+<!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>Attempt to Glossary</title>
+    </head>
+        <style> .action-s{color:green;}.situation-s{color:aqua;}.logic-s{color:orange;}.proposition-s{color:blue;}.hyperlink-s{color:pink;}.process-s{color:gray;}.language-s{color:violet;}.agent-s{color:purple;}.tool-s{color:lightblue;}.form-s{color:gold;} </style>
+    <body id="glo_body">
+
+    <div class="head">
+        <h1> Glossary for a Diffractive Publishing Practice </h1>
+        <a href="rss.xml">
+            <p>follow what is new (rss)</p>
+        </a>
+    </div>
+    <hr>
+    <div class="description">
+        <p>This glossary project is an ongoing and ever-transforming experiment that attempts to introduce a diffractive methodology inside the publishing practice. It is seen as a mutable and living publication result of collective workshops called Rumination Sessions where participants are invited to think, share and converse their own practices with the current glossary words and annotations. </p> 
+        <p>This publication has multiple states. The tool state, the workshop state, the website state. All of them  to weave as a conversation the multiple actions, situations, logics, propositions, hyperlinks, processs, languages, agents, tools, forms,of the current practice, with other vocabularies that come from critical theory, new materialism and others. The final intention is not just to envision our future as publishers but to help to initiate conversations with others.</p>
+    </div>
+    <hr>
+    <div class="question">
+        <div id="sptContainer"></div>
+    </div>
+    <hr>
+    <div id="legend" class="legend"> 
+        <button class="btn active" onclick="filterSelection('all')">properties</button> <button id="action" class="btn action-s" onclick="filterSelection('action')">action</button>
+<button id="situation" class="btn situation-s" onclick="filterSelection('situation')">situation</button>
+<button id="logic" class="btn logic-s" onclick="filterSelection('logic')">logic</button>
+<button id="proposition" class="btn proposition-s" onclick="filterSelection('proposition')">proposition</button>
+<button id="hyperlink" class="btn hyperlink-s" onclick="filterSelection('hyperlink')">hyperlink</button>
+<button id="process" class="btn process-s" onclick="filterSelection('process')">process</button>
+<button id="language" class="btn language-s" onclick="filterSelection('language')">language</button>
+<button id="agent" class="btn agent-s" onclick="filterSelection('agent')">agent</button>
+<button id="tool" class="btn tool-s" onclick="filterSelection('tool')">tool</button>
+<button id="form" class="btn form-s" onclick="filterSelection('form')">form</button>
+
+    </div>
+    <hr>
+    <div class="words">
+        <div class="word logic situation action">
+<h1 id="reflection" class="title">○ Reflection</h1>
+<p>⤷ “Stop and look at your own process and understand it. Eventually, I suppose you do run into the infinite recursion problem, but I guess you get used to that.” (Mary Catherine Bateson)</p>
+<p>⤷ Es como un círculo: un punto que en su recorrido vuelve a <strong>sí mismo</strong></p>
+<p>⤷ The projection of an <strong>image on the mirror</strong></p>
+<p>⤷ It is a useful way to think when finding <strong>common ground</strong></p>
+<p>⤷ to see the same elsewhere</p>
+</div>
+<div class="word logic proposition action">
+<h1 id="diffraction" class="title">○ Diffraction</h1>
+<p>⤷ To perform connection between things</p>
+<p>⤷ Its when a wave encounters a obstacle and find a slit in it where it bends and make a pattern.</p>
+<p>⤷ It creates a <strong>pattern of differences</strong></p>
+<p>⤷ “There is no sharp boundary separating the light from the darkness”</p>
+<p>⤷ Thinking the differences within el medio, el espacio que nos conecta y nos separa simultáneamente.</p>
+<p>⤷ “About taking responsability for the fact that our practices matter; the world is materialized differently through different practices.”</p>
+</div>
+<div class="word proposition logic hyperlink">
+<h1 id="atata" class="title">○ Atata</h1>
+<p>⤷ It is a composition of two ideograms (fig.1)in the Mhuysqa dead language . ATATA can be defined as ‘ I give myself and you give yourself , ’ where giving is an act of receiving , because what you do for others is also affecting yourself . This exercise oofreciprocity is a very important vibration of life because nobody can live without others , this includes all living creatures with whom we share the Earth .</p>
+<p>⤷ Reciprocity awarness. <a href="https://issue.xpub.nl/13/ATATA/">⤴</a></p>
+<p>⤷ to be reciprocal</p>
+</div>
+<div class="word form">
+<h1 id="paratext" class="title">○ Paratext</h1>
+<p>⤷ thresholds to the text</p>
+<p>⤷ thresholds to a publication</p>
+<p>⤷ Interesting to be aware of the spaces that open, close, introduce and mediate the publication.</p>
+</div>
+<div class="word form">
+<h1 id="glosario" class="title">○ Glosario</h1>
+<p>⤷ a paratext</p>
+<p>⤷ from the term gloss which means <strong>annotation</strong> and <strong>layer</strong></p>
+<p>⤷ This publication see its origin in the idea of <strong>layering of annotations</strong></p>
+</div>
+<div class="word action hyperlink">
+<h1 id="urgencia" class="title">○ Urgencia</h1>
+<p>⤷ Tener la urgencia como guía para la acción implica una búsqueda constante para posibilitar la publicación de <strong>contenidos relevantes</strong> de forma accesible y democrática. (…) Es importante decir que cuando hablamos de relevancia, no necesariamente estamos hablando de <strong>panfletos</strong> y obras explícitamente políticas. En una sociedad adversa a las diferencias y violentamente estandarizada, las obras que dan visibilidad a <strong>subjetividades no hegemónicas</strong> son potencialmente transformadoras, además de jugar un papel importante en el registro de diferentes formas de existencia, algo profundamente político en sí mismo. <a href="https://files.cargocollective.com/c1032387/publicacion-independiente-PRINT.pdf">⤴</a></p>
+<p>⤷ Being different as a political act itself.</p>
+<p>⤷ Understanding my needs and collective needs to make something public.</p>
+<p>⤷ Activating agency</p>
+</div>
+<div class="word proposition hyperlink">
+<h1 id="post-growth" class="title">○ Post growth</h1>
+<p>⤷ to challenge the dominant narratives about growth and progress, and re-envision social metabolism through an understanding of the energy it requires, reconnecting human survival with the living, material qualities of the biosphere, drawing on ecofeminism, indigenous knowledge, environmental accounting and historical materialism. <a href="http://postgrowth.art/">⤴</a></p>
+<p>⤷ To leave behind an activity of accumulation, to find yourselve in a different work rhythm</p>
+</div>
+<div class="word proposition hyperlink">
+<h1 id="non-teleological-reading" class="title">○ Non-teleological reading</h1>
+<p>⤷ what if instead of reflecting about the why, we focus about the how? <a href="https://tdingsun.github.io/reading-machines/">⤴</a></p>
+<p>⤷ What is teleological? <a href="https://en.wikipedia.org/wiki/Teleology">⤴</a></p>
+<p>⤷ Have you question how would it be the reading process of your publication?</p>
+<p>⤷ ¿Por qué publicamos lo que publicamos, en la forma en que lo publicamos? Habrá momentos en que no será necesario preguntar por qué, sino cómo.</p>
+</div>
+<div class="word hyperlink">
+<h1 id="urgent-artifact" class="title">○ Urgent artifact</h1>
+<p>⤷ The visible act of “commoning-in-the-crisis.” An outcome of solidarity and coming together in urgent times using modest tools and materials. It’s the manifestation that we can work from shared, <strong>common positions</strong>, in common, and on <strong>common ground</strong>. Examples: collaborative spreadsheets, online petitions, protests, surveys,letter-writing, essay writing, <strong>note-taking</strong>, shared open access writing spaces, streaming workshops, <strong>performances</strong>, talks, teach-ins, raw and unedited poetry, and quickly made zines. <a href="https://soulellis.com/writing/urgentcraft2/">⤴</a></p>
+<p>⤷ Is a set of principles that works to resist oppression-based design ideologies, especially in art and design education. URGENTCRAFT isn’t a manifesto, but rather a constellation of tactics — a series of incomplete observations. A note to self. A reminder that we can use art and design to loosen hegemonic power. <a href="https://soulellis.com/work/urgentcraft/index.html">⤴</a></p>
+</div>
+<div class="word proposition action">
+<h1 id="urgentcraft" class="title">Urgentcraft</h1>
+<p>⤷ Do what you can</p>
+<p>⤷ Use modest tools and materials</p>
+<p>⤷ Practice a <strong>slow approach to fast making</strong></p>
+<p>⤷ Dismantle white supremacy / be anti-racist</p>
+<p>⤷ Commit to maintenance and self-care as a form of urgency</p>
+<p>⤷Think big but make small</p>
+<p>⤷ Resist, loosen, and <strong>dismantle ableism</strong>, heteropatriachy, and <strong>settler colonialism</strong></p>
+<p>⤷ Prioritize <strong>communal care</strong> as a never-ending practice</p>
+<p>⤷ Undestard the politics of your platforms</p>
+<p>⤷ Redistribute wealth and accumulation</p>
+<p>⤷ <strong>Resit capitalist</strong> strategies</p>
+<p>⤷ Practice media hybridity</p>
+<p>⤷ Agitate/interfere (“make good trouble”)</p>
+<p>⤷ <strong>Fail to provide</strong> the perfect read (resist legibility)</p>
+<p>⤷ Refuse design perfection / stay with the mess</p>
+<p>⤷ Work in public (self-publish!)</p>
+<p>⤷ Work towards the then and there of queer futurity (while acknowledging past struggles and privileges)</p>
+<p>⤷ Question linearity and other hieratchical structures</p>
+<p>⤷ [⤴] (https://soulellis.com/writing/urgentcraft2/)</p>
+</div>
+<div class="word logic">
+<h1 id="complexity" class="title">○ Complexity</h1>
+<p>⤷ Complexity does not mean complicated. Complex systems can in fact be relatively simple.</p>
+<p>⤷ La complejidad es múltiple, en el sentido que nunca se logra desenredar en sí, siempre resulta irresoluble. Viene de la mano mano con no entender lo que se quiere explicar. Alguna vez leí que la complejidad es aquello que no se puede resumir a una sola palabra. Este glossario, por ejemplo, intenta explicar con múltiples palabras aquello que parece complejo. Falla en el intento.</p>
+<p>⤷ Humans use metaphors often to deal with complexity.</p>
+</div>
+<div class="word situation">
+<h1 id="contradiction" class="title">○ Contradiction</h1>
+<p>⤷ Two different forces that go against each other. Develop a project having in mind that some decisions will go against your own will.</p>
+<p>⤷ is also aboout the lack of purity when acting.</p>
+</div>
+<div class="word form">
+<h1 id="rhizome" class="title">○ Rhizome</h1>
+<p>⤷ Term adapted from plant biology by Gilles <em>Deleuze and Félix </em>Guattari to conceptualize <em>non-linear relations in both the realm of pure thought and the concrete and the </em>everyday.</p>
+<p>⤷ Thinking multiplicity as a substantive</p>
+<p>⤷ connection, heterogeneity, multiplicity, signifying rupture, cartography</p>
+<p>⤷ Los rizhomas son también estructuras porosas</p>
+<p>⤷ Being permeable, letting relate yourself within the environment</p>
+</div>
+<div class="word proposition action">
+<h1 id="interference" class="title">○ Interference</h1>
+<p>⤷ On publishing, the possibility to block and reduce the legibility of a matter too enhance other. For example:</p>
+</div>
+<div class="word proposition action logic">
+<h1 id="illegivility" class="title">○ Illegivility</h1>
+<p>⤷ Its about being cryptic, hidden. But also to create a safe space. Not being in the spotlight may protect you.</p>
+</div>
+<div class="word hyperlink action">
+<h1 id="collaborative-spreadsheets" class="title">○ Collaborative spreadsheets</h1>
+<p>⤷ Son hojas de cálculo elavoradas colectivamente.</p>
+<p>⤷ It is a interesting tool to use when gathering information collectively</p>
+<p>⤷ <a href="https://docs.google.com/spreadsheets/d/1UkgIsDpFMuA0_hvqf5f4ytPTKX4wfPp8ByRs3Uymvag/edit#gid=0">⤴</a></p>
+</div>
+<div class="word form hyperlink">
+<h1 id="epub" class="title">○ EPUB</h1>
+<p>⤷ Acronym for Electronic Publication. An ebook format developed by the international Digital Publishing Forum (IDPF). EPUB is an open standard and the most commonly used and supported file format for electronic books. EPUB was designed to accommodate reflow-able content. <a href="https://networkcultures.org/digitalpublishing/">⤴</a></p>
+</div>
+<div class="word form logic">
+<h1 id="electronic-publication" class="title">○ Electronic publication</h1>
+<p>⤷ Beyond EPUB, A Electronic Publication is a publication generated, created and shown by an electronic device.</p>
+</div>
+<div class="word form situation">
+<h1 id="book" class="title">○ Book</h1>
+<p>⤷ The codex,</p>
+<p>⤷ by folded paper,</p>
+<p>⤷ unfolded</p>
+<p>⤷ stapled matter</p>
+<p>⤷ drawn space</p>
+<p>⤷ wrapped by glue ~ threads,</p>
+<p>⤷ inhabid by drawings, letters, words, images,</p>
+<p>⤷ containing containers such as prologues, colophon, glossaries</p>
+<p>⤷ the interface,</p>
+<p>⤷ the simple and the whole</p>
+<p>⤷ A format</p>
+</div>
+<div class="word action proposition situation">
+<h1 id="autonomous-practice" class="title">○ Autonomous practice</h1>
+<p>⤷ On publishing, to be able and to have the energy to create, make, produce and share with self autonomy.</p>
+<p>⤷ Etymologicaly, autonomous comes from auto- (“self”) and -nomy (“a system of rules or laws about a particular field”).</p>
+<p>⤷ Autonomous practice suggests drawing your own rules and own systems of creating, making, producing and distributing in order to publish.</p>
+</div>
+<div class="word action">
+<h1 id="publishing" class="title">○ Publishing</h1>
+<p>⤷ To make something public.</p>
+<p>⤷ To circulate.</p>
+<p>⤷ To filter and amplify.</p>
+<p>⤷ A big spectrum of practices interested into making public</p>
+<p>⤷ To publish is to make a public through the circulation of material, generating discourse.</p>
+</div>
+<div class="word form">
+<h1 id="hybrid-publication" class="title">○ Hybrid publication</h1>
+<p>⤷ the act of publishing through differents mediums and techniches in order to adapt and contextualize to a specific project or part of it. A hybrid publication can offer a varied spectrum of objects and processes that together construct the body of it.</p>
+</div>
+<div class="word form">
+<h1 id="printed-publication" class="title">○ Printed publication</h1>
+<p>⤷ A type of publication that uses a printing technique such as offset, inkjet, risoprint, and so on.</p>
+<p>⤷ commonly use surfaces and ink as primarily elements</p>
+</div>
+<div class="word form process">
+<h1 id="riso-printing" class="title">○ RISO printing</h1>
+<p>⤷ Risograph is a brand of digital duplicators that are designed mainly for high-volume photocopying and printing.</p>
+<p>⤷ The process creates <strong>micro-imperfections in printing</strong>, similar to spontaneity, or even comparable to how improvisation in jazz can lead to an unexpected but pleasant result. <a href="https://odotoo.com/risograph/">⤴</a></p>
+</div>
+<div class="word proposition">
+<h1 id="agency" class="title">○ Agency</h1>
+<p>⤷ It is defined as the capacity of individuals to act independently and to make their own free choices. On publishing it suggests to take responsability of the public-action. Publication as an act. See with Urgent-craft.</p>
+</div>
+<div class="word proposition action">
+<h1 id="responsability" class="title">○ Responsability</h1>
+<p>⤷ The ability to respond.</p>
+<p>⤷ Being aware that publishing acts have an impact</p>
+</div>
+<div class="word form">
+<h1 id="word-processors" class="title">○ Word processors</h1>
+<p>⤷ Like Microsoft word. There is plenty open-source ones. See:</p>
+</div>
+<div class="word proposition situation">
+<h1 id="future-trash" class="title">○ Future-trash</h1>
+<p>⤷ Resisting burnout and future trash puts artist and their work in a good position to solve problems. By sustaining a publishing practice over time and creating objects that persist with meaning as their inherent value, artist publishers can continue to create, contribute to, and maintain the radically open, imaginative, accessible and inclusive community that makes up artist publishing. (Alex Arzt, pag 20, What Problems Can Artist Publishers Solve?)</p>
+<p>⤷¿Cuándo este objeto dejará de existir?</p>
+</div>
+<div class="word situation proposition">
+<h1 id="promiscuous-publishing" class="title">○ Promiscuous Publishing</h1>
+<p>⤷ “A promiscuous publication is NOT like parallel, hybrid, or cross-media publishing. It is a multi-headed and polycentric form of making public. It enjoys its various forms, and embraces their idiosyncracies. As a multi-headed publication it is NOT obsessed with providing uniform outcomes across diverse media. Having many centers, it can produce new focal points and obfuscate its origins. It explores playfully a spectral diversity with sibling out-comes and bastard children that operate out of sync or tune.” (Christoph Haag, make make do in: The Techno-Galactic Guide to Software Observation, 2016) <a href="https://constantvzw.org/wefts/webpublications.en.html">⤴</a></p>
+</div>
+<div class="word proposition process">
+<h1 id="do-it-yourself-diy" class="title">○ Do-it-yourself (DIY)</h1>
+<p>⤷ Using your own resources and skills to make possible a publication.</p>
+<p>⤷ La autogestion y procesos autonomos están relacionados con DIY</p>
+</div>
+<div class="word process proposition">
+<h1 id="do-it-yourself-with-others-diywo" class="title">○ Do-it-yourself-with-others (DIYWO)</h1>
+<p>⤷ It reminds me Sympoesis.</p>
+<p>⤷ Hacer las cosas con otros</p>
+<p>⤷ Is a difficult process that requiares a lot of energy</p>
+</div>
+<div class="word form hyperlink">
+<h1 id="fanzine" class="title">○ Fanzine</h1>
+<p>⤷ El fanzine es el libro más simple del mundo. <a href="https://files.cargocollective.com/c1032387/publicacion-independiente-PRINT.pdf#page=12">⤴</a></p>
+<p>⤷ Se puede hacer e imprimir de infinitas formas. Es normal hacer fotocopias, siendo la opción más barata, accesible, y democrática. <a href="https://files.cargocollective.com/c1032387/publicacion-independiente-PRINT.pdf#page=12">⤴</a></p>
+<p>⤷ Considerado más “under”/rudimentario, es una excelente herramienta para difundir ideas políticas y urgentes. <a href="https://files.cargocollective.com/c1032387/publicacion-independiente-PRINT.pdf#page=12">⤴</a></p>
+<p>⤷ Usually free or just to cover production expenses and transportation</p>
+<p>⤷ Produced using home office equipment</p>
+<p>⤷ Quick, cheap, small and non-pretentious</p>
+</div>
+<div class="word form situation">
+<h1 id="festival" class="title">○ Festival</h1>
+<p>⤷ On publishing, festivals are events that congregates creators, editors, publishers and readers that are interested into share and encounter books, fanzines, panflets, objects and so on.</p>
+<p>⤷ Events created to enhance community building</p>
+<p>⤷ Festival may expand the individual practice into multiple collective ones.</p>
+</div>
+<div class="word form language">
+<h1 id="markdown-word-processing-format" class="title">○ Markdown: word processing format</h1>
+<p>⤷ Markdown’s syntax is intended for one purpose: to be used as a format for writing for the web.</p>
+<p>⤷ Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a publishing format; Markdown is a writing format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in plain text. [⤴] (https://daringfireball.net/projects/markdown/syntax#overview)</p>
+<p>⤷ This format can be useful for text projects that need to adapt to different formats</p>
+<p>⤷ This glossary uses the markdown format. Check it here: <a href="https://hub.xpub.nl/soupboat/pad/p/camilo_glossary">⤴</a></p>
+</div>
+<div class="word proposition action process">
+<h1 id="small-edition" class="title">○ Small-edition</h1>
+<p>⤷ Make less than 1000 units of a publication.</p>
+<p>⤷ Small editions may focus their energies on circulating through individuals that care about it</p>
+</div>
+<div class="word logic">
+<h1 id="low-cost" class="title">○ Low cost</h1>
+<p>⤷ Using a small budget to produce a publication.</p>
+</div>
+<div class="word form situation">
+<h1 id="archive" class="title">○ Archive</h1>
+<p>⤷ A <strong>collection of pieces</strong> of information generally related to past times.</p>
+<p>⤷ made by records providing evidential information</p>
+</div>
+<div class="word proposition logic action">
+<h1 id="sustainability" class="title">○ Sustainability</h1>
+<p>⤷ On publishing, to be aware of the resources used to create, maintain and circulate a publication</p>
+<p>⤷ What type of printing process are you using? Do you know where the materias come from? What type of inks are you using? What’s the impact of your digital publication’s infrastructure?</p>
+</div>
+<div class="word propositon action">
+<h1 id="open-source" class="title">○ Open source</h1>
+<p>⤷</p>
+</div>
+<div class="word process">
+<h1 id="infrastructure" class="title">○ Infrastructure</h1>
+<p>⤷ What makes possible the structure. The underneath processes and materials that sustain a publication.</p>
+<p>⤷ It could be the tools we use to create, host or publish them.</p>
+</div>
+<div class="word proposition process action">
+<h1 id="self-hosting" class="title">○ Self-Hosting</h1>
+<p>⤷</p>
+</div>
+<div class="word form process situation">
+<h1 id="layout" class="title">○ Layout</h1>
+<p>⤷ How things are organized in the space</p>
+<p>⤷ Visual structures can suggest conceptual structures</p>
+</div>
+<div class="word form">
+<h1 id="e-reader-hardware" class="title">○ E-reader hardware</h1>
+<p>⤷ The device used to display EPUBs such as Kindle, Komo…etc.</p>
+</div>
+<div class="word process language">
+<h1 id="e-reader-software" class="title">○ E-reader software</h1>
+<p>⤷</p>
+</div>
+<div class="word process tool">
+<h1 id="bookbinding" class="title">○ bookbinding</h1>
+<p>⤷ Bookbinding is the process of physically assembling a book of codex format from an ordered stack of paper sheets that are folded together.</p>
+<p>⤷ There are different types of binding, here you can find a usefull guide for</p>
+</div>
+<div class="word form tool">
+<h1 id="plain-text" class="title">○ Plain text</h1>
+<p>⤷ Text without any visual formatting (such as bold, italic, font types and sizes, clickable hyperlinks, etc.)</p>
+<p>⤷ ASCII is the oldest and still most common plain-text format</p>
+</div>
+<div class="word form process">
+<h1 id="wysiwyg" class="title">○ WYSIWYG</h1>
+<p>⤷ (what you see is what you get)</p>
+</div>
+<div class="word">
+<h1 id="logical-semantic-markup" class="title">○ Logical-semantic markup</h1>
+<p>⤷</p>
+</div>
+<div class="word language">
+<h1 id="html" class="title">○ HTML</h1>
+<p>⤷ (hyper text Markup Language)</p>
+</div>
+<div class="word situation action">
+<h1 id="paged-centred" class="title">○ Paged-centred</h1>
+<p>⤷ Publications that are tought around the idea of a page.</p>
+<p>⤷ What is beyond a page within publishing?</p>
+</div>
+<div class="word form process">
+<h1 id="reflow-able-layout" class="title">○ Reflow-able layout</h1>
+<p>⤷</p>
+</div>
+<div class="word logic form">
+<h1 id="hyperlinks" class="title">○ Hyperlinks</h1>
+<p>⤷</p>
+</div>
+<div class="word process action">
+<h1 id="one-to-one" class="title">○ One-to-one:</h1>
+<p>⤷ Single publication published in different media</p>
+</div>
+<div class="word process action">
+<h1 id="one-to-many" class="title">○ One-to-many:</h1>
+<p>⤷ Single publication that has different appearances in different media</p>
+</div>
+<div class="word process action">
+<h1 id="one-to-database" class="title">○ One-to-database:</h1>
+<p>⤷ Publication based on the content of the data base which can be used in a number of ways</p>
+</div>
+<div class="word proposition action">
+<h1 id="discourse" class="title">○ Discourse</h1>
+<p>⤷</p>
+</div>
+<div class="word situation logic">
+<h1 id="speed" class="title">○ Speed</h1>
+<p>⤷</p>
+</div>
+<div class="word proposition logic situation">
+<h1 id="afterlife" class="title">○ Afterlife</h1>
+<p>⤷ How to make the <strong>content relevant again</strong>? Re-using it for different contexts.</p>
+</div>
+<div class="word action proposition">
+<h1 id="non-hasty" class="title">○ Non-hasty</h1>
+<p>⤷</p>
+</div>
+<div class="word process situation">
+<h1 id="reader" class="title">○ Reader</h1>
+<p>⤷</p>
+</div>
+<div class="word situation action proposition">
+<h1 id="post-digital" class="title">○ Post-digital</h1>
+<p>⤷ Utilizar los recursos que sean necesarios con las circuntancias contextuales particulares actuales.</p>
+<p>⤷ To leave behind the digital hype?</p>
+<p>⤷ The “post-digital mindset” allows a more inclusive research framework of the publishing field, in which e-books and book-apps aren’t the only object of study and where “old” and “new” media are not in a natural opposition. In the field of post-digital publishing, printed matter doesn’t belong to the past and digital tools are not inherently innovative. <a href="https://ia800509.us.archive.org/15/items/p-dpa_booklet/p-dpa_booklet.pdf">⤴</a></p>
+<p>⤷ Beyond hyped mediums, what is the one that adjust the most to this project?</p>
+<p>⤷ To make <strong>contextual decisions</strong> within a publication.</p>
+</div>
+<div class="word form action project">
+<h1 id="anaphora" class="title">○ Anaphora</h1>
+<p>⤷ Insistent prosody.</p>
+<p>⤷ To insist. To state. To make an insistent statement <a href="https://thenewbridgeproject.com/product/why-publish-noise-miekal-and/">⤴</a></p>
+</div>
+<div class="word form process">
+<h1 id="manifesto" class="title">○ Manifesto</h1>
+<p>⤷ A reflection that <strong>drives action</strong>.</p>
+</div>
+<div class="word situation action logic">
+<h1 id="post-colonial" class="title">○ Post-colonial</h1>
+<p>⤷</p>
+</div>
+<div class="word form proposition logic">
+<h1 id="fragmented" class="title">○ Fragmented</h1>
+<p>⤷</p>
+</div>
+<div class="word situation">
+<h1 id="habit" class="title">○ Habit</h1>
+<p>⤷</p>
+</div>
+<div class="word situation process form">
+<h1 id="frustration" class="title">○ Frustration</h1>
+<p>⤷</p>
+</div>
+<div class="word form action">
+<h1 id="newsletter" class="title">○ Newsletter</h1>
+<p>⤷</p>
+</div>
+<div class="word form action">
+<h1 id="syllabus" class="title">○ Syllabus</h1>
+<p>⤷</p>
+</div>
+<div class="word situation action">
+<h1 id="audience" class="title">○ Audience</h1>
+<p>⤷</p>
+</div>
+<div class="word proposition action situation process">
+<h1 id="meme-ability" class="title">○ Meme-ability</h1>
+<p>⤷</p>
+</div>
+<div class="word situation logic">
+<h1 id="communal" class="title">○ Communal</h1>
+<p>⤷</p>
+</div>
+<div class="word situation action form">
+<h1 id="community" class="title">○ Community</h1>
+<p>⤷</p>
+</div>
+<div class="word situation action process proposition">
+<h1 id="community-building" class="title">○ Community-building</h1>
+<p>⤷</p>
+</div>
+<div class="word action logic">
+<h1 id="political-act" class="title">○ Political act</h1>
+<p>⤷</p>
+</div>
+<div class="word agent logic">
+<h1 id="editor" class="title">○ Editor</h1>
+<p>⤷</p>
+</div>
+<div class="word process logic">
+<h1 id="filtering" class="title">○ Filtering</h1>
+<p>⤷</p>
+</div>
+<div class="word process logic">
+<h1 id="amplification" class="title">○ Amplification</h1>
+<p>⤷</p>
+</div>
+<div class="word process logic action">
+<h1 id="caring" class="title">○ Caring</h1>
+<p>⤷</p>
+</div>
+<div class="word logic situation">
+<h1 id="ambiguity" class="title">○ Ambiguity</h1>
+<p>⤷</p>
+</div>
+<div class="word process situation">
+<h1 id="continuity" class="title">○ Continuity</h1>
+<p>⤷</p>
+</div>
+<div class="word logic form">
+<h1 id="dialogue" class="title">○ Dialogue</h1>
+<p>⤷</p>
+</div>
+<div class="word form action proposition">
+<h1 id="dissonance" class="title">○ Dissonance</h1>
+<p>⤷</p>
+</div>
+<div class="word logic situation">
+<h1 id="gathering" class="title">○ Gathering</h1>
+<p>⤷</p>
+</div>
+<div class="word proposition logic action">
+<h1 id="mutation" class="title">○ Mutation</h1>
+<p>⤷</p>
+</div>
+<div class="word logic situation action proposition">
+<h1 id="reciprocity" class="title">○ Reciprocity</h1>
+<p>⤷</p>
+</div>
+<div class="word action logic proposition">
+<h1 id="regenerative" class="title">○ Regenerative</h1>
+<p>⤷ Regeneration has its origins in ecology: <strong>taking care</strong> of the soil and preventing it from depletion. Nowadays, the idea has broadened and refers to caring in a general sense: caring for the living world, the cultural heritage and our fellow human beings, both now and in the future. [⤴] (https://common-in.nl/slider/#slide3)</p>
+</div>
+<div class="word logic situation">
+<h1 id="autopoiesis" class="title">○ Autopoiesis</h1>
+<p>⤷ The term autopoiesis (from Greek αὐτo- (auto-) ‘self’, and ποίησις (poiesis) ‘creation, production’) refers to a system capable of reproducing and <strong>maintaining itself</strong> by creating its own parts and eventually further components.</p>
+<p>⤷ De qué manera lo vivo se crea a sí mismo?</p>
+</div>
+<div class="word logic situation proposition">
+<h1 id="sympoiesis" class="title">○ Sympoiesis</h1>
+<p>⤷ It is a term that referes the act of <strong>‘making with’</strong></p>
+<p>⤷ Beyond Autopoiesis, Sympoiesis is a form of self-making that can only happen collectively and collaboratively.</p>
+<p>⤷</p>
+</div>
+<div class="word proposition logic action">
+<h1 id="transformation" class="title">○ Transformation</h1>
+</div>
+<div class="word form action">
+<h1 id="drawing" class="title">○ Drawing</h1>
+<p>⤷ The act to trace on a surface.</p>
+<p>⤷ Explore with a pencil the shape of things.</p>
+<p>⤷ A <strong>tool for meditation</strong>.</p>
+</div>
+<div class="word form action logic">
+<h1 id="knoting" class="title">○ Knoting</h1>
+<p>⤷</p>
+</div>
+<div class="word form action logic">
+<h1 id="link" class="title">○ Link</h1>
+<p>⤷</p>
+</div>
+<div class="word form action logic">
+<h1 id="tangle" class="title">○ Tangle</h1>
+<p>⤷</p>
+</div>
+<div class="word action">
+<h1 id="cross-references" class="title">○ Cross-references</h1>
+<p>⤷</p>
+</div>
+<div class="word form process">
+<h1 id="real-time-data" class="title">○ Real-time data</h1>
+<p>⤷</p>
+</div>
+<div class="word form process logic tool">
+<h1 id="rss-really-simple-syndication" class="title">○ RSS: Really Simple Syndication</h1>
+<p>⤷</p>
+</div>
+<div class="word form tool">
+<h1 id="screen" class="title">○ Screen</h1>
+<p>⤷ “screen based publishing is intimate in my opinion, as it reaches the space of personal screens often in intimate spaces, but it establishes a <strong>remote intimacy</strong>, as the publisher is not necessarily meant to be present on the other side and his or her body is certainly distant and invisible” (alessandro Ludovico)</p>
+</div>
+<div class="word situation action logic">
+<h1 id="rumiante" class="title">○ Rumiante</h1>
+<p>⤷ lentitud / animalidad / el estigma vaca / la carne / el no saber cómo decir pero ir rumiando</p>
+<p>⤷ Los rumiantes, como los bovinos, tienen un complejo sistema de digestión que les permite aprovechar eficientemente los nutrientes de los alimentos, inclusive los de baja calidad nutricional. La rumia debe hacerse en un lugar cómodo, plano, con sombra, para poder echarse. El rumiante procurará contar con las condiciones necesarias para poder rumiar cómodamente. Buscará entonces las condiciones de posibilidad, es decir lugar cómodo y seguro, entre afines que lo sostengan.</p>
+<p>⤷ El rumiante es irreverente e iconoclasta.</p>
+<p>⤷ No cree en ideas propias, se sabe no original. Sabe que siempre que habla, traduce</p>
+<p>⤷ El rumiante apuesta por un ejercicio de <strong>invención política</strong> que es colectivo, siempre. Procura darse, para sí y su comunidad, herramientas, y entiende que estas herramientas no son algo a lo que se llega, sino que están en constante construcción.</p>
+<p>⤷ En su acción de rumiar, rinde tributo al proceso y no al producto acabado.</p>
+<p>⤷ El rumiante es precaria, y como precaria ha desafiado al futuro.</p>
+<p>⤷ <strong>El futuro no es nuestro</strong>. <strong>No hay futuro</strong>. No hay tiempo. <strong>El rumiante es lento</strong>. (Lucresia Masson, Epistemología rumiante)</p>
+</div>
+<div class="word proposition form action process">
+<h1 id="procesual-book" class="title">○ Procesual Book</h1>
+<p>⤷ Its a book that is in constant creation and formation</p>
+<p>⤷ <strong>Living Books</strong> about life is one example <a href="https://www.livingbooksaboutlife.org/">⤴</a></p>
+</div>
+<div class="word proposition action">
+<h1 id="proposition" class="title">○ Proposition</h1>
+<p>⤷ The <strong>act of offering</strong> (an idea) for consideration.</p>
+</div>
+<div class="word form">
+<h1 id="form" class="title">○ Form</h1>
+<p>⤷ The shape and structure of something as distinguished from its material</p>
+</div>
+<div class="word action">
+<h1 id="action" class="title">○ Action</h1>
+<p>⤷ The shape and structure of something as distinguished from its material</p>
+</div>
+<div class="word logic">
+<h1 id="logic" class="title">○ Logic</h1>
+<p>⤷ the arrangement of circuit elements (as in a computer) needed for computation.</p>
+<p>⤷ Any system of thought, whether rigorous and productive or not.</p>
+<p>⤷ A system of reasons and processes articulated.</p>
+</div>
+<div class="word hyperlink">
+<h1 id="project" class="title">○ Project</h1>
+<p>⤷</p>
+</div>
+ 
+    </div>
+    </body>
+        <script>
+            const action = document.getElementsByClassName("action");
+    for (let i = 0; i < action.length; i++){
+action[i].innerHTML += "<span class='symbol action-s'>AC</span>";
+}
+
+const situation = document.getElementsByClassName("situation");
+    for (let i = 0; i < situation.length; i++){
+situation[i].innerHTML += "<span class='symbol situation-s'>S</span>";
+}
+
+const logic = document.getElementsByClassName("logic");
+    for (let i = 0; i < logic.length; i++){
+logic[i].innerHTML += "<span class='symbol logic-s'>L</span>";
+}
+
+const proposition = document.getElementsByClassName("proposition");
+    for (let i = 0; i < proposition.length; i++){
+proposition[i].innerHTML += "<span class='symbol proposition-s'>P</span>";
+}
+
+const hyperlink = document.getElementsByClassName("hyperlink");
+    for (let i = 0; i < hyperlink.length; i++){
+hyperlink[i].innerHTML += "<span class='symbol hyperlink-s'>H</span>";
+}
+
+const process = document.getElementsByClassName("process");
+    for (let i = 0; i < process.length; i++){
+process[i].innerHTML += "<span class='symbol process-s'>PS</span>";
+}
+
+const language = document.getElementsByClassName("language");
+    for (let i = 0; i < language.length; i++){
+language[i].innerHTML += "<span class='symbol language-s'>LA</span>";
+}
+
+const agent = document.getElementsByClassName("agent");
+    for (let i = 0; i < agent.length; i++){
+agent[i].innerHTML += "<span class='symbol agent-s'>A</span>";
+}
+
+const tool = document.getElementsByClassName("tool");
+    for (let i = 0; i < tool.length; i++){
+tool[i].innerHTML += "<span class='symbol tool-s'>T</span>";
+}
+
+const form = document.getElementsByClassName("form");
+    for (let i = 0; i < form.length; i++){
+form[i].innerHTML += "<span class='symbol form-s'>F</span>";
+}
+
+
+        </script>
+        <script src="main.js"></script>
+    </html>
\ No newline at end of file
diff --git a/.ipynb_checkpoints/main-checkpoint.js b/.ipynb_checkpoints/main-checkpoint.js
new file mode 100644
index 0000000..5ada602
--- /dev/null
+++ b/.ipynb_checkpoints/main-checkpoint.js
@@ -0,0 +1,102 @@
+///////// filters with buttons ///////////
+
+filterSelection("all")
+function filterSelection(c) {
+  var x, i;
+  x = document.getElementsByClassName("word");
+  if (c == "all") c = "";
+  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
+  for (i = 0; i < x.length; i++) {
+    w3RemoveClass(x[i], "show");
+    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
+  }
+}
+
+// Show filtered elements
+function w3AddClass(element, name) {
+  var i, arr1, arr2;
+  arr1 = element.className.split(" ");
+  arr2 = name.split(" ");
+  for (i = 0; i < arr2.length; i++) {
+    if (arr1.indexOf(arr2[i]) == -1) {
+      element.className += " " + arr2[i];
+    }
+  }
+}
+
+// Hide elements that are not selected
+function w3RemoveClass(element, name) {
+  var i, arr1, arr2;
+  arr1 = element.className.split(" ");
+  arr2 = name.split(" ");
+  for (i = 0; i < arr2.length; i++) {
+    while (arr1.indexOf(arr2[i]) > -1) {
+      arr1.splice(arr1.indexOf(arr2[i]), 1);
+    }
+  }
+  element.className = arr1.join(" ");
+}
+
+// Add active class to the current control button (highlight it)
+var btnContainer = document.getElementById("legend");
+var btns = btnContainer.getElementsByClassName("btn");
+for (var i = 0; i < btns.length; i++) {
+  btns[i].addEventListener("click", function() {
+    var current = document.getElementsByClassName("active");
+    current[0].className = current[0].className.replace(" active", "");
+    this.className += " active";
+  });
+}
+
+
+/////////////. ADD SNIPPETS TO A DIV ../////////
+
+var snippet = document.getElementsByTagName("strong");
+var sptContainer = document.getElementById("sptContainer");
+
+for (var i = 0; i < snippet.length; i++) {
+    sptContainer.innerHTML += "<button class='btn snippet'>"+ snippet[i].innerText + "</button>";
+}
+
+
+//////////// Randomise Font ////////////////
+
+// JavaScript code to pick 
+// a random color from array
+function pickColor() {
+
+    // Array containing colors
+    var colors = [
+        '#ff0000', '#00ff00', '#0000ff',
+        '#ff3333', '#ffff00', '#ff6600'
+    ];
+
+    // selecting random color
+    var random_color = colors[Math.floor(
+            Math.random() * colors.length)];
+
+    var x = document.getElementById('pick');
+    x.style.color = random_color;
+} 
+
+
+//////////Search Bar ////////////////////
+
+
+function search_word() {
+    let input = document.getElementById('search').value;
+    input=input.toLowerCase();
+    let x = document.getElementsByClassName('word');
+      
+    for (i = 0; i < x.length; i++) { 
+        if (!x[i].innerHTML.toLowerCase().includes(input)) {
+            x[i].style.display="none";
+        }
+        else {
+            x[i].style.display="show";                 
+        }
+    }
+}
+
+
+
diff --git a/1.0/.ipynb_checkpoints/glossary-checkpoint.html b/1.0/.ipynb_checkpoints/glossary-checkpoint.html
new file mode 100644
index 0000000..e3b86a6
--- /dev/null
+++ b/1.0/.ipynb_checkpoints/glossary-checkpoint.html
@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<head>
+  <meta charset="utf-8" />
+  <meta name="generator" content="pandoc" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  <title>glossary</title>
+  <style type="text/css">
+      code{white-space: pre-wrap;}
+      span.smallcaps{font-variant: small-caps;}
+      span.underline{text-decoration: underline;}
+      div.column{display: inline-block; vertical-align: top; width: 50%;}
+  </style>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+<h1>EPUB</h1>
+<p>⤷ Acronym for Electronic Publication. An ebook format developed by the international Digital Publishing Forum (IDPF). EPUB is an open standard and the most commonly used and supported file format for electronic books. EPUB was designed to accommodate reflow-able content. (by a tool kit for hybrid publishing)</p>
+<h1>electronic publication</h1>
+<p>⤷ Beyond EPUB, A Electronic Publication is a publication generated, created and shown by an electronic device.</p>
+<h1>book</h1>
+<p>⤷ The codex. By folded Paper. Unfolded stapled paper. Drawn space. Wrapped by glue, staples, threads. Telling drawings, letters, words, images. contains containers such as prologues, colophon. An interface. Index. Simple. Whole. a format.</p>
+<h1>art-oriented publisher</h1>
+<p>⤷ Commonly those who relate their publishing practice to the arts. As a practice, it may refers to the act of publish art related content such as an art catalogue, art history book, art picture book, etc. Furthermore: to publish an art piece itself.</p>
+<h1>autonomous practice</h1>
+<p>⤷ On publishing, to be able and have the energy to create, make, produce and share with self autonomy. Etymologicaly, autonomous comes from auto- (“self”) and -nomy (“a system of rules or laws about a particular field”). Autonomous practice suggests drawing your own rules and own systems of creating, making, producing and distributing in order to make something public.</p>
+<h1>design-oriented publisher</h1>
+<p>⤷</p>
+<h1>publishing</h1>
+<p>⤷ to make something public. to circulate. to filter and amplify.</p>
+<h1>hybrid publishing</h1>
+<p>⤷ the act of publishing through differents mediums and techniches in order to adapt and contextualize to a specific project or part of it. A hybrid publication can offer a varied spectrum of objects and processes that together construct the body of it.</p>
+<h1>printed publishing</h1>
+<p>⤷ A type of publication that uses a printing techniche such as offset, inkyet, risoprint as its physicall</p>
+<h1>RISO printing</h1>
+<p>⤷</p>
+<h1>agency</h1>
+<p>⤷</p>
+<h1>word processors</h1>
+<p>⤷ Like Microsoft word. There is plenty open-source ones.</p>
+<h1>desktop publishing suites (DTP)</h1>
+<p>⤷ The design of printed matter on a personal computer using graphical What-You-See-Is-What-You-Get (WYSIWYG) software such as Adobe InDesign or QuarkXpress. DTP software uses a graphical user interface to visually simulate the analog desks used in pre-digital times by graphic and editorial designers.</p>
+<h1>future-trash</h1>
+<p>⤷ Resisting burnout and future trash puts artist and their work in a good position to solve problems. By sustaining a publishing practice over time and creating objects that persist with meaning as their inherent value, artist publishers can continue to create, contribute to, and maintain the radically open, imaginative, accessible and inclusive community that makes up artist publishing. (Alex Arzt, pag 20, What Problems Can Artist Publishers Solve?)</p>
+<h1>do-it-yourself (DIY)</h1>
+<p>⤷</p>
+<h1>fanzine</h1>
+<p>⤷</p>
+<h1>festival</h1>
+<p>⤷</p>
+<h1>markdown: word processing format</h1>
+<p>⤷</p>
+<h1>small-edition</h1>
+<p>⤷</p>
+<h1>low cost</h1>
+<p>⤷</p>
+<h1>easy to use</h1>
+<p>⤷</p>
+<h1>sustainability</h1>
+<p>⤷</p>
+<h1>platform independence</h1>
+<p>⤷</p>
+<h1>open source</h1>
+<p>⤷</p>
+<h1>layout</h1>
+<p>⤷</p>
+<h1>e-reader hardware</h1>
+<p>⤷</p>
+<h1>e-reader software</h1>
+<p>⤷</p>
+<h1>book-binding</h1>
+<p>⤷</p>
+<h1>plain text</h1>
+<p>⤷ Text without any visual formatting (such as bold, italic, font types and sizes, clickable hyperlinks, etc.) ASCII is the oldest and still most common plain-text format</p>
+<h1>grain direction</h1>
+<p>⤷</p>
+<h1>WYSIWYG (what you see is what you get)</h1>
+<p>⤷</p>
+<h1>logical-semantic markup</h1>
+<p>⤷</p>
+<h1>HTML (hyper text Markup Language)</h1>
+<p>⤷</p>
+<h1>electronic text</h1>
+<p>⤷</p>
+<h1>paged-centred</h1>
+<p>⤷</p>
+<h1>reflow-able layout</h1>
+<p>⤷</p>
+<h1>optical character recognition (OCR)</h1>
+<p>⤷</p>
+<h1>hyperlinks</h1>
+<p>⤷</p>
+<h1>bitstreams</h1>
+<p>⤷</p>
+<h1>one-to-one:</h1>
+<p>⤷ single book published in different media</p>
+<h1>one-to-many:</h1>
+<p>⤷ single book that has different appearances in different media</p>
+<h1>one-to-database:</h1>
+<p>⤷ book based on the content of the data base which can be used in a number of ways</p>
+<h1>discourse</h1>
+<h1>timeframe</h1>
+<h1>speed</h1>
+<h1>quality</h1>
+<h1>afterlife</h1>
+<p>⤷ how to make the content relevant again? Re-using it for different contexts.</p>
+<h1>non-hasty</h1>
+<p>⤷</p>
+<h1>reader</h1>
+<p>⤷</p>
+<h1>post-digital</h1>
+<p>⤷</p>
+<h1>anaphora</h1>
+<p>⤷</p>
+<h1>manifesto</h1>
+<p>⤷</p>
+<h1>post-colonial</h1>
+<p>⤷</p>
+<h1>fragmented</h1>
+<p>⤷</p>
+<h1>small press</h1>
+<p>⤷</p>
+<h1>private press</h1>
+<p>⤷</p>
+<h1>habit</h1>
+<p>⤷</p>
+<h1>frustration</h1>
+<p>⤷</p>
+<h1>urgency</h1>
+<p>⤷</p>
+<h1>open access</h1>
+<p>⤷</p>
+<h1>newsletter</h1>
+<p>⤷</p>
+<h1>audience</h1>
+<p>⤷</p>
+<h1>to reach</h1>
+<p>⤷</p>
+<h1>meme-ability</h1>
+<p>⤷</p>
+<h1>communal</h1>
+<p>⤷</p>
+<h1>community-building</h1>
+<p>⤷</p>
+<h1>political act</h1>
+<p>⤷</p>
+<h1>editor</h1>
+<p>⤷</p>
+<h1>filtering</h1>
+<p>⤷</p>
+<h1>amplification</h1>
+<p>⤷</p>
+<h1>caring</h1>
+<p>⤷</p>
+<h1>ambiguity</h1>
+<p>⤷</p>
+<h1>continuity</h1>
+<p>⤷</p>
+<h1>dialogue</h1>
+<p>⤷</p>
+<h1>determination</h1>
+<p>⤷</p>
+<h1>dissonance</h1>
+<p>⤷</p>
+<h1>gathering</h1>
+<p>⤷</p>
+<h1>groundly</h1>
+<p>⤷</p>
+<h1>mutation</h1>
+<p>⤷</p>
+<h1>reciprocity</h1>
+<p>⤷</p>
+<h1>autopoiesis</h1>
+<p>⤷ The term autopoiesis (from Greek αὐτo- (auto-) 'self', and ποίησις (poiesis) 'creation, production') refers to a system capable of reproducing and maintaining itself by creating its own parts and eventually further components.</p>
+<h1>sym-poiesis</h1>
+<h1>transformation</h1>
+<h1>amplification</h1>
+<h1>drawing</h1>
+<h1>knoting</h1>
+<h1>Table contents</h1>
+<h1>Footnotes</h1>
+<h1>Endnotes</h1>
+<h1>Cross.references</h1>
+<h1>Citations</h1>
+<h1>Bibliography</h1>
+<h1>Real-time data</h1>
+<h1>RSS: Really Simple Syndication</h1>
+<h1>screen</h1>
+<p>⤷ “screen based publishing is intimate in my opinion, as it reaches the space of personal screens often in intimate spaces, but it establishes a remote intimacy, as the publisher is not necessarily meant to be present on the other side and his or her body is certainly distant and invisible” (alessandro Ludovico)</p>
+</body>
+</html>
diff --git a/1.0/.ipynb_checkpoints/glossary-checkpoint.md b/1.0/.ipynb_checkpoints/glossary-checkpoint.md
new file mode 100644
index 0000000..f11880d
--- /dev/null
+++ b/1.0/.ipynb_checkpoints/glossary-checkpoint.md
@@ -0,0 +1,263 @@
+# EPUB
+⤷ Acronym for Electronic Publication. An ebook format developed by the international Digital Publishing Forum (IDPF). EPUB is an open standard and the most commonly used and supported file format for electronic books. EPUB was designed to accommodate reflow-able content. (by a tool kit for hybrid publishing) 
+
+# electronic publication
+⤷ Beyond EPUB, A Electronic Publication is a publication generated, created and shown by an electronic device.
+
+# book 
+⤷ The codex. By folded Paper. Unfolded stapled paper. Drawn space. Wrapped by glue, staples, threads. Telling drawings, letters, words, images. contains containers such as prologues, colophon. An interface. Index. Simple. Whole. a format. 
+
+# art-oriented publisher 
+⤷ Commonly those who relate their publishing practice to the arts. As a practice, it may refers to the act of publish art related content such as an art catalogue, art history book, art picture book, etc. Furthermore: to publish an art piece itself. 
+
+# autonomous practice
+⤷ On publishing, to be able and have the energy to create, make, produce and share with self autonomy. Etymologicaly, autonomous comes from auto- (“self”) and -nomy (“a system of rules or laws about a particular field”). Autonomous practice suggests drawing your own rules and own systems of creating, making, producing and distributing in order to make something public.
+
+# design-oriented publisher
+⤷
+
+# publishing
+⤷ to make something public. to circulate. to filter and amplify.
+
+# hybrid publishing 
+⤷ the act of publishing through differents mediums and techniches in order to adapt and contextualize to a specific project or part of it. A hybrid publication can offer a varied spectrum of objects and processes that together construct the body of it. 
+
+# printed publishing 
+⤷ A type of publication that uses a printing techniche such as offset, inkyet, risoprint as its physicall 
+
+# RISO printing 
+⤷
+
+# agency
+⤷
+
+# word processors
+⤷ Like Microsoft word. There is plenty open-source ones. 
+
+# desktop publishing suites (DTP)
+⤷ The design of printed matter on a personal computer using graphical What-You-See-Is-What-You-Get (WYSIWYG) software such as Adobe InDesign or QuarkXpress. DTP software uses a graphical user interface to visually simulate the analog desks used in pre-digital times by graphic and editorial designers.
+
+# future-trash
+⤷ Resisting burnout and future trash puts artist and their work in a good position to solve problems. By sustaining a publishing practice over time and creating objects that persist with meaning as their inherent value, artist publishers can continue to create, contribute to, and maintain the radically open, imaginative, accessible and inclusive community that makes up artist publishing. (Alex Arzt, pag 20, What Problems Can Artist Publishers Solve?)
+
+# do-it-yourself (DIY)
+⤷
+
+# fanzine 
+⤷
+
+# festival 
+⤷
+
+# markdown: word processing format 
+⤷
+
+# small-edition 
+⤷
+
+# low cost
+⤷
+
+# easy to use 
+⤷
+
+# sustainability 
+⤷
+
+# platform independence
+⤷
+
+# open source 
+⤷
+
+# layout 
+⤷
+# e-reader hardware 
+⤷
+# e-reader software 
+⤷
+# book-binding
+⤷
+# plain text
+⤷ Text without any visual formatting (such as bold, italic, font types and sizes, clickable hyperlinks, etc.) ASCII is the oldest and still most common plain-text format
+
+# grain direction 
+⤷ 
+
+# WYSIWYG (what you see is what you get)
+⤷
+
+# logical-semantic markup 
+⤷
+
+# HTML (hyper text Markup Language)
+⤷
+
+# electronic text 
+⤷
+
+# paged-centred 
+⤷
+
+# reflow-able layout
+⤷
+
+# optical character recognition (OCR)
+⤷
+
+# hyperlinks
+⤷
+
+# bitstreams 
+⤷
+
+# one-to-one: 
+⤷ single book published in different media 
+
+# one-to-many: 
+⤷ single book that has different appearances in different media 
+
+# one-to-database: 
+⤷ book based on the content of the data base which can be used in a number of ways
+ 
+# discourse 
+
+# timeframe 
+
+# speed 
+
+# quality 
+
+# afterlife 
+⤷ how to make the content relevant again? Re-using it for different contexts.
+
+# non-hasty 
+⤷
+
+# reader 
+⤷
+
+# post-digital 
+⤷
+
+# anaphora 
+⤷
+
+# manifesto 
+⤷
+
+# post-colonial 
+⤷
+
+# fragmented 
+⤷
+
+# small press 
+⤷
+
+# private press 
+⤷
+
+# habit 
+⤷
+
+# frustration 
+⤷
+
+# urgency 
+⤷
+
+# open access 
+⤷
+
+# newsletter
+⤷
+
+# audience
+⤷
+
+# to reach
+⤷
+
+# meme-ability
+⤷
+
+# communal 
+⤷
+
+# community-building
+⤷
+
+# political act 
+⤷
+
+# editor 
+⤷
+
+# filtering 
+⤷
+
+# amplification
+⤷
+
+# caring
+⤷
+
+# ambiguity 
+⤷
+
+# continuity 
+⤷
+
+# dialogue 
+⤷
+
+# determination 
+⤷
+
+# dissonance 
+⤷
+
+# gathering 
+⤷
+
+# groundly 
+⤷
+
+# mutation 
+⤷
+
+# reciprocity 
+⤷
+
+# autopoiesis 
+⤷ The term autopoiesis (from Greek αὐτo- (auto-) 'self', and ποίησις (poiesis) 'creation, production') refers to a system capable of reproducing and maintaining itself by creating its own parts and eventually further components.
+
+# sym-poiesis 
+
+# transformation 
+
+# amplification 
+
+# drawing 
+
+# knoting 
+
+# Table contents
+
+# Footnotes 
+
+# Endnotes 
+
+# Cross.references
+
+# Citations 
+
+# Bibliography 
+
+# Real-time data 
+
+# RSS: Really Simple Syndication 
+
+# screen
+⤷ “screen based publishing is intimate in my opinion, as it reaches the space of personal screens often in intimate spaces, but it establishes a remote intimacy, as the publisher is not necessarily meant to be present on the other side and his or her body is certainly distant and invisible” (alessandro Ludovico)
\ No newline at end of file
diff --git a/1.0/.ipynb_checkpoints/index.old-checkpoint.html b/1.0/.ipynb_checkpoints/index.old-checkpoint.html
new file mode 100644
index 0000000..5875115
--- /dev/null
+++ b/1.0/.ipynb_checkpoints/index.old-checkpoint.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<head>
+  <meta charset="utf-8" />
+  <meta name="generator" content="pandoc" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  <title>glossary</title>
+  <style type="text/css">
+      code{white-space: pre-wrap;}
+      span.smallcaps{font-variant: small-caps;}
+      span.underline{text-decoration: underline;}
+      div.column{display: inline-block; vertical-align: top; width: 50%;}
+  </style>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+<p>Electronic publishing Traditional book Art-oriented publisher Design-oriented publishing Hybrid publishing Printed publishing Word Processors (Microsoft Word) Desktop publishing suites (DTP)(Adobe Indesign) Do-it-yourself (DIY) EPUB3: Electronic publication format Markdown: Word processing format Small-edition Low cost Ease to use Sustainability Platform independence Open Source Layout E-reader hardware E-reader software WYSIWYG (what you see is what you get) Logical-semantic markup HTML(hypertext Markup Language) Electronic text Paged-centered Reflowable layout Optical character recognition(OCR) Hyperlinks Bitstreams One-to-one: single book published in different media One-to-many: single book that has different appearances in different media One-to-database: book based on the content of the data base which can be used in a number of ways Table con tontines Footnotes Endnotes cross.references citations bibliography Real-time data</p>
+</body>
+</html>
diff --git a/1.0/.ipynb_checkpoints/style-checkpoint.css b/1.0/.ipynb_checkpoints/style-checkpoint.css
new file mode 100644
index 0000000..bf69968
--- /dev/null
+++ b/1.0/.ipynb_checkpoints/style-checkpoint.css
@@ -0,0 +1,87 @@
+body {
+    font-size: 2vw;
+    font-family: 'Courier New', Courier, monospace;    
+    margin: 0%;
+}
+
+ul {
+    margin: 0%;
+    padding: 0%;
+}
+
+li {
+    /* border: solid 0.3pt; */
+    list-style-type: none;
+    padding: 0%;
+    width: 20%;
+    margin-top: -0.5pt;
+    height: fit-content;
+}
+
+.head{
+    margin: 0.4vw;
+    margin-left: 0.5vw;
+    margin-right: 0.5vw;
+}
+
+.words {
+    -webkit-column-count: 3;
+    -moz-column-count: 3;
+        column-count: 3;
+    -webkit-column-width: 400px;
+    -moz-column-width: 400px;
+        column-width: 400px;
+    margin: 0.5vw;
+    margin-left: 0.7vw;
+    margin-right: 0.7vw;
+}
+
+.word_title {
+    /* border: solid 0.3pt; */
+    font-size: 2vw;
+    font-weight:normal;
+    font-family: 'Courier New', Courier, monospace;
+    padding: 0%;
+
+    /* width: 20%; */
+    margin-top: -0.5pt;
+    margin-left: 2vw;
+    margin-bottom: 0;
+
+    text-decoration: underline;     
+    text-decoration-color:gold; 
+}
+
+p {
+    /* border: solid 0.3pt; */
+    font-size: 2vw;
+    font-weight:normal;
+    font-family: 'Courier New', Courier, monospace;
+    padding: 0%;
+    /* width: 20%; */
+    margin-top: -0.5pt;
+    margin-left: 0;
+    margin-bottom: 0;
+}
+
+
+input {
+    height: 1.5vw;
+    weight: 100%;
+    margin-bottom: 1pt;
+    margin-left: 2pt;
+    color: darkgreen;
+}
+
+#trans_input {
+    border: none;
+    padding-left: 15pt;
+}
+
+hr {
+    margin: 0;
+}
+
+b{
+    color: gold;
+}
\ No newline at end of file
diff --git a/1.0/glossary.html b/1.0/glossary.html
new file mode 100644
index 0000000..e3b86a6
--- /dev/null
+++ b/1.0/glossary.html
@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<head>
+  <meta charset="utf-8" />
+  <meta name="generator" content="pandoc" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  <title>glossary</title>
+  <style type="text/css">
+      code{white-space: pre-wrap;}
+      span.smallcaps{font-variant: small-caps;}
+      span.underline{text-decoration: underline;}
+      div.column{display: inline-block; vertical-align: top; width: 50%;}
+  </style>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+<h1>EPUB</h1>
+<p>⤷ Acronym for Electronic Publication. An ebook format developed by the international Digital Publishing Forum (IDPF). EPUB is an open standard and the most commonly used and supported file format for electronic books. EPUB was designed to accommodate reflow-able content. (by a tool kit for hybrid publishing)</p>
+<h1>electronic publication</h1>
+<p>⤷ Beyond EPUB, A Electronic Publication is a publication generated, created and shown by an electronic device.</p>
+<h1>book</h1>
+<p>⤷ The codex. By folded Paper. Unfolded stapled paper. Drawn space. Wrapped by glue, staples, threads. Telling drawings, letters, words, images. contains containers such as prologues, colophon. An interface. Index. Simple. Whole. a format.</p>
+<h1>art-oriented publisher</h1>
+<p>⤷ Commonly those who relate their publishing practice to the arts. As a practice, it may refers to the act of publish art related content such as an art catalogue, art history book, art picture book, etc. Furthermore: to publish an art piece itself.</p>
+<h1>autonomous practice</h1>
+<p>⤷ On publishing, to be able and have the energy to create, make, produce and share with self autonomy. Etymologicaly, autonomous comes from auto- (“self”) and -nomy (“a system of rules or laws about a particular field”). Autonomous practice suggests drawing your own rules and own systems of creating, making, producing and distributing in order to make something public.</p>
+<h1>design-oriented publisher</h1>
+<p>⤷</p>
+<h1>publishing</h1>
+<p>⤷ to make something public. to circulate. to filter and amplify.</p>
+<h1>hybrid publishing</h1>
+<p>⤷ the act of publishing through differents mediums and techniches in order to adapt and contextualize to a specific project or part of it. A hybrid publication can offer a varied spectrum of objects and processes that together construct the body of it.</p>
+<h1>printed publishing</h1>
+<p>⤷ A type of publication that uses a printing techniche such as offset, inkyet, risoprint as its physicall</p>
+<h1>RISO printing</h1>
+<p>⤷</p>
+<h1>agency</h1>
+<p>⤷</p>
+<h1>word processors</h1>
+<p>⤷ Like Microsoft word. There is plenty open-source ones.</p>
+<h1>desktop publishing suites (DTP)</h1>
+<p>⤷ The design of printed matter on a personal computer using graphical What-You-See-Is-What-You-Get (WYSIWYG) software such as Adobe InDesign or QuarkXpress. DTP software uses a graphical user interface to visually simulate the analog desks used in pre-digital times by graphic and editorial designers.</p>
+<h1>future-trash</h1>
+<p>⤷ Resisting burnout and future trash puts artist and their work in a good position to solve problems. By sustaining a publishing practice over time and creating objects that persist with meaning as their inherent value, artist publishers can continue to create, contribute to, and maintain the radically open, imaginative, accessible and inclusive community that makes up artist publishing. (Alex Arzt, pag 20, What Problems Can Artist Publishers Solve?)</p>
+<h1>do-it-yourself (DIY)</h1>
+<p>⤷</p>
+<h1>fanzine</h1>
+<p>⤷</p>
+<h1>festival</h1>
+<p>⤷</p>
+<h1>markdown: word processing format</h1>
+<p>⤷</p>
+<h1>small-edition</h1>
+<p>⤷</p>
+<h1>low cost</h1>
+<p>⤷</p>
+<h1>easy to use</h1>
+<p>⤷</p>
+<h1>sustainability</h1>
+<p>⤷</p>
+<h1>platform independence</h1>
+<p>⤷</p>
+<h1>open source</h1>
+<p>⤷</p>
+<h1>layout</h1>
+<p>⤷</p>
+<h1>e-reader hardware</h1>
+<p>⤷</p>
+<h1>e-reader software</h1>
+<p>⤷</p>
+<h1>book-binding</h1>
+<p>⤷</p>
+<h1>plain text</h1>
+<p>⤷ Text without any visual formatting (such as bold, italic, font types and sizes, clickable hyperlinks, etc.) ASCII is the oldest and still most common plain-text format</p>
+<h1>grain direction</h1>
+<p>⤷</p>
+<h1>WYSIWYG (what you see is what you get)</h1>
+<p>⤷</p>
+<h1>logical-semantic markup</h1>
+<p>⤷</p>
+<h1>HTML (hyper text Markup Language)</h1>
+<p>⤷</p>
+<h1>electronic text</h1>
+<p>⤷</p>
+<h1>paged-centred</h1>
+<p>⤷</p>
+<h1>reflow-able layout</h1>
+<p>⤷</p>
+<h1>optical character recognition (OCR)</h1>
+<p>⤷</p>
+<h1>hyperlinks</h1>
+<p>⤷</p>
+<h1>bitstreams</h1>
+<p>⤷</p>
+<h1>one-to-one:</h1>
+<p>⤷ single book published in different media</p>
+<h1>one-to-many:</h1>
+<p>⤷ single book that has different appearances in different media</p>
+<h1>one-to-database:</h1>
+<p>⤷ book based on the content of the data base which can be used in a number of ways</p>
+<h1>discourse</h1>
+<h1>timeframe</h1>
+<h1>speed</h1>
+<h1>quality</h1>
+<h1>afterlife</h1>
+<p>⤷ how to make the content relevant again? Re-using it for different contexts.</p>
+<h1>non-hasty</h1>
+<p>⤷</p>
+<h1>reader</h1>
+<p>⤷</p>
+<h1>post-digital</h1>
+<p>⤷</p>
+<h1>anaphora</h1>
+<p>⤷</p>
+<h1>manifesto</h1>
+<p>⤷</p>
+<h1>post-colonial</h1>
+<p>⤷</p>
+<h1>fragmented</h1>
+<p>⤷</p>
+<h1>small press</h1>
+<p>⤷</p>
+<h1>private press</h1>
+<p>⤷</p>
+<h1>habit</h1>
+<p>⤷</p>
+<h1>frustration</h1>
+<p>⤷</p>
+<h1>urgency</h1>
+<p>⤷</p>
+<h1>open access</h1>
+<p>⤷</p>
+<h1>newsletter</h1>
+<p>⤷</p>
+<h1>audience</h1>
+<p>⤷</p>
+<h1>to reach</h1>
+<p>⤷</p>
+<h1>meme-ability</h1>
+<p>⤷</p>
+<h1>communal</h1>
+<p>⤷</p>
+<h1>community-building</h1>
+<p>⤷</p>
+<h1>political act</h1>
+<p>⤷</p>
+<h1>editor</h1>
+<p>⤷</p>
+<h1>filtering</h1>
+<p>⤷</p>
+<h1>amplification</h1>
+<p>⤷</p>
+<h1>caring</h1>
+<p>⤷</p>
+<h1>ambiguity</h1>
+<p>⤷</p>
+<h1>continuity</h1>
+<p>⤷</p>
+<h1>dialogue</h1>
+<p>⤷</p>
+<h1>determination</h1>
+<p>⤷</p>
+<h1>dissonance</h1>
+<p>⤷</p>
+<h1>gathering</h1>
+<p>⤷</p>
+<h1>groundly</h1>
+<p>⤷</p>
+<h1>mutation</h1>
+<p>⤷</p>
+<h1>reciprocity</h1>
+<p>⤷</p>
+<h1>autopoiesis</h1>
+<p>⤷ The term autopoiesis (from Greek αὐτo- (auto-) 'self', and ποίησις (poiesis) 'creation, production') refers to a system capable of reproducing and maintaining itself by creating its own parts and eventually further components.</p>
+<h1>sym-poiesis</h1>
+<h1>transformation</h1>
+<h1>amplification</h1>
+<h1>drawing</h1>
+<h1>knoting</h1>
+<h1>Table contents</h1>
+<h1>Footnotes</h1>
+<h1>Endnotes</h1>
+<h1>Cross.references</h1>
+<h1>Citations</h1>
+<h1>Bibliography</h1>
+<h1>Real-time data</h1>
+<h1>RSS: Really Simple Syndication</h1>
+<h1>screen</h1>
+<p>⤷ “screen based publishing is intimate in my opinion, as it reaches the space of personal screens often in intimate spaces, but it establishes a remote intimacy, as the publisher is not necessarily meant to be present on the other side and his or her body is certainly distant and invisible” (alessandro Ludovico)</p>
+</body>
+</html>
diff --git a/1.0/glossary.md b/1.0/glossary.md
new file mode 100644
index 0000000..f11880d
--- /dev/null
+++ b/1.0/glossary.md
@@ -0,0 +1,263 @@
+# EPUB
+⤷ Acronym for Electronic Publication. An ebook format developed by the international Digital Publishing Forum (IDPF). EPUB is an open standard and the most commonly used and supported file format for electronic books. EPUB was designed to accommodate reflow-able content. (by a tool kit for hybrid publishing) 
+
+# electronic publication
+⤷ Beyond EPUB, A Electronic Publication is a publication generated, created and shown by an electronic device.
+
+# book 
+⤷ The codex. By folded Paper. Unfolded stapled paper. Drawn space. Wrapped by glue, staples, threads. Telling drawings, letters, words, images. contains containers such as prologues, colophon. An interface. Index. Simple. Whole. a format. 
+
+# art-oriented publisher 
+⤷ Commonly those who relate their publishing practice to the arts. As a practice, it may refers to the act of publish art related content such as an art catalogue, art history book, art picture book, etc. Furthermore: to publish an art piece itself. 
+
+# autonomous practice
+⤷ On publishing, to be able and have the energy to create, make, produce and share with self autonomy. Etymologicaly, autonomous comes from auto- (“self”) and -nomy (“a system of rules or laws about a particular field”). Autonomous practice suggests drawing your own rules and own systems of creating, making, producing and distributing in order to make something public.
+
+# design-oriented publisher
+⤷
+
+# publishing
+⤷ to make something public. to circulate. to filter and amplify.
+
+# hybrid publishing 
+⤷ the act of publishing through differents mediums and techniches in order to adapt and contextualize to a specific project or part of it. A hybrid publication can offer a varied spectrum of objects and processes that together construct the body of it. 
+
+# printed publishing 
+⤷ A type of publication that uses a printing techniche such as offset, inkyet, risoprint as its physicall 
+
+# RISO printing 
+⤷
+
+# agency
+⤷
+
+# word processors
+⤷ Like Microsoft word. There is plenty open-source ones. 
+
+# desktop publishing suites (DTP)
+⤷ The design of printed matter on a personal computer using graphical What-You-See-Is-What-You-Get (WYSIWYG) software such as Adobe InDesign or QuarkXpress. DTP software uses a graphical user interface to visually simulate the analog desks used in pre-digital times by graphic and editorial designers.
+
+# future-trash
+⤷ Resisting burnout and future trash puts artist and their work in a good position to solve problems. By sustaining a publishing practice over time and creating objects that persist with meaning as their inherent value, artist publishers can continue to create, contribute to, and maintain the radically open, imaginative, accessible and inclusive community that makes up artist publishing. (Alex Arzt, pag 20, What Problems Can Artist Publishers Solve?)
+
+# do-it-yourself (DIY)
+⤷
+
+# fanzine 
+⤷
+
+# festival 
+⤷
+
+# markdown: word processing format 
+⤷
+
+# small-edition 
+⤷
+
+# low cost
+⤷
+
+# easy to use 
+⤷
+
+# sustainability 
+⤷
+
+# platform independence
+⤷
+
+# open source 
+⤷
+
+# layout 
+⤷
+# e-reader hardware 
+⤷
+# e-reader software 
+⤷
+# book-binding
+⤷
+# plain text
+⤷ Text without any visual formatting (such as bold, italic, font types and sizes, clickable hyperlinks, etc.) ASCII is the oldest and still most common plain-text format
+
+# grain direction 
+⤷ 
+
+# WYSIWYG (what you see is what you get)
+⤷
+
+# logical-semantic markup 
+⤷
+
+# HTML (hyper text Markup Language)
+⤷
+
+# electronic text 
+⤷
+
+# paged-centred 
+⤷
+
+# reflow-able layout
+⤷
+
+# optical character recognition (OCR)
+⤷
+
+# hyperlinks
+⤷
+
+# bitstreams 
+⤷
+
+# one-to-one: 
+⤷ single book published in different media 
+
+# one-to-many: 
+⤷ single book that has different appearances in different media 
+
+# one-to-database: 
+⤷ book based on the content of the data base which can be used in a number of ways
+ 
+# discourse 
+
+# timeframe 
+
+# speed 
+
+# quality 
+
+# afterlife 
+⤷ how to make the content relevant again? Re-using it for different contexts.
+
+# non-hasty 
+⤷
+
+# reader 
+⤷
+
+# post-digital 
+⤷
+
+# anaphora 
+⤷
+
+# manifesto 
+⤷
+
+# post-colonial 
+⤷
+
+# fragmented 
+⤷
+
+# small press 
+⤷
+
+# private press 
+⤷
+
+# habit 
+⤷
+
+# frustration 
+⤷
+
+# urgency 
+⤷
+
+# open access 
+⤷
+
+# newsletter
+⤷
+
+# audience
+⤷
+
+# to reach
+⤷
+
+# meme-ability
+⤷
+
+# communal 
+⤷
+
+# community-building
+⤷
+
+# political act 
+⤷
+
+# editor 
+⤷
+
+# filtering 
+⤷
+
+# amplification
+⤷
+
+# caring
+⤷
+
+# ambiguity 
+⤷
+
+# continuity 
+⤷
+
+# dialogue 
+⤷
+
+# determination 
+⤷
+
+# dissonance 
+⤷
+
+# gathering 
+⤷
+
+# groundly 
+⤷
+
+# mutation 
+⤷
+
+# reciprocity 
+⤷
+
+# autopoiesis 
+⤷ The term autopoiesis (from Greek αὐτo- (auto-) 'self', and ποίησις (poiesis) 'creation, production') refers to a system capable of reproducing and maintaining itself by creating its own parts and eventually further components.
+
+# sym-poiesis 
+
+# transformation 
+
+# amplification 
+
+# drawing 
+
+# knoting 
+
+# Table contents
+
+# Footnotes 
+
+# Endnotes 
+
+# Cross.references
+
+# Citations 
+
+# Bibliography 
+
+# Real-time data 
+
+# RSS: Really Simple Syndication 
+
+# screen
+⤷ “screen based publishing is intimate in my opinion, as it reaches the space of personal screens often in intimate spaces, but it establishes a remote intimacy, as the publisher is not necessarily meant to be present on the other side and his or her body is certainly distant and invisible” (alessandro Ludovico)
\ No newline at end of file
diff --git a/1.0/index.old.html b/1.0/index.old.html
new file mode 100644
index 0000000..c8572a3
--- /dev/null
+++ b/1.0/index.old.html
@@ -0,0 +1,92 @@
+<!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>Attempt to Glossary</title>
+</head>
+<body id="glo_body">
+
+<div class="head"> 
+    Glossary for a Diffractive Publishing Practice
+
+</div>
+<hr>
+<div class="words"> 
+        <!-- <div class="input_field">
+        ↬<input type="text" placeholder="  write a new word" autofocus>
+    </div> -->
+
+    <!-- <ul class="word_list">
+        <li class="trans" id="tree">tree</li>
+        <li id="trans_input"><input class="trans_input" type="text" placeholder="↬ write a new translation" autofocus></li>
+    </ul> -->
+    <h1 class="word_title"><b>○</b> EPUB</h1>
+    <p>⤷ Acronym for Electronic Publication. An ebook format developed by the international Digital Publishing Forum (IDPF). EPUB is an open standard and the most commonly used and supported file formart for electronic books. EPUB was dsigned to accommodate reflowable content.</p>
+    <h1 class="word_title"><b>○</b> Electronic Publication</h1>
+    <p>⤷ Beyond EPUB, A Electronic Publication is a publication generated, created and shown by an electronic device. </p>
+    <h1 class="word_title"><b>○</b> Traditional book</h1>
+    <h1 class="word_title"><b>○</b> Art-oriented publishing</h1>
+    <h1 class="word_title"><b>○</b> Design-oriented publishing</h1>
+    <h1 class="word_title"><b>○</b> Hybrid publishing</h1>
+    <h1 class="word_title"><b>○</b> Printed publishing</h1>
+    <h1 class="word_title"><b>○</b> Word Processors (Microsoft Word)</h1>
+    <h1 class="word_title"><b>○</b> Desktop publishing suites (DTP)</h1>
+    <p>⤷ The design of printed matter on a personal computer using graphical What-You-See-Is-What-You-Get (WYSIWYG) software such as Adobe InDesign or QuarkXpress. DTP software useas a graphical user interface to visually simulate the nalog desks used in pre-digital times by graphic and editorial designers.</p>
+    <h1 class="word_title"><b>○</b> Do-it-yourself (DIY)</h1>
+    <h1 class="word_title"><b>○</b> Markdown</h1>
+    <p>⤷ Word processing format</p>
+    <h1 class="word_title"><b>○</b> Small-edition</h1>
+    <h1 class="word_title"><b>○</b> Synergy</h1>
+    <h1 class="word_title"><b>○</b> Low cost</h1>
+    <h1 class="word_title"><b>○</b> Ease to use</h1>
+    <h1 class="word_title"><b>○</b> Sustainability</h1>
+    <h1 class="word_title"><b>○</b> Platform independence</h1>
+    <h1 class="word_title"><b>○</b> Open Source</h1>
+    <h1 class="word_title"><b>○</b> Layout</h1>
+    <h1 class="word_title"><b>○</b> Intra-acting</h1>
+    <h1 class="word_title"><b>○</b> E-paper</h1>
+    <p>⤷ Word processing format</p>
+    <h1 class="word_title"><b>○</b> E-reader hardware</h1>
+    <h1 class="word_title"><b>○</b> Plain Text</h1>
+    <p>⤷ Text without any visual fomratting (such as bold, italic, font types and sizes, clickable hyperlinks, etc.) ASCII is the oldest and still </p>
+    <h1 class="word_title"><b>○</b> E-reader software</h1>
+    <h1 class="word_title"><b>○</b> WYSIWYG (what you see is what you get)</h1>
+    <h1 class="word_title"><b>○</b> Logical-semantic markup</h1>
+    <h1 class="word_title"><b>○</b> HTML (hypertext Markup Language)</h1>
+    <h1 class="word_title"><b>○</b> Electronic text</h1>
+    <h1 class="word_title"><b>○</b> Paged-centered</h1>
+    <h1 class="word_title"><b>○</b> Reflowable</h1>
+    <p> A reflowable document is a document without a predefined page layout, in which the page dimensions are dynamically and automatically adapted (includind page breaks) to each screen size. The pages are contextualized.</p>
+    <h1 class="word_title"><b>○</b> Context</h1>
+    <h1 class="word_title"><b>○</b> Optical character recognition (OCR)</h1>
+    <h1 class="word_title"><b>○</b> Hyperlinks</h1>
+    <h1 class="word_title"><b>○</b> Sympoiesis</h1>
+    <p>⤷ Create with... </p>
+    <h1 class="word_title"><b>○</b> Bitstreams</h1>
+    <h1 class="word_title"><b>○</b> One-to-one:</h1>
+    <p>⤷ single book published in different media</p>
+    <h1 class="word_title"><b>○</b> One-to-many:</h1>
+    <p>⤷ single book that has different appearances in different media</p>
+    <h1 class="word_title"><b>○</b> One-to-database:</h1>
+    <p>⤷ book based on the content of the data base which can be used in a number of ways</p>
+    <h1 class="word_title"><b>○</b> Table of contents</h1>
+    <h1 class="word_title"><b>○</b> Autopoiesis</h1>
+    <p>⤷ The term autopoiesis (from Greek αὐτo- (auto-) 'self', and ποίησις (poiesis) 'creation, production') refers to a system capable of reproducing and maintaining itself by creating its own parts and eventually further components. </p>
+    <h1 class="word_title"><b>○</b> Footnotes</h1>
+    <h1 class="word_title"><b>○</b> Endnotes</h1>
+    <h1 class="word_title"><b>○</b> Cross.references</h1>
+    <h1 class="word_title"><b>○</b> Citations</h1>
+    <h1 class="word_title"><b>○</b> Bibliography</h1>
+    <h1 class="word_title"><b>○</b> Real-time data</h1>
+</div>
+    <!-- <ul class="word_list">
+        <li class="trans" id="tree">\</li>
+        <li id="trans_input"><input class="trans_input" type="text" placeholder="↬ write a new translation" autofocus></li>
+    </ul> -->
+
+    <script src="index.js"></script>
+</body>
+</html>
+
diff --git a/1.0/style.css b/1.0/style.css
new file mode 100644
index 0000000..bf69968
--- /dev/null
+++ b/1.0/style.css
@@ -0,0 +1,87 @@
+body {
+    font-size: 2vw;
+    font-family: 'Courier New', Courier, monospace;    
+    margin: 0%;
+}
+
+ul {
+    margin: 0%;
+    padding: 0%;
+}
+
+li {
+    /* border: solid 0.3pt; */
+    list-style-type: none;
+    padding: 0%;
+    width: 20%;
+    margin-top: -0.5pt;
+    height: fit-content;
+}
+
+.head{
+    margin: 0.4vw;
+    margin-left: 0.5vw;
+    margin-right: 0.5vw;
+}
+
+.words {
+    -webkit-column-count: 3;
+    -moz-column-count: 3;
+        column-count: 3;
+    -webkit-column-width: 400px;
+    -moz-column-width: 400px;
+        column-width: 400px;
+    margin: 0.5vw;
+    margin-left: 0.7vw;
+    margin-right: 0.7vw;
+}
+
+.word_title {
+    /* border: solid 0.3pt; */
+    font-size: 2vw;
+    font-weight:normal;
+    font-family: 'Courier New', Courier, monospace;
+    padding: 0%;
+
+    /* width: 20%; */
+    margin-top: -0.5pt;
+    margin-left: 2vw;
+    margin-bottom: 0;
+
+    text-decoration: underline;     
+    text-decoration-color:gold; 
+}
+
+p {
+    /* border: solid 0.3pt; */
+    font-size: 2vw;
+    font-weight:normal;
+    font-family: 'Courier New', Courier, monospace;
+    padding: 0%;
+    /* width: 20%; */
+    margin-top: -0.5pt;
+    margin-left: 0;
+    margin-bottom: 0;
+}
+
+
+input {
+    height: 1.5vw;
+    weight: 100%;
+    margin-bottom: 1pt;
+    margin-left: 2pt;
+    color: darkgreen;
+}
+
+#trans_input {
+    border: none;
+    padding-left: 15pt;
+}
+
+hr {
+    margin: 0;
+}
+
+b{
+    color: gold;
+}
\ No newline at end of file
diff --git a/2.0/.ipynb_checkpoints/Glossary_making-Copy1-checkpoint.ipynb b/2.0/.ipynb_checkpoints/Glossary_making-Copy1-checkpoint.ipynb
new file mode 100644
index 0000000..ea8c50b
--- /dev/null
+++ b/2.0/.ipynb_checkpoints/Glossary_making-Copy1-checkpoint.ipynb
@@ -0,0 +1,419 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Glossary Making Tool"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "This is a Work-in-progress experiment tool to make living glossaries Webpages using simple Python, Javascript, and CSS from an markdown file written in a Etherpad instance.\n",
+    "\n",
+    "**What makes it living?** \n",
+    "\n",
+    "* The glossary structure uses the idea of 'gloss' that means annottation and layer. It makes the glossary a layering of anotations rather than a list of definitions. The pad template uses each word as a card with multiple annotations. See the example.\n",
+    "\n",
+    "* This tool also offers the option of add properties to each word in order to find connections and multiple types of organization. \n"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "tags": []
+   },
+   "source": [
+    "## Words\n",
+    "Communicating via **API** with the glossary **Pad** and translating the text written in **Markdown** format using **Pandoc** library."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "import json, pypandoc\n",
+    "from urllib.request import urlopen\n",
+    "from urllib.parse import urlencode\n",
+    "\n",
+    "\n",
+    "with open(\"/opt/etherpad/APIKEY.txt\") as f:\n",
+    "    api_key = f.read().strip()\n",
+    "\n",
+    "api_url = \"https://hub.xpub.nl/soupboat/pad/api/1.2.15/\"\n",
+    "\n",
+    "# wrap in a convenient function (APICALL)\n",
+    "def ep (api_fn, api_url, api_key, **data):\n",
+    "    data['apikey'] = api_key\n",
+    "    return json.load(urlopen(f\"{api_url}{api_fn}\", data=urlencode(data).encode()))\n",
+    "\n",
+    "\n",
+    "glossary = ep(\"getText\", api_url, api_key, padID=\"camilo_glossary\")\n",
+    "\n",
+    "text = glossary[\"data\"][\"text\"]\n",
+    "\n",
+    "words = pypandoc.convert_text(text, 'html', format='md')"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "From a local markdown text file"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "tags": []
+   },
+   "source": [
+    "## Properties"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "The following is a word property dictionary "
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "properties = [\n",
+    "\t{\n",
+    "\t\t'title':'action',\n",
+    "\t\t'symbol':'A',\n",
+    "        'color': 'green'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'situation',\n",
+    "\t\t'symbol':'S',\n",
+    "\t\t'color': 'aqua'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'logic',\n",
+    "\t\t'symbol':'C',\n",
+    "\t\t'color': 'orange'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'proposition',\n",
+    "\t\t'symbol':'T',\n",
+    "\t\t'color': 'blue'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'hyperlink',\n",
+    "\t\t'symbol':'N',\n",
+    "\t\t'color': 'pink'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'process',\n",
+    "\t\t'symbol':'P',\n",
+    "\t\t'color': 'gray'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'language',\n",
+    "\t\t'symbol':'G',\n",
+    "\t\t'color': 'violet'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'agent',\n",
+    "\t\t'symbol':'E',\n",
+    "\t\t'color': 'purple'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'tool',\n",
+    "\t\t'symbol':'T',\n",
+    "\t\t'color': 'lightblue'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'form',\n",
+    "\t\t'symbol':'Y',\n",
+    "\t\t'color': 'gold'\n",
+    "\t}\n",
+    "]"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Writing the Website"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Write properties legend"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "description = ''\n",
+    "\n",
+    "i = 0\n",
+    "\n",
+    "for title, symbol, color in properties:\n",
+    "    title = properties[i]['title']\n",
+    "    description += (f''' {title}s,''')\n",
+    "    i += 1"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "legend = ''\n",
+    "\n",
+    "i = 0\n",
+    "\n",
+    "for title, symbol, color in properties:\n",
+    "    title = properties[i]['title']\n",
+    "    symbol = properties[i]['symbol']\n",
+    "    legend += f'''<button id=\"{title}\" class=\"btn {title}-s\" onclick=\"filterSelection('{title}')\">{title}→  <span class='symbol {title}-s'>{symbol}</span> </button>\\n'''\n",
+    "    i += 1"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Write Script that will add properties to each word"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "script = ''\n",
+    "\n",
+    "i = 0 \n",
+    "\n",
+    "for title, symbol, color in properties:\n",
+    "    title = properties[i]['title']\n",
+    "    symbol = properties[i]['symbol']\n",
+    "    script += (f\"\"\"const {title} = document.getElementsByClassName(\"{title}\");\n",
+    "    for (let i = 0; i < {title}.length; i++)\"\"\"'{\\n' \n",
+    "               f\"\"\"{title}[i].innerHTML += \"<span class='symbol {title}-s'>{symbol}</span>\";\"\"\" \n",
+    "    '\\n}\\n\\n')\n",
+    "    i += 1"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Assign a different color for each property "
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 6,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "style = ''\n",
+    "\n",
+    "i = 0 \n",
+    "\n",
+    "for title, symbol, color in properties:\n",
+    "    title = properties[i]['title']\n",
+    "    color = properties[i]['color']\n",
+    "    style += f'''.{title}-s:hover''' + '{' + f'''color:{color};''''}'\n",
+    "    i += 1"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 7,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "body = f'''<!DOCTYPE html>\n",
+    "    <html>\n",
+    "    <head>\n",
+    "        <meta charset=\"utf-8\">\n",
+    "        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n",
+    "        <link rel=\"stylesheet\" href=\"style.css\"> \n",
+    "        <title>Glossary</title>\n",
+    "    </head>\n",
+    "        <style> {style} </style>\n",
+    "    <body id=\"glo_body\">\n",
+    "    <div class=\"head\">\n",
+    "        <h1 id=\"title\"> Permeable Glossary for a Living Publishing Practice </h1>\n",
+    "            <div class=\"question\">\n",
+    "        <input id=\"search\" type=\"text\" ><span onclick=\"document.getElementById('search').value= ''\">X</span>\n",
+    "    </div>\n",
+    "        <a href=\"rss.xml\">\n",
+    "            <p>follow what is new (rss)</p>\n",
+    "        </a>\n",
+    "    </div>\n",
+    "    <div class='diffraction'>\n",
+    "        <img src='images/pattern-01.svg'>\n",
+    "        <img src='images/pattern-02.svg'>\n",
+    "        <img src='images/pattern-03.svg'>\n",
+    "        <img src='images/pattern-04.svg'>\n",
+    "        <img src='images/pattern-05.svg'>\n",
+    "        <img src='images/pattern-06.svg'>\n",
+    "        <img src='images/pattern-07.svg'>\n",
+    "        <img src='images/pattern-08.svg'>\n",
+    "    </div>\n",
+    "    <div class=\"description\">\n",
+    "        <p>From creating, designing and conceptualising to filtering, circulating and amplifying, publishing practices involve different processes and matters. Even though there are multiple theories and authors that approach each of them in a particular way, I propose to make a pause on defining them individually and focus on possible entanglements. Not to find a generalized idea of publishing but to see it as a complex and interwoven materiality. </p> \n",
+    "        <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>\n",
+    "    </div>\n",
+    "    <div class;\n",
+    "    <div id=\"legend\" class=\"legend\"> \n",
+    "        <button class=\"btn active\" onclick=\"filterSelection('all')\">properties</button> {legend}\n",
+    "    </div>\n",
+    "    <div class=\"words\">\n",
+    "        {words} \n",
+    "    </div>\n",
+    "    </body>\n",
+    "        <script>\n",
+    "            {script}\n",
+    "        </script>\n",
+    "        <script src=\"main.js\"></script>\n",
+    "    </html>'''\n",
+    "\n",
+    "website = open('index.html','w')\n",
+    "\n",
+    "website.write(body)\n",
+    "website.close()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "print(words)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "from time import sleep\n",
+    "\n",
+    "while True:\n",
+    "    print('hey')\n",
+    "    sleep(5)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.7.3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}
diff --git a/2.0/.ipynb_checkpoints/style-Copy1-checkpoint.css b/2.0/.ipynb_checkpoints/style-Copy1-checkpoint.css
new file mode 100644
index 0000000..f715df8
--- /dev/null
+++ b/2.0/.ipynb_checkpoints/style-Copy1-checkpoint.css
@@ -0,0 +1,234 @@
+:root {
+  --blue: #1e90ff;
+  --white: #ffffff;
+}
+
+@font-face {
+    font-family: Fluxisch;
+    src: url(fonts/FLuxisch_ElseWeb_font/FluxischElse-Regular.woff);
+}
+
+@font-face {
+    font-family: symbols1;
+    src: url(fonts/symbols.woff) format("woff");
+}
+
+@font-face {
+    font-family: mono;
+    src: url(fonts/diatype-semi-mono-regular.woff) format("woff");
+}
+
+body {
+    font-size: 16pt;
+    font-family: mono;        
+    margin:0;
+}
+
+hr {
+    background: black;
+    height: 0.1pt;
+    margin: 0;
+}
+
+h1 {
+    font-size: 20pt;
+    font-family: Fluxisch; 
+    font-style: bold;
+    margin-top: 10pt;
+    margin-bottom:10pt;
+    
+}
+
+h2 {
+    font-size: 20pt;
+    font-family: Fluxisch; 
+    font-style: bold;
+    margin-top: 10pt;
+    margin-bottom:10pt;
+    margin-right: 0;
+}
+
+p {
+    margin-top: 2pt;
+    margin-bottom: 2pt;
+}
+
+strong {
+    font-weight: normal;
+}
+
+ul {
+    margin: 0%;
+    padding: 0%;
+}
+
+a {
+    font-size: 18pt;
+    font-family: mono;   
+    color:blue;
+    text-decoration:none;
+}
+
+.head{
+    display:flex;
+    justify-content: space-between;
+    margin-left: 15pt;
+    margin-right: 15pt;
+
+}
+
+.head a{
+    margin-top: 10pt;
+    margin-bottom:10pt;
+}
+
+.description p{
+    margin-top: 10pt;
+    margin-bottom: 10pt;
+    margin-left: 15pt;
+    margin-right: 15pt;
+    text-indent: 20pt;
+}
+
+#sptContainer {
+    margin-top: 10pt;
+    margin-bottom: 10pt;
+    margin-left: 15pt;
+    margin-right: 15pt;
+    text-indent: 20pt;
+}
+
+
+.question input{
+    width:500px;
+    font-size: 14pt;
+    padding-top: 3pt;
+    padding-right: 8pt;
+    padding-left: 8pt;
+    padding-bottom: 3pt;
+    margin-left: 15pt;
+    margin-right: 2pt;
+    margin-top: 14pt;
+    color:white;
+    background-color:black;
+    border-radius: 8pt; 
+}
+
+
+.legend{
+    display:flex;
+    flex-wrap: wrap;
+    margin-left: 15pt;
+    margin-right: 15pt;
+    margin-top: 10pt;
+    margin-bottom: 10pt;
+}
+
+.btn{
+    background: white;
+    font-size: 20pt;
+    border-radius: 8pt; 
+    border:  1.2pt solid black;
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 20px 0 rgba(0,0,0,0);
+    padding-top: 3pt;
+    padding-right: 8pt;
+    padding-left: 8pt;
+    padding-bottom: 3pt;
+    margin-left: 2pt;
+    margin-right: 2pt;
+    margin-top: 1pt;
+    margin-bottom: 1pt;
+    cursor: pointer;
+    
+}
+
+.btn:hover {
+    box-shadow: 0 0px 16px 0 rgba(0,0,0,0.24), 0 0px 16px 0 rgba(0,0,0,0.19);
+}
+
+.btn.active {
+    box-shadow: 0 0px 16px 0 rgba(0,0,0,0.24), 0 0px 16px 0 rgba(0,0,0,0.19);
+}
+
+.btn.snippet {
+    background:white;
+    font-family: serif;
+    font-style: italic;
+}
+
+.diffraction{
+    display: none;
+    flex-wrap: wrap;
+    object-fit: contain;
+    margin-left: 15pt;
+    width: 100%;
+}
+
+img{
+    width: 11.8%;
+}
+
+.words {
+/*     -webkit-column-count: 3;
+    -moz-column-count: 3;
+        column-count: 3;
+    -webkit-column-width: 400px;
+    -moz-column-width: 400px;
+        column-width: 400px;
+    overflow: hidden; */
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
+    gap: 1.3rem;
+    margin-top: 10pt;
+    margin-left: 15pt;
+    margin-right: 15pt;
+}
+
+.word {
+    display: none;
+    margin-top: 7pt;
+    margin-bottom: 7pt;
+}
+
+.show {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start; 
+}
+
+
+.word p{
+    order:2;
+}
+
+.title {
+    /* border: solid 0.3pt; */
+    font-size: 20pt;
+    font-weight:bold;
+    font-family: Fluxisch;
+    padding: 0%;
+
+    /* width: 20%; */
+    margin-top: -0.5pt;
+    margin-left: 2vw;
+    margin-right: 0.5vw;
+    margin-bottom: 0;
+
+    text-decoration: underline 1pt;     
+    text-decoration-color:black; 
+}
+
+.symbol {
+    order:1;
+    color:black;
+    margin-top: -5pt;
+    font-family: symbols1;
+    font-size: 20pt;
+    cursor: pointer;
+    transition: color .5s;
+}
+
+
+
+
+
diff --git a/2.0/Glossary_making-Copy1.ipynb b/2.0/Glossary_making-Copy1.ipynb
new file mode 100644
index 0000000..ea8c50b
--- /dev/null
+++ b/2.0/Glossary_making-Copy1.ipynb
@@ -0,0 +1,419 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Glossary Making Tool"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "This is a Work-in-progress experiment tool to make living glossaries Webpages using simple Python, Javascript, and CSS from an markdown file written in a Etherpad instance.\n",
+    "\n",
+    "**What makes it living?** \n",
+    "\n",
+    "* The glossary structure uses the idea of 'gloss' that means annottation and layer. It makes the glossary a layering of anotations rather than a list of definitions. The pad template uses each word as a card with multiple annotations. See the example.\n",
+    "\n",
+    "* This tool also offers the option of add properties to each word in order to find connections and multiple types of organization. \n"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "tags": []
+   },
+   "source": [
+    "## Words\n",
+    "Communicating via **API** with the glossary **Pad** and translating the text written in **Markdown** format using **Pandoc** library."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "import json, pypandoc\n",
+    "from urllib.request import urlopen\n",
+    "from urllib.parse import urlencode\n",
+    "\n",
+    "\n",
+    "with open(\"/opt/etherpad/APIKEY.txt\") as f:\n",
+    "    api_key = f.read().strip()\n",
+    "\n",
+    "api_url = \"https://hub.xpub.nl/soupboat/pad/api/1.2.15/\"\n",
+    "\n",
+    "# wrap in a convenient function (APICALL)\n",
+    "def ep (api_fn, api_url, api_key, **data):\n",
+    "    data['apikey'] = api_key\n",
+    "    return json.load(urlopen(f\"{api_url}{api_fn}\", data=urlencode(data).encode()))\n",
+    "\n",
+    "\n",
+    "glossary = ep(\"getText\", api_url, api_key, padID=\"camilo_glossary\")\n",
+    "\n",
+    "text = glossary[\"data\"][\"text\"]\n",
+    "\n",
+    "words = pypandoc.convert_text(text, 'html', format='md')"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "From a local markdown text file"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "tags": []
+   },
+   "source": [
+    "## Properties"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "The following is a word property dictionary "
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "properties = [\n",
+    "\t{\n",
+    "\t\t'title':'action',\n",
+    "\t\t'symbol':'A',\n",
+    "        'color': 'green'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'situation',\n",
+    "\t\t'symbol':'S',\n",
+    "\t\t'color': 'aqua'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'logic',\n",
+    "\t\t'symbol':'C',\n",
+    "\t\t'color': 'orange'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'proposition',\n",
+    "\t\t'symbol':'T',\n",
+    "\t\t'color': 'blue'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'hyperlink',\n",
+    "\t\t'symbol':'N',\n",
+    "\t\t'color': 'pink'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'process',\n",
+    "\t\t'symbol':'P',\n",
+    "\t\t'color': 'gray'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'language',\n",
+    "\t\t'symbol':'G',\n",
+    "\t\t'color': 'violet'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'agent',\n",
+    "\t\t'symbol':'E',\n",
+    "\t\t'color': 'purple'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'tool',\n",
+    "\t\t'symbol':'T',\n",
+    "\t\t'color': 'lightblue'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'form',\n",
+    "\t\t'symbol':'Y',\n",
+    "\t\t'color': 'gold'\n",
+    "\t}\n",
+    "]"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Writing the Website"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Write properties legend"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "description = ''\n",
+    "\n",
+    "i = 0\n",
+    "\n",
+    "for title, symbol, color in properties:\n",
+    "    title = properties[i]['title']\n",
+    "    description += (f''' {title}s,''')\n",
+    "    i += 1"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "legend = ''\n",
+    "\n",
+    "i = 0\n",
+    "\n",
+    "for title, symbol, color in properties:\n",
+    "    title = properties[i]['title']\n",
+    "    symbol = properties[i]['symbol']\n",
+    "    legend += f'''<button id=\"{title}\" class=\"btn {title}-s\" onclick=\"filterSelection('{title}')\">{title}→  <span class='symbol {title}-s'>{symbol}</span> </button>\\n'''\n",
+    "    i += 1"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Write Script that will add properties to each word"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "script = ''\n",
+    "\n",
+    "i = 0 \n",
+    "\n",
+    "for title, symbol, color in properties:\n",
+    "    title = properties[i]['title']\n",
+    "    symbol = properties[i]['symbol']\n",
+    "    script += (f\"\"\"const {title} = document.getElementsByClassName(\"{title}\");\n",
+    "    for (let i = 0; i < {title}.length; i++)\"\"\"'{\\n' \n",
+    "               f\"\"\"{title}[i].innerHTML += \"<span class='symbol {title}-s'>{symbol}</span>\";\"\"\" \n",
+    "    '\\n}\\n\\n')\n",
+    "    i += 1"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Assign a different color for each property "
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 6,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "style = ''\n",
+    "\n",
+    "i = 0 \n",
+    "\n",
+    "for title, symbol, color in properties:\n",
+    "    title = properties[i]['title']\n",
+    "    color = properties[i]['color']\n",
+    "    style += f'''.{title}-s:hover''' + '{' + f'''color:{color};''''}'\n",
+    "    i += 1"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 7,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "body = f'''<!DOCTYPE html>\n",
+    "    <html>\n",
+    "    <head>\n",
+    "        <meta charset=\"utf-8\">\n",
+    "        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n",
+    "        <link rel=\"stylesheet\" href=\"style.css\"> \n",
+    "        <title>Glossary</title>\n",
+    "    </head>\n",
+    "        <style> {style} </style>\n",
+    "    <body id=\"glo_body\">\n",
+    "    <div class=\"head\">\n",
+    "        <h1 id=\"title\"> Permeable Glossary for a Living Publishing Practice </h1>\n",
+    "            <div class=\"question\">\n",
+    "        <input id=\"search\" type=\"text\" ><span onclick=\"document.getElementById('search').value= ''\">X</span>\n",
+    "    </div>\n",
+    "        <a href=\"rss.xml\">\n",
+    "            <p>follow what is new (rss)</p>\n",
+    "        </a>\n",
+    "    </div>\n",
+    "    <div class='diffraction'>\n",
+    "        <img src='images/pattern-01.svg'>\n",
+    "        <img src='images/pattern-02.svg'>\n",
+    "        <img src='images/pattern-03.svg'>\n",
+    "        <img src='images/pattern-04.svg'>\n",
+    "        <img src='images/pattern-05.svg'>\n",
+    "        <img src='images/pattern-06.svg'>\n",
+    "        <img src='images/pattern-07.svg'>\n",
+    "        <img src='images/pattern-08.svg'>\n",
+    "    </div>\n",
+    "    <div class=\"description\">\n",
+    "        <p>From creating, designing and conceptualising to filtering, circulating and amplifying, publishing practices involve different processes and matters. Even though there are multiple theories and authors that approach each of them in a particular way, I propose to make a pause on defining them individually and focus on possible entanglements. Not to find a generalized idea of publishing but to see it as a complex and interwoven materiality. </p> \n",
+    "        <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>\n",
+    "    </div>\n",
+    "    <div class;\n",
+    "    <div id=\"legend\" class=\"legend\"> \n",
+    "        <button class=\"btn active\" onclick=\"filterSelection('all')\">properties</button> {legend}\n",
+    "    </div>\n",
+    "    <div class=\"words\">\n",
+    "        {words} \n",
+    "    </div>\n",
+    "    </body>\n",
+    "        <script>\n",
+    "            {script}\n",
+    "        </script>\n",
+    "        <script src=\"main.js\"></script>\n",
+    "    </html>'''\n",
+    "\n",
+    "website = open('index.html','w')\n",
+    "\n",
+    "website.write(body)\n",
+    "website.close()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "print(words)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "from time import sleep\n",
+    "\n",
+    "while True:\n",
+    "    print('hey')\n",
+    "    sleep(5)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.7.3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}
diff --git a/2.0/feed-Copy1.css b/2.0/feed-Copy1.css
new file mode 100644
index 0000000..078a5f1
--- /dev/null
+++ b/2.0/feed-Copy1.css
@@ -0,0 +1,2 @@
+
+ITEM { font-family: monospace; color:green }
\ No newline at end of file
diff --git a/2.0/glossary-Copy1.text b/2.0/glossary-Copy1.text
new file mode 100644
index 0000000..e69de29
diff --git a/2.0/index-Copy1.html b/2.0/index-Copy1.html
new file mode 100644
index 0000000..b39c828
--- /dev/null
+++ b/2.0/index-Copy1.html
@@ -0,0 +1,656 @@
+<!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>Glossary</title>
+    </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">
+    <div class="head">
+        <h1 id="title"> Permeable Glossary for a Living Publishing Practice </h1>
+            <div class="question">
+        <input id="search" type="text" ><span onclick="document.getElementById('search').value= ''">X</span>
+    </div>
+        <a href="rss.xml">
+            <p>follow what is new (rss)</p>
+        </a>
+    </div>
+    <div class='diffraction'>
+        <img src='images/pattern-01.svg'>
+        <img src='images/pattern-02.svg'>
+        <img src='images/pattern-03.svg'>
+        <img src='images/pattern-04.svg'>
+        <img src='images/pattern-05.svg'>
+        <img src='images/pattern-06.svg'>
+        <img src='images/pattern-07.svg'>
+        <img src='images/pattern-08.svg'>
+    </div>
+    <div class="description">
+        <p>From creating, designing and conceptualising to filtering, circulating and amplifying, publishing practices involve different processes and matters. Even though there are multiple theories and authors that approach each of them in a particular way, I propose to make a pause on defining them individually and focus on possible entanglements. Not to find a generalized idea of publishing but to see it as a complex and interwoven materiality. </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 class;
+    <div id="legend" class="legend"> 
+        <button class="btn active" onclick="filterSelection('all')">properties</button> <button id="action" class="btn action-s" onclick="filterSelection('action')">action→  <span class='symbol action-s'>A</span> </button>
+<button id="situation" class="btn situation-s" onclick="filterSelection('situation')">situation→  <span class='symbol situation-s'>S</span> </button>
+<button id="logic" class="btn logic-s" onclick="filterSelection('logic')">logic→  <span class='symbol logic-s'>C</span> </button>
+<button id="proposition" class="btn proposition-s" onclick="filterSelection('proposition')">proposition→  <span class='symbol proposition-s'>T</span> </button>
+<button id="hyperlink" class="btn hyperlink-s" onclick="filterSelection('hyperlink')">hyperlink→  <span class='symbol hyperlink-s'>N</span> </button>
+<button id="process" class="btn process-s" onclick="filterSelection('process')">process→  <span class='symbol process-s'>P</span> </button>
+<button id="language" class="btn language-s" onclick="filterSelection('language')">language→  <span class='symbol language-s'>G</span> </button>
+<button id="agent" class="btn agent-s" onclick="filterSelection('agent')">agent→  <span class='symbol agent-s'>E</span> </button>
+<button id="tool" class="btn tool-s" onclick="filterSelection('tool')">tool→  <span class='symbol tool-s'>T</span> </button>
+<button id="form" class="btn form-s" onclick="filterSelection('form')">form→  <span class='symbol form-s'>Y</span> </button>
+
+    </div>
+    <div class="words">
+        <div class="word logic situation action">
+<h1 id="reflection" class="title">Reflection</h1>
+<p>⤷ “Stop and look at your own process and understand it. Eventually, I suppose you do run into the infinite recursion problem, but I guess you get used to that.” (Mary Catherine Bateson)</p>
+<p>⤷ Es como un círculo: un punto que en su recorrido vuelve a <strong>sí mismo</strong></p>
+<p>⤷ The projection of an <strong>image on the mirror</strong></p>
+<p>⤷ It is a useful way to think when finding <strong>common ground</strong></p>
+<p>⤷ to see the same elsewhere</p>
+</div>
+<div class="word logic proposition action">
+<h1 id="diffraction" class="title">Diffraction</h1>
+<p>⤷ To perform connection between things</p>
+<p>⤷ Its when a wave encounters a obstacle and find a slit in it where it bends and make a pattern.</p>
+<p>⤷ It creates a <strong>pattern of differences</strong></p>
+<p>⤷ “There is no sharp boundary separating the light from the darkness”</p>
+<p>⤷ Thinking the differences within el medio, el espacio que nos conecta y nos separa simultáneamente.</p>
+<p>⤷ “About taking responsability for the fact that our practices matter; the world is materialized differently through different practices.”</p>
+</div>
+<div class="word proposition logic">
+<h1 id="property" class="title">Property</h1>
+<p>⤷ An attribute, characteristic, or quality</p>
+<p>⤷ From etymology the word comes from properte which means “nature, quality, distinctive character always present in an individual or class”</p>
+</div>
+<div class="word proposition logic hyperlink">
+<h1 id="atata" class="title">Atata</h1>
+<p>⤷ It is a composition of two ideograms (fig.1)in the Mhuysqa dead language . ATATA can be defined as ‘ I give myself and you give yourself , ’ where giving is an act of receiving , because what you do for others is also affecting yourself . This exercise oofreciprocity is a very important vibration of life because nobody can live without others , this includes all living creatures with whom we share the Earth .</p>
+<p>⤷ Reciprocity awarness. <a href="https://issue.xpub.nl/13/ATATA/">⤴</a></p>
+<p>⤷ to be reciprocal</p>
+</div>
+<div class="word form">
+<h1 id="paratext" class="title">Paratext</h1>
+<p>⤷ thresholds to the text</p>
+<p>⤷ thresholds to a publication</p>
+<p>⤷ Interesting to be aware of the spaces that open, close, introduce and mediate the publication.</p>
+</div>
+<div class="word form">
+<h1 id="glosario" class="title">Glosario</h1>
+<p>⤷ a paratext</p>
+<p>⤷ from the term gloss which means <strong>annotation</strong> and <strong>layer</strong></p>
+<p>⤷ This publication see its origin in the idea of <strong>layering of annotations</strong></p>
+</div>
+<div class="word action hyperlink">
+<h1 id="urgencia" class="title">Urgencia</h1>
+<p>⤷ Tener la urgencia como guía para la acción implica una búsqueda constante para posibilitar la publicación de <strong>contenidos relevantes</strong> de forma accesible y democrática. (…) Es importante decir que cuando hablamos de relevancia, no necesariamente estamos hablando de <strong>panfletos</strong> y obras explícitamente políticas. En una sociedad adversa a las diferencias y violentamente estandarizada, las obras que dan visibilidad a <strong>subjetividades no hegemónicas</strong> son potencialmente transformadoras, además de jugar un papel importante en el registro de diferentes formas de existencia, algo profundamente político en sí mismo. <a href="https://files.cargocollective.com/c1032387/publicacion-independiente-PRINT.pdf">⤴</a></p>
+<p>⤷ Being different as a political act itself.</p>
+<p>⤷ Understanding my needs and collective needs to make something public.</p>
+<p>⤷ Activating agency</p>
+</div>
+<div class="word proposition hyperlink">
+<h1 id="post-growth" class="title">Post growth</h1>
+<p>⤷ to challenge the dominant narratives about growth and progress, and re-envision social metabolism through an understanding of the energy it requires, reconnecting human survival with the living, material qualities of the biosphere, drawing on ecofeminism, indigenous knowledge, environmental accounting and historical materialism. <a href="http://postgrowth.art/">⤴</a></p>
+<p>⤷ To leave behind an activity of accumulation, to find yourselve in a different work rhythm</p>
+</div>
+<div class="word proposition hyperlink">
+<h1 id="non-teleological-reading" class="title">Non-teleological reading</h1>
+<p>⤷ what if instead of reflecting about the why, we focus about the how? <a href="https://tdingsun.github.io/reading-machines/">⤴</a></p>
+<p>⤷ What is teleological? <a href="https://en.wikipedia.org/wiki/Teleology">⤴</a></p>
+<p>⤷ Have you question how would it be the reading process of your publication?</p>
+<p>⤷ ¿Por qué publicamos lo que publicamos, en la forma en que lo publicamos? Habrá momentos en que no será necesario preguntar por qué, sino cómo.</p>
+</div>
+<div class="word hyperlink">
+<h1 id="urgent-artifact" class="title">Urgent artifact</h1>
+<p>⤷ The visible act of “commoning-in-the-crisis.” An outcome of solidarity and coming together in urgent times using modest tools and materials. It’s the manifestation that we can work from shared, <strong>common positions</strong>, in common, and on <strong>common ground</strong>. Examples: collaborative spreadsheets, online petitions, protests, surveys,letter-writing, essay writing, <strong>note-taking</strong>, shared open access writing spaces, streaming workshops, <strong>performances</strong>, talks, teach-ins, raw and unedited poetry, and quickly made zines. <a href="https://soulellis.com/writing/urgentcraft2/">⤴</a></p>
+<p>⤷ Is a set of principles that works to resist oppression-based design ideologies, especially in art and design education. URGENTCRAFT isn’t a manifesto, but rather a constellation of tactics — a series of incomplete observations. A note to self. A reminder that we can use art and design to loosen hegemonic power. <a href="https://soulellis.com/work/urgentcraft/index.html">⤴</a></p>
+</div>
+<div class="word proposition action">
+<h1 id="urgentcraft" class="title">Urgentcraft</h1>
+<p>⤷ Do what you can</p>
+<p>⤷ Use modest tools and materials</p>
+<p>⤷ Practice a <strong>slow approach to fast making</strong></p>
+<p>⤷ Dismantle white supremacy / be anti-racist</p>
+<p>⤷ Commit to maintenance and self-care as a form of urgency</p>
+<p>⤷Think big but make small</p>
+<p>⤷ Resist, loosen, and <strong>dismantle ableism</strong>, heteropatriachy, and <strong>settler colonialism</strong></p>
+<p>⤷ Prioritize <strong>communal care</strong> as a never-ending practice</p>
+<p>⤷ Undestard the politics of your platforms</p>
+<p>⤷ Redistribute wealth and accumulation</p>
+<p>⤷ <strong>Resit capitalist</strong> strategies</p>
+<p>⤷ Practice media hybridity</p>
+<p>⤷ Agitate/interfere (“make good trouble”)</p>
+<p>⤷ <strong>Fail to provide</strong> the perfect read (resist legibility)</p>
+<p>⤷ Refuse design perfection / stay with the mess</p>
+<p>⤷ Work in public (self-publish!)</p>
+<p>⤷ Work towards the then and there of queer futurity (while acknowledging past struggles and privileges)</p>
+<p>⤷ Question linearity and other hieratchical structures</p>
+<p>⤷ [⤴] (https://soulellis.com/writing/urgentcraft2/)</p>
+</div>
+<div class="word logic">
+<h1 id="complexity" class="title">Complexity</h1>
+<p>⤷ Complexity does not mean complicated. Complex systems can in fact be relatively simple.</p>
+<p>⤷ La complejidad es múltiple, en el sentido que nunca se logra desenredar en sí, siempre resulta irresoluble. Viene de la mano mano con no entender lo que se quiere explicar. Alguna vez leí que la complejidad es aquello que no se puede resumir a una sola palabra. Este glossario, por ejemplo, intenta explicar con múltiples palabras aquello que parece complejo. Falla en el intento.</p>
+<p>⤷ Humans use metaphors often to deal with complexity.</p>
+</div>
+<div class="word situation">
+<h1 id="contradiction" class="title">Contradiction</h1>
+<p>⤷ Two different forces that go against each other. Develop a project having in mind that some decisions will go against your own will.</p>
+<p>⤷ is also aboout the lack of purity when acting.</p>
+</div>
+<div class="word form">
+<h1 id="rhizome" class="title">Rhizome</h1>
+<p>⤷ Term adapted from plant biology by Gilles <em>Deleuze and Félix </em>Guattari to conceptualize <em>non-linear relations in both the realm of pure thought and the concrete and the </em>everyday.</p>
+<p>⤷ Thinking multiplicity as a substantive</p>
+<p>⤷ connection, heterogeneity, multiplicity, signifying rupture, cartography</p>
+<p>⤷ Los rizhomas son también estructuras porosas</p>
+<p>⤷ Being permeable, letting relate yourself within the environment</p>
+</div>
+<div class="word proposition action">
+<h1 id="interference" class="title">Interference</h1>
+<p>⤷ On publishing, the possibility to block and reduce the legibility of a matter too enhance other. For example:</p>
+</div>
+<div class="word proposition action logic">
+<h1 id="illegivility" class="title">Illegivility</h1>
+<p>⤷ Its about being cryptic, hidden. But also to create a safe space. Not being in the spotlight may protect you.</p>
+</div>
+<div class="word hyperlink action">
+<h1 id="collaborative-spreadsheets" class="title">Collaborative spreadsheets</h1>
+<p>⤷ Son hojas de cálculo elavoradas colectivamente.</p>
+<p>⤷ It is a interesting tool to use when gathering information collectively</p>
+<p>⤷ <a href="https://docs.google.com/spreadsheets/d/1UkgIsDpFMuA0_hvqf5f4ytPTKX4wfPp8ByRs3Uymvag/edit#gid=0">⤴</a></p>
+</div>
+<div class="word form hyperlink">
+<h1 id="epub" class="title">EPUB</h1>
+<p>⤷ Acronym for Electronic Publication. An ebook format developed by the international Digital Publishing Forum (IDPF). EPUB is an open standard and the most commonly used and supported file format for electronic books. EPUB was designed to accommodate reflow-able content. <a href="https://networkcultures.org/digitalpublishing/">⤴</a></p>
+</div>
+<div class="word form logic">
+<h1 id="electronic-publication" class="title">Electronic publication</h1>
+<p>⤷ Beyond EPUB, A Electronic Publication is a publication generated, created and shown by an electronic device.</p>
+</div>
+<div class="word form situation">
+<h1 id="book" class="title">Book</h1>
+<p>⤷ The codex,</p>
+<p>⤷ by folded paper,</p>
+<p>⤷ unfolded</p>
+<p>⤷ stapled matter</p>
+<p>⤷ drawn space</p>
+<p>⤷ wrapped by glue ~ threads,</p>
+<p>⤷ inhabid by drawings, letters, words, images,</p>
+<p>⤷ containing containers such as prologues, colophon, glossaries</p>
+<p>⤷ the interface,</p>
+<p>⤷ the simple and the whole</p>
+<p>⤷ A format</p>
+</div>
+<div class="word action proposition situation">
+<h1 id="autonomous-practice" class="title">Autonomous practice</h1>
+<p>⤷ On publishing, to be able and to have the energy to create, make, produce and share with self autonomy.</p>
+<p>⤷ Etymologicaly, autonomous comes from auto- (“self”) and -nomy (“a system of rules or laws about a particular field”).</p>
+<p>⤷ Autonomous practice suggests drawing your own rules and own systems of creating, making, producing and distributing in order to publish.</p>
+</div>
+<div class="word action">
+<h1 id="publishing" class="title">Publishing</h1>
+<p>⤷ To make something public.</p>
+<p>⤷ To circulate.</p>
+<p>⤷ To filter and amplify.</p>
+<p>⤷ A big spectrum of practices interested into making public</p>
+<p>⤷ To publish is to make a public through the circulation of material, generating discourse.</p>
+</div>
+<div class="word form">
+<h1 id="hybrid-publication" class="title">Hybrid publication</h1>
+<p>⤷ the act of publishing through differents mediums and techniches in order to adapt and contextualize to a specific project or part of it. A hybrid publication can offer a varied spectrum of objects and processes that together construct the body of it.</p>
+</div>
+<div class="word form">
+<h1 id="printed-publication" class="title">Printed publication</h1>
+<p>⤷ A type of publication that uses a printing technique such as offset, inkjet, risoprint, and so on.</p>
+<p>⤷ commonly use surfaces and ink as primarily elements</p>
+</div>
+<div class="word form process">
+<h1 id="riso-printing" class="title">RISO printing</h1>
+<p>⤷ Risograph is a brand of digital duplicators that are designed mainly for high-volume photocopying and printing.</p>
+<p>⤷ The process creates <strong>micro-imperfections in printing</strong>, similar to spontaneity, or even comparable to how improvisation in jazz can lead to an unexpected but pleasant result. <a href="https://odotoo.com/risograph/">⤴</a></p>
+</div>
+<div class="word proposition">
+<h1 id="agency" class="title">Agency</h1>
+<p>⤷ It is defined as the capacity of individuals to act independently and to make their own free choices. On publishing it suggests to take responsability of the public-action. Publication as an act. See with Urgent-craft.</p>
+</div>
+<div class="word proposition action">
+<h1 id="responsability" class="title">Responsability</h1>
+<p>⤷ The ability to respond.</p>
+<p>⤷ Being aware that publishing acts have an impact</p>
+</div>
+<div class="word form">
+<h1 id="word-processors" class="title">Word processors</h1>
+<p>⤷ Like Microsoft word. There is plenty open-source ones. See:</p>
+</div>
+<div class="word proposition situation">
+<h1 id="future-trash" class="title">Future-trash</h1>
+<p>⤷ Resisting burnout and future trash puts artist and their work in a good position to solve problems. By sustaining a publishing practice over time and creating objects that persist with meaning as their inherent value, artist publishers can continue to create, contribute to, and maintain the radically open, imaginative, accessible and inclusive community that makes up artist publishing. (Alex Arzt, pag 20, What Problems Can Artist Publishers Solve?)</p>
+<p>⤷¿Cuándo este objeto dejará de existir?</p>
+</div>
+<div class="word situation proposition">
+<h1 id="promiscuous-publishing" class="title">Promiscuous Publishing</h1>
+<p>⤷ “A promiscuous publication is NOT like parallel, hybrid, or cross-media publishing. It is a multi-headed and polycentric form of making public. It enjoys its various forms, and embraces their idiosyncracies. As a multi-headed publication it is NOT obsessed with providing uniform outcomes across diverse media. Having many centers, it can produce new focal points and obfuscate its origins. It explores playfully a spectral diversity with sibling out-comes and bastard children that operate out of sync or tune.” (Christoph Haag, make make do in: The Techno-Galactic Guide to Software Observation, 2016) <a href="https://constantvzw.org/wefts/webpublications.en.html">⤴</a></p>
+</div>
+<div class="word proposition process">
+<h1 id="do-it-yourself-diy" class="title">Do-it-yourself (DIY)</h1>
+<p>⤷ Using your own resources and skills to make possible a publication.</p>
+<p>⤷ La autogestion y procesos autonomos están relacionados con DIY</p>
+</div>
+<div class="word process proposition">
+<h1 id="do-it-yourself-with-others-diywo" class="title">Do-it-yourself-with-others (DIYWO)</h1>
+<p>⤷ It reminds me Sympoesis.</p>
+<p>⤷ Hacer las cosas con otros</p>
+<p>⤷ Is a difficult process that requiares a lot of energy</p>
+</div>
+<div class="word form hyperlink">
+<h1 id="fanzine" class="title">Fanzine</h1>
+<p>⤷ El fanzine es el libro más simple del mundo. <a href="https://files.cargocollective.com/c1032387/publicacion-independiente-PRINT.pdf#page=12">⤴</a></p>
+<p>⤷ Se puede hacer e imprimir de infinitas formas. Es normal hacer fotocopias, siendo la opción más barata, accesible, y democrática. <a href="https://files.cargocollective.com/c1032387/publicacion-independiente-PRINT.pdf#page=12">⤴</a></p>
+<p>⤷ Considerado más “under”/rudimentario, es una excelente herramienta para difundir ideas políticas y urgentes. <a href="https://files.cargocollective.com/c1032387/publicacion-independiente-PRINT.pdf#page=12">⤴</a></p>
+<p>⤷ Usually free or just to cover production expenses and transportation</p>
+<p>⤷ Produced using home office equipment</p>
+<p>⤷ Quick, cheap, small and non-pretentious</p>
+</div>
+<div class="word form situation">
+<h1 id="festival" class="title">Festival</h1>
+<p>⤷ On publishing, festivals are events that congregates creators, editors, publishers and readers that are interested into share and encounter books, fanzines, panflets, objects and so on.</p>
+<p>⤷ Events created to enhance community building</p>
+<p>⤷ Festival may expand the individual practice into multiple collective ones.</p>
+</div>
+<div class="word form language">
+<h1 id="markdown-word-processing-format" class="title">Markdown: word processing format</h1>
+<p>⤷ Markdown’s syntax is intended for one purpose: to be used as a format for writing for the web.</p>
+<p>⤷ Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a publishing format; Markdown is a writing format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in plain text. <a href="https://daringfireball.net/projects/markdown/syntax#overview">⤴</a></p>
+<p>⤷ This format can be useful for text projects that need to adapt to different formats</p>
+<p>⤷ This glossary uses the markdown format. Check it here: <a href="https://hub.xpub.nl/soupboat/pad/p/camilo_glossary">⤴</a></p>
+</div>
+<div class="word proposition action process">
+<h1 id="small-edition" class="title">Small-edition</h1>
+<p>⤷ Make less than 1000 units of a publication.</p>
+<p>⤷ Small editions may focus their energies on circulating through individuals that care about it</p>
+</div>
+<div class="word logic">
+<h1 id="low-cost" class="title">Low cost</h1>
+<p>⤷ Using a small budget to produce a publication.</p>
+</div>
+<div class="word form situation">
+<h1 id="archive" class="title">Archive</h1>
+<p>⤷ A <strong>collection of pieces</strong> of information generally related to past times.</p>
+<p>⤷ made by records providing evidential information</p>
+</div>
+<div class="word proposition logic action">
+<h1 id="sustainability" class="title">Sustainability</h1>
+<p>⤷ On publishing, to be aware of the resources used to create, maintain and circulate a publication</p>
+<p>⤷ What type of printing process are you using? Do you know where the materias come from? What type of inks are you using? What’s the impact of your digital publication’s infrastructure?</p>
+</div>
+<div class="word propositon action">
+<h1 id="open-source" class="title">Open source</h1>
+<p>⤷</p>
+</div>
+<div class="word process">
+<h1 id="infrastructure" class="title">Infrastructure</h1>
+<p>⤷ What makes possible the structure. The underneath processes and materials that sustain a publication.</p>
+<p>⤷ It could be the tools we use to create, host or publish them.</p>
+</div>
+<div class="word proposition process action">
+<h1 id="self-hosting" class="title">Self-Hosting</h1>
+<p>⤷</p>
+</div>
+<div class="word form process situation">
+<h1 id="layout" class="title">Layout</h1>
+<p>⤷ How things are organized in the space</p>
+<p>⤷ Visual structures can suggest conceptual structures</p>
+</div>
+<div class="word form">
+<h1 id="e-reader-hardware" class="title">E-reader hardware</h1>
+<p>⤷ The device used to display EPUBs such as Kindle, Komo…etc.</p>
+</div>
+<div class="word process language">
+<h1 id="e-reader-software" class="title">E-reader software</h1>
+<p>⤷</p>
+</div>
+<div class="word process tool">
+<h1 id="bookbinding" class="title">bookbinding</h1>
+<p>⤷ Bookbinding is the process of physically assembling a book of codex format from an ordered stack of paper sheets that are folded together.</p>
+<p>⤷ There are different types of binding, here you can find a usefull guide for</p>
+</div>
+<div class="word form tool">
+<h1 id="plain-text" class="title">Plain text</h1>
+<p>⤷ Text without any visual formatting (such as bold, italic, font types and sizes, clickable hyperlinks, etc.)</p>
+<p>⤷ ASCII is the oldest and still most common plain-text format</p>
+</div>
+<div class="word form process">
+<h1 id="wysiwyg" class="title">WYSIWYG</h1>
+<p>⤷ (what you see is what you get)</p>
+</div>
+<div class="word">
+<h1 id="logical-semantic-markup" class="title">Logical-semantic markup</h1>
+<p>⤷</p>
+</div>
+<div class="word language">
+<h1 id="html" class="title">HTML</h1>
+<p>⤷ (hyper text Markup Language)</p>
+</div>
+<div class="word situation action">
+<h1 id="paged-centred" class="title">Paged-centred</h1>
+<p>⤷ Publications that are tought around the idea of a page.</p>
+<p>⤷ What is beyond a page within publishing?</p>
+</div>
+<div class="word form process">
+<h1 id="reflow-able-layout" class="title">Reflow-able layout</h1>
+<p>⤷</p>
+</div>
+<div class="word logic form">
+<h1 id="hyperlinks" class="title">Hyperlinks</h1>
+<p>⤷</p>
+</div>
+<div class="word form hyperlink">
+<h1 id="website" class="title">Website</h1>
+<p>⤷ At its simplest, a website is a folder of text files broadcast from a computer to the rest of the world. [⤴] (https://solarpunk.cool/zines/web-zine-01/introduction.html)</p>
+</div>
+<div class="word form proposition hyperlink">
+<h1 id="web-zine" class="title">Web-zine</h1>
+<p>⤷ I want to see more personal websites because a handmade web is magical and good.</p>
+<p>⤷ [⤴] (https://solarpunk.cool/zines/web-zine-01/introduction.html)</p>
+</div>
+<div class="word process action">
+<h1 id="one-to-one" class="title">One-to-one:</h1>
+<p>⤷ Single publication published in different media</p>
+</div>
+<div class="word process action">
+<h1 id="one-to-many" class="title">One-to-many:</h1>
+<p>⤷ Single publication that has different appearances in different media</p>
+</div>
+<div class="word process action">
+<h1 id="one-to-database" class="title">One-to-database:</h1>
+<p>⤷ Publication based on the content of the data base which can be used in a number of ways</p>
+</div>
+<div class="word proposition action">
+<h1 id="discourse" class="title">Discourse</h1>
+<p>⤷</p>
+</div>
+<div class="word situation logic">
+<h1 id="speed" class="title">Speed</h1>
+<p>⤷</p>
+</div>
+<div class="word proposition logic situation">
+<h1 id="afterlife" class="title">Afterlife</h1>
+<p>⤷ How to make the <strong>content relevant again</strong>? Re-using it for different contexts.</p>
+</div>
+<div class="word action proposition">
+<h1 id="non-hasty" class="title">Non-hasty</h1>
+<p>⤷</p>
+</div>
+<div class="word process situation">
+<h1 id="reader" class="title">Reader</h1>
+<p>⤷</p>
+</div>
+<div class="word situation action proposition">
+<h1 id="post-digital" class="title">Post-digital</h1>
+<p>⤷ Utilizar los recursos que sean necesarios con las circuntancias contextuales particulares actuales.</p>
+<p>⤷ To leave behind the digital hype?</p>
+<p>⤷ The “post-digital mindset” allows a more inclusive research framework of the publishing field, in which e-books and book-apps aren’t the only object of study and where “old” and “new” media are not in a natural opposition. In the field of post-digital publishing, printed matter doesn’t belong to the past and digital tools are not inherently innovative. <a href="https://ia800509.us.archive.org/15/items/p-dpa_booklet/p-dpa_booklet.pdf">⤴</a></p>
+<p>⤷ Beyond hyped mediums, what is the one that adjust the most to this project?</p>
+<p>⤷ To make <strong>contextual decisions</strong> within a publication.</p>
+</div>
+<div class="word form action project">
+<h1 id="anaphora" class="title">Anaphora</h1>
+<p>⤷ Insistent prosody.</p>
+<p>⤷ To insist. To state. To make an insistent statement <a href="https://thenewbridgeproject.com/product/why-publish-noise-miekal-and/">⤴</a></p>
+</div>
+<div class="word form process">
+<h1 id="manifesto" class="title">Manifesto</h1>
+<p>⤷ A reflection that <strong>drives action</strong>.</p>
+</div>
+<div class="word situation action logic">
+<h1 id="post-colonial" class="title">Post-colonial</h1>
+<p>⤷</p>
+</div>
+<div class="word form proposition logic">
+<h1 id="fragmented" class="title">Fragmented</h1>
+<p>⤷</p>
+</div>
+<div class="word situation">
+<h1 id="habit" class="title">Habit</h1>
+<p>⤷</p>
+</div>
+<div class="word situation process form">
+<h1 id="frustration" class="title">Frustration</h1>
+<p>⤷</p>
+</div>
+<div class="word form action">
+<h1 id="newsletter" class="title">Newsletter</h1>
+<p>⤷</p>
+</div>
+<div class="word form action">
+<h1 id="syllabus" class="title">Syllabus</h1>
+<p>⤷</p>
+</div>
+<div class="word situation action">
+<h1 id="audience" class="title">Audience</h1>
+<p>⤷</p>
+</div>
+<div class="word proposition action situation process">
+<h1 id="meme-ability" class="title">Meme-ability</h1>
+<p>⤷</p>
+</div>
+<div class="word situation logic">
+<h1 id="communal" class="title">Communal</h1>
+<p>⤷</p>
+</div>
+<div class="word situation action form">
+<h1 id="community" class="title">Community</h1>
+<p>⤷</p>
+</div>
+<div class="word situation action process proposition">
+<h1 id="community-building" class="title">Community-building</h1>
+<p>⤷</p>
+</div>
+<div class="word action logic">
+<h1 id="political-act" class="title">Political act</h1>
+<p>⤷</p>
+</div>
+<div class="word agent logic">
+<h1 id="editor" class="title">Editor</h1>
+<p>⤷</p>
+</div>
+<div class="word process logic">
+<h1 id="filtering" class="title">Filtering</h1>
+<p>⤷</p>
+</div>
+<div class="word process logic">
+<h1 id="amplification" class="title">Amplification</h1>
+<p>⤷</p>
+</div>
+<div class="word process logic action">
+<h1 id="caring" class="title">Caring</h1>
+<p>⤷</p>
+</div>
+<div class="word logic situation">
+<h1 id="ambiguity" class="title">Ambiguity</h1>
+<p>⤷</p>
+</div>
+<div class="word process situation">
+<h1 id="continuity" class="title">Continuity</h1>
+<p>⤷</p>
+</div>
+<div class="word logic form">
+<h1 id="dialogue" class="title">Dialogue</h1>
+<p>⤷</p>
+</div>
+<div class="word form action proposition">
+<h1 id="dissonance" class="title">Dissonance</h1>
+<p>⤷</p>
+</div>
+<div class="word logic situation">
+<h1 id="gathering" class="title">Gathering</h1>
+<p>⤷</p>
+</div>
+<div class="word proposition logic action">
+<h1 id="mutation" class="title">Mutation</h1>
+<p>⤷</p>
+</div>
+<div class="word logic situation action proposition">
+<h1 id="reciprocity" class="title">Reciprocity</h1>
+<p>⤷</p>
+</div>
+<div class="word action logic proposition">
+<h1 id="regenerative" class="title">Regenerative</h1>
+<p>⤷ Regeneration has its origins in ecology: <strong>taking care</strong> of the soil and preventing it from depletion. Nowadays, the idea has broadened and refers to caring in a general sense: caring for the living world, the cultural heritage and our fellow human beings, both now and in the future. [⤴] (https://common-in.nl/slider/#slide3)</p>
+</div>
+<div class="word logic situation">
+<h1 id="autopoiesis" class="title">Autopoiesis</h1>
+<p>⤷ The term autopoiesis (from Greek αὐτo- (auto-) ‘self’, and ποίησις (poiesis) ‘creation, production’) refers to a system capable of reproducing and <strong>maintaining itself</strong> by creating its own parts and eventually further components.</p>
+<p>⤷ De qué manera lo vivo se crea a sí mismo?</p>
+</div>
+<div class="word logic situation proposition">
+<h1 id="sympoiesis" class="title">Sympoiesis</h1>
+<p>⤷ It is a term that referes the act of <strong>‘making with’</strong></p>
+<p>⤷ Beyond Autopoiesis, Sympoiesis is a form of self-making that can only happen collectively and collaboratively.</p>
+<p>⤷</p>
+</div>
+<div class="word proposition logic action">
+<h1 id="transformation" class="title">Transformation</h1>
+</div>
+<div class="word form action">
+<h1 id="drawing" class="title">Drawing</h1>
+<p>⤷ The act to trace on a surface.</p>
+<p>⤷ Explore with a pencil the shape of things.</p>
+<p>⤷ A <strong>tool for meditation</strong>.</p>
+</div>
+<div class="word form action logic">
+<h1 id="knoting" class="title">Knoting</h1>
+<p>⤷</p>
+</div>
+<div class="word form action logic">
+<h1 id="link" class="title">Link</h1>
+<p>⤷</p>
+</div>
+<div class="word form action logic">
+<h1 id="tangle" class="title">Tangle</h1>
+<p>⤷</p>
+</div>
+<div class="word action">
+<h1 id="cross-references" class="title">Cross-references</h1>
+<p>⤷</p>
+</div>
+<div class="word form process">
+<h1 id="real-time-data" class="title">Real-time data</h1>
+<p>⤷</p>
+</div>
+<div class="word form process logic tool">
+<h1 id="rss-really-simple-syndication" class="title">RSS: Really Simple Syndication</h1>
+<p>⤷</p>
+</div>
+<div class="word form tool">
+<h1 id="screen" class="title">Screen</h1>
+<p>⤷ “screen based publishing is intimate in my opinion, as it reaches the space of personal screens often in intimate spaces, but it establishes a <strong>remote intimacy</strong>, as the publisher is not necessarily meant to be present on the other side and his or her body is certainly distant and invisible” (alessandro Ludovico)</p>
+</div>
+<div class="word situation action logic">
+<h1 id="rumiante" class="title">Rumiante</h1>
+<p>⤷ lentitud / animalidad / el estigma vaca / la carne / el no saber cómo decir pero ir rumiando</p>
+<p>⤷ Los rumiantes, como los bovinos, tienen un complejo sistema de digestión que les permite aprovechar eficientemente los nutrientes de los alimentos, inclusive los de baja calidad nutricional. La rumia debe hacerse en un lugar cómodo, plano, con sombra, para poder echarse. El rumiante procurará contar con las condiciones necesarias para poder rumiar cómodamente. Buscará entonces las condiciones de posibilidad, es decir lugar cómodo y seguro, entre afines que lo sostengan.</p>
+<p>⤷ El rumiante es irreverente e iconoclasta.</p>
+<p>⤷ No cree en ideas propias, se sabe no original. Sabe que siempre que habla, traduce</p>
+<p>⤷ El rumiante apuesta por un ejercicio de <strong>invención política</strong> que es colectivo, siempre. Procura darse, para sí y su comunidad, herramientas, y entiende que estas herramientas no son algo a lo que se llega, sino que están en constante construcción.</p>
+<p>⤷ En su acción de rumiar, rinde tributo al proceso y no al producto acabado.</p>
+<p>⤷ El rumiante es precaria, y como precaria ha desafiado al futuro.</p>
+<p>⤷ <strong>El futuro no es nuestro</strong>. <strong>No hay futuro</strong>. No hay tiempo. <strong>El rumiante es lento</strong>. (Lucresia Masson, Epistemología rumiante)</p>
+</div>
+<div class="word proposition form action process">
+<h1 id="procesual-book" class="title">Procesual Book</h1>
+<p>⤷ Its a book that is in constant creation and formation</p>
+<p>⤷ <strong>Living Books</strong> about life is one example <a href="https://www.livingbooksaboutlife.org/">⤴</a></p>
+</div>
+<div class="word proposition action">
+<h1 id="proposition" class="title">Proposition</h1>
+<p>⤷ The <strong>act of offering</strong> (an idea) for consideration.</p>
+</div>
+<div class="word form">
+<h1 id="form" class="title">Form</h1>
+<p>⤷ The shape and structure of something as distinguished from its material</p>
+</div>
+<div class="word action">
+<h1 id="action" class="title">Action</h1>
+<p>⤷ The shape and structure of something as distinguished from its material</p>
+</div>
+<div class="word logic">
+<h1 id="logic" class="title">Logic</h1>
+<p>⤷ the arrangement of circuit elements (as in a computer) needed for computation.</p>
+<p>⤷ Any system of thought, whether rigorous and productive or not.</p>
+<p>⤷ A system of reasons and processes articulated.</p>
+</div>
+<div class="word hyperlink">
+<h1 id="project" class="title">Project</h1>
+<p>⤷</p>
+</div>
+<div class="word logic proposition">
+<h1 id="madularity" class="title">Madularity</h1>
+<p>⤷ Building blocks logic to build up something.</p>
+<p>⤷ What aspects of modularity in publishing are making meaningful connections between parts?</p>
+<p>⤷</p>
+</div>
+ 
+    </div>
+    </body>
+        <script>
+            const action = document.getElementsByClassName("action");
+    for (let i = 0; i < action.length; i++){
+action[i].innerHTML += "<span class='symbol action-s'>A</span>";
+}
+
+const situation = document.getElementsByClassName("situation");
+    for (let i = 0; i < situation.length; i++){
+situation[i].innerHTML += "<span class='symbol situation-s'>S</span>";
+}
+
+const logic = document.getElementsByClassName("logic");
+    for (let i = 0; i < logic.length; i++){
+logic[i].innerHTML += "<span class='symbol logic-s'>C</span>";
+}
+
+const proposition = document.getElementsByClassName("proposition");
+    for (let i = 0; i < proposition.length; i++){
+proposition[i].innerHTML += "<span class='symbol proposition-s'>T</span>";
+}
+
+const hyperlink = document.getElementsByClassName("hyperlink");
+    for (let i = 0; i < hyperlink.length; i++){
+hyperlink[i].innerHTML += "<span class='symbol hyperlink-s'>N</span>";
+}
+
+const process = document.getElementsByClassName("process");
+    for (let i = 0; i < process.length; i++){
+process[i].innerHTML += "<span class='symbol process-s'>P</span>";
+}
+
+const language = document.getElementsByClassName("language");
+    for (let i = 0; i < language.length; i++){
+language[i].innerHTML += "<span class='symbol language-s'>G</span>";
+}
+
+const agent = document.getElementsByClassName("agent");
+    for (let i = 0; i < agent.length; i++){
+agent[i].innerHTML += "<span class='symbol agent-s'>E</span>";
+}
+
+const tool = document.getElementsByClassName("tool");
+    for (let i = 0; i < tool.length; i++){
+tool[i].innerHTML += "<span class='symbol tool-s'>T</span>";
+}
+
+const form = document.getElementsByClassName("form");
+    for (let i = 0; i < form.length; i++){
+form[i].innerHTML += "<span class='symbol form-s'>Y</span>";
+}
+
+
+        </script>
+        <script src="main.js"></script>
+    </html>
\ No newline at end of file
diff --git a/2.0/main-Copy1.js b/2.0/main-Copy1.js
new file mode 100644
index 0000000..5ada602
--- /dev/null
+++ b/2.0/main-Copy1.js
@@ -0,0 +1,102 @@
+///////// filters with buttons ///////////
+
+filterSelection("all")
+function filterSelection(c) {
+  var x, i;
+  x = document.getElementsByClassName("word");
+  if (c == "all") c = "";
+  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
+  for (i = 0; i < x.length; i++) {
+    w3RemoveClass(x[i], "show");
+    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
+  }
+}
+
+// Show filtered elements
+function w3AddClass(element, name) {
+  var i, arr1, arr2;
+  arr1 = element.className.split(" ");
+  arr2 = name.split(" ");
+  for (i = 0; i < arr2.length; i++) {
+    if (arr1.indexOf(arr2[i]) == -1) {
+      element.className += " " + arr2[i];
+    }
+  }
+}
+
+// Hide elements that are not selected
+function w3RemoveClass(element, name) {
+  var i, arr1, arr2;
+  arr1 = element.className.split(" ");
+  arr2 = name.split(" ");
+  for (i = 0; i < arr2.length; i++) {
+    while (arr1.indexOf(arr2[i]) > -1) {
+      arr1.splice(arr1.indexOf(arr2[i]), 1);
+    }
+  }
+  element.className = arr1.join(" ");
+}
+
+// Add active class to the current control button (highlight it)
+var btnContainer = document.getElementById("legend");
+var btns = btnContainer.getElementsByClassName("btn");
+for (var i = 0; i < btns.length; i++) {
+  btns[i].addEventListener("click", function() {
+    var current = document.getElementsByClassName("active");
+    current[0].className = current[0].className.replace(" active", "");
+    this.className += " active";
+  });
+}
+
+
+/////////////. ADD SNIPPETS TO A DIV ../////////
+
+var snippet = document.getElementsByTagName("strong");
+var sptContainer = document.getElementById("sptContainer");
+
+for (var i = 0; i < snippet.length; i++) {
+    sptContainer.innerHTML += "<button class='btn snippet'>"+ snippet[i].innerText + "</button>";
+}
+
+
+//////////// Randomise Font ////////////////
+
+// JavaScript code to pick 
+// a random color from array
+function pickColor() {
+
+    // Array containing colors
+    var colors = [
+        '#ff0000', '#00ff00', '#0000ff',
+        '#ff3333', '#ffff00', '#ff6600'
+    ];
+
+    // selecting random color
+    var random_color = colors[Math.floor(
+            Math.random() * colors.length)];
+
+    var x = document.getElementById('pick');
+    x.style.color = random_color;
+} 
+
+
+//////////Search Bar ////////////////////
+
+
+function search_word() {
+    let input = document.getElementById('search').value;
+    input=input.toLowerCase();
+    let x = document.getElementsByClassName('word');
+      
+    for (i = 0; i < x.length; i++) { 
+        if (!x[i].innerHTML.toLowerCase().includes(input)) {
+            x[i].style.display="none";
+        }
+        else {
+            x[i].style.display="show";                 
+        }
+    }
+}
+
+
+
diff --git a/2.0/rss-Copy1.xml b/2.0/rss-Copy1.xml
new file mode 100644
index 0000000..d1d9a7a
--- /dev/null
+++ b/2.0/rss-Copy1.xml
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<?xml-stylesheet href="feed.css" title="Modern" media="screen"
+  type="text/css"?>
+<rss version="2.0">
+
+<channel>
+  <title>Glossary Conversations</title>
+  <link>https://hub.xpub.nl/sandbot/~camilo/Glossary/</link>
+  <description>See here the new conversation</description>
+  <item>
+    <title>Conversation #1</title>
+    <link>https://hub.xpub.nl/sandbot/~camilo/Glossary/</link>
+    <description>The glossary got new words and annotations. here new conversations between reflection, diffraction, bitsy games and more.</description>
+  </item>
+  <item>
+    <title>Conversation #2</title>
+    <link>https://hub.xpub.nl/sandbot/~camilo/Glossary/</link>
+    <description>## The glossary got new words and annotations. A new question opened up a new conversation between word processors, communiy, sympoiesis and more.</description>
+  </item>
+    <item>
+    <title>Conversation #3</title>
+    <link>https://hub.xpub.nl/sandbot/~camilo/Glossary/</link>
+    <description>The glossary got new words and annotations. A new question opened up a new conversation between word processors, communiy, sympoiesis and more.</description>
+  </item>
+    <item>
+    <title>Conversation #17</title>
+    <link>https://hub.xpub.nl/sandbot/~camilo/Glossary/</link>
+    <description>
+        * The following is a fictional conversation between different voices:____Future-Trash, Sympoesis, Urgency______Future-Trash: ⤷ Resisting burnout and future trash puts artist and their work in a good position to solve problems. By sustaining a publishing practice over time and creating objects that persist with meaning as their inherent value, artist publishers can continue to create, contribute to, and maintain the radically open, imaginative, accessible and inclusive community that makes up artist publishing.--------Sympoeisis: ⤷ It is a term that referes the act of ‘making with’.--------Urgency: ⤷ Understanding my needs and collective needs to make something public.--------Sympoeisis: ⤷ Beyond Autopoiesis, Sympoiesis is a form of self-making that can only happen collectively and collaboratively. --------Urgency: ⤷ Being different as a political act itself. ⤷ activating agency.
+        * hkjrehfjdbvsm,nbiuvlgr
+    </description>
+  </item>
+</channel>
+
+</rss>
\ No newline at end of file
diff --git a/2.0/style-Copy1.css b/2.0/style-Copy1.css
new file mode 100644
index 0000000..f715df8
--- /dev/null
+++ b/2.0/style-Copy1.css
@@ -0,0 +1,234 @@
+:root {
+  --blue: #1e90ff;
+  --white: #ffffff;
+}
+
+@font-face {
+    font-family: Fluxisch;
+    src: url(fonts/FLuxisch_ElseWeb_font/FluxischElse-Regular.woff);
+}
+
+@font-face {
+    font-family: symbols1;
+    src: url(fonts/symbols.woff) format("woff");
+}
+
+@font-face {
+    font-family: mono;
+    src: url(fonts/diatype-semi-mono-regular.woff) format("woff");
+}
+
+body {
+    font-size: 16pt;
+    font-family: mono;        
+    margin:0;
+}
+
+hr {
+    background: black;
+    height: 0.1pt;
+    margin: 0;
+}
+
+h1 {
+    font-size: 20pt;
+    font-family: Fluxisch; 
+    font-style: bold;
+    margin-top: 10pt;
+    margin-bottom:10pt;
+    
+}
+
+h2 {
+    font-size: 20pt;
+    font-family: Fluxisch; 
+    font-style: bold;
+    margin-top: 10pt;
+    margin-bottom:10pt;
+    margin-right: 0;
+}
+
+p {
+    margin-top: 2pt;
+    margin-bottom: 2pt;
+}
+
+strong {
+    font-weight: normal;
+}
+
+ul {
+    margin: 0%;
+    padding: 0%;
+}
+
+a {
+    font-size: 18pt;
+    font-family: mono;   
+    color:blue;
+    text-decoration:none;
+}
+
+.head{
+    display:flex;
+    justify-content: space-between;
+    margin-left: 15pt;
+    margin-right: 15pt;
+
+}
+
+.head a{
+    margin-top: 10pt;
+    margin-bottom:10pt;
+}
+
+.description p{
+    margin-top: 10pt;
+    margin-bottom: 10pt;
+    margin-left: 15pt;
+    margin-right: 15pt;
+    text-indent: 20pt;
+}
+
+#sptContainer {
+    margin-top: 10pt;
+    margin-bottom: 10pt;
+    margin-left: 15pt;
+    margin-right: 15pt;
+    text-indent: 20pt;
+}
+
+
+.question input{
+    width:500px;
+    font-size: 14pt;
+    padding-top: 3pt;
+    padding-right: 8pt;
+    padding-left: 8pt;
+    padding-bottom: 3pt;
+    margin-left: 15pt;
+    margin-right: 2pt;
+    margin-top: 14pt;
+    color:white;
+    background-color:black;
+    border-radius: 8pt; 
+}
+
+
+.legend{
+    display:flex;
+    flex-wrap: wrap;
+    margin-left: 15pt;
+    margin-right: 15pt;
+    margin-top: 10pt;
+    margin-bottom: 10pt;
+}
+
+.btn{
+    background: white;
+    font-size: 20pt;
+    border-radius: 8pt; 
+    border:  1.2pt solid black;
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 20px 0 rgba(0,0,0,0);
+    padding-top: 3pt;
+    padding-right: 8pt;
+    padding-left: 8pt;
+    padding-bottom: 3pt;
+    margin-left: 2pt;
+    margin-right: 2pt;
+    margin-top: 1pt;
+    margin-bottom: 1pt;
+    cursor: pointer;
+    
+}
+
+.btn:hover {
+    box-shadow: 0 0px 16px 0 rgba(0,0,0,0.24), 0 0px 16px 0 rgba(0,0,0,0.19);
+}
+
+.btn.active {
+    box-shadow: 0 0px 16px 0 rgba(0,0,0,0.24), 0 0px 16px 0 rgba(0,0,0,0.19);
+}
+
+.btn.snippet {
+    background:white;
+    font-family: serif;
+    font-style: italic;
+}
+
+.diffraction{
+    display: none;
+    flex-wrap: wrap;
+    object-fit: contain;
+    margin-left: 15pt;
+    width: 100%;
+}
+
+img{
+    width: 11.8%;
+}
+
+.words {
+/*     -webkit-column-count: 3;
+    -moz-column-count: 3;
+        column-count: 3;
+    -webkit-column-width: 400px;
+    -moz-column-width: 400px;
+        column-width: 400px;
+    overflow: hidden; */
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
+    gap: 1.3rem;
+    margin-top: 10pt;
+    margin-left: 15pt;
+    margin-right: 15pt;
+}
+
+.word {
+    display: none;
+    margin-top: 7pt;
+    margin-bottom: 7pt;
+}
+
+.show {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start; 
+}
+
+
+.word p{
+    order:2;
+}
+
+.title {
+    /* border: solid 0.3pt; */
+    font-size: 20pt;
+    font-weight:bold;
+    font-family: Fluxisch;
+    padding: 0%;
+
+    /* width: 20%; */
+    margin-top: -0.5pt;
+    margin-left: 2vw;
+    margin-right: 0.5vw;
+    margin-bottom: 0;
+
+    text-decoration: underline 1pt;     
+    text-decoration-color:black; 
+}
+
+.symbol {
+    order:1;
+    color:black;
+    margin-top: -5pt;
+    font-family: symbols1;
+    font-size: 20pt;
+    cursor: pointer;
+    transition: color .5s;
+}
+
+
+
+
+
diff --git a/Database-making.ipynb b/Database-making.ipynb
new file mode 100644
index 0000000..d924c40
--- /dev/null
+++ b/Database-making.ipynb
@@ -0,0 +1,779 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 59,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from bs4 import BeautifulSoup\n",
+    "import json"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 147,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "with open(\"index.html\") as file_in:\n",
+    "    soup = BeautifulSoup(file_in, 'html.parser')"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "jupyter": {
+     "outputs_hidden": true
+    },
+    "tags": []
+   },
+   "source": [
+    "TITLE"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 148,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "title = soup.find(id=\"title\")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "tags": []
+   },
+   "source": [
+    "WORDS"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 157,
+   "metadata": {
+    "collapsed": true,
+    "jupyter": {
+     "outputs_hidden": true
+    },
+    "tags": []
+   },
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "[<div class=\"word logic situation action\">\n",
+       " <h1 class=\"title\" id=\"reflection\">Reflection</h1>\n",
+       " <p>⤷ “Stop and look at your own process and understand it. Eventually, I suppose you do run into the infinite recursion problem, but I guess you get used to that.” (Mary Catherine Bateson)</p>\n",
+       " <p>⤷ Es como un círculo: un punto que en su recorrido vuelve a <strong>sí mismo</strong></p>\n",
+       " <p>⤷ The projection of an <strong>image on the mirror</strong></p>\n",
+       " <p>⤷ It is a useful way to think when finding <strong>common ground</strong></p>\n",
+       " <p>⤷ to see the same elsewhere</p>\n",
+       " </div>,\n",
+       " <div class=\"word logic proposition action\">\n",
+       " <h1 class=\"title\" id=\"diffraction\">Diffraction</h1>\n",
+       " <p>⤷ To perform connection between things</p>\n",
+       " <p>⤷ Its when a wave encounters a obstacle and find a slit in it where it bends and make a pattern.</p>\n",
+       " <p>⤷ It creates a <strong>pattern of differences</strong></p>\n",
+       " <p>⤷ “There is no sharp boundary separating the light from the darkness”</p>\n",
+       " <p>⤷ Thinking the differences within el medio, el espacio que nos conecta y nos separa simultáneamente.</p>\n",
+       " <p>⤷ “About taking responsability for the fact that our practices matter; the world is materialized differently through different practices.”</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition logic\">\n",
+       " <h1 class=\"title\" id=\"property\">Property</h1>\n",
+       " <p>⤷ An attribute, characteristic, or quality</p>\n",
+       " <p>⤷ From etymology the word comes from properte which means “nature, quality, distinctive character always present in an individual or class”</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition logic hyperlink\">\n",
+       " <h1 class=\"title\" id=\"atata\">Atata</h1>\n",
+       " <p>⤷ It is a composition of two ideograms (fig.1)in the Mhuysqa dead language . ATATA can be defined as ‘ I give myself and you give yourself , ’ where giving is an act of receiving , because what you do for others is also affecting yourself . This exercise oofreciprocity is a very important vibration of life because nobody can live without others , this includes all living creatures with whom we share the Earth .</p>\n",
+       " <p>⤷ Reciprocity awarness. <a href=\"https://issue.xpub.nl/13/ATATA/\">⤴</a></p>\n",
+       " <p>⤷ to be reciprocal</p>\n",
+       " </div>,\n",
+       " <div class=\"word form\">\n",
+       " <h1 class=\"title\" id=\"paratext\">Paratext</h1>\n",
+       " <p>⤷ thresholds to the text</p>\n",
+       " <p>⤷ thresholds to a publication</p>\n",
+       " <p>⤷ Interesting to be aware of the spaces that open, close, introduce and mediate the publication.</p>\n",
+       " </div>,\n",
+       " <div class=\"word form\">\n",
+       " <h1 class=\"title\" id=\"glosario\">Glosario</h1>\n",
+       " <p>⤷ a paratext</p>\n",
+       " <p>⤷ from the term gloss which means <strong>annotation</strong> and <strong>layer</strong></p>\n",
+       " <p>⤷ This publication see its origin in the idea of <strong>layering of annotations</strong></p>\n",
+       " </div>,\n",
+       " <div class=\"word action hyperlink\">\n",
+       " <h1 class=\"title\" id=\"urgencia\">Urgencia</h1>\n",
+       " <p>⤷ Tener la urgencia como guía para la acción implica una búsqueda constante para posibilitar la publicación de <strong>contenidos relevantes</strong> de forma accesible y democrática. (…) Es importante decir que cuando hablamos de relevancia, no necesariamente estamos hablando de <strong>panfletos</strong> y obras explícitamente políticas. En una sociedad adversa a las diferencias y violentamente estandarizada, las obras que dan visibilidad a <strong>subjetividades no hegemónicas</strong> son potencialmente transformadoras, además de jugar un papel importante en el registro de diferentes formas de existencia, algo profundamente político en sí mismo. <a href=\"https://files.cargocollective.com/c1032387/publicacion-independiente-PRINT.pdf\">⤴</a></p>\n",
+       " <p>⤷ Being different as a political act itself.</p>\n",
+       " <p>⤷ Understanding my needs and collective needs to make something public.</p>\n",
+       " <p>⤷ Activating agency</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition hyperlink\">\n",
+       " <h1 class=\"title\" id=\"post-growth\">Post growth</h1>\n",
+       " <p>⤷ to challenge the dominant narratives about growth and progress, and re-envision social metabolism through an understanding of the energy it requires, reconnecting human survival with the living, material qualities of the biosphere, drawing on ecofeminism, indigenous knowledge, environmental accounting and historical materialism. <a href=\"http://postgrowth.art/\">⤴</a></p>\n",
+       " <p>⤷ To leave behind an activity of accumulation, to find yourselve in a different work rhythm</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition hyperlink\">\n",
+       " <h1 class=\"title\" id=\"non-teleological-reading\">Non-teleological reading</h1>\n",
+       " <p>⤷ what if instead of reflecting about the why, we focus about the how? <a href=\"https://tdingsun.github.io/reading-machines/\">⤴</a></p>\n",
+       " <p>⤷ What is teleological? <a href=\"https://en.wikipedia.org/wiki/Teleology\">⤴</a></p>\n",
+       " <p>⤷ Have you question how would it be the reading process of your publication?</p>\n",
+       " <p>⤷ ¿Por qué publicamos lo que publicamos, en la forma en que lo publicamos? Habrá momentos en que no será necesario preguntar por qué, sino cómo.</p>\n",
+       " </div>,\n",
+       " <div class=\"word hyperlink\">\n",
+       " <h1 class=\"title\" id=\"urgent-artifact\">Urgent artifact</h1>\n",
+       " <p>⤷ The visible act of “commoning-in-the-crisis.” An outcome of solidarity and coming together in urgent times using modest tools and materials. It’s the manifestation that we can work from shared, <strong>common positions</strong>, in common, and on <strong>common ground</strong>. Examples: collaborative spreadsheets, online petitions, protests, surveys,letter-writing, essay writing, <strong>note-taking</strong>, shared open access writing spaces, streaming workshops, <strong>performances</strong>, talks, teach-ins, raw and unedited poetry, and quickly made zines. <a href=\"https://soulellis.com/writing/urgentcraft2/\">⤴</a></p>\n",
+       " <p>⤷ Is a set of principles that works to resist oppression-based design ideologies, especially in art and design education. URGENTCRAFT isn’t a manifesto, but rather a constellation of tactics — a series of incomplete observations. A note to self. A reminder that we can use art and design to loosen hegemonic power. <a href=\"https://soulellis.com/work/urgentcraft/index.html\">⤴</a></p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition action\">\n",
+       " <h1 class=\"title\" id=\"urgentcraft\">Urgentcraft</h1>\n",
+       " <p>⤷ Do what you can</p>\n",
+       " <p>⤷ Use modest tools and materials</p>\n",
+       " <p>⤷ Practice a <strong>slow approach to fast making</strong></p>\n",
+       " <p>⤷ Dismantle white supremacy / be anti-racist</p>\n",
+       " <p>⤷ Commit to maintenance and self-care as a form of urgency</p>\n",
+       " <p>⤷Think big but make small</p>\n",
+       " <p>⤷ Resist, loosen, and <strong>dismantle ableism</strong>, heteropatriachy, and <strong>settler colonialism</strong></p>\n",
+       " <p>⤷ Prioritize <strong>communal care</strong> as a never-ending practice</p>\n",
+       " <p>⤷ Undestard the politics of your platforms</p>\n",
+       " <p>⤷ Redistribute wealth and accumulation</p>\n",
+       " <p>⤷ <strong>Resit capitalist</strong> strategies</p>\n",
+       " <p>⤷ Practice media hybridity</p>\n",
+       " <p>⤷ Agitate/interfere (“make good trouble”)</p>\n",
+       " <p>⤷ <strong>Fail to provide</strong> the perfect read (resist legibility)</p>\n",
+       " <p>⤷ Refuse design perfection / stay with the mess</p>\n",
+       " <p>⤷ Work in public (self-publish!)</p>\n",
+       " <p>⤷ Work towards the then and there of queer futurity (while acknowledging past struggles and privileges)</p>\n",
+       " <p>⤷ Question linearity and other hieratchical structures</p>\n",
+       " <p>⤷ [⤴] (https://soulellis.com/writing/urgentcraft2/)</p>\n",
+       " </div>,\n",
+       " <div class=\"word logic\">\n",
+       " <h1 class=\"title\" id=\"complexity\">Complexity</h1>\n",
+       " <p>⤷ Complexity does not mean complicated. Complex systems can in fact be relatively simple.</p>\n",
+       " <p>⤷ La complejidad es múltiple, en el sentido que nunca se logra desenredar en sí, siempre resulta irresoluble. Viene de la mano mano con no entender lo que se quiere explicar. Alguna vez leí que la complejidad es aquello que no se puede resumir a una sola palabra. Este glossario, por ejemplo, intenta explicar con múltiples palabras aquello que parece complejo. Falla en el intento.</p>\n",
+       " <p>⤷ Humans use metaphors often to deal with complexity.</p>\n",
+       " </div>,\n",
+       " <div class=\"word situation\">\n",
+       " <h1 class=\"title\" id=\"contradiction\">Contradiction</h1>\n",
+       " <p>⤷ Two different forces that go against each other. Develop a project having in mind that some decisions will go against your own will.</p>\n",
+       " <p>⤷ is also aboout the lack of purity when acting.</p>\n",
+       " </div>,\n",
+       " <div class=\"word form\">\n",
+       " <h1 class=\"title\" id=\"rhizome\">Rhizome</h1>\n",
+       " <p>⤷ Term adapted from plant biology by Gilles <em>Deleuze and Félix </em>Guattari to conceptualize <em>non-linear relations in both the realm of pure thought and the concrete and the </em>everyday.</p>\n",
+       " <p>⤷ Thinking multiplicity as a substantive</p>\n",
+       " <p>⤷ connection, heterogeneity, multiplicity, signifying rupture, cartography</p>\n",
+       " <p>⤷ Los rizhomas son también estructuras porosas</p>\n",
+       " <p>⤷ Being permeable, letting relate yourself within the environment</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition action\">\n",
+       " <h1 class=\"title\" id=\"interference\">Interference</h1>\n",
+       " <p>⤷ On publishing, the possibility to block and reduce the legibility of a matter too enhance other. For example:</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition action logic\">\n",
+       " <h1 class=\"title\" id=\"illegivility\">Illegivility</h1>\n",
+       " <p>⤷ Its about being cryptic, hidden. But also to create a safe space. Not being in the spotlight may protect you.</p>\n",
+       " </div>,\n",
+       " <div class=\"word hyperlink action\">\n",
+       " <h1 class=\"title\" id=\"collaborative-spreadsheets\">Collaborative spreadsheets</h1>\n",
+       " <p>⤷ Son hojas de cálculo elavoradas colectivamente.</p>\n",
+       " <p>⤷ It is a interesting tool to use when gathering information collectively</p>\n",
+       " <p>⤷ <a href=\"https://docs.google.com/spreadsheets/d/1UkgIsDpFMuA0_hvqf5f4ytPTKX4wfPp8ByRs3Uymvag/edit#gid=0\">⤴</a></p>\n",
+       " </div>,\n",
+       " <div class=\"word form hyperlink\">\n",
+       " <h1 class=\"title\" id=\"epub\">EPUB</h1>\n",
+       " <p>⤷ Acronym for Electronic Publication. An ebook format developed by the international Digital Publishing Forum (IDPF). EPUB is an open standard and the most commonly used and supported file format for electronic books. EPUB was designed to accommodate reflow-able content. <a href=\"https://networkcultures.org/digitalpublishing/\">⤴</a></p>\n",
+       " </div>,\n",
+       " <div class=\"word form logic\">\n",
+       " <h1 class=\"title\" id=\"electronic-publication\">Electronic publication</h1>\n",
+       " <p>⤷ Beyond EPUB, A Electronic Publication is a publication generated, created and shown by an electronic device.</p>\n",
+       " </div>,\n",
+       " <div class=\"word form situation\">\n",
+       " <h1 class=\"title\" id=\"book\">Book</h1>\n",
+       " <p>⤷ The codex,</p>\n",
+       " <p>⤷ by folded paper,</p>\n",
+       " <p>⤷ unfolded</p>\n",
+       " <p>⤷ stapled matter</p>\n",
+       " <p>⤷ drawn space</p>\n",
+       " <p>⤷ wrapped by glue ~ threads,</p>\n",
+       " <p>⤷ inhabid by drawings, letters, words, images,</p>\n",
+       " <p>⤷ containing containers such as prologues, colophon, glossaries</p>\n",
+       " <p>⤷ the interface,</p>\n",
+       " <p>⤷ the simple and the whole</p>\n",
+       " <p>⤷ A format</p>\n",
+       " </div>,\n",
+       " <div class=\"word action proposition situation\">\n",
+       " <h1 class=\"title\" id=\"autonomous-practice\">Autonomous practice</h1>\n",
+       " <p>⤷ On publishing, to be able and to have the energy to create, make, produce and share with self autonomy.</p>\n",
+       " <p>⤷ Etymologicaly, autonomous comes from auto- (“self”) and -nomy (“a system of rules or laws about a particular field”).</p>\n",
+       " <p>⤷ Autonomous practice suggests drawing your own rules and own systems of creating, making, producing and distributing in order to publish.</p>\n",
+       " </div>,\n",
+       " <div class=\"word action\">\n",
+       " <h1 class=\"title\" id=\"publishing\">Publishing</h1>\n",
+       " <p>⤷ To make something public.</p>\n",
+       " <p>⤷ To circulate.</p>\n",
+       " <p>⤷ To filter and amplify.</p>\n",
+       " <p>⤷ A big spectrum of practices interested into making public</p>\n",
+       " <p>⤷ To publish is to make a public through the circulation of material, generating discourse.</p>\n",
+       " </div>,\n",
+       " <div class=\"word form\">\n",
+       " <h1 class=\"title\" id=\"hybrid-publication\">Hybrid publication</h1>\n",
+       " <p>⤷ the act of publishing through differents mediums and techniches in order to adapt and contextualize to a specific project or part of it. A hybrid publication can offer a varied spectrum of objects and processes that together construct the body of it.</p>\n",
+       " </div>,\n",
+       " <div class=\"word form\">\n",
+       " <h1 class=\"title\" id=\"printed-publication\">Printed publication</h1>\n",
+       " <p>⤷ A type of publication that uses a printing technique such as offset, inkjet, risoprint, and so on.</p>\n",
+       " <p>⤷ commonly use surfaces and ink as primarily elements</p>\n",
+       " </div>,\n",
+       " <div class=\"word form process\">\n",
+       " <h1 class=\"title\" id=\"riso-printing\">RISO printing</h1>\n",
+       " <p>⤷ Risograph is a brand of digital duplicators that are designed mainly for high-volume photocopying and printing.</p>\n",
+       " <p>⤷ The process creates <strong>micro-imperfections in printing</strong>, similar to spontaneity, or even comparable to how improvisation in jazz can lead to an unexpected but pleasant result. <a href=\"https://odotoo.com/risograph/\">⤴</a></p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition\">\n",
+       " <h1 class=\"title\" id=\"agency\">Agency</h1>\n",
+       " <p>⤷ It is defined as the capacity of individuals to act independently and to make their own free choices. On publishing it suggests to take responsability of the public-action. Publication as an act. See with Urgent-craft.</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition action\">\n",
+       " <h1 class=\"title\" id=\"responsability\">Responsability</h1>\n",
+       " <p>⤷ The ability to respond.</p>\n",
+       " <p>⤷ Being aware that publishing acts have an impact</p>\n",
+       " </div>,\n",
+       " <div class=\"word form\">\n",
+       " <h1 class=\"title\" id=\"word-processors\">Word processors</h1>\n",
+       " <p>⤷ Like Microsoft word. There is plenty open-source ones. See:</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition situation\">\n",
+       " <h1 class=\"title\" id=\"future-trash\">Future-trash</h1>\n",
+       " <p>⤷ Resisting burnout and future trash puts artist and their work in a good position to solve problems. By sustaining a publishing practice over time and creating objects that persist with meaning as their inherent value, artist publishers can continue to create, contribute to, and maintain the radically open, imaginative, accessible and inclusive community that makes up artist publishing. (Alex Arzt, pag 20, What Problems Can Artist Publishers Solve?)</p>\n",
+       " <p>⤷¿Cuándo este objeto dejará de existir?</p>\n",
+       " </div>,\n",
+       " <div class=\"word situation proposition\">\n",
+       " <h1 class=\"title\" id=\"promiscuous-publishing\">Promiscuous Publishing</h1>\n",
+       " <p>⤷ “A promiscuous publication is NOT like parallel, hybrid, or cross-media publishing. It is a multi-headed and polycentric form of making public. It enjoys its various forms, and embraces their idiosyncracies. As a multi-headed publication it is NOT obsessed with providing uniform outcomes across diverse media. Having many centers, it can produce new focal points and obfuscate its origins. It explores playfully a spectral diversity with sibling out-comes and bastard children that operate out of sync or tune.” (Christoph Haag, make make do in: The Techno-Galactic Guide to Software Observation, 2016) <a href=\"https://constantvzw.org/wefts/webpublications.en.html\">⤴</a></p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition process\">\n",
+       " <h1 class=\"title\" id=\"do-it-yourself-diy\">Do-it-yourself (DIY)</h1>\n",
+       " <p>⤷ Using your own resources and skills to make possible a publication.</p>\n",
+       " <p>⤷ La autogestion y procesos autonomos están relacionados con DIY</p>\n",
+       " </div>,\n",
+       " <div class=\"word process proposition\">\n",
+       " <h1 class=\"title\" id=\"do-it-yourself-with-others-diywo\">Do-it-yourself-with-others (DIYWO)</h1>\n",
+       " <p>⤷ It reminds me Sympoesis.</p>\n",
+       " <p>⤷ Hacer las cosas con otros</p>\n",
+       " <p>⤷ Is a difficult process that requiares a lot of energy</p>\n",
+       " </div>,\n",
+       " <div class=\"word form hyperlink\">\n",
+       " <h1 class=\"title\" id=\"fanzine\">Fanzine</h1>\n",
+       " <p>⤷ El fanzine es el libro más simple del mundo. <a href=\"https://files.cargocollective.com/c1032387/publicacion-independiente-PRINT.pdf#page=12\">⤴</a></p>\n",
+       " <p>⤷ Se puede hacer e imprimir de infinitas formas. Es normal hacer fotocopias, siendo la opción más barata, accesible, y democrática. <a href=\"https://files.cargocollective.com/c1032387/publicacion-independiente-PRINT.pdf#page=12\">⤴</a></p>\n",
+       " <p>⤷ Considerado más “under”/rudimentario, es una excelente herramienta para difundir ideas políticas y urgentes. <a href=\"https://files.cargocollective.com/c1032387/publicacion-independiente-PRINT.pdf#page=12\">⤴</a></p>\n",
+       " <p>⤷ Usually free or just to cover production expenses and transportation</p>\n",
+       " <p>⤷ Produced using home office equipment</p>\n",
+       " <p>⤷ Quick, cheap, small and non-pretentious</p>\n",
+       " </div>,\n",
+       " <div class=\"word form situation\">\n",
+       " <h1 class=\"title\" id=\"festival\">Festival</h1>\n",
+       " <p>⤷ On publishing, festivals are events that congregates creators, editors, publishers and readers that are interested into share and encounter books, fanzines, panflets, objects and so on.</p>\n",
+       " <p>⤷ Events created to enhance community building</p>\n",
+       " <p>⤷ Festival may expand the individual practice into multiple collective ones.</p>\n",
+       " </div>,\n",
+       " <div class=\"word form language\">\n",
+       " <h1 class=\"title\" id=\"markdown-word-processing-format\">Markdown: word processing format</h1>\n",
+       " <p>⤷ Markdown’s syntax is intended for one purpose: to be used as a format for writing for the web.</p>\n",
+       " <p>⤷ Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a publishing format; Markdown is a writing format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in plain text. <a href=\"https://daringfireball.net/projects/markdown/syntax#overview\">⤴</a></p>\n",
+       " <p>⤷ This format can be useful for text projects that need to adapt to different formats</p>\n",
+       " <p>⤷ This glossary uses the markdown format. Check it here: <a href=\"https://hub.xpub.nl/soupboat/pad/p/camilo_glossary\">⤴</a></p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition action process\">\n",
+       " <h1 class=\"title\" id=\"small-edition\">Small-edition</h1>\n",
+       " <p>⤷ Make less than 1000 units of a publication.</p>\n",
+       " <p>⤷ Small editions may focus their energies on circulating through individuals that care about it</p>\n",
+       " </div>,\n",
+       " <div class=\"word logic\">\n",
+       " <h1 class=\"title\" id=\"low-cost\">Low cost</h1>\n",
+       " <p>⤷ Using a small budget to produce a publication.</p>\n",
+       " </div>,\n",
+       " <div class=\"word form situation\">\n",
+       " <h1 class=\"title\" id=\"archive\">Archive</h1>\n",
+       " <p>⤷ A <strong>collection of pieces</strong> of information generally related to past times.</p>\n",
+       " <p>⤷ made by records providing evidential information</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition logic action\">\n",
+       " <h1 class=\"title\" id=\"sustainability\">Sustainability</h1>\n",
+       " <p>⤷ On publishing, to be aware of the resources used to create, maintain and circulate a publication</p>\n",
+       " <p>⤷ What type of printing process are you using? Do you know where the materias come from? What type of inks are you using? What’s the impact of your digital publication’s infrastructure?</p>\n",
+       " </div>,\n",
+       " <div class=\"word propositon action\">\n",
+       " <h1 class=\"title\" id=\"open-source\">Open source</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word process\">\n",
+       " <h1 class=\"title\" id=\"infrastructure\">Infrastructure</h1>\n",
+       " <p>⤷ What makes possible the structure. The underneath processes and materials that sustain a publication.</p>\n",
+       " <p>⤷ It could be the tools we use to create, host or publish them.</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition process action\">\n",
+       " <h1 class=\"title\" id=\"self-hosting\">Self-Hosting</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word form process situation\">\n",
+       " <h1 class=\"title\" id=\"layout\">Layout</h1>\n",
+       " <p>⤷ How things are organized in the space</p>\n",
+       " <p>⤷ Visual structures can suggest conceptual structures</p>\n",
+       " </div>,\n",
+       " <div class=\"word form\">\n",
+       " <h1 class=\"title\" id=\"e-reader-hardware\">E-reader hardware</h1>\n",
+       " <p>⤷ The device used to display EPUBs such as Kindle, Komo…etc.</p>\n",
+       " </div>,\n",
+       " <div class=\"word process language\">\n",
+       " <h1 class=\"title\" id=\"e-reader-software\">E-reader software</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word process tool\">\n",
+       " <h1 class=\"title\" id=\"bookbinding\">bookbinding</h1>\n",
+       " <p>⤷ Bookbinding is the process of physically assembling a book of codex format from an ordered stack of paper sheets that are folded together.</p>\n",
+       " <p>⤷ There are different types of binding, here you can find a usefull guide for</p>\n",
+       " </div>,\n",
+       " <div class=\"word form tool\">\n",
+       " <h1 class=\"title\" id=\"plain-text\">Plain text</h1>\n",
+       " <p>⤷ Text without any visual formatting (such as bold, italic, font types and sizes, clickable hyperlinks, etc.)</p>\n",
+       " <p>⤷ ASCII is the oldest and still most common plain-text format</p>\n",
+       " </div>,\n",
+       " <div class=\"word form process\">\n",
+       " <h1 class=\"title\" id=\"wysiwyg\">WYSIWYG</h1>\n",
+       " <p>⤷ (what you see is what you get)</p>\n",
+       " </div>,\n",
+       " <div class=\"word\">\n",
+       " <h1 class=\"title\" id=\"logical-semantic-markup\">Logical-semantic markup</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word language\">\n",
+       " <h1 class=\"title\" id=\"html\">HTML</h1>\n",
+       " <p>⤷ (hyper text Markup Language)</p>\n",
+       " </div>,\n",
+       " <div class=\"word situation action\">\n",
+       " <h1 class=\"title\" id=\"paged-centred\">Paged-centred</h1>\n",
+       " <p>⤷ Publications that are tought around the idea of a page.</p>\n",
+       " <p>⤷ What is beyond a page within publishing?</p>\n",
+       " </div>,\n",
+       " <div class=\"word form process\">\n",
+       " <h1 class=\"title\" id=\"reflow-able-layout\">Reflow-able layout</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word logic form\">\n",
+       " <h1 class=\"title\" id=\"hyperlinks\">Hyperlinks</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word form hyperlink\">\n",
+       " <h1 class=\"title\" id=\"website\">Website</h1>\n",
+       " <p>⤷ At its simplest, a website is a folder of text files broadcast from a computer to the rest of the world. [⤴] (https://solarpunk.cool/zines/web-zine-01/introduction.html)</p>\n",
+       " </div>,\n",
+       " <div class=\"word form proposition hyperlink\">\n",
+       " <h1 class=\"title\" id=\"web-zine\">Web-zine</h1>\n",
+       " <p>⤷ I want to see more personal websites because a handmade web is magical and good.</p>\n",
+       " <p>⤷ [⤴] (https://solarpunk.cool/zines/web-zine-01/introduction.html)</p>\n",
+       " </div>,\n",
+       " <div class=\"word process action\">\n",
+       " <h1 class=\"title\" id=\"one-to-one\">One-to-one:</h1>\n",
+       " <p>⤷ Single publication published in different media</p>\n",
+       " </div>,\n",
+       " <div class=\"word process action\">\n",
+       " <h1 class=\"title\" id=\"one-to-many\">One-to-many:</h1>\n",
+       " <p>⤷ Single publication that has different appearances in different media</p>\n",
+       " </div>,\n",
+       " <div class=\"word process action\">\n",
+       " <h1 class=\"title\" id=\"one-to-database\">One-to-database:</h1>\n",
+       " <p>⤷ Publication based on the content of the data base which can be used in a number of ways</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition action\">\n",
+       " <h1 class=\"title\" id=\"discourse\">Discourse</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word situation logic\">\n",
+       " <h1 class=\"title\" id=\"speed\">Speed</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition logic situation\">\n",
+       " <h1 class=\"title\" id=\"afterlife\">Afterlife</h1>\n",
+       " <p>⤷ How to make the <strong>content relevant again</strong>? Re-using it for different contexts.</p>\n",
+       " </div>,\n",
+       " <div class=\"word action proposition\">\n",
+       " <h1 class=\"title\" id=\"non-hasty\">Non-hasty</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word process situation\">\n",
+       " <h1 class=\"title\" id=\"reader\">Reader</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word situation action proposition\">\n",
+       " <h1 class=\"title\" id=\"post-digital\">Post-digital</h1>\n",
+       " <p>⤷ Utilizar los recursos que sean necesarios con las circuntancias contextuales particulares actuales.</p>\n",
+       " <p>⤷ To leave behind the digital hype?</p>\n",
+       " <p>⤷ The “post-digital mindset” allows a more inclusive research framework of the publishing field, in which e-books and book-apps aren’t the only object of study and where “old” and “new” media are not in a natural opposition. In the field of post-digital publishing, printed matter doesn’t belong to the past and digital tools are not inherently innovative. <a href=\"https://ia800509.us.archive.org/15/items/p-dpa_booklet/p-dpa_booklet.pdf\">⤴</a></p>\n",
+       " <p>⤷ Beyond hyped mediums, what is the one that adjust the most to this project?</p>\n",
+       " <p>⤷ To make <strong>contextual decisions</strong> within a publication.</p>\n",
+       " </div>,\n",
+       " <div class=\"word form action project\">\n",
+       " <h1 class=\"title\" id=\"anaphora\">Anaphora</h1>\n",
+       " <p>⤷ Insistent prosody.</p>\n",
+       " <p>⤷ To insist. To state. To make an insistent statement <a href=\"https://thenewbridgeproject.com/product/why-publish-noise-miekal-and/\">⤴</a></p>\n",
+       " </div>,\n",
+       " <div class=\"word form process\">\n",
+       " <h1 class=\"title\" id=\"manifesto\">Manifesto</h1>\n",
+       " <p>⤷ A reflection that <strong>drives action</strong>.</p>\n",
+       " </div>,\n",
+       " <div class=\"word situation action logic\">\n",
+       " <h1 class=\"title\" id=\"post-colonial\">Post-colonial</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word form proposition logic\">\n",
+       " <h1 class=\"title\" id=\"fragmented\">Fragmented</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word situation\">\n",
+       " <h1 class=\"title\" id=\"habit\">Habit</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word situation process form\">\n",
+       " <h1 class=\"title\" id=\"frustration\">Frustration</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word form action\">\n",
+       " <h1 class=\"title\" id=\"newsletter\">Newsletter</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word form action\">\n",
+       " <h1 class=\"title\" id=\"syllabus\">Syllabus</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word situation action\">\n",
+       " <h1 class=\"title\" id=\"audience\">Audience</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition action situation process\">\n",
+       " <h1 class=\"title\" id=\"meme-ability\">Meme-ability</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word situation logic\">\n",
+       " <h1 class=\"title\" id=\"communal\">Communal</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word situation action form\">\n",
+       " <h1 class=\"title\" id=\"community\">Community</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word situation action process proposition\">\n",
+       " <h1 class=\"title\" id=\"community-building\">Community-building</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word action logic\">\n",
+       " <h1 class=\"title\" id=\"political-act\">Political act</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word agent logic\">\n",
+       " <h1 class=\"title\" id=\"editor\">Editor</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word process logic\">\n",
+       " <h1 class=\"title\" id=\"filtering\">Filtering</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word process logic\">\n",
+       " <h1 class=\"title\" id=\"amplification\">Amplification</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word process logic action\">\n",
+       " <h1 class=\"title\" id=\"caring\">Caring</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word logic situation\">\n",
+       " <h1 class=\"title\" id=\"ambiguity\">Ambiguity</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word process situation\">\n",
+       " <h1 class=\"title\" id=\"continuity\">Continuity</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word logic form\">\n",
+       " <h1 class=\"title\" id=\"dialogue\">Dialogue</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word form action proposition\">\n",
+       " <h1 class=\"title\" id=\"dissonance\">Dissonance</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word logic situation\">\n",
+       " <h1 class=\"title\" id=\"gathering\">Gathering</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition logic action\">\n",
+       " <h1 class=\"title\" id=\"mutation\">Mutation</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word logic situation action proposition\">\n",
+       " <h1 class=\"title\" id=\"reciprocity\">Reciprocity</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word action logic proposition\">\n",
+       " <h1 class=\"title\" id=\"regenerative\">Regenerative</h1>\n",
+       " <p>⤷ Regeneration has its origins in ecology: <strong>taking care</strong> of the soil and preventing it from depletion. Nowadays, the idea has broadened and refers to caring in a general sense: caring for the living world, the cultural heritage and our fellow human beings, both now and in the future. [⤴] (https://common-in.nl/slider/#slide3)</p>\n",
+       " </div>,\n",
+       " <div class=\"word logic situation\">\n",
+       " <h1 class=\"title\" id=\"autopoiesis\">Autopoiesis</h1>\n",
+       " <p>⤷ The term autopoiesis (from Greek αὐτo- (auto-) ‘self’, and ποίησις (poiesis) ‘creation, production’) refers to a system capable of reproducing and <strong>maintaining itself</strong> by creating its own parts and eventually further components.</p>\n",
+       " <p>⤷ De qué manera lo vivo se crea a sí mismo?</p>\n",
+       " </div>,\n",
+       " <div class=\"word logic situation proposition\">\n",
+       " <h1 class=\"title\" id=\"sympoiesis\">Sympoiesis</h1>\n",
+       " <p>⤷ It is a term that referes the act of <strong>‘making with’</strong></p>\n",
+       " <p>⤷ Beyond Autopoiesis, Sympoiesis is a form of self-making that can only happen collectively and collaboratively.</p>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition logic action\">\n",
+       " <h1 class=\"title\" id=\"transformation\">Transformation</h1>\n",
+       " </div>,\n",
+       " <div class=\"word form action\">\n",
+       " <h1 class=\"title\" id=\"drawing\">Drawing</h1>\n",
+       " <p>⤷ The act to trace on a surface.</p>\n",
+       " <p>⤷ Explore with a pencil the shape of things.</p>\n",
+       " <p>⤷ A <strong>tool for meditation</strong>.</p>\n",
+       " </div>,\n",
+       " <div class=\"word form action logic\">\n",
+       " <h1 class=\"title\" id=\"knoting\">Knoting</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word form action logic\">\n",
+       " <h1 class=\"title\" id=\"link\">Link</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word form action logic\">\n",
+       " <h1 class=\"title\" id=\"tangle\">Tangle</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word action\">\n",
+       " <h1 class=\"title\" id=\"cross-references\">Cross-references</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word form process\">\n",
+       " <h1 class=\"title\" id=\"real-time-data\">Real-time data</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word form process logic tool\">\n",
+       " <h1 class=\"title\" id=\"rss-really-simple-syndication\">RSS: Really Simple Syndication</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word form tool\">\n",
+       " <h1 class=\"title\" id=\"screen\">Screen</h1>\n",
+       " <p>⤷ “screen based publishing is intimate in my opinion, as it reaches the space of personal screens often in intimate spaces, but it establishes a <strong>remote intimacy</strong>, as the publisher is not necessarily meant to be present on the other side and his or her body is certainly distant and invisible” (alessandro Ludovico)</p>\n",
+       " </div>,\n",
+       " <div class=\"word situation action logic\">\n",
+       " <h1 class=\"title\" id=\"rumiante\">Rumiante</h1>\n",
+       " <p>⤷ lentitud / animalidad / el estigma vaca / la carne / el no saber cómo decir pero ir rumiando</p>\n",
+       " <p>⤷ Los rumiantes, como los bovinos, tienen un complejo sistema de digestión que les permite aprovechar eficientemente los nutrientes de los alimentos, inclusive los de baja calidad nutricional. La rumia debe hacerse en un lugar cómodo, plano, con sombra, para poder echarse. El rumiante procurará contar con las condiciones necesarias para poder rumiar cómodamente. Buscará entonces las condiciones de posibilidad, es decir lugar cómodo y seguro, entre afines que lo sostengan.</p>\n",
+       " <p>⤷ El rumiante es irreverente e iconoclasta.</p>\n",
+       " <p>⤷ No cree en ideas propias, se sabe no original. Sabe que siempre que habla, traduce</p>\n",
+       " <p>⤷ El rumiante apuesta por un ejercicio de <strong>invención política</strong> que es colectivo, siempre. Procura darse, para sí y su comunidad, herramientas, y entiende que estas herramientas no son algo a lo que se llega, sino que están en constante construcción.</p>\n",
+       " <p>⤷ En su acción de rumiar, rinde tributo al proceso y no al producto acabado.</p>\n",
+       " <p>⤷ El rumiante es precaria, y como precaria ha desafiado al futuro.</p>\n",
+       " <p>⤷ <strong>El futuro no es nuestro</strong>. <strong>No hay futuro</strong>. No hay tiempo. <strong>El rumiante es lento</strong>. (Lucresia Masson, Epistemología rumiante)</p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition form action process\">\n",
+       " <h1 class=\"title\" id=\"procesual-book\">Procesual Book</h1>\n",
+       " <p>⤷ Its a book that is in constant creation and formation</p>\n",
+       " <p>⤷ <strong>Living Books</strong> about life is one example <a href=\"https://www.livingbooksaboutlife.org/\">⤴</a></p>\n",
+       " </div>,\n",
+       " <div class=\"word proposition action\">\n",
+       " <h1 class=\"title\" id=\"proposition\">Proposition</h1>\n",
+       " <p>⤷ The <strong>act of offering</strong> (an idea) for consideration.</p>\n",
+       " </div>,\n",
+       " <div class=\"word form\">\n",
+       " <h1 class=\"title\" id=\"form\">Form</h1>\n",
+       " <p>⤷ The shape and structure of something as distinguished from its material</p>\n",
+       " </div>,\n",
+       " <div class=\"word action\">\n",
+       " <h1 class=\"title\" id=\"action\">Action</h1>\n",
+       " <p>⤷ The shape and structure of something as distinguished from its material</p>\n",
+       " </div>,\n",
+       " <div class=\"word logic\">\n",
+       " <h1 class=\"title\" id=\"logic\">Logic</h1>\n",
+       " <p>⤷ the arrangement of circuit elements (as in a computer) needed for computation.</p>\n",
+       " <p>⤷ Any system of thought, whether rigorous and productive or not.</p>\n",
+       " <p>⤷ A system of reasons and processes articulated.</p>\n",
+       " </div>,\n",
+       " <div class=\"word hyperlink\">\n",
+       " <h1 class=\"title\" id=\"project\">Project</h1>\n",
+       " <p>⤷</p>\n",
+       " </div>,\n",
+       " <div class=\"word logic proposition\">\n",
+       " <h1 class=\"title\" id=\"madularity\">Madularity</h1>\n",
+       " <p>⤷ Building blocks logic to build up something.</p>\n",
+       " <p>⤷ What aspects of modularity in publishing are making meaningful connections between parts?</p>\n",
+       " <p>⤷</p>\n",
+       " </div>]"
+      ]
+     },
+     "execution_count": 157,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "words"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 161,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "glossary_bag = [] \n",
+    "word_no = 1\n",
+    "words = soup.find_all('div',attrs={'class':'word'})\n",
+    "\n",
+    "for word in words:\n",
+    "    \n",
+    "    title = word.find('h1').text\n",
+    "    \n",
+    "    voices = word.find_all('p')\n",
+    "    \n",
+    "    links = word.find_all('a')\n",
+    "    \n",
+    "    properties = word.get('class')\n",
+    "    \n",
+    "    li_voices = []\n",
+    "    \n",
+    "    li_links = []\n",
+    "    \n",
+    "    for voice in voices:\n",
+    "        li_voices.append(voice.text)\n",
+    "    \n",
+    "    for link in links:\n",
+    "        p = link.text\n",
+    "        url = link.get('href')\n",
+    "        li_links.append(p)\n",
+    "        li_links.append(url)\n",
+    "        \n",
+    "    word = {\n",
+    "        'Word#': str(word_no), \n",
+    "        'title': title, \n",
+    "        'properties': properties,\n",
+    "        'voices': li_voices,\n",
+    "        'links': li_links\n",
+    "    }\n",
+    "    \n",
+    "    glossary_bag.append(word)\n",
+    "    \n",
+    "    word_no += 1\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 159,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 160,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "['word', 'logic', 'proposition']"
+      ]
+     },
+     "execution_count": 160,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 162,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    " with open('glossary.json', 'w+', encoding='utf-8') as f:\n",
+    "        json.dump(glossary_bag, f, indent=5, ensure_ascii=False)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "```\n",
+    "glossary = {\n",
+    "    'title': f'{title}',\n",
+    "    'properties': {\n",
+    "    }\n",
+    "    'words':{\n",
+    "        'reflection': {\n",
+    "            'voices': ['','',''],\n",
+    "            'properties': ['','',''],\n",
+    "    }\n",
+    "    'version': '0.1',\n",
+    "}\n",
+    "```"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 140,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "<_io.TextIOWrapper name='glossary.json' mode='w' encoding='utf-8'>"
+      ]
+     },
+     "execution_count": 140,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.7.3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}
diff --git a/Glossary_making.ipynb b/Glossary_making.ipynb
new file mode 100644
index 0000000..ea8c50b
--- /dev/null
+++ b/Glossary_making.ipynb
@@ -0,0 +1,419 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Glossary Making Tool"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "This is a Work-in-progress experiment tool to make living glossaries Webpages using simple Python, Javascript, and CSS from an markdown file written in a Etherpad instance.\n",
+    "\n",
+    "**What makes it living?** \n",
+    "\n",
+    "* The glossary structure uses the idea of 'gloss' that means annottation and layer. It makes the glossary a layering of anotations rather than a list of definitions. The pad template uses each word as a card with multiple annotations. See the example.\n",
+    "\n",
+    "* This tool also offers the option of add properties to each word in order to find connections and multiple types of organization. \n"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "tags": []
+   },
+   "source": [
+    "## Words\n",
+    "Communicating via **API** with the glossary **Pad** and translating the text written in **Markdown** format using **Pandoc** library."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "import json, pypandoc\n",
+    "from urllib.request import urlopen\n",
+    "from urllib.parse import urlencode\n",
+    "\n",
+    "\n",
+    "with open(\"/opt/etherpad/APIKEY.txt\") as f:\n",
+    "    api_key = f.read().strip()\n",
+    "\n",
+    "api_url = \"https://hub.xpub.nl/soupboat/pad/api/1.2.15/\"\n",
+    "\n",
+    "# wrap in a convenient function (APICALL)\n",
+    "def ep (api_fn, api_url, api_key, **data):\n",
+    "    data['apikey'] = api_key\n",
+    "    return json.load(urlopen(f\"{api_url}{api_fn}\", data=urlencode(data).encode()))\n",
+    "\n",
+    "\n",
+    "glossary = ep(\"getText\", api_url, api_key, padID=\"camilo_glossary\")\n",
+    "\n",
+    "text = glossary[\"data\"][\"text\"]\n",
+    "\n",
+    "words = pypandoc.convert_text(text, 'html', format='md')"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "From a local markdown text file"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "tags": []
+   },
+   "source": [
+    "## Properties"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "The following is a word property dictionary "
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "properties = [\n",
+    "\t{\n",
+    "\t\t'title':'action',\n",
+    "\t\t'symbol':'A',\n",
+    "        'color': 'green'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'situation',\n",
+    "\t\t'symbol':'S',\n",
+    "\t\t'color': 'aqua'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'logic',\n",
+    "\t\t'symbol':'C',\n",
+    "\t\t'color': 'orange'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'proposition',\n",
+    "\t\t'symbol':'T',\n",
+    "\t\t'color': 'blue'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'hyperlink',\n",
+    "\t\t'symbol':'N',\n",
+    "\t\t'color': 'pink'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'process',\n",
+    "\t\t'symbol':'P',\n",
+    "\t\t'color': 'gray'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'language',\n",
+    "\t\t'symbol':'G',\n",
+    "\t\t'color': 'violet'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'agent',\n",
+    "\t\t'symbol':'E',\n",
+    "\t\t'color': 'purple'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'tool',\n",
+    "\t\t'symbol':'T',\n",
+    "\t\t'color': 'lightblue'\n",
+    "\t},\n",
+    "\t{\n",
+    "\t\t'title':'form',\n",
+    "\t\t'symbol':'Y',\n",
+    "\t\t'color': 'gold'\n",
+    "\t}\n",
+    "]"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Writing the Website"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Write properties legend"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "description = ''\n",
+    "\n",
+    "i = 0\n",
+    "\n",
+    "for title, symbol, color in properties:\n",
+    "    title = properties[i]['title']\n",
+    "    description += (f''' {title}s,''')\n",
+    "    i += 1"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "legend = ''\n",
+    "\n",
+    "i = 0\n",
+    "\n",
+    "for title, symbol, color in properties:\n",
+    "    title = properties[i]['title']\n",
+    "    symbol = properties[i]['symbol']\n",
+    "    legend += f'''<button id=\"{title}\" class=\"btn {title}-s\" onclick=\"filterSelection('{title}')\">{title}→  <span class='symbol {title}-s'>{symbol}</span> </button>\\n'''\n",
+    "    i += 1"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Write Script that will add properties to each word"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "script = ''\n",
+    "\n",
+    "i = 0 \n",
+    "\n",
+    "for title, symbol, color in properties:\n",
+    "    title = properties[i]['title']\n",
+    "    symbol = properties[i]['symbol']\n",
+    "    script += (f\"\"\"const {title} = document.getElementsByClassName(\"{title}\");\n",
+    "    for (let i = 0; i < {title}.length; i++)\"\"\"'{\\n' \n",
+    "               f\"\"\"{title}[i].innerHTML += \"<span class='symbol {title}-s'>{symbol}</span>\";\"\"\" \n",
+    "    '\\n}\\n\\n')\n",
+    "    i += 1"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Assign a different color for each property "
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 6,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "style = ''\n",
+    "\n",
+    "i = 0 \n",
+    "\n",
+    "for title, symbol, color in properties:\n",
+    "    title = properties[i]['title']\n",
+    "    color = properties[i]['color']\n",
+    "    style += f'''.{title}-s:hover''' + '{' + f'''color:{color};''''}'\n",
+    "    i += 1"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 7,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "body = f'''<!DOCTYPE html>\n",
+    "    <html>\n",
+    "    <head>\n",
+    "        <meta charset=\"utf-8\">\n",
+    "        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n",
+    "        <link rel=\"stylesheet\" href=\"style.css\"> \n",
+    "        <title>Glossary</title>\n",
+    "    </head>\n",
+    "        <style> {style} </style>\n",
+    "    <body id=\"glo_body\">\n",
+    "    <div class=\"head\">\n",
+    "        <h1 id=\"title\"> Permeable Glossary for a Living Publishing Practice </h1>\n",
+    "            <div class=\"question\">\n",
+    "        <input id=\"search\" type=\"text\" ><span onclick=\"document.getElementById('search').value= ''\">X</span>\n",
+    "    </div>\n",
+    "        <a href=\"rss.xml\">\n",
+    "            <p>follow what is new (rss)</p>\n",
+    "        </a>\n",
+    "    </div>\n",
+    "    <div class='diffraction'>\n",
+    "        <img src='images/pattern-01.svg'>\n",
+    "        <img src='images/pattern-02.svg'>\n",
+    "        <img src='images/pattern-03.svg'>\n",
+    "        <img src='images/pattern-04.svg'>\n",
+    "        <img src='images/pattern-05.svg'>\n",
+    "        <img src='images/pattern-06.svg'>\n",
+    "        <img src='images/pattern-07.svg'>\n",
+    "        <img src='images/pattern-08.svg'>\n",
+    "    </div>\n",
+    "    <div class=\"description\">\n",
+    "        <p>From creating, designing and conceptualising to filtering, circulating and amplifying, publishing practices involve different processes and matters. Even though there are multiple theories and authors that approach each of them in a particular way, I propose to make a pause on defining them individually and focus on possible entanglements. Not to find a generalized idea of publishing but to see it as a complex and interwoven materiality. </p> \n",
+    "        <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>\n",
+    "    </div>\n",
+    "    <div class;\n",
+    "    <div id=\"legend\" class=\"legend\"> \n",
+    "        <button class=\"btn active\" onclick=\"filterSelection('all')\">properties</button> {legend}\n",
+    "    </div>\n",
+    "    <div class=\"words\">\n",
+    "        {words} \n",
+    "    </div>\n",
+    "    </body>\n",
+    "        <script>\n",
+    "            {script}\n",
+    "        </script>\n",
+    "        <script src=\"main.js\"></script>\n",
+    "    </html>'''\n",
+    "\n",
+    "website = open('index.html','w')\n",
+    "\n",
+    "website.write(body)\n",
+    "website.close()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "print(words)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "from time import sleep\n",
+    "\n",
+    "while True:\n",
+    "    print('hey')\n",
+    "    sleep(5)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.7.3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}
diff --git a/fonts/FLuxisch_ElseWeb_font/FluxischElse-Bold.woff b/fonts/FLuxisch_ElseWeb_font/FluxischElse-Bold.woff
new file mode 100644
index 0000000..359be3b
Binary files /dev/null and b/fonts/FLuxisch_ElseWeb_font/FluxischElse-Bold.woff differ
diff --git a/fonts/FLuxisch_ElseWeb_font/FluxischElse-Light.woff b/fonts/FLuxisch_ElseWeb_font/FluxischElse-Light.woff
new file mode 100644
index 0000000..55f0c76
Binary files /dev/null and b/fonts/FLuxisch_ElseWeb_font/FluxischElse-Light.woff differ
diff --git a/fonts/FLuxisch_ElseWeb_font/FluxischElse-Regular.woff b/fonts/FLuxisch_ElseWeb_font/FluxischElse-Regular.woff
new file mode 100644
index 0000000..34118b1
Binary files /dev/null and b/fonts/FLuxisch_ElseWeb_font/FluxischElse-Regular.woff differ
diff --git a/fonts/diatype-semi-mono-regular.woff b/fonts/diatype-semi-mono-regular.woff
new file mode 100644
index 0000000..a1c32ff
Binary files /dev/null and b/fonts/diatype-semi-mono-regular.woff differ
diff --git a/fonts/symbols.woff b/fonts/symbols.woff
new file mode 100644
index 0000000..3abc37c
Binary files /dev/null and b/fonts/symbols.woff differ
diff --git a/glossary.json b/glossary.json
new file mode 100644
index 0000000..b509a49
--- /dev/null
+++ b/glossary.json
@@ -0,0 +1,1598 @@
+[
+     {
+          "Word#": "1",
+          "title": "Reflection",
+          "properties": [
+               "word",
+               "logic",
+               "situation",
+               "action"
+          ],
+          "voices": [
+               "⤷ “Stop and look at your own process and understand it. Eventually, I suppose you do run into the infinite recursion problem, but I guess you get used to that.” (Mary Catherine Bateson)",
+               "⤷ Es como un círculo: un punto que en su recorrido vuelve a sí mismo",
+               "⤷ The projection of an image on the mirror",
+               "⤷ It is a useful way to think when finding common ground",
+               "⤷ to see the same elsewhere"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "2",
+          "title": "Diffraction",
+          "properties": [
+               "word",
+               "logic",
+               "proposition",
+               "action"
+          ],
+          "voices": [
+               "⤷ To perform connection between things",
+               "⤷ Its when a wave encounters a obstacle and find a slit in it where it bends and make a pattern.",
+               "⤷ It creates a pattern of differences",
+               "⤷ “There is no sharp boundary separating the light from the darkness”",
+               "⤷ Thinking the differences within el medio, el espacio que nos conecta y nos separa simultáneamente.",
+               "⤷ “About taking responsability for the fact that our practices matter; the world is materialized differently through different practices.”"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "3",
+          "title": "Property",
+          "properties": [
+               "word",
+               "proposition",
+               "logic"
+          ],
+          "voices": [
+               "⤷ An attribute, characteristic, or quality",
+               "⤷ From etymology the word comes from properte which means “nature, quality, distinctive character always present in an individual or class”"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "4",
+          "title": "Atata",
+          "properties": [
+               "word",
+               "proposition",
+               "logic",
+               "hyperlink"
+          ],
+          "voices": [
+               "⤷ It is a composition of two ideograms (fig.1)in the Mhuysqa dead language . ATATA can be defined as ‘ I give myself and you give yourself , ’ where giving is an act of receiving , because what you do for others is also affecting yourself . This exercise oofreciprocity is a very important vibration of life because nobody can live without others , this includes all living creatures with whom we share the Earth .",
+               "⤷ Reciprocity awarness. ⤴",
+               "⤷ to be reciprocal"
+          ],
+          "links": [
+               "⤴",
+               "https://issue.xpub.nl/13/ATATA/"
+          ]
+     },
+     {
+          "Word#": "5",
+          "title": "Paratext",
+          "properties": [
+               "word",
+               "form"
+          ],
+          "voices": [
+               "⤷ thresholds to the text",
+               "⤷ thresholds to a publication",
+               "⤷ Interesting to be aware of the spaces that open, close, introduce and mediate the publication."
+          ],
+          "links": []
+     },
+     {
+          "Word#": "6",
+          "title": "Glosario",
+          "properties": [
+               "word",
+               "form"
+          ],
+          "voices": [
+               "⤷ a paratext",
+               "⤷ from the term gloss which means annotation and layer",
+               "⤷ This publication see its origin in the idea of layering of annotations"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "7",
+          "title": "Urgencia",
+          "properties": [
+               "word",
+               "action",
+               "hyperlink"
+          ],
+          "voices": [
+               "⤷ Tener la urgencia como guía para la acción implica una búsqueda constante para posibilitar la publicación de contenidos relevantes de forma accesible y democrática. (…) Es importante decir que cuando hablamos de relevancia, no necesariamente estamos hablando de panfletos y obras explícitamente políticas. En una sociedad adversa a las diferencias y violentamente estandarizada, las obras que dan visibilidad a subjetividades no hegemónicas son potencialmente transformadoras, además de jugar un papel importante en el registro de diferentes formas de existencia, algo profundamente político en sí mismo. ⤴",
+               "⤷ Being different as a political act itself.",
+               "⤷ Understanding my needs and collective needs to make something public.",
+               "⤷ Activating agency"
+          ],
+          "links": [
+               "⤴",
+               "https://files.cargocollective.com/c1032387/publicacion-independiente-PRINT.pdf"
+          ]
+     },
+     {
+          "Word#": "8",
+          "title": "Post growth",
+          "properties": [
+               "word",
+               "proposition",
+               "hyperlink"
+          ],
+          "voices": [
+               "⤷ to challenge the dominant narratives about growth and progress, and re-envision social metabolism through an understanding of the energy it requires, reconnecting human survival with the living, material qualities of the biosphere, drawing on ecofeminism, indigenous knowledge, environmental accounting and historical materialism. ⤴",
+               "⤷ To leave behind an activity of accumulation, to find yourselve in a different work rhythm"
+          ],
+          "links": [
+               "⤴",
+               "http://postgrowth.art/"
+          ]
+     },
+     {
+          "Word#": "9",
+          "title": "Non-teleological reading",
+          "properties": [
+               "word",
+               "proposition",
+               "hyperlink"
+          ],
+          "voices": [
+               "⤷ what if instead of reflecting about the why, we focus about the how? ⤴",
+               "⤷ What is teleological? ⤴",
+               "⤷ Have you question how would it be the reading process of your publication?",
+               "⤷ ¿Por qué publicamos lo que publicamos, en la forma en que lo publicamos? Habrá momentos en que no será necesario preguntar por qué, sino cómo."
+          ],
+          "links": [
+               "⤴",
+               "https://tdingsun.github.io/reading-machines/",
+               "⤴",
+               "https://en.wikipedia.org/wiki/Teleology"
+          ]
+     },
+     {
+          "Word#": "10",
+          "title": "Urgent artifact",
+          "properties": [
+               "word",
+               "hyperlink"
+          ],
+          "voices": [
+               "⤷ The visible act of “commoning-in-the-crisis.” An outcome of solidarity and coming together in urgent times using modest tools and materials. It’s the manifestation that we can work from shared, common positions, in common, and on common ground. Examples: collaborative spreadsheets, online petitions, protests, surveys,letter-writing, essay writing, note-taking, shared open access writing spaces, streaming workshops, performances, talks, teach-ins, raw and unedited poetry, and quickly made zines. ⤴",
+               "⤷ Is a set of principles that works to resist oppression-based design ideologies, especially in art and design education. URGENTCRAFT isn’t a manifesto, but rather a constellation of tactics — a series of incomplete observations. A note to self. A reminder that we can use art and design to loosen hegemonic power. ⤴"
+          ],
+          "links": [
+               "⤴",
+               "https://soulellis.com/writing/urgentcraft2/",
+               "⤴",
+               "https://soulellis.com/work/urgentcraft/index.html"
+          ]
+     },
+     {
+          "Word#": "11",
+          "title": "Urgentcraft",
+          "properties": [
+               "word",
+               "proposition",
+               "action"
+          ],
+          "voices": [
+               "⤷ Do what you can",
+               "⤷ Use modest tools and materials",
+               "⤷ Practice a slow approach to fast making",
+               "⤷ Dismantle white supremacy / be anti-racist",
+               "⤷ Commit to maintenance and self-care as a form of urgency",
+               "⤷Think big but make small",
+               "⤷ Resist, loosen, and dismantle ableism, heteropatriachy, and settler colonialism",
+               "⤷ Prioritize communal care as a never-ending practice",
+               "⤷ Undestard the politics of your platforms",
+               "⤷ Redistribute wealth and accumulation",
+               "⤷ Resit capitalist strategies",
+               "⤷ Practice media hybridity",
+               "⤷ Agitate/interfere (“make good trouble”)",
+               "⤷ Fail to provide the perfect read (resist legibility)",
+               "⤷ Refuse design perfection / stay with the mess",
+               "⤷ Work in public (self-publish!)",
+               "⤷ Work towards the then and there of queer futurity (while acknowledging past struggles and privileges)",
+               "⤷ Question linearity and other hieratchical structures",
+               "⤷ [⤴] (https://soulellis.com/writing/urgentcraft2/)"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "12",
+          "title": "Complexity",
+          "properties": [
+               "word",
+               "logic"
+          ],
+          "voices": [
+               "⤷ Complexity does not mean complicated. Complex systems can in fact be relatively simple.",
+               "⤷ La complejidad es múltiple, en el sentido que nunca se logra desenredar en sí, siempre resulta irresoluble. Viene de la mano mano con no entender lo que se quiere explicar. Alguna vez leí que la complejidad es aquello que no se puede resumir a una sola palabra. Este glossario, por ejemplo, intenta explicar con múltiples palabras aquello que parece complejo. Falla en el intento.",
+               "⤷ Humans use metaphors often to deal with complexity."
+          ],
+          "links": []
+     },
+     {
+          "Word#": "13",
+          "title": "Contradiction",
+          "properties": [
+               "word",
+               "situation"
+          ],
+          "voices": [
+               "⤷ Two different forces that go against each other. Develop a project having in mind that some decisions will go against your own will.",
+               "⤷ is also aboout the lack of purity when acting."
+          ],
+          "links": []
+     },
+     {
+          "Word#": "14",
+          "title": "Rhizome",
+          "properties": [
+               "word",
+               "form"
+          ],
+          "voices": [
+               "⤷ Term adapted from plant biology by Gilles Deleuze and Félix Guattari to conceptualize non-linear relations in both the realm of pure thought and the concrete and the everyday.",
+               "⤷ Thinking multiplicity as a substantive",
+               "⤷ connection, heterogeneity, multiplicity, signifying rupture, cartography",
+               "⤷ Los rizhomas son también estructuras porosas",
+               "⤷ Being permeable, letting relate yourself within the environment"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "15",
+          "title": "Interference",
+          "properties": [
+               "word",
+               "proposition",
+               "action"
+          ],
+          "voices": [
+               "⤷ On publishing, the possibility to block and reduce the legibility of a matter too enhance other. For example:"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "16",
+          "title": "Illegivility",
+          "properties": [
+               "word",
+               "proposition",
+               "action",
+               "logic"
+          ],
+          "voices": [
+               "⤷ Its about being cryptic, hidden. But also to create a safe space. Not being in the spotlight may protect you."
+          ],
+          "links": []
+     },
+     {
+          "Word#": "17",
+          "title": "Collaborative spreadsheets",
+          "properties": [
+               "word",
+               "hyperlink",
+               "action"
+          ],
+          "voices": [
+               "⤷ Son hojas de cálculo elavoradas colectivamente.",
+               "⤷ It is a interesting tool to use when gathering information collectively",
+               "⤷ ⤴"
+          ],
+          "links": [
+               "⤴",
+               "https://docs.google.com/spreadsheets/d/1UkgIsDpFMuA0_hvqf5f4ytPTKX4wfPp8ByRs3Uymvag/edit#gid=0"
+          ]
+     },
+     {
+          "Word#": "18",
+          "title": "EPUB",
+          "properties": [
+               "word",
+               "form",
+               "hyperlink"
+          ],
+          "voices": [
+               "⤷ Acronym for Electronic Publication. An ebook format developed by the international Digital Publishing Forum (IDPF). EPUB is an open standard and the most commonly used and supported file format for electronic books. EPUB was designed to accommodate reflow-able content. ⤴"
+          ],
+          "links": [
+               "⤴",
+               "https://networkcultures.org/digitalpublishing/"
+          ]
+     },
+     {
+          "Word#": "19",
+          "title": "Electronic publication",
+          "properties": [
+               "word",
+               "form",
+               "logic"
+          ],
+          "voices": [
+               "⤷ Beyond EPUB, A Electronic Publication is a publication generated, created and shown by an electronic device."
+          ],
+          "links": []
+     },
+     {
+          "Word#": "20",
+          "title": "Book",
+          "properties": [
+               "word",
+               "form",
+               "situation"
+          ],
+          "voices": [
+               "⤷ The codex,",
+               "⤷ by folded paper,",
+               "⤷ unfolded",
+               "⤷ stapled matter",
+               "⤷ drawn space",
+               "⤷ wrapped by glue ~ threads,",
+               "⤷ inhabid by drawings, letters, words, images,",
+               "⤷ containing containers such as prologues, colophon, glossaries",
+               "⤷ the interface,",
+               "⤷ the simple and the whole",
+               "⤷ A format"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "21",
+          "title": "Autonomous practice",
+          "properties": [
+               "word",
+               "action",
+               "proposition",
+               "situation"
+          ],
+          "voices": [
+               "⤷ On publishing, to be able and to have the energy to create, make, produce and share with self autonomy.",
+               "⤷ Etymologicaly, autonomous comes from auto- (“self”) and -nomy (“a system of rules or laws about a particular field”).",
+               "⤷ Autonomous practice suggests drawing your own rules and own systems of creating, making, producing and distributing in order to publish."
+          ],
+          "links": []
+     },
+     {
+          "Word#": "22",
+          "title": "Publishing",
+          "properties": [
+               "word",
+               "action"
+          ],
+          "voices": [
+               "⤷ To make something public.",
+               "⤷ To circulate.",
+               "⤷ To filter and amplify.",
+               "⤷ A big spectrum of practices interested into making public",
+               "⤷ To publish is to make a public through the circulation of material, generating discourse."
+          ],
+          "links": []
+     },
+     {
+          "Word#": "23",
+          "title": "Hybrid publication",
+          "properties": [
+               "word",
+               "form"
+          ],
+          "voices": [
+               "⤷ the act of publishing through differents mediums and techniches in order to adapt and contextualize to a specific project or part of it. A hybrid publication can offer a varied spectrum of objects and processes that together construct the body of it."
+          ],
+          "links": []
+     },
+     {
+          "Word#": "24",
+          "title": "Printed publication",
+          "properties": [
+               "word",
+               "form"
+          ],
+          "voices": [
+               "⤷ A type of publication that uses a printing technique such as offset, inkjet, risoprint, and so on.",
+               "⤷ commonly use surfaces and ink as primarily elements"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "25",
+          "title": "RISO printing",
+          "properties": [
+               "word",
+               "form",
+               "process"
+          ],
+          "voices": [
+               "⤷ Risograph is a brand of digital duplicators that are designed mainly for high-volume photocopying and printing.",
+               "⤷ The process creates micro-imperfections in printing, similar to spontaneity, or even comparable to how improvisation in jazz can lead to an unexpected but pleasant result. ⤴"
+          ],
+          "links": [
+               "⤴",
+               "https://odotoo.com/risograph/"
+          ]
+     },
+     {
+          "Word#": "26",
+          "title": "Agency",
+          "properties": [
+               "word",
+               "proposition"
+          ],
+          "voices": [
+               "⤷ It is defined as the capacity of individuals to act independently and to make their own free choices. On publishing it suggests to take responsability of the public-action. Publication as an act. See with Urgent-craft."
+          ],
+          "links": []
+     },
+     {
+          "Word#": "27",
+          "title": "Responsability",
+          "properties": [
+               "word",
+               "proposition",
+               "action"
+          ],
+          "voices": [
+               "⤷ The ability to respond.",
+               "⤷ Being aware that publishing acts have an impact"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "28",
+          "title": "Word processors",
+          "properties": [
+               "word",
+               "form"
+          ],
+          "voices": [
+               "⤷ Like Microsoft word. There is plenty open-source ones. See:"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "29",
+          "title": "Future-trash",
+          "properties": [
+               "word",
+               "proposition",
+               "situation"
+          ],
+          "voices": [
+               "⤷ Resisting burnout and future trash puts artist and their work in a good position to solve problems. By sustaining a publishing practice over time and creating objects that persist with meaning as their inherent value, artist publishers can continue to create, contribute to, and maintain the radically open, imaginative, accessible and inclusive community that makes up artist publishing. (Alex Arzt, pag 20, What Problems Can Artist Publishers Solve?)",
+               "⤷¿Cuándo este objeto dejará de existir?"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "30",
+          "title": "Promiscuous Publishing",
+          "properties": [
+               "word",
+               "situation",
+               "proposition"
+          ],
+          "voices": [
+               "⤷ “A promiscuous publication is NOT like parallel, hybrid, or cross-media publishing. It is a multi-headed and polycentric form of making public. It enjoys its various forms, and embraces their idiosyncracies. As a multi-headed publication it is NOT obsessed with providing uniform outcomes across diverse media. Having many centers, it can produce new focal points and obfuscate its origins. It explores playfully a spectral diversity with sibling out-comes and bastard children that operate out of sync or tune.” (Christoph Haag, make make do in: The Techno-Galactic Guide to Software Observation, 2016) ⤴"
+          ],
+          "links": [
+               "⤴",
+               "https://constantvzw.org/wefts/webpublications.en.html"
+          ]
+     },
+     {
+          "Word#": "31",
+          "title": "Do-it-yourself (DIY)",
+          "properties": [
+               "word",
+               "proposition",
+               "process"
+          ],
+          "voices": [
+               "⤷ Using your own resources and skills to make possible a publication.",
+               "⤷ La autogestion y procesos autonomos están relacionados con DIY"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "32",
+          "title": "Do-it-yourself-with-others (DIYWO)",
+          "properties": [
+               "word",
+               "process",
+               "proposition"
+          ],
+          "voices": [
+               "⤷ It reminds me Sympoesis.",
+               "⤷ Hacer las cosas con otros",
+               "⤷ Is a difficult process that requiares a lot of energy"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "33",
+          "title": "Fanzine",
+          "properties": [
+               "word",
+               "form",
+               "hyperlink"
+          ],
+          "voices": [
+               "⤷ El fanzine es el libro más simple del mundo. ⤴",
+               "⤷ Se puede hacer e imprimir de infinitas formas. Es normal hacer fotocopias, siendo la opción más barata, accesible, y democrática. ⤴",
+               "⤷ Considerado más “under”/rudimentario, es una excelente herramienta para difundir ideas políticas y urgentes. ⤴",
+               "⤷ Usually free or just to cover production expenses and transportation",
+               "⤷ Produced using home office equipment",
+               "⤷ Quick, cheap, small and non-pretentious"
+          ],
+          "links": [
+               "⤴",
+               "https://files.cargocollective.com/c1032387/publicacion-independiente-PRINT.pdf#page=12",
+               "⤴",
+               "https://files.cargocollective.com/c1032387/publicacion-independiente-PRINT.pdf#page=12",
+               "⤴",
+               "https://files.cargocollective.com/c1032387/publicacion-independiente-PRINT.pdf#page=12"
+          ]
+     },
+     {
+          "Word#": "34",
+          "title": "Festival",
+          "properties": [
+               "word",
+               "form",
+               "situation"
+          ],
+          "voices": [
+               "⤷ On publishing, festivals are events that congregates creators, editors, publishers and readers that are interested into share and encounter books, fanzines, panflets, objects and so on.",
+               "⤷ Events created to enhance community building",
+               "⤷ Festival may expand the individual practice into multiple collective ones."
+          ],
+          "links": []
+     },
+     {
+          "Word#": "35",
+          "title": "Markdown: word processing format",
+          "properties": [
+               "word",
+               "form",
+               "language"
+          ],
+          "voices": [
+               "⤷ Markdown’s syntax is intended for one purpose: to be used as a format for writing for the web.",
+               "⤷ Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a publishing format; Markdown is a writing format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in plain text. ⤴",
+               "⤷ This format can be useful for text projects that need to adapt to different formats",
+               "⤷ This glossary uses the markdown format. Check it here: ⤴"
+          ],
+          "links": [
+               "⤴",
+               "https://daringfireball.net/projects/markdown/syntax#overview",
+               "⤴",
+               "https://hub.xpub.nl/soupboat/pad/p/camilo_glossary"
+          ]
+     },
+     {
+          "Word#": "36",
+          "title": "Small-edition",
+          "properties": [
+               "word",
+               "proposition",
+               "action",
+               "process"
+          ],
+          "voices": [
+               "⤷ Make less than 1000 units of a publication.",
+               "⤷ Small editions may focus their energies on circulating through individuals that care about it"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "37",
+          "title": "Low cost",
+          "properties": [
+               "word",
+               "logic"
+          ],
+          "voices": [
+               "⤷ Using a small budget to produce a publication."
+          ],
+          "links": []
+     },
+     {
+          "Word#": "38",
+          "title": "Archive",
+          "properties": [
+               "word",
+               "form",
+               "situation"
+          ],
+          "voices": [
+               "⤷ A collection of pieces of information generally related to past times.",
+               "⤷ made by records providing evidential information"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "39",
+          "title": "Sustainability",
+          "properties": [
+               "word",
+               "proposition",
+               "logic",
+               "action"
+          ],
+          "voices": [
+               "⤷ On publishing, to be aware of the resources used to create, maintain and circulate a publication",
+               "⤷ What type of printing process are you using? Do you know where the materias come from? What type of inks are you using? What’s the impact of your digital publication’s infrastructure?"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "40",
+          "title": "Open source",
+          "properties": [
+               "word",
+               "propositon",
+               "action"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "41",
+          "title": "Infrastructure",
+          "properties": [
+               "word",
+               "process"
+          ],
+          "voices": [
+               "⤷ What makes possible the structure. The underneath processes and materials that sustain a publication.",
+               "⤷ It could be the tools we use to create, host or publish them."
+          ],
+          "links": []
+     },
+     {
+          "Word#": "42",
+          "title": "Self-Hosting",
+          "properties": [
+               "word",
+               "proposition",
+               "process",
+               "action"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "43",
+          "title": "Layout",
+          "properties": [
+               "word",
+               "form",
+               "process",
+               "situation"
+          ],
+          "voices": [
+               "⤷ How things are organized in the space",
+               "⤷ Visual structures can suggest conceptual structures"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "44",
+          "title": "E-reader hardware",
+          "properties": [
+               "word",
+               "form"
+          ],
+          "voices": [
+               "⤷ The device used to display EPUBs such as Kindle, Komo…etc."
+          ],
+          "links": []
+     },
+     {
+          "Word#": "45",
+          "title": "E-reader software",
+          "properties": [
+               "word",
+               "process",
+               "language"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "46",
+          "title": "bookbinding",
+          "properties": [
+               "word",
+               "process",
+               "tool"
+          ],
+          "voices": [
+               "⤷ Bookbinding is the process of physically assembling a book of codex format from an ordered stack of paper sheets that are folded together.",
+               "⤷ There are different types of binding, here you can find a usefull guide for"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "47",
+          "title": "Plain text",
+          "properties": [
+               "word",
+               "form",
+               "tool"
+          ],
+          "voices": [
+               "⤷ Text without any visual formatting (such as bold, italic, font types and sizes, clickable hyperlinks, etc.)",
+               "⤷ ASCII is the oldest and still most common plain-text format"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "48",
+          "title": "WYSIWYG",
+          "properties": [
+               "word",
+               "form",
+               "process"
+          ],
+          "voices": [
+               "⤷ (what you see is what you get)"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "49",
+          "title": "Logical-semantic markup",
+          "properties": [
+               "word"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "50",
+          "title": "HTML",
+          "properties": [
+               "word",
+               "language"
+          ],
+          "voices": [
+               "⤷ (hyper text Markup Language)"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "51",
+          "title": "Paged-centred",
+          "properties": [
+               "word",
+               "situation",
+               "action"
+          ],
+          "voices": [
+               "⤷ Publications that are tought around the idea of a page.",
+               "⤷ What is beyond a page within publishing?"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "52",
+          "title": "Reflow-able layout",
+          "properties": [
+               "word",
+               "form",
+               "process"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "53",
+          "title": "Hyperlinks",
+          "properties": [
+               "word",
+               "logic",
+               "form"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "54",
+          "title": "Website",
+          "properties": [
+               "word",
+               "form",
+               "hyperlink"
+          ],
+          "voices": [
+               "⤷ At its simplest, a website is a folder of text files broadcast from a computer to the rest of the world. [⤴] (https://solarpunk.cool/zines/web-zine-01/introduction.html)"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "55",
+          "title": "Web-zine",
+          "properties": [
+               "word",
+               "form",
+               "proposition",
+               "hyperlink"
+          ],
+          "voices": [
+               "⤷ I want to see more personal websites because a handmade web is magical and good.",
+               "⤷ [⤴] (https://solarpunk.cool/zines/web-zine-01/introduction.html)"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "56",
+          "title": "One-to-one:",
+          "properties": [
+               "word",
+               "process",
+               "action"
+          ],
+          "voices": [
+               "⤷ Single publication published in different media"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "57",
+          "title": "One-to-many:",
+          "properties": [
+               "word",
+               "process",
+               "action"
+          ],
+          "voices": [
+               "⤷ Single publication that has different appearances in different media"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "58",
+          "title": "One-to-database:",
+          "properties": [
+               "word",
+               "process",
+               "action"
+          ],
+          "voices": [
+               "⤷ Publication based on the content of the data base which can be used in a number of ways"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "59",
+          "title": "Discourse",
+          "properties": [
+               "word",
+               "proposition",
+               "action"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "60",
+          "title": "Speed",
+          "properties": [
+               "word",
+               "situation",
+               "logic"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "61",
+          "title": "Afterlife",
+          "properties": [
+               "word",
+               "proposition",
+               "logic",
+               "situation"
+          ],
+          "voices": [
+               "⤷ How to make the content relevant again? Re-using it for different contexts."
+          ],
+          "links": []
+     },
+     {
+          "Word#": "62",
+          "title": "Non-hasty",
+          "properties": [
+               "word",
+               "action",
+               "proposition"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "63",
+          "title": "Reader",
+          "properties": [
+               "word",
+               "process",
+               "situation"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "64",
+          "title": "Post-digital",
+          "properties": [
+               "word",
+               "situation",
+               "action",
+               "proposition"
+          ],
+          "voices": [
+               "⤷ Utilizar los recursos que sean necesarios con las circuntancias contextuales particulares actuales.",
+               "⤷ To leave behind the digital hype?",
+               "⤷ The “post-digital mindset” allows a more inclusive research framework of the publishing field, in which e-books and book-apps aren’t the only object of study and where “old” and “new” media are not in a natural opposition. In the field of post-digital publishing, printed matter doesn’t belong to the past and digital tools are not inherently innovative. ⤴",
+               "⤷ Beyond hyped mediums, what is the one that adjust the most to this project?",
+               "⤷ To make contextual decisions within a publication."
+          ],
+          "links": [
+               "⤴",
+               "https://ia800509.us.archive.org/15/items/p-dpa_booklet/p-dpa_booklet.pdf"
+          ]
+     },
+     {
+          "Word#": "65",
+          "title": "Anaphora",
+          "properties": [
+               "word",
+               "form",
+               "action",
+               "project"
+          ],
+          "voices": [
+               "⤷ Insistent prosody.",
+               "⤷ To insist. To state. To make an insistent statement ⤴"
+          ],
+          "links": [
+               "⤴",
+               "https://thenewbridgeproject.com/product/why-publish-noise-miekal-and/"
+          ]
+     },
+     {
+          "Word#": "66",
+          "title": "Manifesto",
+          "properties": [
+               "word",
+               "form",
+               "process"
+          ],
+          "voices": [
+               "⤷ A reflection that drives action."
+          ],
+          "links": []
+     },
+     {
+          "Word#": "67",
+          "title": "Post-colonial",
+          "properties": [
+               "word",
+               "situation",
+               "action",
+               "logic"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "68",
+          "title": "Fragmented",
+          "properties": [
+               "word",
+               "form",
+               "proposition",
+               "logic"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "69",
+          "title": "Habit",
+          "properties": [
+               "word",
+               "situation"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "70",
+          "title": "Frustration",
+          "properties": [
+               "word",
+               "situation",
+               "process",
+               "form"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "71",
+          "title": "Newsletter",
+          "properties": [
+               "word",
+               "form",
+               "action"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "72",
+          "title": "Syllabus",
+          "properties": [
+               "word",
+               "form",
+               "action"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "73",
+          "title": "Audience",
+          "properties": [
+               "word",
+               "situation",
+               "action"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "74",
+          "title": "Meme-ability",
+          "properties": [
+               "word",
+               "proposition",
+               "action",
+               "situation",
+               "process"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "75",
+          "title": "Communal",
+          "properties": [
+               "word",
+               "situation",
+               "logic"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "76",
+          "title": "Community",
+          "properties": [
+               "word",
+               "situation",
+               "action",
+               "form"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "77",
+          "title": "Community-building",
+          "properties": [
+               "word",
+               "situation",
+               "action",
+               "process",
+               "proposition"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "78",
+          "title": "Political act",
+          "properties": [
+               "word",
+               "action",
+               "logic"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "79",
+          "title": "Editor",
+          "properties": [
+               "word",
+               "agent",
+               "logic"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "80",
+          "title": "Filtering",
+          "properties": [
+               "word",
+               "process",
+               "logic"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "81",
+          "title": "Amplification",
+          "properties": [
+               "word",
+               "process",
+               "logic"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "82",
+          "title": "Caring",
+          "properties": [
+               "word",
+               "process",
+               "logic",
+               "action"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "83",
+          "title": "Ambiguity",
+          "properties": [
+               "word",
+               "logic",
+               "situation"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "84",
+          "title": "Continuity",
+          "properties": [
+               "word",
+               "process",
+               "situation"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "85",
+          "title": "Dialogue",
+          "properties": [
+               "word",
+               "logic",
+               "form"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "86",
+          "title": "Dissonance",
+          "properties": [
+               "word",
+               "form",
+               "action",
+               "proposition"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "87",
+          "title": "Gathering",
+          "properties": [
+               "word",
+               "logic",
+               "situation"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "88",
+          "title": "Mutation",
+          "properties": [
+               "word",
+               "proposition",
+               "logic",
+               "action"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "89",
+          "title": "Reciprocity",
+          "properties": [
+               "word",
+               "logic",
+               "situation",
+               "action",
+               "proposition"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "90",
+          "title": "Regenerative",
+          "properties": [
+               "word",
+               "action",
+               "logic",
+               "proposition"
+          ],
+          "voices": [
+               "⤷ Regeneration has its origins in ecology: taking care of the soil and preventing it from depletion. Nowadays, the idea has broadened and refers to caring in a general sense: caring for the living world, the cultural heritage and our fellow human beings, both now and in the future. [⤴] (https://common-in.nl/slider/#slide3)"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "91",
+          "title": "Autopoiesis",
+          "properties": [
+               "word",
+               "logic",
+               "situation"
+          ],
+          "voices": [
+               "⤷ The term autopoiesis (from Greek αὐτo- (auto-) ‘self’, and ποίησις (poiesis) ‘creation, production’) refers to a system capable of reproducing and maintaining itself by creating its own parts and eventually further components.",
+               "⤷ De qué manera lo vivo se crea a sí mismo?"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "92",
+          "title": "Sympoiesis",
+          "properties": [
+               "word",
+               "logic",
+               "situation",
+               "proposition"
+          ],
+          "voices": [
+               "⤷ It is a term that referes the act of ‘making with’",
+               "⤷ Beyond Autopoiesis, Sympoiesis is a form of self-making that can only happen collectively and collaboratively.",
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "93",
+          "title": "Transformation",
+          "properties": [
+               "word",
+               "proposition",
+               "logic",
+               "action"
+          ],
+          "voices": [],
+          "links": []
+     },
+     {
+          "Word#": "94",
+          "title": "Drawing",
+          "properties": [
+               "word",
+               "form",
+               "action"
+          ],
+          "voices": [
+               "⤷ The act to trace on a surface.",
+               "⤷ Explore with a pencil the shape of things.",
+               "⤷ A tool for meditation."
+          ],
+          "links": []
+     },
+     {
+          "Word#": "95",
+          "title": "Knoting",
+          "properties": [
+               "word",
+               "form",
+               "action",
+               "logic"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "96",
+          "title": "Link",
+          "properties": [
+               "word",
+               "form",
+               "action",
+               "logic"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "97",
+          "title": "Tangle",
+          "properties": [
+               "word",
+               "form",
+               "action",
+               "logic"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "98",
+          "title": "Cross-references",
+          "properties": [
+               "word",
+               "action"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "99",
+          "title": "Real-time data",
+          "properties": [
+               "word",
+               "form",
+               "process"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "100",
+          "title": "RSS: Really Simple Syndication",
+          "properties": [
+               "word",
+               "form",
+               "process",
+               "logic",
+               "tool"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "101",
+          "title": "Screen",
+          "properties": [
+               "word",
+               "form",
+               "tool"
+          ],
+          "voices": [
+               "⤷ “screen based publishing is intimate in my opinion, as it reaches the space of personal screens often in intimate spaces, but it establishes a remote intimacy, as the publisher is not necessarily meant to be present on the other side and his or her body is certainly distant and invisible” (alessandro Ludovico)"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "102",
+          "title": "Rumiante",
+          "properties": [
+               "word",
+               "situation",
+               "action",
+               "logic"
+          ],
+          "voices": [
+               "⤷ lentitud / animalidad / el estigma vaca / la carne / el no saber cómo decir pero ir rumiando",
+               "⤷ Los rumiantes, como los bovinos, tienen un complejo sistema de digestión que les permite aprovechar eficientemente los nutrientes de los alimentos, inclusive los de baja calidad nutricional. La rumia debe hacerse en un lugar cómodo, plano, con sombra, para poder echarse. El rumiante procurará contar con las condiciones necesarias para poder rumiar cómodamente. Buscará entonces las condiciones de posibilidad, es decir lugar cómodo y seguro, entre afines que lo sostengan.",
+               "⤷ El rumiante es irreverente e iconoclasta.",
+               "⤷ No cree en ideas propias, se sabe no original. Sabe que siempre que habla, traduce",
+               "⤷ El rumiante apuesta por un ejercicio de invención política que es colectivo, siempre. Procura darse, para sí y su comunidad, herramientas, y entiende que estas herramientas no son algo a lo que se llega, sino que están en constante construcción.",
+               "⤷ En su acción de rumiar, rinde tributo al proceso y no al producto acabado.",
+               "⤷ El rumiante es precaria, y como precaria ha desafiado al futuro.",
+               "⤷ El futuro no es nuestro. No hay futuro. No hay tiempo. El rumiante es lento. (Lucresia Masson, Epistemología rumiante)"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "103",
+          "title": "Procesual Book",
+          "properties": [
+               "word",
+               "proposition",
+               "form",
+               "action",
+               "process"
+          ],
+          "voices": [
+               "⤷ Its a book that is in constant creation and formation",
+               "⤷ Living Books about life is one example ⤴"
+          ],
+          "links": [
+               "⤴",
+               "https://www.livingbooksaboutlife.org/"
+          ]
+     },
+     {
+          "Word#": "104",
+          "title": "Proposition",
+          "properties": [
+               "word",
+               "proposition",
+               "action"
+          ],
+          "voices": [
+               "⤷ The act of offering (an idea) for consideration."
+          ],
+          "links": []
+     },
+     {
+          "Word#": "105",
+          "title": "Form",
+          "properties": [
+               "word",
+               "form"
+          ],
+          "voices": [
+               "⤷ The shape and structure of something as distinguished from its material"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "106",
+          "title": "Action",
+          "properties": [
+               "word",
+               "action"
+          ],
+          "voices": [
+               "⤷ The shape and structure of something as distinguished from its material"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "107",
+          "title": "Logic",
+          "properties": [
+               "word",
+               "logic"
+          ],
+          "voices": [
+               "⤷ the arrangement of circuit elements (as in a computer) needed for computation.",
+               "⤷ Any system of thought, whether rigorous and productive or not.",
+               "⤷ A system of reasons and processes articulated."
+          ],
+          "links": []
+     },
+     {
+          "Word#": "108",
+          "title": "Project",
+          "properties": [
+               "word",
+               "hyperlink"
+          ],
+          "voices": [
+               "⤷"
+          ],
+          "links": []
+     },
+     {
+          "Word#": "109",
+          "title": "Madularity",
+          "properties": [
+               "word",
+               "logic",
+               "proposition"
+          ],
+          "voices": [
+               "⤷ Building blocks logic to build up something.",
+               "⤷ What aspects of modularity in publishing are making meaningful connections between parts?",
+               "⤷"
+          ],
+          "links": []
+     }
+]
\ No newline at end of file
diff --git a/images/pattern-01.svg b/images/pattern-01.svg
new file mode 100644
index 0000000..0339726
--- /dev/null
+++ b/images/pattern-01.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><defs><style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><title>pattern</title><g id="SkBTOa.tif"><path class="cls-1" d="M255.18,259.07H43.1c-.25-3.53-.66-7.14-.73-10.75-.06-3.29.35-6.58.39-9.86q.5-38.76.87-77.53a31.26,31.26,0,0,0-.86-5.37"/><path class="cls-1" d="M255.63,35.91a26.15,26.15,0,0,1-12.57,1c-4.07-.68-8.34-.15-12.52-.15H214.4c-24.64,0-49.29.12-73.94,0-27.93-.16-55.86-.57-83.79-.86-3.29,0-6.58,0-11,0-.07,2.21-.19,4.47-.22,6.72Q45,75.79,44.56,109c-.11,7.32-.37,14.64-.39,22a63.24,63.24,0,0,0,.94,7.63,55.43,55.43,0,0,1-12.56,31.71c-10.76-6.48-15.76-16.2-18.9-27.24"/><path class="cls-1" d="M121.64,151.07c-1.34-5.37-2.5-10.81-4.11-16.1a19.79,19.79,0,0,0-3.55-6.26c-3.6-4.5-8.23-4.52-11,.48a133,133,0,0,0-7.69,17.43c-2.2,5.72-3.73,11.71-6,17.41-1,2.48-3,4.54-4.65,6.95-7-3.64-10.06-9.35-12.19-15.46-3-8.69-5.38-17.62-8.2-26.39-.92-2.85-2.22-5.89-5.79-6.23s-5.65,1.84-7.19,4.86c-1.65,3.21-3.56,6.29-5.35,9.42"/><path class="cls-1" d="M265.49,8.57l-1.34,12.55"/><path class="cls-1" d="M257.87,16.19l-.45,9"/><path class="cls-1" d="M274.9,130c-1-3.73-2-7.5-3.19-11.18a17.51,17.51,0,0,0-2.19-3.6"/><path class="cls-1" d="M248.91,22c1.82,3.88,1.84,8.78,6.27,11.2"/><path class="cls-1" d="M269.07,276.55q-.22,9.4-.44,18.82"/><path class="cls-1" d="M273.56,146.59,270,147.94"/><path class="cls-1" d="M252.94,250.56c.21,4,4.14,3.93,6.28,5.82"/><path class="cls-1" d="M269.07,273.86l-3.13-.45"/></g></svg>
\ No newline at end of file
diff --git a/images/pattern-02.svg b/images/pattern-02.svg
new file mode 100644
index 0000000..15d261a
--- /dev/null
+++ b/images/pattern-02.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><defs><style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><title>pattern</title><g id="SkBTOa.tif"><path class="cls-1" d="M124.05,130.46c-4.58,1.92-5.63,6.4-7.09,10.34-2.39,6.46-4.07,13.18-6.43,19.66a50,50,0,0,1-5.44,11.14c-1.52,2.23-3.86,2-6.2-.29-6.76-6.46-8.93-15.16-12-23.4-1.8-4.91-2.63-10.17-4.16-15.2-1.91-6.28-2.75-6.52-8.55-6.28-6.07,3.82-7.59,10.4-9.78,16.58-2.26,6.41-4.38,12.88-6.76,19.25-1.24,3.31-2.91,6.45-4.83,10.65-2.73-1.14-5.36-1.61-7.17-3.09-8.26-6.76-9.26-9.5-8.58-20.54.2-3.28.4-6.57.44-9.86.18-18.82.29-37.64.47-56.46.12-13.14.24-26.29.48-39.43a59.41,59.41,0,0,1,1-7.17c8.39,0,16.46-.06,24.52,0,8.37.08,16.73.36,25.1.42,11.2.07,22.4,0,33.6,0,1.65,0,3.29-.27,4.93-.42"/><path class="cls-1" d="M130.77,259.52c-12.55,0-25.09-.06-37.64,0-9.71.06-19.42.33-29.13.41-9.11.08-18.22,0-27.78,0v-7.62c0-11.65-.11-23.3,0-34.95.2-16.88.56-33.76.91-50.64a13.13,13.13,0,0,1,.86-3.14"/><path class="cls-1" d="M140.63,10.37l-1.35,10.75"/><path class="cls-1" d="M150,36.8l23.75.45"/><path class="cls-1" d="M143.77,114.33c4.76,5,5,11.67,6.27,17.92"/><path class="cls-1" d="M144.21,277.44v17"/><path class="cls-1" d="M132.56,15.74V26.05"/><path class="cls-1" d="M137,277.44q-.43,4.94-.89,9.86"/><path class="cls-1" d="M124.94,24.26c.59,3.71,2,6.93,5.38,9"/><path class="cls-1" d="M127.19,128.22l9.86,6.27c.11.06.29,0,.44,0"/><path class="cls-1" d="M128.08,250.56c.21,4,4.14,3.93,6.28,5.82"/><path class="cls-1" d="M144.21,273.86l-3.13-.45"/></g></svg>
\ No newline at end of file
diff --git a/images/pattern-03.svg b/images/pattern-03.svg
new file mode 100644
index 0000000..30a2aa6
--- /dev/null
+++ b/images/pattern-03.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><defs><style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><title>pattern</title><g id="SkBTOa.tif"><path class="cls-1" d="M138.21,123.3c-.27,1.43-.54,2.85-.8,4.24-5.46,1-8.21,4.91-9.89,9.46-3.09,8.42-5.84,17-8.55,25.52-1.82,5.78-3.14,7.81-7.78,10.37-6.12-3.1-8.89-8.91-11-14.89-3-8.69-5.38-17.62-8.21-26.39-.92-2.85-2.22-5.89-5.78-6.23s-5.79,1.77-7.16,4.87c-2.11,4.77-4.34,9.5-6.24,14.35-3,7.57-5.62,15.26-8.62,22.81-.72,1.8-2.31,3.25-3.77,5.21-8.07-4.4-13.15-10.3-14.54-19.07"/><path class="cls-1" d="M162.85,258a7.36,7.36,0,0,0,1.8.43c17.92-.12,35.85-.31,53.77-.4,3.88,0,7.77.33,11.65.41q13.89.28,27.78.44c4.17.05,5.38-1.32,5.38-5.81,0-16.43-.05-32.86,0-49.29.11-29.28.31-58.55.43-87.83.05-11.8-.05-23.6,0-35.4.07-12.25.35-24.5.36-36.75,0-2.44-.82-4.88-1.23-7.17-13.34,0-25.74.12-38.14,0-10-.12-20-.69-30-.83-10.31-.15-20.61,0-30.92,0a17.92,17.92,0,0,1-2.69-.43"/><path class="cls-1" d="M136,19.12q1.78,4.47,3.58,9"/><path class="cls-1" d="M140,35.25c-7.17.15-14.34.48-21.51.4-8.07-.09-16.13-.74-24.2-.81-15.08-.14-30.17-.05-45.26,0-4.92,0-4.9,0-4.93,4.93-.14,22.55-.22,45.11-.47,67.66-.15,13.3-.67,26.59-.85,39.89-.24,17.47-.31,34.95-.47,52.43q-.21,21.28-.46,42.57c-.06,4-.35,8.06-.39,12.1,0,1.05.48,2.11,1,4,7,0,14.23.06,21.4,0,5.68-.06,11.35-.41,17-.39,7.47,0,14.93.31,22.4.4,6.28.07,12.55.13,18.82,0,7-.16,14.05-.57,21.07-.87"/><path class="cls-1" d="M159.27,108.29c7.72,2,11.7,8.14,15.12,14.4,3.59,6.58,4.27,14,3.69,21.45a19.69,19.69,0,0,1-.44,2.24c-.75,3.74-2.73,7.75-2,11.14,1.38,6.14-.71,11.07-3,16.18s-5.31,9.71-10.72,12.12"/><path class="cls-1" d="M152.1,5.67l-.9,11.65"/><path class="cls-1" d="M156.13,274.54c0,5.38,0,10.76,0,16.14a7.9,7.9,0,0,1-.43,1.79"/><path class="cls-1" d="M162.41,119.49c5.31,3.91,7,9.43,6.67,15.69-.15,2.65,0,4.78,2.2,6.82,1.92,1.77,3.08,4.38,4.57,6.62"/><path class="cls-1" d="M149,273.65q-.45,4.47-.89,9"/><path class="cls-1" d="M144.93,13.29l-.45,9"/><path class="cls-1" d="M137.76,127.56l9,9.41"/><path class="cls-1" d="M160.16,159.82c-3.19,1.11-6.15,3.5-9.85,1.8"/><path class="cls-1" d="M169.58,141.9c-.49.86-1,1.72-1.74,3.08-2.84-3-4.76-5.1-6.79-7.1-3.13-3.08-6.81-3.31-10.74-1.81"/><path class="cls-1" d="M162.85,154.45l5.22-3.66c.69,3.69,1.32,7,2,10.38"/><path class="cls-1" d="M157.48,147.73l5.07,6.34c-1.35,5.54-1.85,10.71-4.63,15.17"/><path class="cls-1" d="M150.75,122.18c3.75.63,6.22,2.81,8.25,7.17h-8.25"/><path class="cls-1" d="M175,158c-3.31,3.42-6.63,6.83-10.7,11l-13.94,2.43"/><path class="cls-1" d="M167.78,144.14l-.45,6.72"/></g></svg>
\ No newline at end of file
diff --git a/images/pattern-04.svg b/images/pattern-04.svg
new file mode 100644
index 0000000..fc7aaea
--- /dev/null
+++ b/images/pattern-04.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><defs><style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><title>pattern</title><g id="SkBTOa.tif"><path class="cls-1" d="M147.06,275.9l.45-3.14"/><path class="cls-1" d="M141.68,261.11H45c-.19-3.87-.51-7.31-.49-10.75.07-10.61.25-21.21.42-31.82q.44-25.54.89-51.08.26-14.11.45-28.24c.31-21.36.65-42.72.88-64.08.11-10.45-.08-20.91.1-31.36,0-2.33,1.08-4.64,1.38-5.83H67.74q32.94,0,65.88,0c1.79,0,3.58.28,5.37.43"/><path class="cls-1" d="M160.06,38.4q39.21.23,78.42.46c7.76.06,15.53.27,23.3.44,3.45.07,5.34,1.72,5.33,5.37,0,12.55-.27,25.1-.39,37.64-.06,6,0,12,0,17.93V124c0,16.88.06,33.76,0,50.64-.08,18.52-.3,37-.42,55.56-.06,8.67,0,17.33,0,26a45.29,45.29,0,0,1-.59,4.93h-4.77q-47.06,0-94.1,0c-1.79,0-3.59.28-5.38.43"/><path class="cls-1" d="M154,276.35l.67,15.68"/><path class="cls-1" d="M144.37,135.64c-1.19-1.2-2.45-2.33-3.57-3.6-3.8-4.29-8-4.45-10.63.54-3.27,6.11-5.69,12.7-8.15,19.21-2,5.43-3.45,11.11-5.48,16.54-2.3,6.17-6.71,6.95-10.62,1.75a43.92,43.92,0,0,1-6.25-11.18C96.48,150.07,93.91,141,91,132.06c-.51-1.58-1.32-3.06-2.11-4.87l-6.08-.7c-6.89,5.65-8.54,14-11.51,21.69-2.79,7.19-5.38,14.48-8.61,21.47-1.92,4.14-4.06,4.29-7.49,1.36-2.81-2.39-5.4-5-8.09-7.59"/><path class="cls-1" d="M187.84,196.14c4,.39,4.91-3.23,6.65-5.44a68.81,68.81,0,0,0,11.74-22.79,5.89,5.89,0,0,1,.88-1.35"/><path class="cls-1" d="M209.13,157.15c-.08-3.44-.15-6.87-.23-10.31"/><path class="cls-1" d="M209.13,141c-.08-4.78.62-9.73-.36-14.32-5.54-26-22.1-41.84-46.93-49.73a10.9,10.9,0,0,0-3.13,0"/><path class="cls-1" d="M208.45,166.11c.45,2.84,1.59,5.77,1.24,8.5-2.42,18.77-10.05,34.82-24.93,47.14-5.49,4.55-11.2,8.45-18,10.66-1.3.43-2.68.62-4,.92"/><path class="cls-1" d="M193.67,154c.59,1.2,1.65,2.37,1.72,3.59a62.11,62.11,0,0,1-6.63,32.28,43,43,0,0,0-1.82,4.91"/><path class="cls-1" d="M182.46,201.51c-3.28,2.54-6.63,5-9.84,7.64-2.78,2.29-5.3,4.88-8.13,7.09-1.05.82-2.64,1-4,1.41"/><path class="cls-1" d="M175.74,123.54c5.59,2.39,8.8,7,11.7,12.07a71.32,71.32,0,0,0,5,6.76l.91,9.45c-1.74,4.93-3.13,9.73-5.12,14.26-1.81,4.13-3.32,8.69-8,10.79"/><path class="cls-1" d="M156.92,93.52c4.36-.09,8.2,1.15,11.2,4.48"/><path class="cls-1" d="M189.63,116.37c5.1,2.62,7.49,7.57,10.27,12.12,1.84,3,3.26,6.29,5,9.37.89,1.59,2.06,3,3.1,4.5"/><path class="cls-1" d="M160.5,120c.75.14,1.84,0,2.19.48,3.53,4.6,6.71,9.2,5.63,15.68-.34,2,1.21,4.73,2.58,6.63,2.41,3.34,5.31,6.32,5.29,10.81"/><path class="cls-1" d="M178.65,164.32c.8,6.69,1.26,12.72-2.47,19.51s-8.35,12-13.43,17.23"/><path class="cls-1" d="M169,117.27l4.54,6.65.86-1.17a59.16,59.16,0,0,1,1.72,7.07c.61,5.06,1.1,10.15,1.28,15.23,0,1.17-1.38,2.39-2.13,3.58"/><path class="cls-1" d="M188.29,116.82a66.79,66.79,0,0,1,2.18,7.63c.92,5.48,5.18,10.62,1.85,16.57"/><path class="cls-1" d="M176.64,163.87a15,15,0,0,0-1.32,2.7,42.41,42.41,0,0,1-13,21.05"/><path class="cls-1" d="M174,185.83c-1.94.75-3.89,1.47-5.83,2.24s-3.58,1.49-5.37,2.24"/><path class="cls-1" d="M151.09,6.13l-1.34,10.76"/><path class="cls-1" d="M168.57,99.34c-2.09-.15-4.19-.24-6.27-.46s-3.89-.58-5.83-.88"/><path class="cls-1" d="M143.48,10.61,143,21.82"/><path class="cls-1" d="M169.91,210.48H161.4"/><path class="cls-1" d="M175.29,158.49c-5.19,3.46-9.42,7.63-11.27,13.87-.58,1.94-2,3.61-3.07,5.4"/><path class="cls-1" d="M167.23,145.05c-2.24-2.09-4.27-4.5-6.79-6.18-2.07-1.37-4.72-1.89-7.11-2.78"/><path class="cls-1" d="M160.06,160.73l-6.2,2.55-4.56-.75"/><path class="cls-1" d="M167.23,152.22c.44,1.64,1,3.27,1.32,4.93s.62,3.58.92,5.38"/><path class="cls-1" d="M158.71,150l3.17,5.82c-1.8,7.91-1.83,16.64-12.58,17.48"/><path class="cls-1" d="M159.61,121.3v4.64l-1.51,1.12-9.25-4"/><path class="cls-1" d="M167.23,137c-3.2-1.23-5.85-3.28-8.67-5.14-2.56-1.7-6.42-1.43-9.71-2"/><path class="cls-1" d="M169.47,142.81l-3.1,7.8.67.29-4.74,4.9"/><path class="cls-1" d="M157.37,128l-.45,1.79"/></g></svg>
\ No newline at end of file
diff --git a/images/pattern-05.svg b/images/pattern-05.svg
new file mode 100644
index 0000000..fec853c
--- /dev/null
+++ b/images/pattern-05.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><defs><style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><title>pattern</title><g id="SkBTOa.tif"><path class="cls-1" d="M201.55,41.47a66,66,0,0,0,6.3,5.78c12.31,8.76,22,20,30.38,32.35A130.27,130.27,0,0,1,256.44,120c1.95,7.57,4.17,15.6,1.57,23.69"/><path class="cls-1" d="M257.56,150.81l-.45,13.44"/><path class="cls-1" d="M255.77,169.18q-2,6.49-4,13c-5.14,16.72-13.41,31.6-26,43.91"/><path class="cls-1" d="M209.16,240.43l-9.41,7.17"/><path class="cls-1" d="M185.86,258.36c-3,3.76-5.78,4.46-10.75,2.69"/><path class="cls-1" d="M168.39,40.57c.74-.45,1.5-1.3,2.23-1.28,10,.32,20.16-1.22,30.06.83h60.47c5.47,0,6.69,1,6.68,6.28,0,12.55-.28,25.09-.4,37.64-.06,5.83,0,11.65,0,17.48v22c0,17.93.06,35.85,0,53.78-.06,13.89-.33,27.78-.41,41.67-.08,12.4,0,24.8,0,37.2,0,1.64-.14,3.29-.23,5.3a16.1,16.1,0,0,1-3.79.93c-7.47-.06-14.94-.31-22.41-.39-6.87-.07-13.74,0-20.61-.08-.9,0-1.79-.83-2.69-1.28"/><path class="cls-1" d="M137.47,39.68c-1.65-.15-3.29-.43-4.93-.43-13.9,0-27.79.1-41.68,0-13.59-.15-27.18-.57-40.78-.85-.29,0-.6.28-1.86.91-.12,5.47-.28,11.46-.37,17.45C47.53,76.12,47.2,95.54,47,115c-.11,9.26,0,18.52,0,27.78,0,5.23-.39,10.46-.39,15.69a40.44,40.44,0,0,0,.69,5.83c2.06,2,3.39,3.19,4.63,4.49,1.1,1.14,2,2.51,3.17,3.55,4.14,3.6,7.27,3.19,9.31-1.81,3.43-8.39,6.28-17,9.52-25.5,2.24-5.87,3.58-12.32,9.19-16.12,6.35-.5,7.57.33,9.16,5.81,2.66,9.12,4.83,18.43,8.27,27.25,2,5.13,6,9.46,9,13.88,7.37-1,7.91-6.38,9.58-10.67,3.52-9,4.6-19,10-27.3a82,82,0,0,1,5.78-7.2"/><path class="cls-1" d="M257.56,168.29c.45,4.18,1.64,8.44,1.23,12.53-2.78,27.64-15.66,50.56-34,70.79-3.47,3.83-7.27,7.36-10.23,10.33-6.62,0-12.3.17-18-.05-3.9-.16-8,1.39-11.65-1.29"/><path class="cls-1" d="M160.32,213.1l9.86-1.35"/><path class="cls-1" d="M190.34,197.41a53.08,53.08,0,0,0,15.27-24.18,32.31,32.31,0,0,1,2.21-4.5"/><path class="cls-1" d="M209.84,159.32c-.08-3.43-.15-6.87-.23-10.3"/><path class="cls-1" d="M209.84,143.19c-.23-5.23-.29-10.47-.73-15.68-.32-3.76-1.14-7.47-1.74-11.21"/><path class="cls-1" d="M202,106.89,189.9,95.24"/><path class="cls-1" d="M256.22,143.64c-1.2-3-2.57-5.92-3.55-9-2.85-8.84-6-17.55-10.85-25.5-1.13-1.86-2.93-3.32-4.42-5"/><path class="cls-1" d="M231.57,96.59,224.4,85.83"/><path class="cls-1" d="M212.75,75.53c-7.47-5.38-14.66-11.21-22.48-16-10-6.17-20.25-12.13-31.74-15.35"/><path class="cls-1" d="M47.39,166.05a20.56,20.56,0,0,0-.86,4c-.2,14.19-.27,28.38-.5,42.57-.21,12.7-.66,25.39-.82,38.09-.05,3.58.54,7.17.84,10.76"/><path class="cls-1" d="M160.77,61.19c5.08,1.49,10.5,2.29,15.15,4.63,7.76,3.91,15.09,8.71,22.42,13.4,1.1.71,1.26,2.88,1.86,4.37"/><path class="cls-1" d="M168.83,42.37c8.37,4.48,17,8.53,25,13.57,6.54,4.12,12.45,9.3,18.38,14.31,1.32,1.11,1.57,3.48,2.32,5.28"/><path class="cls-1" d="M159.87,245.81c9.11-1.95,17.49-5.72,25.56-10.28a24.64,24.64,0,0,1,3.57-1.37"/><path class="cls-1" d="M202,226.09l9-9.85"/><path class="cls-1" d="M218.13,209.07c9.92-9.33,14.76-21.79,20.3-34,2.66,1.41,2.43,3,2.21,5.35-1.44,15.37-8,28.71-15.75,41.68a13.58,13.58,0,0,0-.94,3.57"/><path class="cls-1" d="M194.38,156.19c.59,1.19,1.64,2.36,1.72,3.59.68,11.33-1.86,22-6.58,32.29-.79,1.71-.67,3.85-1,5.79"/><path class="cls-1" d="M190.79,235.06c-1.34,1.64-2.37,3.85-4.09,4.83-7,4-14.25,7.63-21.48,11.24-1.44.71-3.26.66-4.9,1"/><path class="cls-1" d="M222.16,171.87c-1.94,3.74-3.75,7.55-5.87,11.18-1.89,3.25-4.14,6.3-6.23,9.44"/><path class="cls-1" d="M205.8,197l-6.49,9.85"/><path class="cls-1" d="M191.24,218c-8.05,8.67-17.39,15.24-29.13,17.92"/><path class="cls-1" d="M159.42,64.32c5.83,2.69,11.74,5.21,17.46,8.11,6.37,3.24,12.55,6.86,18.86,10.24a15.66,15.66,0,0,0,3.12.92"/><path class="cls-1" d="M211,93.45q4.47,5.61,9,11.2"/><path class="cls-1" d="M223.5,112.27c.75,4,1.79,8,2.18,12.11.81,8.34,1.33,16.72,1.77,25.09.05,1-1.11,2.09-1.71,3.13"/><path class="cls-1" d="M207.82,115c1.34,1.34,3,2.5,4,4.06,5.79,9.06,9.17,19.06,11.3,29.54a20.16,20.16,0,0,0,1.75,4"/><path class="cls-1" d="M225.3,153.5l-.45,12.55"/><path class="cls-1" d="M224.18,171.87c2,6.5-1.13,12.36-2.59,18.35-1.2,4.92-3.59,9.54-5.18,14.39-.49,1.48-.08,3.26-.08,4.9"/><path class="cls-1" d="M153.6,110.93c3.81-1.05,7.57-1.87,9.86,2.69"/><path class="cls-1" d="M169.28,119c5.23,5.9,13.36,8.52,17.5,15.67,2,3.44,4.24,6.72,6.58,10.41.21,2.77.46,6.06.7,9.24-2.28,5.68-4.26,11.55-7,17.05-1.31,2.63-4,4.54-6.14,6.79"/><path class="cls-1" d="M224,110.93c1.35,1.34,3,2.49,4,4.06a92.54,92.54,0,0,1,10.86,25c.36,1.3,1.44,2.41,2.19,3.6"/><path class="cls-1" d="M236.05,104.21c0,1.79-.36,3.67.06,5.36,2.53,10.07,6.24,19.9,6.2,30.49a17.79,17.79,0,0,1-.43,2.68"/><path class="cls-1" d="M242.1,154q-.56,7.4-1.12,14.78"/><path class="cls-1" d="M155.84,99.28c3.13.74,6.26,1.55,9.42,2.2a15.54,15.54,0,0,0,3.13,0"/><path class="cls-1" d="M191.24,118.55c7,5.76,10.86,13.64,14.81,21.49a39.29,39.29,0,0,0,2.67,4.05"/><path class="cls-1" d="M191.24,215.34a58.1,58.1,0,0,0-6.25,2.72c-6,3.49-11.94,7.19-18,10.66-.79.45-2.06.06-3.11.06"/><path class="cls-1" d="M150,5.62l-1.34,11.65"/><path class="cls-1" d="M177.35,165.15c-.75,2.09-1.49,4.19-2.24,6.27-2.2,6-5.11,11.58-10.26,15.75-1.11.9-1.54,2.63-2.29,4"/><path class="cls-1" d="M176,125.72c.45,3.13.8,6.29,1.37,9.4.94,5.17,2.07,10.23-.79,15.32-.73,1.3.17,3.51.32,5.3"/><path class="cls-1" d="M179.36,165.6c1.88,8.19,1.93,16-4.7,22.4"/><path class="cls-1" d="M189.45,118.55c.3,1.79.47,3.61.92,5.37,1.28,5.09,2.8,10.13,3.9,15.26.26,1.19-.79,2.67-1.24,4"/><path class="cls-1" d="M155.84,93.9a88.68,88.68,0,0,1,9.81,3.24c1.62.74,2.74,2.58,4.08,3.93"/><path class="cls-1" d="M171.07,212.2c-2.21,5.12-7,6.74-11.65,8.52"/><path class="cls-1" d="M140.6,262.39c-3.43-.15-6.87-.42-10.3-.43q-25.77-.06-51.54,0c-10.45,0-20.91,0-31.37,0a7.22,7.22,0,0,0-2.24.86"/><path class="cls-1" d="M159,119c7.35,3.51,9.4,10.3,10.7,17.49.15.82-.54,1.78-.84,2.68"/><path class="cls-1" d="M153.6,274.49c0,5.38,0,10.76,0,16.13a8.41,8.41,0,0,1-.43,1.8"/><path class="cls-1" d="M133.43,19.06,137,28"/><path class="cls-1" d="M135.9,123.47c-.38,1.2-1.07,2.41-1,3.59s.45,2.95,1.31,3.49c3.29,2,6.81,3.68,10.25,5.47"/><path class="cls-1" d="M142.39,13.24c-.14,3-.29,6-.44,9"/><path class="cls-1" d="M163.9,191.81l9.83-4.16c2.3,1.32,1.61,3.3,0,4.78-3.28,3-6.85,5.71-10.25,8.59a15.77,15.77,0,0,0-1.81,2.22"/><path class="cls-1" d="M161.66,143.19l-3,7.52,4.37,6.82"/><path class="cls-1" d="M186.31,255.67c-4.85-.63-9.75,1.72-11.2,5.38"/><path class="cls-1" d="M209.16,168.29c2.1,3.12,1.56,6.49.9,9.85-.74,3.74-1.56,7.46-2.19,11.22a10.66,10.66,0,0,0,.4,3.12"/><path class="cls-1" d="M158.08,143.64l-3.59.9"/><path class="cls-1" d="M161.66,176.35l-1.7-4.3-8.15,2.51"/><path class="cls-1" d="M174.21,260.6l-10.31,1.79"/><path class="cls-1" d="M157.63,128l-9.41-3.14"/><path class="cls-1" d="M160.77,172.77l4.81-1.36c5.85-4.72,4.39-11,2.64-18-4.43,3.1-7.21,6.29-7.18,11.72,0,2.39-1.92,4.78-3,7.17"/><path class="cls-1" d="M176,150.36l-8.32-11.09c-1.8-1.29-5-3.63-8.26-5.93-3.4-2.41-7-2.09-10.75-.9"/><path class="cls-1" d="M137.47,247.6c.2,4,4.14,3.93,6.27,5.83"/><path class="cls-1" d="M158.08,121.23V132"/><path class="cls-1" d="M161.66,136.92l-1.72,3,8,7.33"/></g></svg>
\ No newline at end of file
diff --git a/images/pattern-06.svg b/images/pattern-06.svg
new file mode 100644
index 0000000..cb139c2
--- /dev/null
+++ b/images/pattern-06.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><defs><style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><title>pattern</title><g id="SkBTOa.tif"><path class="cls-1" d="M128,128.4c-5.19,1.32-7.65,5.54-9.3,9.9-2.78,7.32-4.82,14.92-7.32,22.35a43.27,43.27,0,0,1-3.64,8.47c-1.09,1.85-3,3.2-4.6,4.76-6.27-3.94-9.35-9.23-11.36-15-3-8.57-5.4-17.32-8.19-25.95A18.47,18.47,0,0,0,80.87,128c-2.25-3.12-5.18-2.22-7.53-.4-4.46,3.44-5.72,8.91-7.61,13.85-2.77,7.23-5,14.68-7.75,21.9-1.34,3.49-3.46,6.67-5.79,11.07L39.74,163.55c-1.58-5.2.1-122.78,1.73-125.67H130.2"/><path class="cls-1" d="M132.44,260.15a23.91,23.91,0,0,1-3.14.42q-44.36,0-88.72,0c-.61,0-1.21-.09-2.6-.21-.18-3.63-.51-7.08-.5-10.54,0-4.78.34-9.56.39-14.34.19-16.28.29-32.56.48-48.85.07-6.27.24-12.54.47-18.82a18.46,18.46,0,0,1,.86-3.58"/><path class="cls-1" d="M162,39.22h21.51"/><path class="cls-1" d="M209.52,54l11.2,9.86"/><path class="cls-1" d="M228.34,74.62c3.43,6.43,7,12.76,10.27,19.29,6.66,13.56,11.7,27.61,11.65,43a29.1,29.1,0,0,1-.86,4.93"/><path class="cls-1" d="M248.73,148.56q-.12,6.51-.23,13"/><path class="cls-1" d="M247.16,167.39c-1.94,6-3.73,12-5.86,17.91-5.05,14.07-11.93,27-23.27,37.2"/><path class="cls-1" d="M202.35,236.84l-13,9.86"/><path class="cls-1" d="M177.25,255.66,174,259.92h-8.63l-13.25.67"/><path class="cls-1" d="M154,210h9.12L175,201"/><path class="cls-1" d="M181.73,195.62a57.8,57.8,0,0,0,15.72-26,22.92,22.92,0,0,1,1.76-3.59"/><path class="cls-1" d="M201.23,157.53c-.08-3.74-.15-7.47-.23-11.21"/><path class="cls-1" d="M201.23,140.5c1.85-7.12-.54-13.82-2-20.62a43.55,43.55,0,0,1-.48-5.37"/><path class="cls-1" d="M194.28,106q-5.59-5.82-11.2-11.65"/><path class="cls-1" d="M204.59,71.94c-1.5-.45-3.35-.48-4.43-1.41-13.16-11.41-28.55-19.14-44-26.78-1.62-.8-3.56-.94-5.36-1.39"/><path class="cls-1" d="M191.59,81.35c-.89-1.5-1.47-3.37-2.74-4.42-9.4-7.86-20.31-13-31.78-17.05a33.54,33.54,0,0,0-5.81-.94"/><path class="cls-1" d="M228.79,72.83c1.19.45,2.67.59,3.54,1.39,8.67,8,16.41,16.78,22,27.27,1.43,2.66,3.41,5,4.83,7.68a9.55,9.55,0,0,1,.92,4.44c-.08,18.52-.15,37.05-.46,55.57-.11,6.72-.84,13.44-1.29,20.16"/><path class="cls-1" d="M256.12,193.82c-3.13,5.68-6.2,11.4-9.47,17-.65,1.12-2,1.83-3.08,2.72"/><path class="cls-1" d="M236.4,223.4l-9,11.2"/><path class="cls-1" d="M215.79,244c-6.42,5.08-12.79,10.23-19.31,15.18a8.65,8.65,0,0,1-4.44,1.35c-4.77.3-9.56.41-14.34.44-.74,0-1.49-.83-2.24-1.28"/><path class="cls-1" d="M207.73,207.72c2.24-1.95,5.15-3.49,6.59-5.9,4.81-8,9.08-16.37,13.58-24.57.76-1.38,1.65-2.68,2.48-4l1.62.45c-.17,3.58.24,7.3-.63,10.71-3,11.77-6.82,23.25-14.15,33.24-.89,1.21-.68,3.23-1,4.87"/><path class="cls-1" d="M249,166.49c.45,4.18,1.74,8.48,1.18,12.52-1.45,10.43-3.2,20.86-7.8,30.54-.56,1.16.2,2.95.35,4.44"/><path class="cls-1" d="M151.71,38.33l8.31.76c2,1.48,3.46,2.89,5.16,3.67,12.91,6,25,13.15,35.78,22.5,1.65,1.44,2.73,3.54,4.08,5.33"/><path class="cls-1" d="M215.79,84.48l8.07,11.21"/><path class="cls-1" d="M229.23,102.41c5.91,5.16,8.07,12.55,11.08,19.32,2.41,5.4,3.67,11.31,5.54,17a17.78,17.78,0,0,0,1.76,3.15"/><path class="cls-1" d="M185.77,153.49c.59,1.2,1.64,2.37,1.72,3.59a65.79,65.79,0,0,1-6.14,31.84c-1,2.21-1.26,4.75-1.86,7.14"/><path class="cls-1" d="M153.05,65.66c1.95.15,4.14-.24,5.79.54,9,4.29,17.95,8.9,26.94,13.33a48.15,48.15,0,0,0,4.92,1.82"/><path class="cls-1" d="M203.24,92.55l8.07,10.31"/><path class="cls-1" d="M214.9,110.47c.74,4,1.77,8,2.18,12.11.8,7.9,1.33,15.82,1.76,23.75.06,1.16-1.11,2.38-1.7,3.58"/><path class="cls-1" d="M215.57,170.07c2.27,6-1,11.47-2.22,17-1.38,6.46-4.28,12.59-6.52,18.86"/><path class="cls-1" d="M202.35,214.44l-7.62,8.06"/><path class="cls-1" d="M181.73,234.6c-5,5.66-11.84,8.46-18.4,11.58-3.69,1.75-7.74,2.76-11.62,4.11"/><path class="cls-1" d="M199.21,113.16c1.49,1.5,3.33,2.78,4.42,4.52,5.52,8.8,8.65,18.54,10.86,28.63a16.83,16.83,0,0,0,1.75,3.6"/><path class="cls-1" d="M181.73,232.81a66.1,66.1,0,0,0-8,2.3c-5.6,2.36-11,5.14-16.64,7.47-1.4.58-3.25.09-4.89.09"/><path class="cls-1" d="M180.39,116.3c1.2,4,2.7,8,3.5,12.12s2.46,8.3.79,13.06c-1,3,.47,6.81.8,9.93-1.74,4.69-3.4,9.22-5.09,13.73s-3.29,8.77-8,11.38c-1.92,1.06-2.78,4-4.13,6.1"/><path class="cls-1" d="M167.84,183.07c-1.74,8.13-8.19,12.81-13.44,18.37"/><path class="cls-1" d="M215.34,109.13c4.38.91,4.33,5.29,6.22,8.1,4.21,6.26,6.35,13.45,8.61,20.57a23.75,23.75,0,0,0,2.2,4"/><path class="cls-1" d="M227.44,102.41a20.82,20.82,0,0,0,.05,4.47c1.85,8.24,4,16.4,5.68,24.68.61,3,.1,6.25.1,9.39"/><path class="cls-1" d="M233.49,152.15q-.56,7.4-1.12,14.79"/><path class="cls-1" d="M182.63,214c-.9,1.79-1.35,4.11-2.76,5.29-6.26,5.24-13,9.9-20.56,13a14.24,14.24,0,0,1-3.57.49"/><path class="cls-1" d="M213.55,170.07c-2.54,4.78-4.94,9.65-7.68,14.31-1.27,2.16-3.22,3.92-4.87,5.86"/><path class="cls-1" d="M197,195.62,190.7,205"/><path class="cls-1" d="M180.84,213.54l-25.1,14.79"/><path class="cls-1" d="M229.23,47.74l8.52,7.17"/><path class="cls-1" d="M247.16,63a70.29,70.29,0,0,1,6.22,5.43,79,79,0,0,1,5.16,6.94l1.73-1.13c-.19,2.83-.48,5.65-.54,8.48-.09,4.48-.13,9,0,13.44.11,3.35,1.19,6.74-.93,9.86"/><path class="cls-1" d="M148.13,97.48l10.3,1.79"/><path class="cls-1" d="M181.73,115.85c7.2,5.06,10.94,12.65,14.82,20.15,1,2,2.36,3.9,3.56,5.84"/><path class="cls-1" d="M200.56,165.59c2.13,3.28,1.51,6.81.88,10.31-.7,3.89-1.55,7.76-2.18,11.66a11.12,11.12,0,0,0,.4,3.13"/><path class="cls-1" d="M207.28,259.7h16.58"/><path class="cls-1" d="M229.68,259.92c7.32.23,14.64.47,22,.66,2.24.07,4.48,0,6.55,0a10,10,0,0,0,1-2.69c.07-7.16.06-14.33,0-21.5a12.37,12.37,0,0,0-.64-2.69"/><path class="cls-1" d="M223,40.12c2.9-3.7,6.9-.89,10.35-1.59,3.7-.75,7.8-.3,11.58.39a15.12,15.12,0,0,1,6.68,3.52c2.71,2.31,5,5.17,7.85,8.27.93,7,1.51,14.8-.16,22.57"/><path class="cls-1" d="M168.74,163.35c-.45,1.2-.94,2.38-1.34,3.59-2.56,7.87-6.62,14.76-13,20.16"/><path class="cls-1" d="M165.6,185.76c-1.94.74-3.88,1.5-5.82,2.23-1.64.62-3.29,1.2-4.93,1.8"/><path class="cls-1" d="M245.82,63.42a13.5,13.5,0,0,0,.93,3.56q4.8,8.14,9.86,16.14a9.22,9.22,0,0,0,2.2,1.81"/><path class="cls-1" d="M151.71,117.64c6.5,3.82,8.13,10.35,9.35,17,.15.82-.54,1.78-.84,2.68"/><path class="cls-1" d="M257.91,221.16a40.72,40.72,0,0,0-3.11,3.6q-4.35,6.44-8.51,13a30.91,30.91,0,0,0-1.82,4"/><path class="cls-1" d="M240,247.6l-12.1,10.75"/><path class="cls-1" d="M142.3,9.2,141,20"/><path class="cls-1" d="M184,141c-3.59-4.63-7-9.39-10.83-13.83-1.44-1.68-2.53-4.54-5.76-3.65"/><path class="cls-1" d="M162.47,210.4c-2.12,4.29-5.71,6.45-10.31,7.17"/><path class="cls-1" d="M257.91,193.38c.45,1.34,1.31,2.69,1.28,4-.16,7.47-.63,14.93-.77,22.41-.05,2.68.6,5.37.82,8.06.12,1.48,0,3,0,3.72-3.7,3.48-6.68,6.5-9.91,9.21-1.17,1-2.94,1.26-4.43,1.86"/><path class="cls-1" d="M145.89,276.28V295.1"/><path class="cls-1" d="M154,134.67l6.37,2.94-.45.49c1.91,2.59,3.71,5.28,5.76,7.75a11.29,11.29,0,0,1,2.66,8.09"/><path class="cls-1" d="M170.76,163.8c.22,2.39.39,4.79.69,7.17.2,1.65.58,3.29.87,4.93"/><path class="cls-1" d="M258.81,49.08c2.32-3.52,1.78-6.79-1.55-10.61l-6.52,2.1"/><path class="cls-1" d="M167.39,148.12c.75-1.8,2.26-3.65,2.11-5.37-.56-6.45-1.16-13-2.79-19.22-.68-2.61-4-4.54-6-6.78"/><path class="cls-1" d="M154.85,111.37a6.52,6.52,0,0,0-6.28-3.14"/><path class="cls-1" d="M128.86,124.81c-.3,1-1.14,2.77-.82,3,3.76,3,7.69,5.78,11.57,8.61"/><path class="cls-1" d="M134.68,13.68l-.45,11.2"/><path class="cls-1" d="M149.47,170.07l5-14.4-5-7.11"/><path class="cls-1" d="M218.48,244.46c-.22,5.23-5.14,7.14-7.76,10.65-1.25,1.66-4.06,2.16-6.16,3.19l1.74,2.51L197,259.7"/><path class="cls-1" d="M138.72,276.28l-.45,2.69"/><path class="cls-1" d="M152.61,207.72l3.25-6.45-5.94.62"/><path class="cls-1" d="M212.65,38.78c-5.37-.15-10.75-.4-16.13-.37-1.05,0-2.09,1.11-3.13,1.71"/><path class="cls-1" d="M145.44,135.79c6.53-.35,8.5,6.07,13.26,9l2.87-2.48"/><path class="cls-1" d="M177.25,253.87c-4.83-1-8.34,1.86-12.1,4"/><path class="cls-1" d="M152.16,160.22l-6.39,2.66-4.37-1.77"/><path class="cls-1" d="M154.4,155.29l5.15-4,2,10.73"/><path class="cls-1" d="M149.47,129.3l-9,.89"/><path class="cls-1" d="M140.06,173.21l15.58-3.75c.18,1.11.85,2.44.46,3.26a63.24,63.24,0,0,1-3.94,6.32"/><path class="cls-1" d="M149,125.71,140.51,123"/><path class="cls-1" d="M167.39,158c-2.68,2.69-5.42,5.34-8,8.09-1.17,1.23-2.11,2.67-3.16,4"/><path class="cls-1" d="M159.33,145l-.45,6.72"/><path class="cls-1" d="M257.91,253.42c-1.49,2.09-3,4.19-4.48,6.28"/></g></svg>
\ No newline at end of file
diff --git a/images/pattern-07.svg b/images/pattern-07.svg
new file mode 100644
index 0000000..8bfda0f
--- /dev/null
+++ b/images/pattern-07.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><defs><style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><title>pattern</title><g id="SkBTOa.tif"><path class="cls-1" d="M197.56,40.12c.44-.3.89-.85,1.34-.86,5.68-.06,11.36,0,17,0a9.3,9.3,0,0,0,.93,2.67c13.53,16,23.61,34,31.34,53.35a88.55,88.55,0,0,1,6.3,25.54c.47,5.69,1.34,11.34,1.69,17,.16,2.52-.52,5.08-.82,7.62"/><path class="cls-1" d="M254.24,162.9q-.78,10.09-1.57,20.17"/><path class="cls-1" d="M167.08,40.12c5-2.8,10.46-.83,15.69-1.33a72.49,72.49,0,0,1,8.06-.39c.91,0,1.8.82,2.69,1.27"/><path class="cls-1" d="M207.41,50.43A106,106,0,0,1,232,82.73c5.06,10,10.11,20,13.75,30.51,3.07,8.87,4.08,18.45,6.09,27.7a29.83,29.83,0,0,0,1.76,4.49"/><path class="cls-1" d="M204.73,50.43c1.19,2.39,2,5.08,3.64,7.12,14.61,18.15,21.84,39.31,26,61.87a142.54,142.54,0,0,1,2.49,31.83c-.23,5.7-1.67,11.36-2.56,17a3.75,3.75,0,0,0,0,.67l-.45-.22"/><path class="cls-1" d="M231.84,176.35l-3.36,14.79"/><path class="cls-1" d="M228.48,191.58a68.64,68.64,0,0,1-.5,7.61c-.71,4.07-1.57,8.13-2.67,12.1A140.52,140.52,0,0,1,206,253c-1.61,2.36-3.55,4.5-5.54,7-5.48.5-11.15,1.17-16.84,1.43-1.61.07-3.28-1.1-4.93-1.69"/><path class="cls-1" d="M233,169.63c-.6-1.95-1.77-3.91-1.71-5.83.71-20.43-4.56-39.53-13.15-57.77-5.15-10.94-11-21.55-16.52-32.29A26.46,26.46,0,0,0,200,71.2c-4.2,1-3.49,2.86-2.41,4.76,3,5.25,6.15,10.37,8.92,15.71A76.49,76.49,0,0,1,214.57,123c.37,6.58,1.67,13.19-.43,19.72"/><path class="cls-1" d="M213.46,153.94q-.56,7.84-1.12,15.69"/><path class="cls-1" d="M212.57,175.45c.34,7.74-1.69,15.07-3.78,22.42a160.9,160.9,0,0,1-17.48,40.79,12.47,12.47,0,0,0-.92,3.11"/><path class="cls-1" d="M175.6,261c-5.23,0-10.58-.68-15.65.2-4.6.8-9.07-2-13.48.24a1,1,0,0,1-.45,0c-11.65-1.08-23.3.4-35,0a7.19,7.19,0,0,1-2.24-.86"/><path class="cls-1" d="M212.34,142.74c-1.34-5.08-3-10.1-4-15.25-4.16-21-14.59-38.36-30.13-52.81-1.09-1-2.93-1.25-4.43-1.85"/><path class="cls-1" d="M95.38,38.78h10.79a69.48,69.48,0,0,1,22.37.44"/><path class="cls-1" d="M154.54,54l11.2,9.86"/><path class="cls-1" d="M173.36,74.62c8,13.62,15.46,27.52,19.24,43,1.94,7.94,4.1,15.91,1.82,24.19"/><path class="cls-1" d="M193.75,148.56q-.12,6.51-.23,13"/><path class="cls-1" d="M192.18,167.39c-1.79,5.22-3.86,10.38-5.33,15.69-4.17,15.19-12.87,27.68-22.93,39.41-.12.14-.57,0-.87,0"/><path class="cls-1" d="M148.26,236,134.37,246.7"/><path class="cls-1" d="M122.27,255.66a19.28,19.28,0,0,1-3.6,1.75c-2,.53-2.54,1.77-2.22,3.63"/><path class="cls-1" d="M262.08,103.53c2,19,.58,38.09.84,57.13.16,12-.17,23.9-.42,35.85-.11,5.38-.57,10.76-.86,16.14"/><path class="cls-1" d="M261.86,219.37c.94,6.94,1.35,13.85-1.12,20.61"/><path class="cls-1" d="M128.54,94.34l10.76,12.1"/><path class="cls-1" d="M143.78,115a44.77,44.77,0,0,0,.48,4.92c1.41,7,4.05,13.8,1.76,21.07"/><path class="cls-1" d="M146.25,146.77c-.08,3.74-.15,7.47-.23,11.2"/><path class="cls-1" d="M143.78,166.49c-3.28,9.87-7.69,19.13-14.84,26.84-1,1.07-2.64,1.54-4,2.29"/><path class="cls-1" d="M216.82,39.9,223.9,39c7.12,9.63,14,18.71,20.67,28,6.81,9.53,11.43,20.16,14.87,31.33a22.51,22.51,0,0,0,2.2,4"/><path class="cls-1" d="M43,171.42c-.44,5.38-1.2,10.75-1.28,16.13-.3,19.57-.37,39.14-.5,58.7,0,4.94,0,9.87,0,15.24,10.31,0,20.17,0,30,0,1.64,0,3.28-.28,4.93-.43"/><path class="cls-1" d="M248.19,197c-3,6.72-5.9,13.48-9,20.16a145.19,145.19,0,0,1-24.64,37.65l-6.24,6.87L202,259.7"/><path class="cls-1" d="M249.09,196.06c3.8,3.28,1.09,7.18.26,10.26a158.92,158.92,0,0,1-16,39.47c-2.4,4.12-5.08,8.06-7.57,12.13a13.15,13.15,0,0,0-.92,2.67"/><path class="cls-1" d="M93.59,41c13.2,5.16,25.94,11.2,37.63,19.29,4.57,3.16,8.9,6.67,13.5,9.78,1.85,1.25,4.14,1.85,6.23,2.74"/><path class="cls-1" d="M137.06,81.35c-.45-1-.61-2.45-1.39-3.09C123.54,68.3,110.05,61,94.49,58"/><path class="cls-1" d="M198.45,71c-.36-4.25-3-6.62-6.72-8.07"/><path class="cls-1" d="M182.32,54.91l-8.52-7.17"/><path class="cls-1" d="M157.67,38.78c-6.15,0-12.46-2-18.37,1.34"/><path class="cls-1" d="M72.53,38.33h-28c-2.08,5-1,11.31-1.13,17.47-.35,18.38-.68,36.75-.89,55.12-.13,11.5,0,23,0,34.51,0,6.72-.32,13.44-.4,20.16a42.49,42.49,0,0,0,.46,4.88l4.9,2.85c5.18-.57,6.22-4.94,7.53-8.65,2.92-8.28,5.17-16.81,8.26-25,1.56-4.16,4.35-7.87,6.58-11.77l.87.51c.31-1.49.63-3,.94-4.47"/><path class="cls-1" d="M152.74,207.72c1.95-1.65,4.2-3,5.77-5,6.21-7.68,10.59-16.43,14.43-25.48a31,31,0,0,1,2.46-4l1.62.45c-.18,3.58.27,7.32-.64,10.7-3.14,11.72-6.91,23.22-14.15,33.25-.88,1.22-.67,3.23-1,4.87"/><path class="cls-1" d="M194,166.49c.45,4.18,1.74,8.48,1.18,12.52-1.45,10.43-3.27,20.84-7.81,30.54-.54,1.17.21,2.95.36,4.44"/><path class="cls-1" d="M227.13,195.17c-.9.89-2.14,1.63-2.64,2.71-7.15,15.45-17.1,29-27.89,42.05-1.39,1.68-3.53,2.74-5.32,4.08"/><path class="cls-1" d="M107.48,41C115.1,45.2,123,49,130.26,53.68c6.5,4.21,12.37,9.39,18.41,14.27,1,.84,1.53,2.34,2.28,3.54"/><path class="cls-1" d="M160.81,84.48l8.07,11.21"/><path class="cls-1" d="M171.79,103.75c1.72,6.72,3.79,13.38,5,20.19,1,5.57,3.26,11.15,1.46,17"/><path class="cls-1" d="M178.51,153.94q-.56,6.5-1.12,13"/><path class="cls-1" d="M260.74,217.57c-1.34,1.5-3.19,2.77-3.95,4.52-5.13,11.8-12.52,22.2-19.79,32.69-1.29,1.87-2.4,3.87-3.6,5.81"/><path class="cls-1" d="M127.65,214c-.6,1.34-.87,3-1.85,4a75.59,75.59,0,0,1-24.61,15.69c-.9.36-2.07.05-3.12.05"/><path class="cls-1" d="M130.79,153.49c.59,1.5,1.61,3,1.72,4.49.8,11.35-2.09,22-6.65,32.26l-1.8,4"/><path class="cls-1" d="M119.13,201.44c-3.13,2.39-6.33,4.71-9.39,7.19s-6.18,5.5-9.48,8c-1.5,1.13-3.53,1.56-5.32,2.31"/><path class="cls-1" d="M172.91,102c5,2.07,6.63,6.87,8.43,11.24,3.41,8.25,6.34,16.7,9.51,25a38.62,38.62,0,0,0,1.78,3.59"/><path class="cls-1" d="M159.91,109.13c.3,2.24.46,4.51.92,6.72,2.07,9.9,3.78,19.85,3,30-.1,1.38-1.13,2.69-1.73,4"/><path class="cls-1" d="M177.39,141.84c-1.2-2.69-2.72-5.28-3.52-8.08a83.15,83.15,0,0,0-12.16-24.63"/><path class="cls-1" d="M156.33,102.41,149.16,93"/><path class="cls-1" d="M135.27,81.35c-3-1.5-6-3-9-4.48C118.24,73,110.22,69,102.07,65.3c-1.67-.75-3.85-.38-5.79-.53"/><path class="cls-1" d="M161.71,150.8l-.45,13.45"/><path class="cls-1" d="M160.59,170.07c2.15,5.08-.48,9.71-1.7,14.31-1.92,7.29-4.65,14.37-7,21.54"/><path class="cls-1" d="M147.37,214.44l-9.86,10.3"/><path class="cls-1" d="M125.86,235.05a65.53,65.53,0,0,1-30,15.24"/><path class="cls-1" d="M239.23,40.12c2.54,4.33,5.12,8.64,7.61,13,4.07,7.15,8,14.36,12.15,21.48a18.07,18.07,0,0,0,3.09,3.16"/><path class="cls-1" d="M125.86,233.26c-2.12-1.63-3.63,0-5.4.87-8,4.07-16,8.23-25.08,9.44"/><path class="cls-1" d="M144.23,113.16c1.64,1.8,3.6,3.39,4.87,5.41,5.35,8.52,8.31,18,10.41,27.74a16.37,16.37,0,0,0,1.75,3.6"/><path class="cls-1" d="M92.25,107.34c3.3.19,6,1.45,7.62,4.48"/><path class="cls-1" d="M106.14,116.75c2.69,2.24,5.55,4.3,8,6.76,3.6,3.57,6.92,7.42,10.34,11.17.36.39.57.92.91,1.33,3.79,4.55,5.36,9.85,4.81,16.22-.55,1.49-1.38,3.6-2.11,5.75-2,5.87-3.74,11.86-8.1,16.55a14.43,14.43,0,0,1-2.67,1.82"/><path class="cls-1" d="M158.57,170.07c-3.14,5.53-6.22,11.09-9.45,16.56a25.64,25.64,0,0,1-3.1,3.61"/><path class="cls-1" d="M142,195.62l-7.17,10.3"/><path class="cls-1" d="M125.86,213.54c-4,2.39-8,4.84-12.11,7.16-5.64,3.19-11.35,6.28-17,9.42"/><path class="cls-1" d="M211.45,174.56c-1.95,4.18-3.65,8.49-5.88,12.52-4.8,8.67-8.58,18-15.21,25.54a5.6,5.6,0,0,1-1.77.92"/><path class="cls-1" d="M183.22,220.71,171.56,235.5"/><path class="cls-1" d="M163.5,245.81q-4.94,5.37-9.86,10.75c-1.07,1.18-2.09,2.39-3.14,3.59"/><path class="cls-1" d="M262.53,102.41c2.82-5.24,1.34-10.94.62-16.1-1-6.87,1-13.48.3-20.2,0-.43.51-1,.39-1.33-2.2-6.39.09-12.86-.38-19.29-.4-5.6-1.46-6.59-7.2-5.81-1.95.26-3.88.59-5.83.89"/><path class="cls-1" d="M91.35,96.58l12.1,2.69"/><path class="cls-1" d="M126.75,115.85c7.17,5.08,11,12.57,14.82,20.15,1,2,2.36,3.9,3.56,5.84"/><path class="cls-1" d="M113.76,163.35c-2.69,5.53-5.14,11.19-8.16,16.53-1.92,3.4-4.69,6.33-7.08,9.46"/><path class="cls-1" d="M84.63,130.19c4.83-1.51,9.36-1.57,13,2.7.35.4.56,1.24.91,1.28,7,.89,8,7.91,12.07,11.73a9.14,9.14,0,0,1,2.71,7.15"/><path class="cls-1" d="M115.77,163.8c.74,6.48,2.76,13.12-2.46,18.82"/><path class="cls-1" d="M112.86,183.07c-2.09,3.82-2.37,8.55-6.66,11.3-3.16,2-5.74,5-8.58,7.52"/><path class="cls-1" d="M125.41,116.3c1.49,5.68,2.65,11.47,4.61,17a9.75,9.75,0,0,1-.58,7.89"/><path class="cls-1" d="M112,123.47c.3,1.64.69,3.28.89,4.93.63,5.37,1.35,10.74,1.68,16.14.07,1.14-1.37,2.38-2.12,3.58"/><path class="cls-1" d="M163.05,244c-.9,0-2.06-.37-2.65.06-6.93,5-13.78,10.1-20.63,15.2-.15.11,0,.58,0,.88"/><path class="cls-1" d="M97.62,92.55c2.48,2.16,6.8,2.1,7.62,6.27"/><path class="cls-1" d="M95.83,115.4c3,4.19,6.5,8.11,8.76,12.65,1.28,2.58.5,6.17.65,9.31"/><path class="cls-1" d="M85.53,8.3,84.18,19.06"/><path class="cls-1" d="M259.84,240.88l-10.75,19.94"/><path class="cls-1" d="M89.11,275.38V294.2"/><path class="cls-1" d="M225.34,40.12a17.11,17.11,0,0,1,3.58-.86c5.38-.09,10.76-.11,16.13,0a5.86,5.86,0,0,1,4,1.64l13,16.24"/><path class="cls-1" d="M77.91,12.78,77.46,24"/><path class="cls-1" d="M261.64,240.43c1.7,4.88.55,9.85.81,13.86l-4.85,6.3"/><path class="cls-1" d="M83.73,172.31c5.08-.74,10.16-1.5,15.24-2.22a3.4,3.4,0,0,1,1.77,0c.42.18.66.81,1.1,1.42l-6.46,8.38"/><path class="cls-1" d="M122.27,253.87c-5.84-.67-10.27,2.12-14.34,5.83"/><path class="cls-1" d="M210.55,260.15c4,.44,8.06,1.09,12.1,1.29,4.62.22,9.26.1,13.89,0,6.72-.1,13.44-.32,20.17-.41a44.14,44.14,0,0,1,4.93.53v-5"/><path class="cls-1" d="M107,210c-1.35-.15-3.14-.93-4-.34-3.32,2.36-6.35,1.2-9.49-.11"/><path class="cls-1" d="M81.94,275.38l-.45,2.69"/><path class="cls-1" d="M97.18,160.22c-1.2.44-2.37,1-3.59,1.32s-2.69.62-4,.92"/><path class="cls-1" d="M145.57,165.59c2.13,3.28,1.53,6.81.89,10.31-.69,3.74-1.57,7.45-2.18,11.21a13.52,13.52,0,0,0,.4,3.58"/><path class="cls-1" d="M100.31,189.79,104.8,188c1.93-.76,3.88-1.5,5.82-2.24"/><path class="cls-1" d="M71.19,128l12.1,4.93"/><path class="cls-1" d="M95.38,169.63l3.78-14.08c-2.83-3.42-2.83-9.42-9.15-9.67"/><path class="cls-1" d="M104.35,151.7c.44,1.64,1,3.27,1.32,4.93s.62,3.59.92,5.38"/><path class="cls-1" d="M190.83,63.42c-.08,4.51,2.54,7.13,6.28,9"/><path class="cls-1" d="M92.7,115v7.54L94,129.3"/><path class="cls-1" d="M112.41,158c-5.3,2.58-7.75,7.81-11.2,12.1"/><path class="cls-1" d="M91.8,123.47l-7.62-.9"/><path class="cls-1" d="M90.45,136l-2.68,7.17"/><path class="cls-1" d="M98.52,141l-3.58,6.72"/><path class="cls-1" d="M104.35,145v5.21l-4.93,5.1"/><path class="cls-1" d="M98.52,134.67c-2.38,2.14-1.09,4.07.48,5.8,1.34,1.49,2.93,2.75,4.67,4.34l2.92-2.52"/></g></svg>
\ No newline at end of file
diff --git a/images/pattern-08.svg b/images/pattern-08.svg
new file mode 100644
index 0000000..42cd14f
--- /dev/null
+++ b/images/pattern-08.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><defs><style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><title>pattern</title><g id="SkBTOa.tif"><path class="cls-1" d="M147.91,38.4c2.69-.3,5.43-.37,8.06-.93,9.84-2.13,14.1,4.2,19,11.12A262.73,262.73,0,0,1,195.88,84.1c4.92,10,8,20.58,10.19,31.4.9,4.36.67,8.94,1,13.42.26,3.44.73,6.87.83,10.31a24.34,24.34,0,0,1-.84,4.93"/><path class="cls-1" d="M205.94,161.64l-2.46,22.85"/><path class="cls-1" d="M202.13,196.14c-.89,4.93-1.3,10-2.78,14.76a166.17,166.17,0,0,1-17.81,39.48c-1.63,2.6-3,5.36-4.5,8.05"/><path class="cls-1" d="M157.77,49.61c1.64.89,3.6,1.47,4.88,2.74A119.13,119.13,0,0,1,182,78.26a178.62,178.62,0,0,1,16.39,37.26c2.41,8,3.38,16.4,5.11,24.6a21.94,21.94,0,0,0,1.75,4"/><path class="cls-1" d="M176.14,38.4A19.59,19.59,0,0,0,178,41.52c10.93,12.71,21.3,25.95,28,41.32,7.55,17.24,15.06,34.65,17.26,53.69.11,1,1.13,1.8,1.73,2.7"/><path class="cls-1" d="M117.89,38.85c1.19-.6,2.38-1.68,3.58-1.71,7-.17,14-.11,21.06,0a7.4,7.4,0,0,1,2.25.85"/><path class="cls-1" d="M157.32,51.85c3.89,6,7.72,12,11.66,17.91,7.66,11.49,11.56,24.4,14.84,37.64a163.16,163.16,0,0,1,4.82,44.38,86.57,86.57,0,0,1-1.4,12.53c-.26,1.45-1.69,2.7-2.58,4.05"/><path class="cls-1" d="M168.08,38l20.52-1c22.34,29.63,34.18,61.69,38.58,96.43l-3.09,1.36"/><path class="cls-1" d="M92.79,258.43c1,.45,2.23,1.46,3.12,1.25,8-1.84,15.86.46,23.77.05,3-.16,6-.85,9-1.3"/><path class="cls-1" d="M144.78,241.85c9-8.39,15.67-18.58,22.3-28.75,3.56-5.45,6-11.6,9.09-17.4a47.69,47.69,0,0,1,2.65-4l1.05.93q1.95-9.42,3.89-18.85"/><path class="cls-1" d="M183.54,167c-.23-3.13-.64-6.27-.64-9.41,0-18.7-5.06-36.19-13.09-52.85-5.2-10.76-11-21.25-16.55-31.83a38.94,38.94,0,0,0-3.34-4.22c-.7,1.49-1.12,2.41-1.81,3.87,3.1,5.43,6.47,11.12,9.64,16.93,5.33,9.76,7.77,20.36,8.49,31.36.45,6.86,1.77,13.78-.4,20.61"/><path class="cls-1" d="M165.16,152.67q-.56,7.4-1.12,14.79"/><path class="cls-1" d="M164.27,174.18c-1.12,7.32-1.52,14.85-3.52,21.92A178,178,0,0,1,143.51,237c-.91,1.58-.68,3.83-1,5.77"/><path class="cls-1" d="M190.93,38,198,36.87c2.82,3,6.06,6.19,9,9.62a181,181,0,0,1,24.24,36.27c.63,1.25,1.48,2.4,2.22,3.59"/><path class="cls-1" d="M241.34,106.07c3.39,11.87,4.87,24.06,6,36.3"/><path class="cls-1" d="M247.62,153.57c-.08,1.05-.15,2.09-.23,3.14"/><path class="cls-1" d="M247.17,170.6c-.07.6-.15,1.19-.22,1.79"/><path class="cls-1" d="M239.78,201.52c-2.84,8.06-5.86,16.07-8.47,24.21a110.23,110.23,0,0,1-16.16,30.92,10,10,0,0,0-.92,2.23"/><path class="cls-1" d="M164,141.47c-1.34-5.53-2.63-11.07-4-16.58-4.76-18.58-12.64-35.42-27.34-48.38-2.18-1.91-3.28-5.46-7.15-5"/><path class="cls-1" d="M226.56,153.57q-1.25,14.12-2.47,28.23"/><path class="cls-1" d="M220.06,195.24c-4.63,10.16-8.74,20.6-14,30.4S194.2,244.53,188.26,254c-.88,1.41-1.51,3-2.26,4.47"/><path class="cls-1" d="M221.85,194.8c.45,1.19,1.47,2.5,1.26,3.56-2.2,11.31-4.84,22.44-9.12,33.26a187.81,187.81,0,0,1-12.3,25,5.62,5.62,0,0,1-5.83,3.18c-5.82-.46-11.65-.68-17.48-.91-1.33-.06-2.69.43-4,.39-6.87-.24-13.74-.57-20.61-.87"/><path class="cls-1" d="M259.05,83.21c.59-1.34,1.69-2.68,1.71-4,.13-12.1.15-24.2,0-36.29,0-1.7-1.18-3.38-1.59-4.49-7,0-13.41.12-19.83,0-7.47-.17-14.94-.57-22.41-.84a4.18,4.18,0,0,0-1.34.43"/><path class="cls-1" d="M102.2,71.56c-1.79-.74-3.92-1.09-5.32-2.3C83.85,58,69.05,49.72,53.35,42.92a22.38,22.38,0,0,0-4-.93"/><path class="cls-1" d="M145.22,163.88c-1.49,3.58-3.45,7.05-4.4,10.77a101.77,101.77,0,0,1-22.53,43c-1.74,2-4.14,3.33-6.23,5"/><path class="cls-1" d="M179.28,193.45c.15,1.79.72,3.67.38,5.37-3.82,19.19-11.43,36.86-21.91,53.32a28.34,28.34,0,0,1-2.67,3.15c-.7.81-1.41,1.6-2.12,2.4l.35,1c-6.13.21-12.26.51-18.39.53-1.2,0-2.39-1.11-3.59-1.71"/><path class="cls-1" d="M200.79,194.8a30.56,30.56,0,0,0-2.65,4.49c-8,20.61-18.32,39.81-33.62,56a15.87,15.87,0,0,0-1.82,3.11"/><path class="cls-1" d="M150.15,69.77c0-4.52-3.23-6.41-6.72-8.06"/><path class="cls-1" d="M134.92,53.64l-10.31-8.07"/><path class="cls-1" d="M110.27,37.51c-6.12-1.09-12.25-2.3-18.37,0"/><path class="cls-1" d="M105.34,51.85l12.1,10.75"/><path class="cls-1" d="M125.06,73.36c6.46,11,12.46,22.27,16.7,34.46A88.48,88.48,0,0,1,147,136.09a22.1,22.1,0,0,1-.85,4.48"/><path class="cls-1" d="M145.45,147.3q-.12,6.49-.23,13"/><path class="cls-1" d="M145.22,160.74c4.05,14.63.23,28.38-4.32,42.18-1,3-3.67,6.16-1.5,9.8"/><path class="cls-1" d="M88.76,80.08c-.6-1.2-.91-2.71-1.84-3.54-10-9-22.13-14.11-34.47-18.83a8,8,0,0,0-2.68,0"/><path class="cls-1" d="M242,201.07c.15,1.05.63,2.17.39,3.12-1.69,6.9-3.38,13.8-5.36,20.62a201.54,201.54,0,0,1-12.5,31.38,14.35,14.35,0,0,0-1,3.8l-22.8-1.11"/><path class="cls-1" d="M261.29,92.18c-.45.59-1.29,1.2-1.29,1.79.06,7.77.34,15.53.37,23.3.06,19,.13,37.94,0,56.91-.1,12.85-.56,25.69-.86,38.54"/><path class="cls-1" d="M259.27,220.79q-.12,2.91-.22,5.82"/><path class="cls-1" d="M259.05,227.06c.29,7.32.68,14.64.85,22,.08,3.29-.29,6.6-.49,10.53H243.05c1.63-2.94,3.11-5.33,4.32-7.86,2.62-5.48,5-11.07,7.68-16.54a34.63,34.63,0,0,1,3.1-4.5"/><path class="cls-1" d="M104.44,206.45c1.65-1.2,3.69-2.09,4.87-3.64,6.15-8.1,11.42-16.72,14.91-26.37.59-1.63,1.91-3,2.9-4.49l1.52.39a45.94,45.94,0,0,1,0,5c-1.68,14.94-7.48,28.32-15.63,40.8a11.8,11.8,0,0,0-.93,3.12"/><path class="cls-1" d="M100,234.68l-13,9.86"/><path class="cls-1" d="M56.94,38c3.74,2.1,7.46,4.2,11.21,6.28,11.33,6.27,22.73,12.44,31.79,22a29.35,29.35,0,0,1,2.71,4"/><path class="cls-1" d="M112.51,83.21l8.07,11.21"/><path class="cls-1" d="M125.51,100.24c5.7,5.28,8.49,12.29,11.15,19.29,2.18,5.74,3.9,11.64,5.9,17.45a29.87,29.87,0,0,0,1.77,3.59"/><path class="cls-1" d="M129.09,140.57c-1.64-4.18-3-8.5-5-12.51-3.36-6.83-7.11-13.48-10.69-20.2"/><path class="cls-1" d="M108,101.14l-7.17-9.41"/><path class="cls-1" d="M87,80.08c-4.93-2.54-9.82-5.16-14.8-7.6q-9.35-4.61-18.84-8.93c-.86-.39-2.06,0-3.11,0"/><path class="cls-1" d="M201.24,38.85,214.8,37c5.87,12.16,11.46,23.55,16.87,35a59.17,59.17,0,0,1,3.53,9.87c.4,1.49-.2,3.26-.35,4.9"/><path class="cls-1" d="M80.25,93.07,91,105.17"/><path class="cls-1" d="M95.48,113.69a44.77,44.77,0,0,0,.48,4.92c1.41,7,4.05,13.8,1.76,21.07"/><path class="cls-1" d="M98,145.5c-.08,3.44-.15,6.87-.23,10.31"/><path class="cls-1" d="M95.48,165.22c-3,8.28-6.2,16.49-12.07,23.32-2,2.3-2.69,6-6.75,5.81"/><path class="cls-1" d="M116.1,241.4c-1.35.3-3,.21-4,1-7,5.26-13.79,10.7-20.67,16.05a2.62,2.62,0,0,1-1.34.45c-6.58.61-13.17,1.11-19.71-.43"/><path class="cls-1" d="M82.49,152.23c.59,1.19,1.65,2.36,1.72,3.58a62,62,0,0,1-6.63,32.28A43,43,0,0,0,75.76,193"/><path class="cls-1" d="M71.28,199.73l-9,6.72"/><path class="cls-1" d="M61.87,206.9c-3.35,1.93-4.35,6.8-9,7.17"/><path class="cls-1" d="M163.15,173.29c-1.65,3.28-3.47,6.49-4.9,9.87a129,129,0,0,1-16.64,28.64c-.24.31-.87.32-1.32.47"/><path class="cls-1" d="M134.92,219.44l-11.65,14.79"/><path class="cls-1" d="M116.1,243.64q-6.06,6-12.09,12.11A27.94,27.94,0,0,0,102.2,258"/><path class="cls-1" d="M111.61,107.86c.45,3.59.44,7.31,1.44,10.73,2.42,8.25,2.78,16.65,2.52,25.12,0,1.66-1.12,3.29-1.72,4.93"/><path class="cls-1" d="M257.25,219c-2.39,4.49-5,8.87-7.12,13.47a137.3,137.3,0,0,1-15.73,26"/><path class="cls-1" d="M79.35,211.82a21.05,21.05,0,0,0-4.46,1.39c-7.07,4.09-14,8.36-21.11,12.47a13.9,13.9,0,0,1-3.56.93"/><path class="cls-1" d="M95.93,111.89c1.64,1.8,3.59,3.4,4.88,5.42,5.43,8.48,8.3,18,10.4,27.74a16.3,16.3,0,0,0,1.75,3.59"/><path class="cls-1" d="M112.06,168.36c2.6,5.34-.41,10.31-1.53,15.19-1.65,7.19-4.59,14.08-7,21.1"/><path class="cls-1" d="M99.07,213.17,89.21,223"/><path class="cls-1" d="M78.45,232.89c-5.32,5.77-12.27,9-19.29,12.05a84,84,0,0,1-8.49,2.73"/><path class="cls-1" d="M64.56,121.75c5.52,2.25,8.61,6.92,11.67,11.65,1.55,2.4,3.24,4.71,5,7.31.28,2.88.61,6.32.92,9.54-1.86,4.88-3.63,9.73-5.54,14.51C75,168.84,73.47,173,69,175.08"/><path class="cls-1" d="M97.27,164.32c2.13,3.28,1.43,6.79.91,10.31-.64,4.33-1.2,8.66-1.8,13"/><path class="cls-1" d="M79.35,214.07c-5,6.79-12,11-19.26,14.79-2.43,1.28-4.79,2.68-7.18,4"/><path class="cls-1" d="M124.16,100.24c-1.66,4.75,1.44,8.68,2.25,13,1.48,7.92,3,15.83,4.41,23.76.15.82-.53,1.78-.83,2.68"/><path class="cls-1" d="M130.21,152.67q-.56,6.51-1.12,13"/><path class="cls-1" d="M76.21,36.83l-18.37.23"/><path class="cls-1" d="M78.45,231.09c-2.92-1.52-4.89.84-7.15,1.83C66,235.21,60.86,237.74,55.57,240c-1,.44-2.36.07-3.56.07"/><path class="cls-1" d="M78.45,114.58c5.14,2.58,7.44,7.62,10.27,12.12s5.42,9.24,8.11,13.87"/><path class="cls-1" d="M65.46,162.08c-2.39,5.08-4.53,10.3-7.28,15.18-1.3,2.3-3.78,3.94-5.72,5.89"/><path class="cls-1" d="M45.29,116.38l5.88,1.67c3.24,4.9,7.94,9.64,5.54,17.22-.46,1.46,1.64,4,3,5.71,2.54,3.26,5.35,6.3,5.33,10.8"/><path class="cls-1" d="M67.47,162.53c.8,6.69,1.73,12.87-2.57,19.49-3.38,5.21-5.79,10.9-11.11,14.55-1.7,1.17-3.57,2.11-5.36,3.16"/><path class="cls-1" d="M240.22,38.85c1.95,4.33,3.93,8.65,5.8,13a37.3,37.3,0,0,1,1.37,4.47"/><path class="cls-1" d="M253,71.12q2.34,5.59,4.7,11.2"/><path class="cls-1" d="M259.49,90.38l.45,1.8"/><path class="cls-1" d="M57.84,115.48c1.52,2.21,3,4.43,4.55,6.65l1-1.23c.38,2.08.86,4.14,1.12,6.23.66,5.22,1.39,10.45,1.69,15.69.08,1.3-1.37,2.68-2.12,4"/><path class="cls-1" d="M77.11,115a67.43,67.43,0,0,1,2.19,7.63c.92,5.48,5.17,10.62,1.84,16.57"/><path class="cls-1" d="M113.41,149.54l-.9,13.89"/><path class="cls-1" d="M110.27,168.36c-3,5.52-5.84,11.13-9,16.53-1,1.65-2.91,2.74-4.4,4.08"/><path class="cls-1" d="M40.81,12.41,39.47,23.17"/><path class="cls-1" d="M232.61,39.3c1,1.79,2,3.64,3.15,5.36,2.33,3.48,4.65,7,7.21,10.28,1,1.31,2.63,2.13,4,3.18"/><path class="cls-1" d="M44.4,279.49v18.82"/><path class="cls-1" d="M64.11,156.71c-5.19,3.45-9.16,7.72-11.33,13.84a15,15,0,0,1-9.28,9c-1.51.56-3,1.19-4.48,1.78"/><path class="cls-1" d="M33.19,16.89c-.15,3.74-.3,7.47-.44,11.21"/><path class="cls-1" d="M37.23,279.49l-.9,9.86"/><path class="cls-1" d="M72.63,254.84c-4.35,5.25-5.36,5.58-11.2,3.59"/><path class="cls-1" d="M73.52,254c-.74-.6-1.68-1.84-2.21-1.69-3.84,1.12-8.09,1.67-10.33,5.72"/><path class="cls-1" d="M48,149.54l2.75,4.57c-.79,3.35-1.41,6.6-2.33,9.76-1.42,4.87-4.61,7.22-9.83,6.28"/><path class="cls-1" d="M62.77,184c-2.09.9-4.39,1.5-6.22,2.77-2.19,1.51-4.27,2.15-6.78,1.26"/><path class="cls-1" d="M48.88,159c-3.6.38-6.82,3.71-10.76,1.34"/><path class="cls-1" d="M56.05,150.43c.45,1.65,1,3.27,1.32,4.94s.62,3.58.92,5.37"/><path class="cls-1" d="M52.91,95.76c-3.24,2.06-6.31.42-9.41-.45"/><path class="cls-1" d="M142.53,62.15c-.1,4.53,2.94,6.85,6.28,9"/><path class="cls-1" d="M56.05,143.26c-2.24-2.09-4.53-4.13-6.71-6.28-2.72-2.68-6.05-2.47-9.42-2.23"/><path class="cls-1" d="M45.74,117.27l1.35,4.93"/><path class="cls-1" d="M244.26,260.67c-3.54-2.05-7.5-.38-11.23-1.24-2.87-.66-5.95-.4-8.94-.55"/><path class="cls-1" d="M58.29,141l-3.1,7.8.67.3L51.12,154"/><path class="cls-1" d="M48.43,68.43c4.36,1.28,4.51,4.43,3.58,8.06"/><path class="cls-1" d="M44.4,275.91l-3.14-.45"/></g></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..b39c828
--- /dev/null
+++ b/index.html
@@ -0,0 +1,656 @@
+<!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>Glossary</title>
+    </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">
+    <div class="head">
+        <h1 id="title"> Permeable Glossary for a Living Publishing Practice </h1>
+            <div class="question">
+        <input id="search" type="text" ><span onclick="document.getElementById('search').value= ''">X</span>
+    </div>
+        <a href="rss.xml">
+            <p>follow what is new (rss)</p>
+        </a>
+    </div>
+    <div class='diffraction'>
+        <img src='images/pattern-01.svg'>
+        <img src='images/pattern-02.svg'>
+        <img src='images/pattern-03.svg'>
+        <img src='images/pattern-04.svg'>
+        <img src='images/pattern-05.svg'>
+        <img src='images/pattern-06.svg'>
+        <img src='images/pattern-07.svg'>
+        <img src='images/pattern-08.svg'>
+    </div>
+    <div class="description">
+        <p>From creating, designing and conceptualising to filtering, circulating and amplifying, publishing practices involve different processes and matters. Even though there are multiple theories and authors that approach each of them in a particular way, I propose to make a pause on defining them individually and focus on possible entanglements. Not to find a generalized idea of publishing but to see it as a complex and interwoven materiality. </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 class;
+    <div id="legend" class="legend"> 
+        <button class="btn active" onclick="filterSelection('all')">properties</button> <button id="action" class="btn action-s" onclick="filterSelection('action')">action→  <span class='symbol action-s'>A</span> </button>
+<button id="situation" class="btn situation-s" onclick="filterSelection('situation')">situation→  <span class='symbol situation-s'>S</span> </button>
+<button id="logic" class="btn logic-s" onclick="filterSelection('logic')">logic→  <span class='symbol logic-s'>C</span> </button>
+<button id="proposition" class="btn proposition-s" onclick="filterSelection('proposition')">proposition→  <span class='symbol proposition-s'>T</span> </button>
+<button id="hyperlink" class="btn hyperlink-s" onclick="filterSelection('hyperlink')">hyperlink→  <span class='symbol hyperlink-s'>N</span> </button>
+<button id="process" class="btn process-s" onclick="filterSelection('process')">process→  <span class='symbol process-s'>P</span> </button>
+<button id="language" class="btn language-s" onclick="filterSelection('language')">language→  <span class='symbol language-s'>G</span> </button>
+<button id="agent" class="btn agent-s" onclick="filterSelection('agent')">agent→  <span class='symbol agent-s'>E</span> </button>
+<button id="tool" class="btn tool-s" onclick="filterSelection('tool')">tool→  <span class='symbol tool-s'>T</span> </button>
+<button id="form" class="btn form-s" onclick="filterSelection('form')">form→  <span class='symbol form-s'>Y</span> </button>
+
+    </div>
+    <div class="words">
+        <div class="word logic situation action">
+<h1 id="reflection" class="title">Reflection</h1>
+<p>⤷ “Stop and look at your own process and understand it. Eventually, I suppose you do run into the infinite recursion problem, but I guess you get used to that.” (Mary Catherine Bateson)</p>
+<p>⤷ Es como un círculo: un punto que en su recorrido vuelve a <strong>sí mismo</strong></p>
+<p>⤷ The projection of an <strong>image on the mirror</strong></p>
+<p>⤷ It is a useful way to think when finding <strong>common ground</strong></p>
+<p>⤷ to see the same elsewhere</p>
+</div>
+<div class="word logic proposition action">
+<h1 id="diffraction" class="title">Diffraction</h1>
+<p>⤷ To perform connection between things</p>
+<p>⤷ Its when a wave encounters a obstacle and find a slit in it where it bends and make a pattern.</p>
+<p>⤷ It creates a <strong>pattern of differences</strong></p>
+<p>⤷ “There is no sharp boundary separating the light from the darkness”</p>
+<p>⤷ Thinking the differences within el medio, el espacio que nos conecta y nos separa simultáneamente.</p>
+<p>⤷ “About taking responsability for the fact that our practices matter; the world is materialized differently through different practices.”</p>
+</div>
+<div class="word proposition logic">
+<h1 id="property" class="title">Property</h1>
+<p>⤷ An attribute, characteristic, or quality</p>
+<p>⤷ From etymology the word comes from properte which means “nature, quality, distinctive character always present in an individual or class”</p>
+</div>
+<div class="word proposition logic hyperlink">
+<h1 id="atata" class="title">Atata</h1>
+<p>⤷ It is a composition of two ideograms (fig.1)in the Mhuysqa dead language . ATATA can be defined as ‘ I give myself and you give yourself , ’ where giving is an act of receiving , because what you do for others is also affecting yourself . This exercise oofreciprocity is a very important vibration of life because nobody can live without others , this includes all living creatures with whom we share the Earth .</p>
+<p>⤷ Reciprocity awarness. <a href="https://issue.xpub.nl/13/ATATA/">⤴</a></p>
+<p>⤷ to be reciprocal</p>
+</div>
+<div class="word form">
+<h1 id="paratext" class="title">Paratext</h1>
+<p>⤷ thresholds to the text</p>
+<p>⤷ thresholds to a publication</p>
+<p>⤷ Interesting to be aware of the spaces that open, close, introduce and mediate the publication.</p>
+</div>
+<div class="word form">
+<h1 id="glosario" class="title">Glosario</h1>
+<p>⤷ a paratext</p>
+<p>⤷ from the term gloss which means <strong>annotation</strong> and <strong>layer</strong></p>
+<p>⤷ This publication see its origin in the idea of <strong>layering of annotations</strong></p>
+</div>
+<div class="word action hyperlink">
+<h1 id="urgencia" class="title">Urgencia</h1>
+<p>⤷ Tener la urgencia como guía para la acción implica una búsqueda constante para posibilitar la publicación de <strong>contenidos relevantes</strong> de forma accesible y democrática. (…) Es importante decir que cuando hablamos de relevancia, no necesariamente estamos hablando de <strong>panfletos</strong> y obras explícitamente políticas. En una sociedad adversa a las diferencias y violentamente estandarizada, las obras que dan visibilidad a <strong>subjetividades no hegemónicas</strong> son potencialmente transformadoras, además de jugar un papel importante en el registro de diferentes formas de existencia, algo profundamente político en sí mismo. <a href="https://files.cargocollective.com/c1032387/publicacion-independiente-PRINT.pdf">⤴</a></p>
+<p>⤷ Being different as a political act itself.</p>
+<p>⤷ Understanding my needs and collective needs to make something public.</p>
+<p>⤷ Activating agency</p>
+</div>
+<div class="word proposition hyperlink">
+<h1 id="post-growth" class="title">Post growth</h1>
+<p>⤷ to challenge the dominant narratives about growth and progress, and re-envision social metabolism through an understanding of the energy it requires, reconnecting human survival with the living, material qualities of the biosphere, drawing on ecofeminism, indigenous knowledge, environmental accounting and historical materialism. <a href="http://postgrowth.art/">⤴</a></p>
+<p>⤷ To leave behind an activity of accumulation, to find yourselve in a different work rhythm</p>
+</div>
+<div class="word proposition hyperlink">
+<h1 id="non-teleological-reading" class="title">Non-teleological reading</h1>
+<p>⤷ what if instead of reflecting about the why, we focus about the how? <a href="https://tdingsun.github.io/reading-machines/">⤴</a></p>
+<p>⤷ What is teleological? <a href="https://en.wikipedia.org/wiki/Teleology">⤴</a></p>
+<p>⤷ Have you question how would it be the reading process of your publication?</p>
+<p>⤷ ¿Por qué publicamos lo que publicamos, en la forma en que lo publicamos? Habrá momentos en que no será necesario preguntar por qué, sino cómo.</p>
+</div>
+<div class="word hyperlink">
+<h1 id="urgent-artifact" class="title">Urgent artifact</h1>
+<p>⤷ The visible act of “commoning-in-the-crisis.” An outcome of solidarity and coming together in urgent times using modest tools and materials. It’s the manifestation that we can work from shared, <strong>common positions</strong>, in common, and on <strong>common ground</strong>. Examples: collaborative spreadsheets, online petitions, protests, surveys,letter-writing, essay writing, <strong>note-taking</strong>, shared open access writing spaces, streaming workshops, <strong>performances</strong>, talks, teach-ins, raw and unedited poetry, and quickly made zines. <a href="https://soulellis.com/writing/urgentcraft2/">⤴</a></p>
+<p>⤷ Is a set of principles that works to resist oppression-based design ideologies, especially in art and design education. URGENTCRAFT isn’t a manifesto, but rather a constellation of tactics — a series of incomplete observations. A note to self. A reminder that we can use art and design to loosen hegemonic power. <a href="https://soulellis.com/work/urgentcraft/index.html">⤴</a></p>
+</div>
+<div class="word proposition action">
+<h1 id="urgentcraft" class="title">Urgentcraft</h1>
+<p>⤷ Do what you can</p>
+<p>⤷ Use modest tools and materials</p>
+<p>⤷ Practice a <strong>slow approach to fast making</strong></p>
+<p>⤷ Dismantle white supremacy / be anti-racist</p>
+<p>⤷ Commit to maintenance and self-care as a form of urgency</p>
+<p>⤷Think big but make small</p>
+<p>⤷ Resist, loosen, and <strong>dismantle ableism</strong>, heteropatriachy, and <strong>settler colonialism</strong></p>
+<p>⤷ Prioritize <strong>communal care</strong> as a never-ending practice</p>
+<p>⤷ Undestard the politics of your platforms</p>
+<p>⤷ Redistribute wealth and accumulation</p>
+<p>⤷ <strong>Resit capitalist</strong> strategies</p>
+<p>⤷ Practice media hybridity</p>
+<p>⤷ Agitate/interfere (“make good trouble”)</p>
+<p>⤷ <strong>Fail to provide</strong> the perfect read (resist legibility)</p>
+<p>⤷ Refuse design perfection / stay with the mess</p>
+<p>⤷ Work in public (self-publish!)</p>
+<p>⤷ Work towards the then and there of queer futurity (while acknowledging past struggles and privileges)</p>
+<p>⤷ Question linearity and other hieratchical structures</p>
+<p>⤷ [⤴] (https://soulellis.com/writing/urgentcraft2/)</p>
+</div>
+<div class="word logic">
+<h1 id="complexity" class="title">Complexity</h1>
+<p>⤷ Complexity does not mean complicated. Complex systems can in fact be relatively simple.</p>
+<p>⤷ La complejidad es múltiple, en el sentido que nunca se logra desenredar en sí, siempre resulta irresoluble. Viene de la mano mano con no entender lo que se quiere explicar. Alguna vez leí que la complejidad es aquello que no se puede resumir a una sola palabra. Este glossario, por ejemplo, intenta explicar con múltiples palabras aquello que parece complejo. Falla en el intento.</p>
+<p>⤷ Humans use metaphors often to deal with complexity.</p>
+</div>
+<div class="word situation">
+<h1 id="contradiction" class="title">Contradiction</h1>
+<p>⤷ Two different forces that go against each other. Develop a project having in mind that some decisions will go against your own will.</p>
+<p>⤷ is also aboout the lack of purity when acting.</p>
+</div>
+<div class="word form">
+<h1 id="rhizome" class="title">Rhizome</h1>
+<p>⤷ Term adapted from plant biology by Gilles <em>Deleuze and Félix </em>Guattari to conceptualize <em>non-linear relations in both the realm of pure thought and the concrete and the </em>everyday.</p>
+<p>⤷ Thinking multiplicity as a substantive</p>
+<p>⤷ connection, heterogeneity, multiplicity, signifying rupture, cartography</p>
+<p>⤷ Los rizhomas son también estructuras porosas</p>
+<p>⤷ Being permeable, letting relate yourself within the environment</p>
+</div>
+<div class="word proposition action">
+<h1 id="interference" class="title">Interference</h1>
+<p>⤷ On publishing, the possibility to block and reduce the legibility of a matter too enhance other. For example:</p>
+</div>
+<div class="word proposition action logic">
+<h1 id="illegivility" class="title">Illegivility</h1>
+<p>⤷ Its about being cryptic, hidden. But also to create a safe space. Not being in the spotlight may protect you.</p>
+</div>
+<div class="word hyperlink action">
+<h1 id="collaborative-spreadsheets" class="title">Collaborative spreadsheets</h1>
+<p>⤷ Son hojas de cálculo elavoradas colectivamente.</p>
+<p>⤷ It is a interesting tool to use when gathering information collectively</p>
+<p>⤷ <a href="https://docs.google.com/spreadsheets/d/1UkgIsDpFMuA0_hvqf5f4ytPTKX4wfPp8ByRs3Uymvag/edit#gid=0">⤴</a></p>
+</div>
+<div class="word form hyperlink">
+<h1 id="epub" class="title">EPUB</h1>
+<p>⤷ Acronym for Electronic Publication. An ebook format developed by the international Digital Publishing Forum (IDPF). EPUB is an open standard and the most commonly used and supported file format for electronic books. EPUB was designed to accommodate reflow-able content. <a href="https://networkcultures.org/digitalpublishing/">⤴</a></p>
+</div>
+<div class="word form logic">
+<h1 id="electronic-publication" class="title">Electronic publication</h1>
+<p>⤷ Beyond EPUB, A Electronic Publication is a publication generated, created and shown by an electronic device.</p>
+</div>
+<div class="word form situation">
+<h1 id="book" class="title">Book</h1>
+<p>⤷ The codex,</p>
+<p>⤷ by folded paper,</p>
+<p>⤷ unfolded</p>
+<p>⤷ stapled matter</p>
+<p>⤷ drawn space</p>
+<p>⤷ wrapped by glue ~ threads,</p>
+<p>⤷ inhabid by drawings, letters, words, images,</p>
+<p>⤷ containing containers such as prologues, colophon, glossaries</p>
+<p>⤷ the interface,</p>
+<p>⤷ the simple and the whole</p>
+<p>⤷ A format</p>
+</div>
+<div class="word action proposition situation">
+<h1 id="autonomous-practice" class="title">Autonomous practice</h1>
+<p>⤷ On publishing, to be able and to have the energy to create, make, produce and share with self autonomy.</p>
+<p>⤷ Etymologicaly, autonomous comes from auto- (“self”) and -nomy (“a system of rules or laws about a particular field”).</p>
+<p>⤷ Autonomous practice suggests drawing your own rules and own systems of creating, making, producing and distributing in order to publish.</p>
+</div>
+<div class="word action">
+<h1 id="publishing" class="title">Publishing</h1>
+<p>⤷ To make something public.</p>
+<p>⤷ To circulate.</p>
+<p>⤷ To filter and amplify.</p>
+<p>⤷ A big spectrum of practices interested into making public</p>
+<p>⤷ To publish is to make a public through the circulation of material, generating discourse.</p>
+</div>
+<div class="word form">
+<h1 id="hybrid-publication" class="title">Hybrid publication</h1>
+<p>⤷ the act of publishing through differents mediums and techniches in order to adapt and contextualize to a specific project or part of it. A hybrid publication can offer a varied spectrum of objects and processes that together construct the body of it.</p>
+</div>
+<div class="word form">
+<h1 id="printed-publication" class="title">Printed publication</h1>
+<p>⤷ A type of publication that uses a printing technique such as offset, inkjet, risoprint, and so on.</p>
+<p>⤷ commonly use surfaces and ink as primarily elements</p>
+</div>
+<div class="word form process">
+<h1 id="riso-printing" class="title">RISO printing</h1>
+<p>⤷ Risograph is a brand of digital duplicators that are designed mainly for high-volume photocopying and printing.</p>
+<p>⤷ The process creates <strong>micro-imperfections in printing</strong>, similar to spontaneity, or even comparable to how improvisation in jazz can lead to an unexpected but pleasant result. <a href="https://odotoo.com/risograph/">⤴</a></p>
+</div>
+<div class="word proposition">
+<h1 id="agency" class="title">Agency</h1>
+<p>⤷ It is defined as the capacity of individuals to act independently and to make their own free choices. On publishing it suggests to take responsability of the public-action. Publication as an act. See with Urgent-craft.</p>
+</div>
+<div class="word proposition action">
+<h1 id="responsability" class="title">Responsability</h1>
+<p>⤷ The ability to respond.</p>
+<p>⤷ Being aware that publishing acts have an impact</p>
+</div>
+<div class="word form">
+<h1 id="word-processors" class="title">Word processors</h1>
+<p>⤷ Like Microsoft word. There is plenty open-source ones. See:</p>
+</div>
+<div class="word proposition situation">
+<h1 id="future-trash" class="title">Future-trash</h1>
+<p>⤷ Resisting burnout and future trash puts artist and their work in a good position to solve problems. By sustaining a publishing practice over time and creating objects that persist with meaning as their inherent value, artist publishers can continue to create, contribute to, and maintain the radically open, imaginative, accessible and inclusive community that makes up artist publishing. (Alex Arzt, pag 20, What Problems Can Artist Publishers Solve?)</p>
+<p>⤷¿Cuándo este objeto dejará de existir?</p>
+</div>
+<div class="word situation proposition">
+<h1 id="promiscuous-publishing" class="title">Promiscuous Publishing</h1>
+<p>⤷ “A promiscuous publication is NOT like parallel, hybrid, or cross-media publishing. It is a multi-headed and polycentric form of making public. It enjoys its various forms, and embraces their idiosyncracies. As a multi-headed publication it is NOT obsessed with providing uniform outcomes across diverse media. Having many centers, it can produce new focal points and obfuscate its origins. It explores playfully a spectral diversity with sibling out-comes and bastard children that operate out of sync or tune.” (Christoph Haag, make make do in: The Techno-Galactic Guide to Software Observation, 2016) <a href="https://constantvzw.org/wefts/webpublications.en.html">⤴</a></p>
+</div>
+<div class="word proposition process">
+<h1 id="do-it-yourself-diy" class="title">Do-it-yourself (DIY)</h1>
+<p>⤷ Using your own resources and skills to make possible a publication.</p>
+<p>⤷ La autogestion y procesos autonomos están relacionados con DIY</p>
+</div>
+<div class="word process proposition">
+<h1 id="do-it-yourself-with-others-diywo" class="title">Do-it-yourself-with-others (DIYWO)</h1>
+<p>⤷ It reminds me Sympoesis.</p>
+<p>⤷ Hacer las cosas con otros</p>
+<p>⤷ Is a difficult process that requiares a lot of energy</p>
+</div>
+<div class="word form hyperlink">
+<h1 id="fanzine" class="title">Fanzine</h1>
+<p>⤷ El fanzine es el libro más simple del mundo. <a href="https://files.cargocollective.com/c1032387/publicacion-independiente-PRINT.pdf#page=12">⤴</a></p>
+<p>⤷ Se puede hacer e imprimir de infinitas formas. Es normal hacer fotocopias, siendo la opción más barata, accesible, y democrática. <a href="https://files.cargocollective.com/c1032387/publicacion-independiente-PRINT.pdf#page=12">⤴</a></p>
+<p>⤷ Considerado más “under”/rudimentario, es una excelente herramienta para difundir ideas políticas y urgentes. <a href="https://files.cargocollective.com/c1032387/publicacion-independiente-PRINT.pdf#page=12">⤴</a></p>
+<p>⤷ Usually free or just to cover production expenses and transportation</p>
+<p>⤷ Produced using home office equipment</p>
+<p>⤷ Quick, cheap, small and non-pretentious</p>
+</div>
+<div class="word form situation">
+<h1 id="festival" class="title">Festival</h1>
+<p>⤷ On publishing, festivals are events that congregates creators, editors, publishers and readers that are interested into share and encounter books, fanzines, panflets, objects and so on.</p>
+<p>⤷ Events created to enhance community building</p>
+<p>⤷ Festival may expand the individual practice into multiple collective ones.</p>
+</div>
+<div class="word form language">
+<h1 id="markdown-word-processing-format" class="title">Markdown: word processing format</h1>
+<p>⤷ Markdown’s syntax is intended for one purpose: to be used as a format for writing for the web.</p>
+<p>⤷ Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a publishing format; Markdown is a writing format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in plain text. <a href="https://daringfireball.net/projects/markdown/syntax#overview">⤴</a></p>
+<p>⤷ This format can be useful for text projects that need to adapt to different formats</p>
+<p>⤷ This glossary uses the markdown format. Check it here: <a href="https://hub.xpub.nl/soupboat/pad/p/camilo_glossary">⤴</a></p>
+</div>
+<div class="word proposition action process">
+<h1 id="small-edition" class="title">Small-edition</h1>
+<p>⤷ Make less than 1000 units of a publication.</p>
+<p>⤷ Small editions may focus their energies on circulating through individuals that care about it</p>
+</div>
+<div class="word logic">
+<h1 id="low-cost" class="title">Low cost</h1>
+<p>⤷ Using a small budget to produce a publication.</p>
+</div>
+<div class="word form situation">
+<h1 id="archive" class="title">Archive</h1>
+<p>⤷ A <strong>collection of pieces</strong> of information generally related to past times.</p>
+<p>⤷ made by records providing evidential information</p>
+</div>
+<div class="word proposition logic action">
+<h1 id="sustainability" class="title">Sustainability</h1>
+<p>⤷ On publishing, to be aware of the resources used to create, maintain and circulate a publication</p>
+<p>⤷ What type of printing process are you using? Do you know where the materias come from? What type of inks are you using? What’s the impact of your digital publication’s infrastructure?</p>
+</div>
+<div class="word propositon action">
+<h1 id="open-source" class="title">Open source</h1>
+<p>⤷</p>
+</div>
+<div class="word process">
+<h1 id="infrastructure" class="title">Infrastructure</h1>
+<p>⤷ What makes possible the structure. The underneath processes and materials that sustain a publication.</p>
+<p>⤷ It could be the tools we use to create, host or publish them.</p>
+</div>
+<div class="word proposition process action">
+<h1 id="self-hosting" class="title">Self-Hosting</h1>
+<p>⤷</p>
+</div>
+<div class="word form process situation">
+<h1 id="layout" class="title">Layout</h1>
+<p>⤷ How things are organized in the space</p>
+<p>⤷ Visual structures can suggest conceptual structures</p>
+</div>
+<div class="word form">
+<h1 id="e-reader-hardware" class="title">E-reader hardware</h1>
+<p>⤷ The device used to display EPUBs such as Kindle, Komo…etc.</p>
+</div>
+<div class="word process language">
+<h1 id="e-reader-software" class="title">E-reader software</h1>
+<p>⤷</p>
+</div>
+<div class="word process tool">
+<h1 id="bookbinding" class="title">bookbinding</h1>
+<p>⤷ Bookbinding is the process of physically assembling a book of codex format from an ordered stack of paper sheets that are folded together.</p>
+<p>⤷ There are different types of binding, here you can find a usefull guide for</p>
+</div>
+<div class="word form tool">
+<h1 id="plain-text" class="title">Plain text</h1>
+<p>⤷ Text without any visual formatting (such as bold, italic, font types and sizes, clickable hyperlinks, etc.)</p>
+<p>⤷ ASCII is the oldest and still most common plain-text format</p>
+</div>
+<div class="word form process">
+<h1 id="wysiwyg" class="title">WYSIWYG</h1>
+<p>⤷ (what you see is what you get)</p>
+</div>
+<div class="word">
+<h1 id="logical-semantic-markup" class="title">Logical-semantic markup</h1>
+<p>⤷</p>
+</div>
+<div class="word language">
+<h1 id="html" class="title">HTML</h1>
+<p>⤷ (hyper text Markup Language)</p>
+</div>
+<div class="word situation action">
+<h1 id="paged-centred" class="title">Paged-centred</h1>
+<p>⤷ Publications that are tought around the idea of a page.</p>
+<p>⤷ What is beyond a page within publishing?</p>
+</div>
+<div class="word form process">
+<h1 id="reflow-able-layout" class="title">Reflow-able layout</h1>
+<p>⤷</p>
+</div>
+<div class="word logic form">
+<h1 id="hyperlinks" class="title">Hyperlinks</h1>
+<p>⤷</p>
+</div>
+<div class="word form hyperlink">
+<h1 id="website" class="title">Website</h1>
+<p>⤷ At its simplest, a website is a folder of text files broadcast from a computer to the rest of the world. [⤴] (https://solarpunk.cool/zines/web-zine-01/introduction.html)</p>
+</div>
+<div class="word form proposition hyperlink">
+<h1 id="web-zine" class="title">Web-zine</h1>
+<p>⤷ I want to see more personal websites because a handmade web is magical and good.</p>
+<p>⤷ [⤴] (https://solarpunk.cool/zines/web-zine-01/introduction.html)</p>
+</div>
+<div class="word process action">
+<h1 id="one-to-one" class="title">One-to-one:</h1>
+<p>⤷ Single publication published in different media</p>
+</div>
+<div class="word process action">
+<h1 id="one-to-many" class="title">One-to-many:</h1>
+<p>⤷ Single publication that has different appearances in different media</p>
+</div>
+<div class="word process action">
+<h1 id="one-to-database" class="title">One-to-database:</h1>
+<p>⤷ Publication based on the content of the data base which can be used in a number of ways</p>
+</div>
+<div class="word proposition action">
+<h1 id="discourse" class="title">Discourse</h1>
+<p>⤷</p>
+</div>
+<div class="word situation logic">
+<h1 id="speed" class="title">Speed</h1>
+<p>⤷</p>
+</div>
+<div class="word proposition logic situation">
+<h1 id="afterlife" class="title">Afterlife</h1>
+<p>⤷ How to make the <strong>content relevant again</strong>? Re-using it for different contexts.</p>
+</div>
+<div class="word action proposition">
+<h1 id="non-hasty" class="title">Non-hasty</h1>
+<p>⤷</p>
+</div>
+<div class="word process situation">
+<h1 id="reader" class="title">Reader</h1>
+<p>⤷</p>
+</div>
+<div class="word situation action proposition">
+<h1 id="post-digital" class="title">Post-digital</h1>
+<p>⤷ Utilizar los recursos que sean necesarios con las circuntancias contextuales particulares actuales.</p>
+<p>⤷ To leave behind the digital hype?</p>
+<p>⤷ The “post-digital mindset” allows a more inclusive research framework of the publishing field, in which e-books and book-apps aren’t the only object of study and where “old” and “new” media are not in a natural opposition. In the field of post-digital publishing, printed matter doesn’t belong to the past and digital tools are not inherently innovative. <a href="https://ia800509.us.archive.org/15/items/p-dpa_booklet/p-dpa_booklet.pdf">⤴</a></p>
+<p>⤷ Beyond hyped mediums, what is the one that adjust the most to this project?</p>
+<p>⤷ To make <strong>contextual decisions</strong> within a publication.</p>
+</div>
+<div class="word form action project">
+<h1 id="anaphora" class="title">Anaphora</h1>
+<p>⤷ Insistent prosody.</p>
+<p>⤷ To insist. To state. To make an insistent statement <a href="https://thenewbridgeproject.com/product/why-publish-noise-miekal-and/">⤴</a></p>
+</div>
+<div class="word form process">
+<h1 id="manifesto" class="title">Manifesto</h1>
+<p>⤷ A reflection that <strong>drives action</strong>.</p>
+</div>
+<div class="word situation action logic">
+<h1 id="post-colonial" class="title">Post-colonial</h1>
+<p>⤷</p>
+</div>
+<div class="word form proposition logic">
+<h1 id="fragmented" class="title">Fragmented</h1>
+<p>⤷</p>
+</div>
+<div class="word situation">
+<h1 id="habit" class="title">Habit</h1>
+<p>⤷</p>
+</div>
+<div class="word situation process form">
+<h1 id="frustration" class="title">Frustration</h1>
+<p>⤷</p>
+</div>
+<div class="word form action">
+<h1 id="newsletter" class="title">Newsletter</h1>
+<p>⤷</p>
+</div>
+<div class="word form action">
+<h1 id="syllabus" class="title">Syllabus</h1>
+<p>⤷</p>
+</div>
+<div class="word situation action">
+<h1 id="audience" class="title">Audience</h1>
+<p>⤷</p>
+</div>
+<div class="word proposition action situation process">
+<h1 id="meme-ability" class="title">Meme-ability</h1>
+<p>⤷</p>
+</div>
+<div class="word situation logic">
+<h1 id="communal" class="title">Communal</h1>
+<p>⤷</p>
+</div>
+<div class="word situation action form">
+<h1 id="community" class="title">Community</h1>
+<p>⤷</p>
+</div>
+<div class="word situation action process proposition">
+<h1 id="community-building" class="title">Community-building</h1>
+<p>⤷</p>
+</div>
+<div class="word action logic">
+<h1 id="political-act" class="title">Political act</h1>
+<p>⤷</p>
+</div>
+<div class="word agent logic">
+<h1 id="editor" class="title">Editor</h1>
+<p>⤷</p>
+</div>
+<div class="word process logic">
+<h1 id="filtering" class="title">Filtering</h1>
+<p>⤷</p>
+</div>
+<div class="word process logic">
+<h1 id="amplification" class="title">Amplification</h1>
+<p>⤷</p>
+</div>
+<div class="word process logic action">
+<h1 id="caring" class="title">Caring</h1>
+<p>⤷</p>
+</div>
+<div class="word logic situation">
+<h1 id="ambiguity" class="title">Ambiguity</h1>
+<p>⤷</p>
+</div>
+<div class="word process situation">
+<h1 id="continuity" class="title">Continuity</h1>
+<p>⤷</p>
+</div>
+<div class="word logic form">
+<h1 id="dialogue" class="title">Dialogue</h1>
+<p>⤷</p>
+</div>
+<div class="word form action proposition">
+<h1 id="dissonance" class="title">Dissonance</h1>
+<p>⤷</p>
+</div>
+<div class="word logic situation">
+<h1 id="gathering" class="title">Gathering</h1>
+<p>⤷</p>
+</div>
+<div class="word proposition logic action">
+<h1 id="mutation" class="title">Mutation</h1>
+<p>⤷</p>
+</div>
+<div class="word logic situation action proposition">
+<h1 id="reciprocity" class="title">Reciprocity</h1>
+<p>⤷</p>
+</div>
+<div class="word action logic proposition">
+<h1 id="regenerative" class="title">Regenerative</h1>
+<p>⤷ Regeneration has its origins in ecology: <strong>taking care</strong> of the soil and preventing it from depletion. Nowadays, the idea has broadened and refers to caring in a general sense: caring for the living world, the cultural heritage and our fellow human beings, both now and in the future. [⤴] (https://common-in.nl/slider/#slide3)</p>
+</div>
+<div class="word logic situation">
+<h1 id="autopoiesis" class="title">Autopoiesis</h1>
+<p>⤷ The term autopoiesis (from Greek αὐτo- (auto-) ‘self’, and ποίησις (poiesis) ‘creation, production’) refers to a system capable of reproducing and <strong>maintaining itself</strong> by creating its own parts and eventually further components.</p>
+<p>⤷ De qué manera lo vivo se crea a sí mismo?</p>
+</div>
+<div class="word logic situation proposition">
+<h1 id="sympoiesis" class="title">Sympoiesis</h1>
+<p>⤷ It is a term that referes the act of <strong>‘making with’</strong></p>
+<p>⤷ Beyond Autopoiesis, Sympoiesis is a form of self-making that can only happen collectively and collaboratively.</p>
+<p>⤷</p>
+</div>
+<div class="word proposition logic action">
+<h1 id="transformation" class="title">Transformation</h1>
+</div>
+<div class="word form action">
+<h1 id="drawing" class="title">Drawing</h1>
+<p>⤷ The act to trace on a surface.</p>
+<p>⤷ Explore with a pencil the shape of things.</p>
+<p>⤷ A <strong>tool for meditation</strong>.</p>
+</div>
+<div class="word form action logic">
+<h1 id="knoting" class="title">Knoting</h1>
+<p>⤷</p>
+</div>
+<div class="word form action logic">
+<h1 id="link" class="title">Link</h1>
+<p>⤷</p>
+</div>
+<div class="word form action logic">
+<h1 id="tangle" class="title">Tangle</h1>
+<p>⤷</p>
+</div>
+<div class="word action">
+<h1 id="cross-references" class="title">Cross-references</h1>
+<p>⤷</p>
+</div>
+<div class="word form process">
+<h1 id="real-time-data" class="title">Real-time data</h1>
+<p>⤷</p>
+</div>
+<div class="word form process logic tool">
+<h1 id="rss-really-simple-syndication" class="title">RSS: Really Simple Syndication</h1>
+<p>⤷</p>
+</div>
+<div class="word form tool">
+<h1 id="screen" class="title">Screen</h1>
+<p>⤷ “screen based publishing is intimate in my opinion, as it reaches the space of personal screens often in intimate spaces, but it establishes a <strong>remote intimacy</strong>, as the publisher is not necessarily meant to be present on the other side and his or her body is certainly distant and invisible” (alessandro Ludovico)</p>
+</div>
+<div class="word situation action logic">
+<h1 id="rumiante" class="title">Rumiante</h1>
+<p>⤷ lentitud / animalidad / el estigma vaca / la carne / el no saber cómo decir pero ir rumiando</p>
+<p>⤷ Los rumiantes, como los bovinos, tienen un complejo sistema de digestión que les permite aprovechar eficientemente los nutrientes de los alimentos, inclusive los de baja calidad nutricional. La rumia debe hacerse en un lugar cómodo, plano, con sombra, para poder echarse. El rumiante procurará contar con las condiciones necesarias para poder rumiar cómodamente. Buscará entonces las condiciones de posibilidad, es decir lugar cómodo y seguro, entre afines que lo sostengan.</p>
+<p>⤷ El rumiante es irreverente e iconoclasta.</p>
+<p>⤷ No cree en ideas propias, se sabe no original. Sabe que siempre que habla, traduce</p>
+<p>⤷ El rumiante apuesta por un ejercicio de <strong>invención política</strong> que es colectivo, siempre. Procura darse, para sí y su comunidad, herramientas, y entiende que estas herramientas no son algo a lo que se llega, sino que están en constante construcción.</p>
+<p>⤷ En su acción de rumiar, rinde tributo al proceso y no al producto acabado.</p>
+<p>⤷ El rumiante es precaria, y como precaria ha desafiado al futuro.</p>
+<p>⤷ <strong>El futuro no es nuestro</strong>. <strong>No hay futuro</strong>. No hay tiempo. <strong>El rumiante es lento</strong>. (Lucresia Masson, Epistemología rumiante)</p>
+</div>
+<div class="word proposition form action process">
+<h1 id="procesual-book" class="title">Procesual Book</h1>
+<p>⤷ Its a book that is in constant creation and formation</p>
+<p>⤷ <strong>Living Books</strong> about life is one example <a href="https://www.livingbooksaboutlife.org/">⤴</a></p>
+</div>
+<div class="word proposition action">
+<h1 id="proposition" class="title">Proposition</h1>
+<p>⤷ The <strong>act of offering</strong> (an idea) for consideration.</p>
+</div>
+<div class="word form">
+<h1 id="form" class="title">Form</h1>
+<p>⤷ The shape and structure of something as distinguished from its material</p>
+</div>
+<div class="word action">
+<h1 id="action" class="title">Action</h1>
+<p>⤷ The shape and structure of something as distinguished from its material</p>
+</div>
+<div class="word logic">
+<h1 id="logic" class="title">Logic</h1>
+<p>⤷ the arrangement of circuit elements (as in a computer) needed for computation.</p>
+<p>⤷ Any system of thought, whether rigorous and productive or not.</p>
+<p>⤷ A system of reasons and processes articulated.</p>
+</div>
+<div class="word hyperlink">
+<h1 id="project" class="title">Project</h1>
+<p>⤷</p>
+</div>
+<div class="word logic proposition">
+<h1 id="madularity" class="title">Madularity</h1>
+<p>⤷ Building blocks logic to build up something.</p>
+<p>⤷ What aspects of modularity in publishing are making meaningful connections between parts?</p>
+<p>⤷</p>
+</div>
+ 
+    </div>
+    </body>
+        <script>
+            const action = document.getElementsByClassName("action");
+    for (let i = 0; i < action.length; i++){
+action[i].innerHTML += "<span class='symbol action-s'>A</span>";
+}
+
+const situation = document.getElementsByClassName("situation");
+    for (let i = 0; i < situation.length; i++){
+situation[i].innerHTML += "<span class='symbol situation-s'>S</span>";
+}
+
+const logic = document.getElementsByClassName("logic");
+    for (let i = 0; i < logic.length; i++){
+logic[i].innerHTML += "<span class='symbol logic-s'>C</span>";
+}
+
+const proposition = document.getElementsByClassName("proposition");
+    for (let i = 0; i < proposition.length; i++){
+proposition[i].innerHTML += "<span class='symbol proposition-s'>T</span>";
+}
+
+const hyperlink = document.getElementsByClassName("hyperlink");
+    for (let i = 0; i < hyperlink.length; i++){
+hyperlink[i].innerHTML += "<span class='symbol hyperlink-s'>N</span>";
+}
+
+const process = document.getElementsByClassName("process");
+    for (let i = 0; i < process.length; i++){
+process[i].innerHTML += "<span class='symbol process-s'>P</span>";
+}
+
+const language = document.getElementsByClassName("language");
+    for (let i = 0; i < language.length; i++){
+language[i].innerHTML += "<span class='symbol language-s'>G</span>";
+}
+
+const agent = document.getElementsByClassName("agent");
+    for (let i = 0; i < agent.length; i++){
+agent[i].innerHTML += "<span class='symbol agent-s'>E</span>";
+}
+
+const tool = document.getElementsByClassName("tool");
+    for (let i = 0; i < tool.length; i++){
+tool[i].innerHTML += "<span class='symbol tool-s'>T</span>";
+}
+
+const form = document.getElementsByClassName("form");
+    for (let i = 0; i < form.length; i++){
+form[i].innerHTML += "<span class='symbol form-s'>Y</span>";
+}
+
+
+        </script>
+        <script src="main.js"></script>
+    </html>
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..5ada602
--- /dev/null
+++ b/main.js
@@ -0,0 +1,102 @@
+///////// filters with buttons ///////////
+
+filterSelection("all")
+function filterSelection(c) {
+  var x, i;
+  x = document.getElementsByClassName("word");
+  if (c == "all") c = "";
+  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
+  for (i = 0; i < x.length; i++) {
+    w3RemoveClass(x[i], "show");
+    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
+  }
+}
+
+// Show filtered elements
+function w3AddClass(element, name) {
+  var i, arr1, arr2;
+  arr1 = element.className.split(" ");
+  arr2 = name.split(" ");
+  for (i = 0; i < arr2.length; i++) {
+    if (arr1.indexOf(arr2[i]) == -1) {
+      element.className += " " + arr2[i];
+    }
+  }
+}
+
+// Hide elements that are not selected
+function w3RemoveClass(element, name) {
+  var i, arr1, arr2;
+  arr1 = element.className.split(" ");
+  arr2 = name.split(" ");
+  for (i = 0; i < arr2.length; i++) {
+    while (arr1.indexOf(arr2[i]) > -1) {
+      arr1.splice(arr1.indexOf(arr2[i]), 1);
+    }
+  }
+  element.className = arr1.join(" ");
+}
+
+// Add active class to the current control button (highlight it)
+var btnContainer = document.getElementById("legend");
+var btns = btnContainer.getElementsByClassName("btn");
+for (var i = 0; i < btns.length; i++) {
+  btns[i].addEventListener("click", function() {
+    var current = document.getElementsByClassName("active");
+    current[0].className = current[0].className.replace(" active", "");
+    this.className += " active";
+  });
+}
+
+
+/////////////. ADD SNIPPETS TO A DIV ../////////
+
+var snippet = document.getElementsByTagName("strong");
+var sptContainer = document.getElementById("sptContainer");
+
+for (var i = 0; i < snippet.length; i++) {
+    sptContainer.innerHTML += "<button class='btn snippet'>"+ snippet[i].innerText + "</button>";
+}
+
+
+//////////// Randomise Font ////////////////
+
+// JavaScript code to pick 
+// a random color from array
+function pickColor() {
+
+    // Array containing colors
+    var colors = [
+        '#ff0000', '#00ff00', '#0000ff',
+        '#ff3333', '#ffff00', '#ff6600'
+    ];
+
+    // selecting random color
+    var random_color = colors[Math.floor(
+            Math.random() * colors.length)];
+
+    var x = document.getElementById('pick');
+    x.style.color = random_color;
+} 
+
+
+//////////Search Bar ////////////////////
+
+
+function search_word() {
+    let input = document.getElementById('search').value;
+    input=input.toLowerCase();
+    let x = document.getElementsByClassName('word');
+      
+    for (i = 0; i < x.length; i++) { 
+        if (!x[i].innerHTML.toLowerCase().includes(input)) {
+            x[i].style.display="none";
+        }
+        else {
+            x[i].style.display="show";                 
+        }
+    }
+}
+
+
+
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..f715df8
--- /dev/null
+++ b/style.css
@@ -0,0 +1,234 @@
+:root {
+  --blue: #1e90ff;
+  --white: #ffffff;
+}
+
+@font-face {
+    font-family: Fluxisch;
+    src: url(fonts/FLuxisch_ElseWeb_font/FluxischElse-Regular.woff);
+}
+
+@font-face {
+    font-family: symbols1;
+    src: url(fonts/symbols.woff) format("woff");
+}
+
+@font-face {
+    font-family: mono;
+    src: url(fonts/diatype-semi-mono-regular.woff) format("woff");
+}
+
+body {
+    font-size: 16pt;
+    font-family: mono;        
+    margin:0;
+}
+
+hr {
+    background: black;
+    height: 0.1pt;
+    margin: 0;
+}
+
+h1 {
+    font-size: 20pt;
+    font-family: Fluxisch; 
+    font-style: bold;
+    margin-top: 10pt;
+    margin-bottom:10pt;
+    
+}
+
+h2 {
+    font-size: 20pt;
+    font-family: Fluxisch; 
+    font-style: bold;
+    margin-top: 10pt;
+    margin-bottom:10pt;
+    margin-right: 0;
+}
+
+p {
+    margin-top: 2pt;
+    margin-bottom: 2pt;
+}
+
+strong {
+    font-weight: normal;
+}
+
+ul {
+    margin: 0%;
+    padding: 0%;
+}
+
+a {
+    font-size: 18pt;
+    font-family: mono;   
+    color:blue;
+    text-decoration:none;
+}
+
+.head{
+    display:flex;
+    justify-content: space-between;
+    margin-left: 15pt;
+    margin-right: 15pt;
+
+}
+
+.head a{
+    margin-top: 10pt;
+    margin-bottom:10pt;
+}
+
+.description p{
+    margin-top: 10pt;
+    margin-bottom: 10pt;
+    margin-left: 15pt;
+    margin-right: 15pt;
+    text-indent: 20pt;
+}
+
+#sptContainer {
+    margin-top: 10pt;
+    margin-bottom: 10pt;
+    margin-left: 15pt;
+    margin-right: 15pt;
+    text-indent: 20pt;
+}
+
+
+.question input{
+    width:500px;
+    font-size: 14pt;
+    padding-top: 3pt;
+    padding-right: 8pt;
+    padding-left: 8pt;
+    padding-bottom: 3pt;
+    margin-left: 15pt;
+    margin-right: 2pt;
+    margin-top: 14pt;
+    color:white;
+    background-color:black;
+    border-radius: 8pt; 
+}
+
+
+.legend{
+    display:flex;
+    flex-wrap: wrap;
+    margin-left: 15pt;
+    margin-right: 15pt;
+    margin-top: 10pt;
+    margin-bottom: 10pt;
+}
+
+.btn{
+    background: white;
+    font-size: 20pt;
+    border-radius: 8pt; 
+    border:  1.2pt solid black;
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 20px 0 rgba(0,0,0,0);
+    padding-top: 3pt;
+    padding-right: 8pt;
+    padding-left: 8pt;
+    padding-bottom: 3pt;
+    margin-left: 2pt;
+    margin-right: 2pt;
+    margin-top: 1pt;
+    margin-bottom: 1pt;
+    cursor: pointer;
+    
+}
+
+.btn:hover {
+    box-shadow: 0 0px 16px 0 rgba(0,0,0,0.24), 0 0px 16px 0 rgba(0,0,0,0.19);
+}
+
+.btn.active {
+    box-shadow: 0 0px 16px 0 rgba(0,0,0,0.24), 0 0px 16px 0 rgba(0,0,0,0.19);
+}
+
+.btn.snippet {
+    background:white;
+    font-family: serif;
+    font-style: italic;
+}
+
+.diffraction{
+    display: none;
+    flex-wrap: wrap;
+    object-fit: contain;
+    margin-left: 15pt;
+    width: 100%;
+}
+
+img{
+    width: 11.8%;
+}
+
+.words {
+/*     -webkit-column-count: 3;
+    -moz-column-count: 3;
+        column-count: 3;
+    -webkit-column-width: 400px;
+    -moz-column-width: 400px;
+        column-width: 400px;
+    overflow: hidden; */
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
+    gap: 1.3rem;
+    margin-top: 10pt;
+    margin-left: 15pt;
+    margin-right: 15pt;
+}
+
+.word {
+    display: none;
+    margin-top: 7pt;
+    margin-bottom: 7pt;
+}
+
+.show {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start; 
+}
+
+
+.word p{
+    order:2;
+}
+
+.title {
+    /* border: solid 0.3pt; */
+    font-size: 20pt;
+    font-weight:bold;
+    font-family: Fluxisch;
+    padding: 0%;
+
+    /* width: 20%; */
+    margin-top: -0.5pt;
+    margin-left: 2vw;
+    margin-right: 0.5vw;
+    margin-bottom: 0;
+
+    text-decoration: underline 1pt;     
+    text-decoration-color:black; 
+}
+
+.symbol {
+    order:1;
+    color:black;
+    margin-top: -5pt;
+    font-family: symbols1;
+    font-size: 20pt;
+    cursor: pointer;
+    transition: color .5s;
+}
+
+
+
+
+