diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..46dcb01 Binary files /dev/null and b/.DS_Store differ diff --git a/fonts/Symbolic-Regular.ttf b/fonts/Symbolic-Regular.ttf new file mode 100644 index 0000000..925d64d Binary files /dev/null and b/fonts/Symbolic-Regular.ttf differ diff --git a/images/Session-1-Photos.gif b/images/Session-1-Photos.gif new file mode 100644 index 0000000..240be08 Binary files /dev/null and b/images/Session-1-Photos.gif differ diff --git a/images/pattern-gif-faster.gif b/images/pattern-gif-faster.gif new file mode 100644 index 0000000..3a4c74d Binary files /dev/null and b/images/pattern-gif-faster.gif differ diff --git a/images/pattern.gif b/images/pattern.gif new file mode 100644 index 0000000..717ea33 Binary files /dev/null and b/images/pattern.gif differ diff --git a/images/pattern.png b/images/pattern.png new file mode 100644 index 0000000..bf2e39e Binary files /dev/null and b/images/pattern.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..50aecb1 --- /dev/null +++ b/index.html @@ -0,0 +1,255 @@ + + + + + + + + attempting diffraction + + + +
+
+ +
+ +
+
+

attempting diffraction

+
+

Attempting diffraction is a pattern of different experiments that emerged from the question: How can publishing practices perform 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 !!!!!

+
+
+
+

Legend

+
+

P

Permeable Glossary

+

R

Rumination Sessions

+

L

Living Glossary Environment

+

D

Dear Reader

+

Q

Questions of Publishing

+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..bec5ffc --- /dev/null +++ b/style.css @@ -0,0 +1,158 @@ +@font-face { + font-family: symbols; + src: url(/fonts/Symbolic-Regular.ttf); +} + + +:root{ + --background: rgb(27, 27, 27); + --entities: black; + --highlight: whitesmoke; + --font-title: sans-serif; + --font-body: monospace; + --font-symbols: symbols; +} + +body{ + font-family: monospace; + margin: 0; + overflow: hidden; + background-color: var(--background); +} + + +.comic { + width: 200px; + height: 200px; + margin: 0; + padding: 0%; + border-right: 2pt solid black; +} + +.symbol{ + font-family: var(--font-symbols); + font-size: 1.7em; + margin: 0; +} + +.comic img{ + width: 100%; +} + +.title{ + font-family: monospace; + font-size: 20pt; +} + +a{ + color: black; + text-decoration: underline 2pt dotted black; +} + +.header { + position: absolute; + border-top: 2pt solid black; + display: nones; + flex-flow: row wrap; + width: 40%; + margin:0; +} + +.tab { + display: flex; + flex-flow: row wrap; + align-items: center; + border-bottom: 2pt solid black; + margin: 0; + width: 200%; + padding-top: 5pt; + padding-bottom: 5pt; + padding-left: 10pt; + padding-right: 10pt; + background-color: white; +} + +#legend-show{ + margin: 0; + width: 100%; +} + + +.info{ + width: 30%; + display: block; + background: white; +} + +p { + text-indent: 10pt; + margin: 0; +} + +h2{ + margin: 0; + margin-left: 15pt; + width: 80%; +} + +h3{ + margin: 0; + margin-left: 15pt; + width: 80%; +} + + +/* SVG */ +.wave{ + position: absolute; + z-index: -100; + width: 100%; + margin: 0; +} + +path{ + cursor: pointer; + fill:none; + stroke: transparent; + mix-blend-mode: multiply; + stroke-width:5; + stroke-linecap:round; +} + +ellipse{ + fill:none; + stroke: transparent; + stroke-width:5; + stroke-linecap:round; + mix-blend-mode: multiply; +} + +text{ + font-size: 20pt; + font-family: sans-serif; +} + +#one path:hover{ + stroke:#fd2bda; +} + +#two path:hover{ + stroke: cornflowerblue; +} + +#three path:hover{ + stroke: rgb(119, 119, 119); +} + +#three ellipse:hover{ + stroke: rgb(119, 119, 119); +} + +#four path:hover{ + stroke: rgb(241, 36, 36); +} + +#five path:hover{ + stroke: rgb(35, 187, 86); +} +