new stuff and some color

master
Camilo G 2 years ago
parent 7a696cc75c
commit 872410de6c

Binary file not shown.

@ -12,18 +12,25 @@
<body id="glo_body"> <body id="glo_body">
<div class="head"> <div class="head">
<h1 id="title"> Living Glossary for a Diffractive Publishing Practice </h1> <h1 id="title"> Living Glossary for a Diffractive Publishing Practice </h1>
<div class="question"> <p>Colophon</p>
<input id="search" type="text" ><span onclick="document.getElementById('search').value= ''"></span>
</div>
<a href="rss.xml"> <a href="rss.xml">
<p>follow what is new (rss)</p> (rss)</p>
</a> </a>
</div> </div>
<div class="description"> <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> <div id="intro">
<p>The current state of the glossary was made during different workshop sessions were practitioners are invited to question, reflect and diffract on the current publishing practice. Based on the previous state of the glossary, this sessions are called Rumination Sessions as a performance of multiple digestion. The participants added new entries, annotated on previous ones, highlighted snippets of it, bring up questions. The process aims to re-think and create collectively every word definition as a layering of annotations. Unlike traditional glossaries, in this glossary words are open to interpretation, expansion and mostly transformation. </p> <p>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, we 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 living materiality.</p>
<p>This glossary is an ongoing and ever-transforming attempt to introduce a diffractive methodology inside publishing practices at large, from the understanding of publishing as the act of making public. It is organized as a bag of words that gathers different annotations on words instead of closed definitions. Words are tools, concepts, resources, shapes that have properties that enhance new possibilities. Words in this glossary don't close the publishing scenario to a territorial one in arts, design or so. They are porous and permeable to other spheres of action.</p>
<p>Because the glossary is seen as mutable, the current state is a result of collective workshops were participants are invited to think and converse around its words and annotations. During the workshop, diffraction performs a conscious interconnection of practices beyond reflection.</p>
<p>If you want to contribute adding new words, annotations or properties, please check the source pad and read the instructions.</p>
</div>
<div id="panel">
<div class="question">
<input id="search" type="text" ><span onclick="document.getElementById('search').value=''"></span>
</div>
<div id="legend" class="legend"></div>
</div>
</div> </div>
<div id="legend" class="legend"></div>
<div id="words" class="words"></div> <div id="words" class="words"></div>
</div> </div>
</body> </body>

@ -33,98 +33,36 @@ fetch("glossary.json").then(response => response.json()).then(data => glossary =
` `
} }
function wordTemplate(word) { function wordTemplate(word) {
return ` return `
<div class="word ${word.properties.map(properties).join(" ")}"> <div class="word ${word.properties.map(properties).join(" ")}">
<h1 class="title">${word.title}</h1> <h1 class="title">${word.title}</h1> ${word.properties.map(symbols).join("")}
${word.voices.map(voices).join('')} ${word.voices.map(voices).join('')}
</div> </div>
` `
} }
function symbols(symbol){
return `<span class='symbol-word ${symbol.title}-s'>${symbol.symbol}</span>`;
}
function legendTemplate(prop){ function legendTemplate(prop){
return ` return `
<button id="${prop.title}" class="btn" style="color: ${prop.color};" "onclick="filterSelection('${prop.title}')">${prop.title} → <span class="symbol" style="color: ${prop.color};" >${prop.symbol}</span></button> <button type="button" id="${prop.title}" class="btn symbol-leg" onmouseover="showsymbol('${prop.title}')" onclick="filterSelection('${prop.title}');activeclass('${prop.title}');">${prop.symbol}<span class="leg_titles" style="color:${prop.color}">:${prop.title}</span></button>
` `
} }
document.getElementById("words").innerHTML = `${words_bag.map(wordBag).join("")}` document.getElementById("words").innerHTML = `${words_bag.map(wordBag).join("")}`
document.getElementById("legend").innerHTML = ` document.getElementById("legend").innerHTML = `<button type="button" class="btn active" onclick="filterSelection('all');activeclass();"> Common Ground </button> ${properties_bag.map(propBag).join("")}`
<button class="btn active" onclick="filterSelection('all')">properties</button>
${properties_bag.map(propBag).join("")}
`
// function symbols(symbol){
// return `
// <span class='symbol ${symbol.title}-s'>${symbol.symbol}</span>
// `
// }
// 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>";
// }
}); ///// END OF FETCH!!!!!! }); ///// END OF FETCH!!!!!!
///////// Filters with buttons ///////////
///////// filters with buttons ///////////
filterSelection("all")
function filterSelection(c) { function filterSelection(c) {
var x, i; var x, i;
x = document.getElementsByClassName("word"); x = document.getElementsByClassName("word");
@ -136,7 +74,8 @@ function filterSelection(c) {
} }
} }
// Show filtered elements ////////// Show filtered elements //////////
function w3AddClass(element, name) { function w3AddClass(element, name) {
var i, arr1, arr2; var i, arr1, arr2;
arr1 = element.className.split(" "); arr1 = element.className.split(" ");
@ -148,7 +87,8 @@ function w3AddClass(element, name) {
} }
} }
// Hide elements that are not selected ////////// Hide elements that are not selected //////
function w3RemoveClass(element, name) { function w3RemoveClass(element, name) {
var i, arr1, arr2; var i, arr1, arr2;
arr1 = element.className.split(" "); arr1 = element.className.split(" ");
@ -164,13 +104,13 @@ function w3RemoveClass(element, name) {
// Add active class to the current control button (highlight it) // Add active class to the current control button (highlight it)
var btnContainer = document.getElementById("legend"); var btnContainer = document.getElementById("legend");
var btns = btnContainer.getElementsByClassName("btn"); var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() { function activeclass(btn){
var current = document.getElementsByClassName("active"); var btn = document.getElementById(btn)
current[0].className = current[0].className.replace(" active", ""); var current = document.getElementsByClassName("active");
this.className += " active"; current[0].className = current[0].className.replace(" active", "");
}); btn.className += " active";
} };
/////////////. ADD SNIPPETS TO A DIV ..///////// /////////////. ADD SNIPPETS TO A DIV ../////////
@ -182,28 +122,6 @@ for (var i = 0; i < snippet.length; i++) {
sptContainer.innerHTML += "<button class='btn snippet'>"+ snippet[i].innerText + "</button>"; 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 //////////////////// //////////Search Bar ////////////////////
@ -222,5 +140,14 @@ function search_word() {
} }
} }
//////// symbols show ////
function showsymbol(btn){
var btn = document.getElementById(btn);
var sym = btn.getElementsByClassName("leg_titles");
console.log(sym)
sym[0].className += " on";
}

@ -1,18 +1,20 @@
:root { :root {
--blue: #1e90ff; --blue: blue;
--white: #ffffff; --white: #e4e5e2;
--links-color: blue; --light-yellow: #ffffcc;
--body-text-color: rgb(20, 20, 20); --silver: #999999;
--action-color: rgb(31, 31, 31); --links-color: #3366ff;
--situation-color: aqua; --body-text-color: #3b3b3b;
--logic-color:orange; --action-color: #3366ff;
--proposition-color: rgb(255, 115, 96); --situation-color: #66cc66;
--hyperlink-color: pink; --logic-color:#ff9933;
--process-color: rgb(81, 241, 167); --proposition-color: #ff6633;
--language-color: violet; --hyperlink-color: #cc3333;
--agent-color: purple; --process-color: #66cc99;
--tool-color: lightblue; --language-color: #ffcc66;
--form-color: gold; --agent-color: #cc3333;
--tool-color: #4b2f2e;
--form-color: #003399;
} }
@font-face { @font-face {
@ -20,6 +22,11 @@
src: url(fonts/FLuxisch_ElseWeb_font/FluxischElse-Regular.woff); src: url(fonts/FLuxisch_ElseWeb_font/FluxischElse-Regular.woff);
} }
@font-face{
font-family: Picnic;
src: url(fonts/PicNic-Regular.woff);
}
@font-face { @font-face {
font-family: symbols1; font-family: symbols1;
src: url(fonts/symbols.woff) format("woff"); src: url(fonts/symbols.woff) format("woff");
@ -34,21 +41,16 @@ body {
font-size: 16pt; font-size: 16pt;
font-family: mono; font-family: mono;
margin:0; margin:0;
} background-color: var(--white);
color: var(--body-text-color);
hr {
background: var(--body-text-color);
height: 0.1pt;
margin: 0;
} }
h1 { h1 {
font-size: 20pt; font-size: 23pt;
font-family: Fluxisch; font-family: Fluxisch;
font-style: bold; font-style: bold;
margin-top: 10pt; margin-top: 10pt;
margin-bottom:10pt; margin-bottom:10pt;
} }
h2 { h2 {
@ -69,11 +71,6 @@ strong {
font-weight: normal; font-weight: normal;
} }
ul {
margin: 0%;
padding: 0%;
}
a { a {
font-size: 18pt; font-size: 18pt;
font-family: mono; font-family: mono;
@ -85,8 +82,9 @@ a {
display:flex; display:flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-left: 15pt; padding-left: 20pt;
margin-right: 15pt; padding-right: 15pt;
border-bottom: 1.6pt solid white;
} }
@ -95,101 +93,99 @@ a {
margin-bottom:10pt; margin-bottom:10pt;
} }
.description{ #title{
margin-bottom: 20pt; margin-top: 17pt;
}
.description p{
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{ .question input{
width:500px; width:10em;
font-size: 18pt; font-size: 16pt;
padding-top: 3pt; padding-top: 3pt;
padding-right: 8pt; padding-right: 8pt;
padding-left: 8pt; padding-left: 8pt;
padding-bottom: 3pt; padding-bottom: 3pt;
margin-left: 15pt; margin-left: 15pt;
margin-right: 2pt; margin-right: 2pt;
margin-top: 2pt; margin-top: 10pt;
color:rgb(3, 3, 3); color:var(--body-text-color);
background-color: white; background-color: var(--white);
border: 1.2pt solid black; border: 1.8pt solid white;
border-radius: 8pt; border-radius: 8pt;
} }
.description{
display: flex;
justify-content:flex-start;
align-items: start;
border-bottom: 1.6pt solid white;
}
.description p{
width: 100%;
margin-bottom: 10pt;
padding-left: 20pt;
padding-right: 15pt;
text-indent: 20pt;
}
#intro {
width: 70%;
padding-top: 10pt;
padding-right: 50pt;
border-right:1.6pt solid white;
}
#intro p{
text-indent: 20pt;
}
#panel {
width: 30%;
}
.legend{ .legend{
display:flex; display:flex;
flex-wrap: wrap; flex-wrap: wrap;
height: 100%;
margin-left: 15pt; margin-left: 15pt;
margin-right: 15pt; margin-right: 15pt;
margin-top: 10pt; padding-top: 10pt;
margin-bottom: 10pt; padding-bottom: 10pt;
} }
.btn{ .btn {
background: white; display: flex;
align-items: center;
background: var(--white) solid;
color: var(--body-text-color);
font-size: 18pt; font-size: 18pt;
border-radius: 8pt; border-radius: 8pt;
border: 1.2pt solid black; border: 1.6pt solid white;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 20px 0 rgba(0,0,0,0); box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 20px 0 rgba(0,0,0,0);
padding-top: 3pt; padding-top: 2pt;
padding-right: 8pt; padding-right: 8pt;
padding-left: 8pt; padding-left: 8pt;
padding-bottom: 3pt; padding-bottom: 2pt;
margin-left: 2pt; margin-left: 2pt;
margin-right: 2pt; margin-right: 2pt;
margin-top: 1pt; margin-top: 2pt;
margin-bottom: 1pt; margin-bottom: 2pt;
cursor: pointer;
} }
.btn:hover { .btn:hover {
box-shadow: 0 0px 16px 0 rgba(0,0,0,0.24), 0 0px 16px 0 rgba(0,0,0,0.19); box-shadow: 0 0px 10px 0 var(--silver), 0 0px 10px 0 var(--silver);
cursor: pointer;
} }
.btn.active { .btn.active {
box-shadow: 0 0px 16px 0 rgba(0,0,0,0.24), 0 0px 16px 0 rgba(0,0,0,0.19); box-shadow: 0 2px 0px 0px var(--silver), 0 0px 10px 0 var(--silver);
}
.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 { .words {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
gap: 0; gap: 0;
margin-top: 10pt;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
@ -215,29 +211,45 @@ img{
.title { .title {
/* border: solid 0.3pt; */ /* border: solid 0.3pt; */
font-size: 20pt; font-size: 21pt;
font-weight:bold; font-weight:bold;
font-family: Fluxisch; font-family: Fluxisch;
padding: 0%; padding: 0%;
/* width: 20%; */ /* width: 20%; */
margin-top: -0.5pt; margin-top: 1pt;
margin-left: 2vw; margin-left: 2vw;
margin-right: 0.5vw; margin-right: 0.5vw;
margin-bottom: 0; margin-bottom: 0;
text-decoration: underline 1pt; text-decoration: underline 1pt;
text-decoration-color:black; text-decoration-color: var(--body-text-color);
} }
.symbol { .symbol-leg {
order:1; color: var(--body-text-color);
color:black; font-family: symbols1;
font-size: 25pt;
padding-left: 10pt;
padding-right: 10pt;
}
.symbol-word {
color: var(--body-text-color);
margin-top: -5pt; margin-top: -5pt;
font-family: symbols1; font-family: symbols1;
font-size: 20pt; font-size: 20pt;
cursor: pointer; }
transition: color .5s;
.leg_titles{
display: none;
font-size: 18pt;
font-family: mono;
margin-left: 8pt;
}
.leg_titles.on {
display: inline;
} }
.action{ .action{

Loading…
Cancel
Save