index.html 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Sacred Stacks: The Art of Cyborg Community</title>
  8. <style>
  9. * {
  10. box-sizing: border-box;
  11. }
  12. a:link {
  13. color: #f754a5;
  14. text-decoration: wavy;
  15. }
  16. a:visited {
  17. color: #d784fd;
  18. }
  19. img {
  20. max-width: 100%;
  21. height: auto;
  22. }
  23. body {
  24. margin: 0;
  25. background:#222;
  26. color: #efebed;
  27. height: 4000px;
  28. font-family: 'Courier New', Courier, monospace;
  29. }
  30. .section {
  31. width: 100vw;
  32. max-width: 700px;
  33. /* margin: 0 auto; */
  34. }
  35. .cover {
  36. background:url(img/spread-cover.jpg) no-repeat center top / 100%;
  37. width: auto;
  38. }
  39. .cover img {
  40. display: block;
  41. width: 100%;
  42. height: auto;
  43. object-fit: contain;
  44. }
  45. .repeater {
  46. background:url(img/repreater.jpg) no-repeat repeat center top / 100%;
  47. width: auto;
  48. min-height: 4000px;
  49. }
  50. .flex {
  51. display: flex;
  52. }
  53. .pdf {
  54. display: grid;
  55. grid-template-columns: 1fr 3fr;
  56. align-items: center;
  57. text-decoration: none;
  58. }
  59. .pdf .icon {
  60. flex: 0 1 auto;
  61. }
  62. .invocation, .credits {
  63. max-width: 65ch;
  64. }
  65. @media screen and (max-width: 600px) {
  66. .copy {
  67. background: #222;
  68. border: #efebed 1px solid;
  69. position: absolute;
  70. padding: 20px;
  71. top: 90vh;
  72. left: 20vw;
  73. width: 80vw;
  74. }
  75. }
  76. </style>
  77. </head>
  78. <body>
  79. <div class="flex">
  80. <div class="stack">
  81. <section class="cover section">
  82. <img src="/img/spread-cover.jpg" alt="Sacred Stacks: The Art of Cyborg Community">
  83. </section>
  84. <section class="repeater section">
  85. </section>
  86. </div>
  87. <div class="copy">
  88. <div class="download">
  89. Download:
  90. <a href="pdfs/sacred-stack-the-art-of-cyborg-community.pdf" class="pdf" target="_blank">
  91. <span class="icon"><img src="img/pdf-view.png" alt=""></span>
  92. <img src="img/pdf-view-text.png" alt="View PDF Online">
  93. </a>
  94. <a href="pdfs/sacred-stack-the-art-of-cyborg-community-PRINT.pdf" class="pdf" target="_blank">
  95. <span class="icon"><img src="img/pdf-print.png" alt=""></span>
  96. <img src="img/pdf-print-text.png" alt="Print at home PDF">
  97. </a>
  98. <a href="pdfs/sacred-stack-the-art-of-cyborg-community-cropmarks-PRINT.pdf" class="pdf" target="_blank">
  99. <span class="icon"><img src="img/pdf-crop.png" alt=""></span>
  100. <img src="img/pdf-crop-text.png" alt="PDF with crop marks">
  101. </a>
  102. <a href="pdfs/sacred-stack-the-art-of-cyborg-community-cropmarks-PRINT-cover.pdf" target="_blank">PDF Cover with crop marks</a>
  103. </div>
  104. <div class="credits">
  105. <h1>Sacred Stacks: The Art of Cyborg Community</h1>
  106. <br>
  107. composed_and_compiled:<br>
  108. - Andi Argast<br>
  109. - James Brennan<br>
  110. - Nabil Echchaibi<br>
  111. - Drew Hornbein<br>
  112. - Shamika Klassen<br>
  113. - Samira Rajabi<br>
  114. - Nathan Schneider<br>
  115. <br>
  116. design:<br>
  117. <a href="https://ritualpoint.studio/" target="_blank">Ritual Point Art & Divination</a><br>
  118. <br>
  119. publication:<br>
  120. <a href="https://medlab.metalabel.xyz" target="_blank">Metalabel</a><br>
  121. <br>
  122. a_project_of:<br>
  123. the Media Economies Design Lab and the Center for Media, Religion, and Culture at the University of Colorado
  124. Boulder<br>
  125. <br>
  126. with_support_from:<br>
  127. - Henry Luce Foundation<br>
  128. - Filecoin Foundation for the Decentralized Web<br>
  129. - Starling Lab for Data Integrity<br>
  130. <br>
  131. copyright:<br>
  132. 2023 by the authors<br>
  133. <br>
  134. license:<br>
  135. Creative Commons Attribution International license (CC-BY)
  136. </div>
  137. <div class="invocation">
  138. <h2>Invocation 🙏</h2>
  139. <p>
  140. angels of __<br>
  141. bodhisattvas of __<br>
  142. jinn of __<br>
  143. spirits of __<br>
  144. ghosts of __<br>
  145. cyborgs of __<br>
  146. <br>
  147. …be with us and fill our stacks with the stuff of life.<br>
  148. </p>
  149. <p>
  150. This collaboration is housed on the territories of many nations, in many places across the Earth. Some of us live on
  151. unceded lands long shared among the Arapahoe, Cheyenne, and Ute peoples; others are guests on the traditional territory
  152. of the Huron-Wendat, Haudenosaunee, and Anishinaabe peoples, including the Mississaugas of the Credit First Nation. Some
  153. of our ancestors were brought to the lands where we live against our will; others have seen our lands colonized by
  154. outsiders. We hold these legacies and their tensions together.
  155. </p>
  156. <p>
  157. We have found ourselves traveling through servers and networks that do not disclose their materiality, that claim to be
  158. untethered from the land. Yet, in our work here, we seek to honor ancient connections between people and place, to be
  159. grounded and humble. We are not in the cloud; we are rooted in the ground.
  160. </p>
  161. </div>
  162. <img src="img/computer-friends.png" alt="">
  163. <img src="img/computer-friends-2.png" alt="">
  164. </div>
  165. </div>
  166. </body>
  167. </html>