diff --git a/fonts/PicNic-Regular.woff b/fonts/PicNic-Regular.woff new file mode 100755 index 0000000..df03c06 Binary files /dev/null and b/fonts/PicNic-Regular.woff differ diff --git a/index.html b/index.html index 96a5b40..2237046 100644 --- a/index.html +++ b/index.html @@ -12,18 +12,25 @@

Living Glossary for a Diffractive Publishing Practice

-
- -
+

Colophon

-

follow what is new (rss)

+ (rss)

-

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.

-

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.

+
+

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.

+

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.

+

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.

+

If you want to contribute adding new words, annotations or properties, please check the source pad and read the instructions.

+
+
+
+ +
+
+
-
diff --git a/main.js b/main.js index 048e231..f8c945a 100644 --- a/main.js +++ b/main.js @@ -33,98 +33,36 @@ fetch("glossary.json").then(response => response.json()).then(data => glossary = ` } + function wordTemplate(word) { return `
-

${word.title}

+

${word.title}

${word.properties.map(symbols).join("")} ${word.voices.map(voices).join('')}
` } + function symbols(symbol){ + return `${symbol.symbol}`; +} + function legendTemplate(prop){ return ` - + ` } document.getElementById("words").innerHTML = `${words_bag.map(wordBag).join("")}` - document.getElementById("legend").innerHTML = ` - - ${properties_bag.map(propBag).join("")} - ` - - // function symbols(symbol){ - // return ` - // ${symbol.symbol} - // ` - // } - - // const action = document.getElementsByClassName("action"); - // for (let i = 0; i < action.length; i++){ - // action[i].innerHTML += "A"; - // } - - // const situation = document.getElementsByClassName("situation"); - // for (let i = 0; i < situation.length; i++){ - // situation[i].innerHTML += "S"; - // } - - // const logic = document.getElementsByClassName("logic"); - // for (let i = 0; i < logic.length; i++){ - // logic[i].innerHTML += "C"; - // } - - // const proposition = document.getElementsByClassName("proposition"); - // for (let i = 0; i < proposition.length; i++){ - // proposition[i].innerHTML += "T"; - // } - - // const hyperlink = document.getElementsByClassName("hyperlink"); - // for (let i = 0; i < hyperlink.length; i++){ - // hyperlink[i].innerHTML += "N"; - // } - - // const process = document.getElementsByClassName("process"); - // for (let i = 0; i < process.length; i++){ - // process[i].innerHTML += "P"; - // } - - // const language = document.getElementsByClassName("language"); - // for (let i = 0; i < language.length; i++){ - // language[i].innerHTML += "G"; - // } - - // const agent = document.getElementsByClassName("agent"); - // for (let i = 0; i < agent.length; i++){ - // agent[i].innerHTML += "E"; - // } - - // const tool = document.getElementsByClassName("tool"); - // for (let i = 0; i < tool.length; i++){ - // tool[i].innerHTML += "T"; - // } - - // const form = document.getElementsByClassName("form"); - // for (let i = 0; i < form.length; i++){ - // form[i].innerHTML += "Y"; - // } - - - - - + document.getElementById("legend").innerHTML = ` ${properties_bag.map(propBag).join("")}` }); ///// END OF FETCH!!!!!! +///////// Filters with buttons /////////// - -///////// filters with buttons /////////// - -filterSelection("all") function filterSelection(c) { var x, i; x = document.getElementsByClassName("word"); @@ -136,7 +74,8 @@ function filterSelection(c) { } } -// Show filtered elements +////////// Show filtered elements ////////// + function w3AddClass(element, name) { var i, arr1, arr2; 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) { var i, arr1, arr2; arr1 = element.className.split(" "); @@ -164,13 +104,13 @@ function w3RemoveClass(element, name) { // 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"; - }); -} + +function activeclass(btn){ + var btn = document.getElementById(btn) + var current = document.getElementsByClassName("active"); + current[0].className = current[0].className.replace(" active", ""); + btn.className += " active"; +}; /////////////. ADD SNIPPETS TO A DIV ..///////// @@ -182,28 +122,6 @@ for (var i = 0; i < snippet.length; i++) { sptContainer.innerHTML += ""; } - -//////////// 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 //////////////////// @@ -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"; +} + diff --git a/style.css b/style.css index e4d7d71..aa2830c 100644 --- a/style.css +++ b/style.css @@ -1,18 +1,20 @@ :root { - --blue: #1e90ff; - --white: #ffffff; - --links-color: blue; - --body-text-color: rgb(20, 20, 20); - --action-color: rgb(31, 31, 31); - --situation-color: aqua; - --logic-color:orange; - --proposition-color: rgb(255, 115, 96); - --hyperlink-color: pink; - --process-color: rgb(81, 241, 167); - --language-color: violet; - --agent-color: purple; - --tool-color: lightblue; - --form-color: gold; + --blue: blue; + --white: #e4e5e2; + --light-yellow: #ffffcc; + --silver: #999999; + --links-color: #3366ff; + --body-text-color: #3b3b3b; + --action-color: #3366ff; + --situation-color: #66cc66; + --logic-color:#ff9933; + --proposition-color: #ff6633; + --hyperlink-color: #cc3333; + --process-color: #66cc99; + --language-color: #ffcc66; + --agent-color: #cc3333; + --tool-color: #4b2f2e; + --form-color: #003399; } @font-face { @@ -20,6 +22,11 @@ src: url(fonts/FLuxisch_ElseWeb_font/FluxischElse-Regular.woff); } +@font-face{ + font-family: Picnic; + src: url(fonts/PicNic-Regular.woff); +} + @font-face { font-family: symbols1; src: url(fonts/symbols.woff) format("woff"); @@ -34,21 +41,16 @@ body { font-size: 16pt; font-family: mono; margin:0; -} - -hr { - background: var(--body-text-color); - height: 0.1pt; - margin: 0; + background-color: var(--white); + color: var(--body-text-color); } h1 { - font-size: 20pt; + font-size: 23pt; font-family: Fluxisch; font-style: bold; margin-top: 10pt; margin-bottom:10pt; - } h2 { @@ -69,11 +71,6 @@ strong { font-weight: normal; } -ul { - margin: 0%; - padding: 0%; -} - a { font-size: 18pt; font-family: mono; @@ -85,8 +82,9 @@ a { display:flex; justify-content: space-between; align-items: center; - margin-left: 15pt; - margin-right: 15pt; + padding-left: 20pt; + padding-right: 15pt; + border-bottom: 1.6pt solid white; } @@ -95,101 +93,99 @@ a { margin-bottom:10pt; } -.description{ - margin-bottom: 20pt; -} - -.description p{ - margin-bottom: 10pt; - margin-left: 15pt; - margin-right: 15pt; - text-indent: 20pt; +#title{ + margin-top: 17pt; } -#sptContainer { - margin-top: 10pt; - margin-bottom: 10pt; - margin-left: 15pt; - margin-right: 15pt; - text-indent: 20pt; -} - - .question input{ - width:500px; - font-size: 18pt; + width:10em; + font-size: 16pt; padding-top: 3pt; padding-right: 8pt; padding-left: 8pt; padding-bottom: 3pt; margin-left: 15pt; margin-right: 2pt; - margin-top: 2pt; - color:rgb(3, 3, 3); - background-color: white; - border: 1.2pt solid black; + margin-top: 10pt; + color:var(--body-text-color); + background-color: var(--white); + border: 1.8pt solid white; 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{ display:flex; flex-wrap: wrap; + height: 100%; margin-left: 15pt; margin-right: 15pt; - margin-top: 10pt; - margin-bottom: 10pt; + padding-top: 10pt; + padding-bottom: 10pt; } -.btn{ - background: white; +.btn { + display: flex; + align-items: center; + background: var(--white) solid; + color: var(--body-text-color); font-size: 18pt; 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); - padding-top: 3pt; + padding-top: 2pt; padding-right: 8pt; padding-left: 8pt; - padding-bottom: 3pt; + padding-bottom: 2pt; margin-left: 2pt; margin-right: 2pt; - margin-top: 1pt; - margin-bottom: 1pt; - cursor: pointer; - + margin-top: 2pt; + margin-bottom: 2pt; } .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 { - 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 { display: grid; grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); gap: 0; - margin-top: 10pt; margin-left: 0; margin-right: 0; } @@ -215,29 +211,45 @@ img{ .title { /* border: solid 0.3pt; */ - font-size: 20pt; + font-size: 21pt; font-weight:bold; font-family: Fluxisch; padding: 0%; /* width: 20%; */ - margin-top: -0.5pt; + margin-top: 1pt; margin-left: 2vw; margin-right: 0.5vw; margin-bottom: 0; text-decoration: underline 1pt; - text-decoration-color:black; + text-decoration-color: var(--body-text-color); +} + +.symbol-leg { + color: var(--body-text-color); + font-family: symbols1; + font-size: 25pt; + padding-left: 10pt; + padding-right: 10pt; } -.symbol { - order:1; - color:black; +.symbol-word { + color: var(--body-text-color); margin-top: -5pt; font-family: symbols1; 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{