updated staff with changes upstream (joak)

2022/pagedjs/app.js

@@ -0,0 +1,52 @@
+const adobeLogo = document.getElementById("adobe");
+const noMore = document.getElementById("nomore");
+const firstBook = document.querySelector(".bar1");
+const thirdBook = document.querySelector(".bar3");
+const infoInside = document.getElementById("note");
+
+adobeLogo.addEventListener("mouseenter", function () {
+  adobeLogo.style.display = "none";
+  noMore.style.display = "block";
+});
+
+
+noMore.addEventListener("mouseenter", function () {
+  noMore.style.display = "none";
+  adobeLogo.style.display = "block";
+});
+
+
+firstBook.addEventListener("click", function () {
+  adobeLogo.visibility = "hidden";
+});
+
+noMore.addEventListener("click", function () {
+  noMore.style.display = "none";
+  noMore.style.display = "hidden";
+  adobeLogo.style.visibility = "visible";
+});
+
+
+thirdBook.addEventListener("mouseover", function () {
+  thirdBook.style.visibility = "hidden";
+  //thirdBook.style.display="none";
+  infoInside.style.display = "block";
+});
+
+
+infoInside.addEventListener("mouseleave", function () {
+  infoInside.style.display = "none";
+  //thirdBook.style.display = "block";
+  thirdBook.style.visibility = "visible";
+});
+
+
+thirdBook.addEventListener("click", function () {
+  thirdBook.style.visibility = "hidden";
+  infoInside.style.display = "block";
+});
+
+infoInside.addEventListener("click", function () {
+  infoInside.style.display = "none";
+  thirdBook.style.visibility = "visible";
+});

2022/pagedjs/default.css

@@ -0,0 +1,464 @@
+html,
+body {
+  font-size: 16px;
+}
+* {
+  box-sizing: border-box;
+}
+
+/* @import url("ext/4bc3933a35ae5ea64daeeb8eb22e72ff/css2.css");
+@import url("ext/029b1a6408007faa76f8327f6a331806/css2.css");
+@import url("ext/d657bbc9ab54884eb3972b1e9cb18df5/css2.css");
+@import url("ext/8c55abfa9a18d75133542cbd087927d5/css2.css");
+@import url("ext/f6b938a3cf4c7932c69612d18f3f6d47/css2.css"); */
+@import url("ext/8a7380f228a12515c367465bc33bb013/css2.css");
+@import url("ext/becee672c41a09a09c11466c771fb5e5/css2.css");
+
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+  background-image: url("img/desk2.jpeg");
+  background-size: cover;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-position: center;
+}
+#home {
+  position: absolute;
+  top: 4%;
+  left: 2.5%;
+  color: black;
+  background: #fb85ff;
+  background: linear-gradient(to bottom right, #fb85ff 16%, #eb5beb 59%);
+  padding: 0.5% 1%;
+  font-family: "Libre Baskerville", serif;
+  font-size: 1rem;
+  cursor: pointer;
+  transform: rotate(-6deg);
+  box-shadow: rgb(0 0 0 / 15%) 6px 4px 0px 0px;
+  cursor: url("img/hand6.png"), auto;
+}
+
+#home a {
+  text-decoration: none;
+  color: black;
+  cursor: url("img/hand6.png"), auto;
+}
+
+#designer{
+  position: absolute;
+    z-index: 999;
+    width: 4%;
+    bottom: 4%;
+    right: 3%;
+    cursor: pointer;
+}
+
+#designer a{
+    text-decoration:none;
+    cursor: pointer;
+}
+.wrapper {
+  position: relative;
+  display: flex;
+  margin: 0 auto;
+  width: 90%;
+  height: 100%;
+  z-index: 3;
+}
+
+#title {
+  display: inline-block;
+  height: min-content;
+  padding: 0 1%;
+  margin: 2.5% auto;
+  background: #ffffff;
+  background: linear-gradient(
+    to bottom right,
+    #ffffff 10%,
+    #e2eeec 55%,
+    #bdc7c5 90%
+  );
+  box-shadow: rgba(0, 0, 0, 0.15) 6px 4px 0px 0px;
+}
+
+#title h1 {
+  /* font-family: "Libre Baskerville", serif; */
+  font-family: "Courgette", cursive;
+  font-size: 2.8rem;
+  font-weight: 400;
+  letter-spacing: 0.03rem;
+  background: -webkit-linear-gradient(#000, rgb(53, 53, 53), #000);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+#tape {
+  position: absolute;
+  z-index: 4;
+  transform: rotate(-40deg);
+    width:5%;
+  left: 30%;
+  top: 2.6%;
+}
+
+#tape img{
+    width:70%;   
+}
+.bar {
+  position: absolute;
+  padding: 0;
+  margin: 0;
+  /* box-shadow: rgba(0, 0, 0, 0.6) px 2px 30px, rgba(0, 0, 0, 0) 0px 7px 13px 3px,
+    rgba(0, 0, 0, 0.1) 0px -3px 0px inset; */
+  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
+    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+  cursor: url("img/hand1.png"), auto;
+}
+
+.bar h3 {
+  text-align: center;
+}
+
+.bar1 {
+  background: #f0ecca;
+  background: linear-gradient(to bottom right, #f0ecca 14%, #e0dda8 77%);
+  top: 30%;
+  left: 9.5%;
+  width: 18%;
+  height: 33.5%;
+  font-family: Georgia, "Times New Roman", Times, serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0%;
+}
+.bar1 .frame {
+  width: 85%;
+  height: 90%;
+  border: 3px navy double;
+  color: navy;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.bar1 h3 {
+  font-size: 2rem;
+  font-style: italic;
+  font-weight: bold;
+  line-height: 0.5;
+  /* background-color: yellow; */
+}
+
+#adobe,
+#nomore {
+  position: absolute;
+  z-index: 10;
+  width: 25%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+}
+
+#nomore {
+  display: none;
+}
+
+.bar1 p {
+  /* background-color: yellow; */
+  font-size: 0.9rem;
+  line-height: 130%;
+  padding: 0% 6%;
+  margin-bottom: 5%;
+}
+
+#maintitle /*.bar1 h1*/ {
+  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
+  font-size: 2.2rem;
+  letter-spacing: 0.1rem;
+  margin: 0;
+  padding: 0;
+  color: white;
+}
+
+.bar2 {
+  top: 20%;
+  left: 31.5%;
+  width: 16%;
+  height: 31.5%;
+  background: #fff8eb;
+  background: linear-gradient(
+    to bottom right,
+    #fff8eb 0%,
+    #faebd7 39%,
+    #d4c9bf 90%
+  );
+  display: inline-block;
+}
+
+.bar2:hover {
+  transform: rotate(30deg);
+}
+
+.deco1 {
+  width: 5%;
+  height: 100%;
+  margin-left: 0;
+  background: #d51f03;
+  background: linear-gradient(
+    to bottom right,
+    #d51f03 9%,
+    #b01a02 48%,
+    #d51f03 77%
+  );
+}
+
+.bar2 .frame {
+  position: absolute;
+  /* background-color: yellow; */
+  top: 0;
+  left: 5%;
+  width: 97%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 1% 2%;
+}
+
+.bar2 h3 {
+  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
+  font-size: 1.9rem;
+  width: 100%;
+  margin-bottom: 0;
+  margin-top: -15%;
+  background: -webkit-linear-gradient(#000, rgb(106, 106, 106), #000);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.bar2 p {
+/*   font-family: "Dancing Script", cursive; */
+    font-family: "Verdana";
+  font-size: 0.9rem;
+  line-height: 135%;
+  width: 80%;
+  color: black;
+}
+.bar3 {
+  top: 55%;
+  left: 44.5%;
+  width: 16%;
+  height: 35.5%;
+  background: #fff71c;
+  background: linear-gradient(
+    to bottom right,
+    #fff71c 0%,
+    #ffe142 39%,
+    #cfb71b 90%
+  );
+  display: flex;
+  flex-direction: column;
+  /* justify-content: center; */
+}
+
+.bar3 h3,
+.bar3 p {
+  font-family: "Libre Baskerville", serif;
+}
+
+.bar3 h3 {
+  font-style: bold;
+  font-size: 3rem;
+  line-height: 0;
+  margin-bottom: 7%;
+}
+
+#t1,
+#t5 {
+  color: #2b710c;
+}
+#t2,
+#t6 {
+  color: #c11818;
+}
+#t3,
+#t4 {
+  color: #0b0d7f;
+}
+#t6 {
+  font-style: italic;
+  font-size: 1rem;
+  margin-left: auto;
+  margin-right: auto;
+  padding-top: 10%;
+  /* margin-top: 20%; */
+}
+
+#note {
+  position: absolute;
+  display: none;
+  z-index: 11;
+  top: 55%;
+  left: 44.5%;
+  width: 32%;
+  height: 35.5%;
+  cursor: url("hand1.png"), auto;
+}
+
+.page1,
+.page2 {
+  position: absolute;
+  width: 50%;
+  height: 100%;
+  font-family: "Libre Baskerville", serif;
+}
+
+.page1 {
+  background: #fbfcf7;
+  background: linear-gradient(to right, #fbfcf7 0%, #fffaed 50%, #f0edd3 100%);
+  left: 0;
+}
+.page2 {
+  background: #fbfcf7;
+  background: linear-gradient(to left, #fbfcf7 0%, #fffaed 39%, #d4d1ba 90%);
+  display:flex;
+  justify-content: center;
+  align-items: center;
+  left: 50%;
+  overflow-wrap: break-all;
+}
+.page1 p,
+.page2 p {
+    color: #c11818;
+}
+.page1 p {
+  width: 80%;
+  font-size: 0.75rem;
+  padding: 2% 5%;
+}
+.page2 p {
+  font-size: 1.1rem;
+  line-height: 147%;
+  padding: 2% 8%;
+}
+#time{
+    color:black;
+}
+
+#hostnames{
+    color:black;
+}
+
+#hostnames a{
+    color:black;
+    text-decoration: underline;
+}
+
+.bar4 {
+  top: 32.5%;
+  left: 65.5%;
+  width: 20%;
+  height: 46.5%;
+  background: #d6f1ff;
+  background: linear-gradient(to bottom right, #d6f1ff 5%, #899fa3 90%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.bar4 .frame {
+  font-family: Arial, Helvetica, sans-serif;
+  padding: 1% 1%;
+  width: 76%;
+  height: 100%;
+  padding: 0;
+  overflow-y: auto;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bar4 .frame img {
+  width: 50%;
+  /* margin-top: 3%; */
+}
+.bar4 h3 {
+  font-family: "Archivo Black", sans-serif;
+  color: rgb(24, 42, 146);
+  font-size: 2.8rem;
+  line-height: 1.4;
+  margin-top: 7.5%;
+  margin-bottom: 5.5%;
+  cursor: pointer;
+  text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4),
+    -1px -1px 0 rgba(255, 255, 255, 1);
+}
+.bar4 h3 a {
+  text-decoration: none;
+  color: rgb(24, 42, 146);
+  cursor: pointer;
+  text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4),
+    -1px -1px 0 rgba(255, 255, 255, 1);
+}
+.bar4 p {
+  font-family: "Arsenal", sans-serif;
+  color: rgb(24, 42, 146);
+  font-size: 1.05rem;
+  font-weight: 600;
+  line-height: 140%;
+  padding: 1% 2%;
+}
+
+.bar5 {
+  transform: rotate(20deg);
+  top: 50%;
+  left: 50%;
+  width: 20%;
+  padding: 0;
+  display: inline-block;
+  height: min-content;
+  padding: 0;
+  background: #e2eeec;
+  background: linear-gradient(to bottom right, #e2eeec 8%, #d5e0de 59%);
+  /* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */
+  box-shadow: rgba(0, 0, 0, 0.15) 4px 4px 0px 0px;
+}
+
+.bar5 p {
+  /* margin: 0 auto; */
+  padding: 0% 2%;
+  font-family: "Libre Baskerville", serif;
+  font-size: 1.1rem;
+  letter-spacing: 0.02rem;
+}
+
+.bar5 p a {
+  text-decoration: underline;
+  color: blue;
+  cursor: pointer;
+}
+
+#print{
+    display:none;
+    visibility:hidden;
+}
+
+#web{
+    visibility:visible;
+}
+
+#qr {
+  position: absolute;
+  z-index: 11;
+  display: none;
+}
+

2022/pagedjs/hand1.png

@@ -0,0 +1,7 @@
+<html>
+<head><title>404 Not Found</title></head>
+<body bgcolor="white">
+<center><h1>404 Not Found</h1></center>
+<hr><center>nginx/1.14.2</center>
+</body>
+</html>

2022/pagedjs/index.html

@@ -0,0 +1,94 @@
+<html lang="en"><head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Paged.js workshop</title>
+     
+    <link rel="stylesheet" href="default.css" media="only screen">
+    <link rel="stylesheet" media="screen and (max-width: 1920px)" href="laptop_1920.css">   
+    <link rel="stylesheet" media="only screen and (min-device-width : 1190px) and (max-device-width : 1440px)" href="laptop_big.css">
+    <link rel="stylesheet" media="only screen and (min-device-width : 768px) and (max-device-width : 1189px)" href="laptop_small.css">
+    <link rel="stylesheet" media="only screen and (min-device-width : 360px) and (max-device-width : 767px) and (orientation: portrait)" href="mobile_p.css">
+    <link rel="stylesheet" href="print.css" media="print">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+ 
+    <link href="ext/becee672c41a09a09c11466c771fb5e5/css2.css?family=Courgette&amp;family=Dancing+Script:wght@400;500;600&amp;display=swap" rel="stylesheet">
+    <link href="ext/8a7380f228a12515c367465bc33bb013/css2.css?family=Archivo+Black&amp;family=Arsenal:ital@0;1&amp;family=Chivo:ital,wght@0,300;0,400;1,300;1,400&amp;family=Libre+Baskerville:wght@700&amp;display=swap" rel="stylesheet">
+  <link rel="original" href="https://hub.xpub.nl/sandbot/Nami_Researchlog/Pagedjs_workshop/index.html"></head>
+  <body>
+    <div id="home"><a href="https://xpub.nl/">Back</a></div>
+    <div id="designer"><a href="https://hub.xpub.nl/sandbot/Nami_Researchlog/"><img src="img/namikim2.svg"></a></div>
+  
+    <div class="wrapper">
+        <div id="tape"><img src="img/tape.png"></div>
+      <div id="title"><h1>XPUB invites you to a Paged.js Workshop!</h1></div>
+      <div class="bar bar1">
+        <div class="frame">
+          <h3>Adobe Again?</h3>
+          <p id="p1">
+            Most people would think making a publication should be done via
+            Adobe applications. Don't we want to explore other possibilities
+            though?
+          </p>
+          <img src="img/adobelogo_s.jpg" id="adobe">
+          <img src="img/nomore.jpg" id="nomore">
+        </div>
+      </div>
+
+      <div class="bar bar2">
+        <div class="deco1"></div>
+
+        <div class="frame">
+          <h3>There should be a way</h3>
+          <p>that I can directly render web pages to print.</p>
+          <img src="img/coverimg1.jpg">
+        </div>
+      </div>
+
+      <div class="bar bar3">
+        <h3 id="t1">On</h3>
+        <h3 id="t2">Thursday</h3>
+        <h3 id="t3">13th October</h3>
+        <h3 id="t4">11am - 6pm</h3>
+        <h3 id="t5">WH.04.115</h3>
+        <p id="t6">Guess what would happen?</p>
+      </div>
+      <div id="note">
+        <div class="page1">
+            <p id="time">11am - 1pm: Lecture 	&amp;<br>2 - 6pm: Workshop</p><p>13th Oct 2022<br>Wijnhaven 04.115</p><p id="time">Piet Zwart Institute, Willem de Kooning Academy</p>
+        </div>
+        <div class="page2">
+          <p>
+              <span id="hostnames"><a href="https://julie-blanc.fr/en/blog/2021-04-16_hackathon-pagedjs/">Julie Blanc</a></span> and <span id="hostnames"><a href="https://www.pagedmedia.org/author/julien/">Julien Taquet</a></span> will introduce Paged.js!
+          </p>
+        </div>
+      </div>
+
+      <div class="bar bar4" data-scroll="">
+        <div class="frame">
+          <h3 class="font-effect-emboss"><a href="https://pagedjs.org/">Paged.js</a></h3>
+          <p>
+            is a rendering tool for previewing, inspecting and designing a PDF
+            in the browser, that is known for specifically accommodating
+            designers using web-to-print techniques in their publications and book making practice.
+            
+          </p>
+       <img src="img/coverimg2.jpg">
+          <p id="hosts">  Julie and Julien both work as developers on
+            the project, so we can also ask them about Paged.js as an open
+            source project, and what it means to develop and maintain it.  </p>
+        </div>
+      </div>
+
+      <div class="bar bar5">
+        <p>Are you interested in joining the workshop? Sign up via <span id="print"><a href="https://pad.xpub.nl/p/pagedjs">xpub.nl.</a></span><span id="web"><a href="https://pad.xpub.nl/p/pagedjs">here.</a></span></p>
+      
+    </div>
+
+    <img src="img/xpubcode.png" id="qr">
+</div>
+    <script src="app.js"></script>
+  
+
+</body></html>

2022/pagedjs/laptop_1920.css

@@ -0,0 +1,257 @@
+@media  screen and (max-width: 1920px) {
+  @import url("ext/8a7380f228a12515c367465bc33bb013/css2.css");
+
+  #home {
+    top: 4%;
+    left: 2.5%;
+    font-size: 0.8rem;
+    letter-spacing: 0.03rem;
+    letter-spacing: 0.01rem;
+    padding: 0.5% 0.8%;
+  }
+    
+    #designer{
+    position: absolute;
+    z-index: 999;
+    width: 6%;
+    bottom: 4%;
+    right: 3%;
+    cursor: pointer;
+    }
+
+  #title {
+    padding: 0.2% 1%;
+  }
+
+  #title h1 {
+    font-size: 2rem;
+    letter-spacing: 0.02rem;
+  }
+
+ #tape {
+    transform: rotate(-45deg);
+    width: 4.5%;
+    left: 29.5%;
+    top: 1.6%;
+    }
+
+ #tape img{
+    width:80%;   
+    }
+
+  .bar {
+    position: absolute;
+    padding: 0;
+    margin: 0;
+    box-shadow: rgba(0, 0, 0, 0.6) 0px 2px 16px,
+      rgba(0, 0, 0, 0) 0px 7px 13px 3px, rgba(0, 0, 0, 0.1) 0px -3px 0px inset;
+    cursor: url("hand1.png"), auto;
+    /* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */
+    /* box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset; */
+  }
+
+  .bar h3 {
+    text-align: center;
+          
+  }
+
+  .bar1 {
+    top: 30%;
+    left: 7.5%;
+    width: 18%;
+    height: 38.5%;
+  }
+  .bar1 .frame {
+    width: 85%;
+    height: 90%;
+  }
+
+  .bar1 h3 {
+    font-size: 1.3rem;
+    line-height: 0.2;
+      padding-top: 4%;
+  }
+
+  #adobe,
+  #nomore {
+    width: 28%;
+    top: 40%;
+  }
+  .bar1 p {
+    font-size: 0.9rem;
+    line-height: 133%;
+    padding: 5% 10%;
+    margin-bottom: 5%;
+  }
+
+  .bar2 {
+    top: 22%;
+    left: 31.5%;
+    width: 16%;
+    height: 31.5%;
+    background: #fff8eb;
+    background: linear-gradient(
+      to bottom right,
+      #fff8eb 0%,
+      #faebd7 39%,
+      #d4c9bf 90%
+    );
+    display: inline-block;
+  }
+
+  .bar2:hover {
+    transform: rotate(30deg);
+  }
+
+  .deco1 {
+    width: 5%;
+    height: 100%;
+    margin-left: 0;
+    background-color: rgb(213, 31, 3);
+  }
+
+  .bar2 .frame {
+    top: 0;
+    left: 5%;
+    width: 97%;
+    height: 100%;
+
+    padding: 1% 2%;
+  }
+
+  .bar2 h3 {
+    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
+   font-size: 1.35rem;
+    width: 80%;
+    margin-bottom: 0;
+    margin-top: 0;
+  }
+    
+  .bar2 p {
+   font-size: 0.75rem;
+    line-height: 125%;
+      width:65%;
+    margin-top: 5%;
+    margin-bottom: 9%;
+  }
+
+  .bar2 img {
+    width: 42.5%;
+  }
+  .bar3 {
+    top: 58%;
+    left: 45.5%;
+    width: 16%;
+    height: 34.5%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .bar3 h3 {
+    font-style: bold;
+    font-size: 1.75rem;
+    line-height: 0.25;
+    margin-bottom: 7%;
+  }
+
+  #t1,
+  #t5 {
+    color: #2b710c;
+  }
+  #t2,
+  #t6 {
+    color: #c11818;
+  }
+  #t3,
+  #t4 {
+    color: #0b0d7f;
+  }
+  #t6 {
+    text-align: center;
+    width: 100%;
+    font-style: italic;
+    font-size: 0.77rem;
+    line-height: 130%;
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 0;
+  }
+
+  #note {
+    top: 58%;
+    left: 45.5%;
+    width: 32%;
+    height: 34.5%;
+  }
+
+  .page1 p {
+    font-size: 0.75rem;
+    line-height: 1.5;
+    padding: 2% 5%;
+  }
+  .page2 p {
+    font-size: 0.85rem;
+    line-height: 1.6;
+    padding: 2% 8%;
+  }
+
+  .bar4 {
+    left: 66.5%;
+    width: 22%;
+    height: 44.5%;
+  }
+
+  .bar4 .frame {
+    width: 85%;
+    height: 100%;
+    justify-content: space-around;
+  }
+
+  .bar4 .frame img {
+    width: 38%;
+    margin-top: 0%;
+    margin-bottom: 0%;
+  }
+  .bar4 h3 {
+    font-family: "Archivo Black", sans-serif;
+    color: rgb(24, 42, 146);
+    font-size: 1.7rem;
+    line-height: 1;
+    margin-bottom: 0%;
+  }
+
+  .bar4 p {
+   font-family: "Arsenal", sans-serif;
+    font-size: 0.9rem;
+    line-height: 132%;
+    padding-top: 0;
+    margin-top: 4%;
+    margin-bottom: 0;
+  }
+
+  .bar5 {
+    transform: rotate(20deg);
+    top: 55%;
+    left: 50%;
+    width: 20%;
+    padding: 0;
+
+    display: inline-block;
+    height: min-content;
+    padding: 0 0.75%;
+    margin: 0;
+    background-color: #e2eeec;
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
+  }
+
+  .bar5 p {
+    margin: 1% auto;
+    padding: 1% 2%;
+    font-family: "Libre Baskerville", serif;
+    font-size: 0.85rem;
+    letter-spacing: 0.03rem;
+  }
+}
+

index.html

@@ -55,10 +55,10 @@ figure figcaption {
 </p>
 
 <p class="news">
-Application deadlines:<br>
+  <a href="https://pad.xpub.nl/p/pagedjs"><img src="images/Paged.js_workshop_NAMI_thumb.png"></a>
-March 16 2022: early/non-EU<br>
+  <a href="https://worm.org/production/xpub-pzi-graduation-show/"><img src="images/XPUB-newsletter-650x40.jpg" alt="Experimental Publishing Graduation Show 24-25 June, UBIK"></a>
-April 28 2022: final deadline EU<br>
+  <a href="https://www.pzwart.nl/blog/2022/05/27/graduation-shows-2022/"><img src="images/collective-newsletter-650x400.jpg" alt=""></a>
-<a href="https://www.pzwart.nl/application/">https://www.pzwart.nl/application/</a>
+  <a href="https://worm.org/production/xpub-pzi-graduation-show/"><img src="images/walkie-talkie-fb-cover-mail.jpg" alt="Walkie Talkie - 24-25 June - WORM" style="width: 480px"></a>
 </p>
 
 <div class="flex">

staff/staff.md

@@ -28,11 +28,11 @@ Cristina Cochior is a researcher and designer. She is a member of the everyday t
 
 ## Joseph Knierzinger
 
-[![](joseph/WechatIMG118-320x.webp)](joseph/WechatIMG118.jpeg)
+[![](joseph/joak-smallest.webp)](joseph/joak-smallest.jpg)
 
 *Prototyping Tutor*
 
-Joseph Oliver Anton Knierzinger (joak) is an artist exploring the history and politics of past, present, future and anachronistic media, technology and confusion. He works with Free/Libre/Open Source Software at the intersection of up-to-date media and obsolete technologies. His works, performances and lectures have been shown in exhibitions, festivals and universities in Belgium, Bulgaria, China, Germany, Italy, Catalonia, Croatia, Kugelmugel, Mongolia, Netherlands, Russia, Slovenia and Austria. At the moment he works on different alogisms and algorithms in Vienna. <https://joak.nospace.at>
+Joseph Oliver Anton Knierzinger (joak) is an artist exploring the history and politics of past, present, future and anachronistic media, technology and confusion. His compositions, devices, games, installations, interventions, instruments, lectures, performances, performance-lectures, scores and software have been shown in academies, artist-run spaces, community centers, festivals, galleries, hackerspaces, museums, radio station, squats, streets, theaters and universities in Austria, Catalonia, Croatia, Belgium, Bulgaria, China, Germany, Italy, Kugelmugel, Mongolia, Netherlands, Online, Russia and Slovenia. He works on different alogisms and algorithms in Rotterdam and Vienna. <https://joak.nospace.at>
 
 
 ## Michael Murtaugh