diff --git a/2022/pagedjs/app.js b/2022/pagedjs/app.js new file mode 100644 index 0000000..d0d3b4e --- /dev/null +++ b/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"; +}); diff --git a/2022/pagedjs/default.css b/2022/pagedjs/default.css new file mode 100644 index 0000000..c18fed2 --- /dev/null +++ b/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; +} + diff --git a/2022/pagedjs/hand1.png b/2022/pagedjs/hand1.png new file mode 100644 index 0000000..f930bc4 --- /dev/null +++ b/2022/pagedjs/hand1.png @@ -0,0 +1,7 @@ + +
11am - 1pm: Lecture &
2 - 6pm: Workshop
13th Oct 2022
Wijnhaven 04.115
Piet Zwart Institute, Willem de Kooning Academy
++ Julie Blanc and Julien Taquet will introduce Paged.js! +
+