diff --git a/.DS_Store b/.DS_Store index 46dcb01..712953c 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/images/favicon.png b/images/favicon.png new file mode 100644 index 0000000..ede0604 Binary files /dev/null and b/images/favicon.png differ diff --git a/images/pattern.gif b/images/pattern.gif index 717ea33..61ac3cd 100644 Binary files a/images/pattern.gif and b/images/pattern.gif differ diff --git a/index.html b/index.html index 50aecb1..f704e33 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ + attempting diffraction @@ -15,228 +16,244 @@
-
-

attempting diffraction

-
-

Attempting diffraction is a pattern of different experiments that emerged from the question: How can publishing practices perform diffraction?

+
+

⤷ attempting diffraction

+
-

Colophon

-
-

Attempting diffraction is a pattern of different experiments that emerged from the question: How can publishing practices perform diffraction?

-

This project was made by Camilo Garcia with the help of wonderful people. Thank you all for your support and advice. Special thanks to Avital Barkai, Maria Paris, Manetta Braneds, Michael Martaugh, Aymeric !!, Femke Steinling, Kimmy and Natasha !!!!!

+

⤷ colophon

+
-

Legend

-
-

P

Permeable Glossary

-

R

Rumination Sessions

-

L

Living Glossary Environment

-

D

Dear Reader

-

Q

Questions of Publishing

+

⤷ legend

+
+
+ + + + + + + + + - - - - - - + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + @@ -246,10 +263,7 @@ - + diff --git a/main.js b/main.js new file mode 100644 index 0000000..9438fc5 --- /dev/null +++ b/main.js @@ -0,0 +1,182 @@ +const diffraction = ["happens when waves -light, water, sound- encounter an obstacle and form a multitude of patterns as they pass through.", + "performs inter-connection between things.", + "creates a pattern of differences", + "suggests there is no sharp boundary separating things", + "is to think the differences within el medio, el espacio que nos conecta y nos separa simultaneously", + "is about taking responsability for the fact that our practices matter; the world is materialized differently through different practices."] + + let i = Math.floor(Math.random() * 6) + + document.getElementById("diffraction").innerHTML = `

⤷ Diffraction ${diffraction[i]} ⤴︎

` + + document.getElementById("about").onclick = function() {show()}; + + function show() { + let show = document.getElementById("description-show").style.display; + if (show === "none") { + document.getElementById("description-show").style.display = "block"; + } + else { + document.getElementById("description-show").style.display = "none"; + } + } + + document.getElementById("colophon").onclick = function() {show_col()}; + + function show_col() { + let show = document.getElementById("colophon-show").style.display; + if (show === "none") { + document.getElementById("colophon-show").style.display = "block"; + } + else { + document.getElementById("colophon-show").style.display = "none"; + } + } + + document.getElementById("legend").onclick = function() {show_leg()}; + + function show_leg() { + let show = document.getElementById("legend-show").style.display; + if (show === "none") { + document.getElementById("legend-show").style.display = "block"; + } + else { + document.getElementById("legend-show").style.display = "none"; + } + } + + /////// PATHS //////////// + + + document.getElementById("permeable-tab").onmouseover = function() {color_p()}; + + + function color_p(){ + let paths = document.getElementsByClassName("permeable-p"); + for (i = 0; i < paths.length; i++) { + paths[i].style.stroke = "var(--permeable)"; + }; + } + + document.getElementById("permeable-tab").onmouseout = function() {colorout_p()}; + + function colorout_p(){ + let paths = document.getElementsByClassName("permeable-p"); + for (i = 0; i < paths.length; i++) { + paths[i].style.stroke = ""; + }; + } + + document.getElementById("rumination-tab").onmouseover = function() {color_r()}; + + function color_r(){ + let paths = document.getElementsByClassName("rumination-p"); + for (i = 0; i < paths.length; i++) { + paths[i].style.stroke = "var(--rumination)"; + }; + } + + document.getElementById("rumination-tab").onmouseout = function() {colorout_r()}; + + function colorout_r(){ + let paths = document.getElementsByClassName("rumination-p"); + for (i = 0; i < paths.length; i++) { + paths[i].style.stroke = ""; + }; + } + + document.getElementById("tool-tab").onmouseover = function() {color_t()}; + + function color_t(){ + let paths = document.getElementsByClassName("tool-p"); + for (i = 0; i < paths.length; i++) { + paths[i].style.stroke = "var(--tool)"; + }; + } + + document.getElementById("tool-tab").onmouseout = function() {colorout_t()}; + + function colorout_t(){ + let paths = document.getElementsByClassName("tool-p"); + for (i = 0; i < paths.length; i++) { + paths[i].style.stroke = ""; + }; + } + + document.getElementById("questions-tab").onmouseover = function() {color_q()}; + + function color_q(){ + let paths = document.getElementsByClassName("questions-p"); + for (i = 0; i < paths.length; i++) { + paths[i].style.stroke = "var(--questions)"; + }; + } + + document.getElementById("questions-tab").onmouseout = function() {colorout_q()}; + + function colorout_q(){ + let paths = document.getElementsByClassName("questions-p"); + for (i = 0; i < paths.length; i++) { + paths[i].style.stroke = ""; + }; + } + + document.getElementById("brief-tab").onmouseover = function() {color_b()}; + + function color_b(){ + let paths = document.getElementsByClassName("brief-p"); + for (i = 0; i < paths.length; i++) { + paths[i].style.stroke = "var(--brief)"; + }; + } + + document.getElementById("brief-tab").onmouseout = function() {colorout_b()}; + + function colorout_b(){ + let paths = document.getElementsByClassName("brief-p"); + for (i = 0; i < paths.length; i++) { + paths[i].style.stroke = ""; + }; + } + + document.getElementById("dear-tab").onmouseover = function() {color_d()}; + + function color_d(){ + let paths = document.getElementsByClassName("dear-p"); + for (i = 0; i < paths.length; i++) { + paths[i].style.stroke = "var(--dear)"; + }; + } + + document.getElementById("dear-tab").onmouseout = function() {colorout_d()}; + + function colorout_d(){ + let paths = document.getElementsByClassName("dear-p"); + for (i = 0; i < paths.length; i++) { + paths[i].style.stroke = ""; + }; + } + + +function randompath(){ + let paths_question = document.getElementsByClassName("questions-p"); + let paths_brief = document.getElementsByClassName("brief-p"); + let paths_dear = document.getElementsByClassName("dear-p"); + let paths_permeable = document.getElementsByClassName("permeable-p"); + let paths_rumination = document.getElementsByClassName("rumination-p"); + let paths_tool = document.getElementsByClassName("tool-p"); + + let i_p = Math.floor(Math.random() * 3); + let i_q = Math.floor(Math.random() * 5); + let i_d = Math.floor(Math.random() * 6); + let i_b = Math.floor(Math.random() * 24); + let i_r = Math.floor(Math.random() * 14); + let i_t = Math.floor(Math.random() * 132); + + paths_question[i_q].style.stroke ="var(--questions)"; + paths_dear[i_q].style.stroke ="var(--dear)"; + paths_brief[i_b].style.stroke = "var(--brief)"; + paths_permeable[i_p].style.stroke = "var(--permeable)"; + paths_rumination[i_r].style.stroke = "var(--rumination)"; + paths_tool[i_t].style.stroke = "var(--tool)"; +} \ No newline at end of file diff --git a/style.css b/style.css index bec5ffc..9a20740 100644 --- a/style.css +++ b/style.css @@ -5,12 +5,23 @@ :root{ - --background: rgb(27, 27, 27); + --background: #252525; --entities: black; - --highlight: whitesmoke; + --highlight: #e4e5e2; --font-title: sans-serif; --font-body: monospace; --font-symbols: symbols; + --white: #e4e5e2; + --light-yellow: #ffffcc; + --silver: #999999; + --links-color: #3366ff; + --body-text-color: #3b3b3b; + --permeable: #66cc66; + --rumination: #3366ff; + --tool: #999999; + --dear: #ffcc66; + --questions: #cc3333; + --brief: #ff6633; } body{ @@ -20,18 +31,29 @@ body{ background-color: var(--background); } +.show-on {display:block;} .comic { - width: 200px; - height: 200px; + width: 124px; + height: 124px; margin: 0; padding: 0%; border-right: 2pt solid black; + border-bottom: 2pt solid black; + border-left: 2pt solid black; + background-color: var(--white); + +} + +p { + text-indent: 15pt; + margin: 0; } .symbol{ font-family: var(--font-symbols); font-size: 1.7em; + text-indent: 0pt; margin: 0; } @@ -41,35 +63,71 @@ body{ .title{ font-family: monospace; - font-size: 20pt; -} - -a{ - color: black; - text-decoration: underline 2pt dotted black; + font-size: 15pt; } .header { + display:flex; position: absolute; - border-top: 2pt solid black; - display: nones; flex-flow: row wrap; width: 40%; margin:0; } .tab { + cursor: pointer; display: flex; flex-flow: row wrap; align-items: center; border-bottom: 2pt solid black; + border-right: 2pt solid black; + margin: 0; + width: 150%; + padding-top: 5pt; + padding-bottom: 5pt; + padding-left: 10pt; + padding-right: 10pt; + background-color: var(--white); +} + +.tab:hover { + -moz-box-shadow: inset 0 0 5px var(--background); + -webkit-box-shadow: inset 0 0 5px var(--background); + box-shadow: inset 0 0 5px var(--background); +} + +.tab-info { + display: none; + border-bottom: 2pt solid black; + border-right: 2pt solid black; margin: 0; - width: 200%; + width: 150%; + padding-top: 5pt; + padding-bottom: 5pt; + padding-left: 10pt; + padding-right: 10pt; + background-color: var(--white); +} + +#diffraction{ + position: absolute; + width: 500px; + top:0px; + right: 0px; padding-top: 5pt; padding-bottom: 5pt; padding-left: 10pt; padding-right: 10pt; - background-color: white; + border-bottom: 2pt solid black; + border-left: 2pt solid black; + border-right: 2pt solid black; + background-color: var(--white); + z-index: 1; +} + +#diffraction a{ + font-size: 13.5pt; + color: blue; } #legend-show{ @@ -77,26 +135,31 @@ a{ width: 100%; } +a{ + color: black; + text-decoration: none; +} .info{ width: 30%; display: block; - background: white; } -p { - text-indent: 10pt; - margin: 0; + +h1 { + font-size: 13pt; } h2{ margin: 0; + font-size: 13pt; margin-left: 15pt; width: 80%; } h3{ margin: 0; + font-size: 13pt; margin-left: 15pt; width: 80%; } @@ -108,6 +171,9 @@ h3{ z-index: -100; width: 100%; margin: 0; + -moz-box-shadow: inset 0 0 10px var(--entities); + -webkit-box-shadow: inset 0 0 10px var(--entities); + box-shadow: inset 0 0 10px var(--entities); } path{ @@ -127,32 +193,53 @@ ellipse{ mix-blend-mode: multiply; } -text{ - font-size: 20pt; - font-family: sans-serif; +.permeable { + color: #66cc66; +} + +.rumination { + color: #3366ff; +} + +.tool { + color: #999999; +} + +.dear { + color: #ffcc66; } -#one path:hover{ - stroke:#fd2bda; +.questions { + color: #cc3333; } -#two path:hover{ - stroke: cornflowerblue; +.brief { + color: #ff6633; +} + +#permeable path:hover{ + stroke:#66cc66; +} + + + +#rumination path:hover{ + stroke: #3366ff; } -#three path:hover{ - stroke: rgb(119, 119, 119); +#tool path:hover{ + stroke: #999999; } -#three ellipse:hover{ - stroke: rgb(119, 119, 119); +#dear ellipse:hover{ + stroke: #ffcc66; } -#four path:hover{ - stroke: rgb(241, 36, 36); +#questions path:hover{ + stroke: #cc3333; } -#five path:hover{ - stroke: rgb(35, 187, 86); +#brief path:hover{ + stroke: #ff6633; }