all folders committed
parent
220183ca0f
commit
12e9cb369d
@ -0,0 +1,21 @@
|
||||
// Reveal text
|
||||
Array.from(document.querySelectorAll(".reveal")).forEach(function(reveal) {
|
||||
reveal.addEventListener("click", function (e) {
|
||||
console.log("Surprise, there's text!");
|
||||
reveal.classList.toggle("tada");
|
||||
})
|
||||
});
|
||||
|
||||
// Reveal visual
|
||||
//Array.from(document.querySelectorAll(".reveal-visual")).forEach(function(revealVisual) {
|
||||
// revealVisual.addEventListener("click", function (f) {
|
||||
// console.log("Surprise, a visual!");
|
||||
// revealVisual.classList.toggle("tada");
|
||||
|
||||
// var body = document.body;
|
||||
// body.classList.toggle("switched");
|
||||
|
||||
|
||||
// })
|
||||
//});
|
||||
|
||||
@ -0,0 +1,161 @@
|
||||
{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Fira Mono', monospace;
|
||||
font-size: 16px;
|
||||
|
||||
color: red;
|
||||
}
|
||||
|
||||
body.switched {
|
||||
font-family: 'Fira Mono', monospace;
|
||||
font-size: 16px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
main {
|
||||
width: 100vw;
|
||||
max-width: 1440px;
|
||||
|
||||
margin: 2em auto;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 95%;
|
||||
max-width: 680px;
|
||||
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
section > figure {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
|
||||
section > figure.left-aligned {
|
||||
margin-left: -280px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
section > figure.right-aligned {
|
||||
margin-left: calc(635px + 4vw);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
section > figure > img {
|
||||
width: 130%;
|
||||
padding-bottom: 0.2em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.25em;
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1em;
|
||||
line-height: 140%;
|
||||
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 0.75em;
|
||||
line-height:140%;
|
||||
margin-bottom: 0.75em;
|
||||
color: black;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: 0.8em;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* Reveal */
|
||||
|
||||
span.reveal {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
span.reveal.tada > .emoji {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span.reveal > span.text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span.reveal.tada > span.text {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
span.reveal.footnote {
|
||||
color: black;
|
||||
padding-left: 3px;
|
||||
font-size: 1em !important;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
span.reveal.tada.footnote {
|
||||
color: black;
|
||||
}
|
||||
|
||||
span.reveal.footnote > .emoji {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
/*
|
||||
figure.reveal-visual > img:nth-child(1) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
figure.reveal-visual > img:nth-child(2) {
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
}
|
||||
*/
|
||||
|
||||
figure.reveal-visual.tada > img:nth-child(1) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
figure.reveal-visual.tada > img:nth-child(2) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body.switched span.reveal > .emoji,
|
||||
body.switched span.reveal.tada > .emoji {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.switched span.reveal > .text,
|
||||
body.switched span.reveal.tada > .text {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
body.switched span.reveal.footnote {
|
||||
font-size: 1em !important;
|
||||
}
|
||||
|
||||
body.switched span.reveal.footnote > .emoji {
|
||||
font-size: 1em !important;
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.switched span.reveal.footnote > .text {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
|
||||
section#title {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
@ -0,0 +1,32 @@
|
||||
<input type="checkbox" id="toggle">
|
||||
|
||||
<label id="shown" for="toggle">
|
||||
<span style="color: red;">?</span>
|
||||
</label>
|
||||
<label id="hidden" for="toggle" >
|
||||
<span style="color: red;">!</span>
|
||||
</label>
|
||||
|
||||
<style>
|
||||
input[type=checkbox] {
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
}
|
||||
|
||||
#shown {
|
||||
display: block;
|
||||
}
|
||||
#hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#toggle:checked ~ #hidden{
|
||||
display: block;
|
||||
}
|
||||
|
||||
#toggle:checked ~ #shown {
|
||||
display: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,32 @@
|
||||
<input type="checkbox" id="toggle">
|
||||
|
||||
<label id="shown" for="toggle">
|
||||
<span style="color: red;">?</span>
|
||||
</label>
|
||||
<label id="hidden" for="toggle" >
|
||||
<span style="color: red;">!</span>
|
||||
</label>
|
||||
|
||||
<style>
|
||||
input[type=checkbox] {
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
}
|
||||
|
||||
#shown {
|
||||
display: block;
|
||||
}
|
||||
#hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#toggle:checked ~ #hidden{
|
||||
display: block;
|
||||
}
|
||||
|
||||
#toggle:checked ~ #shown {
|
||||
display: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,31 @@
|
||||
<input type="checkbox" id="toggle">
|
||||
|
||||
Is this a sentence<label class="shown" for="toggle">?</label><label class="hidden" for="toggle">!</label>
|
||||
|
||||
This a sentence<label class="shown" for="toggle">?</label><label class="hidden" for="toggle">!</label>
|
||||
|
||||
<style>
|
||||
input[type=checkbox] {
|
||||
/* position: absolute; */
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
}
|
||||
.shown {
|
||||
display: block;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline;
|
||||
}
|
||||
#toggle:checked ~ .hidden{
|
||||
display: block;
|
||||
}
|
||||
|
||||
#toggle:checked ~ .shown {
|
||||
display: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,42 @@
|
||||
<html>
|
||||
<body class="checked">
|
||||
|
||||
<p>Is this a sentence
|
||||
<span class="fpunct">
|
||||
<span class="question">?</span><span class="bang">!</span>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<p>This a sentence<span class="fpunct"><span class="question">?</span><span class="bang">!</span></span></p>
|
||||
|
||||
<p>This a sentence<span class="fpunct"><span class="question">?</span><span class="bang">!</span></span></p>
|
||||
|
||||
<p>This a sentence<span class="fpunct"><span class="question">?</span><span class="bang">!</span></span></p>
|
||||
|
||||
<p>This a sentence<span class="fpunct"><span class="question">?</span><span class="bang">!</span></span></p>
|
||||
|
||||
<p>This a sentence<span class="fpunct"><span class="question">?</span><span class="bang">!</span></span></p>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
<style>
|
||||
.fpunct {
|
||||
cursor: pointer;
|
||||
}
|
||||
/* fpunct "normal" */
|
||||
.fpunct .question { display: inline; }
|
||||
.fpunct .bang { display: none; }
|
||||
/* fpunct "flipped" state */
|
||||
.fpunct.flipped .question { display: none; }
|
||||
.fpunct.flipped .bang { display: inline; }
|
||||
</style>
|
||||
|
||||
<script>
|
||||
Array.from(document.querySelectorAll(".fpunct")).forEach(function(punct) {
|
||||
punct.addEventListener("click", function (e) {
|
||||
console.log("fpunct CLICK, toggling", punct);
|
||||
punct.classList.toggle("flipped");
|
||||
})
|
||||
});
|
||||
</script>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 335 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 216 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 326 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 836 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 330 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 263 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
@ -0,0 +1,659 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<script src="jquery-3.5.1.min.js"></script>
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------
|
||||
--------------------------------------------------------------------PRINT----------------------------------------------------------------------------------------------------
|
||||
------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
|
||||
|
||||
|
||||
@page {
|
||||
size: 420mm, 297mm;
|
||||
margin: 0mm;
|
||||
}
|
||||
@media print {
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('Roboto-Regular.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Robotobold';
|
||||
src: url('Roboto-Bold.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Robotomedium';
|
||||
src: url('Roboto-Medium.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'WFTF';
|
||||
src: url('wftfs-Regular.otf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'EBGaramonditalic';
|
||||
src: url('EBGaramond-MediumItalic.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'EBGaramonditalicsemi';
|
||||
src: url('EBGaramond-SemiBoldItalic.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'EBGaramondregular';
|
||||
src: url('EBGaramond-Medium.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Brut';
|
||||
src: url('Brut_Grotesque-Text.otf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Custom';
|
||||
src: url('WFTF_custom-Regular.otf');
|
||||
}
|
||||
body {
|
||||
padding: 2mm;
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
symbols {
|
||||
font-size: 100pt;
|
||||
line-height: 100pt;
|
||||
font-family: 'WFTF';
|
||||
}
|
||||
indent {
|
||||
color: blue;
|
||||
text-align: left;
|
||||
font-size: 17pt;
|
||||
line-height: 19pt;
|
||||
z-index: 300;
|
||||
font-family: 'Roboto';
|
||||
text-indent: 3mm;
|
||||
}
|
||||
.titlevertical {
|
||||
writing-mode: vertical-rl;
|
||||
display: block;
|
||||
font-size: 40pt;
|
||||
line-height: 100%;
|
||||
position: fixed;
|
||||
letter-spacing: normal;
|
||||
font-family: 'Roboto';
|
||||
bottom: 10mm;
|
||||
right: 10mm;
|
||||
margin-bottom: 10mm;
|
||||
margin-left: 17mm;
|
||||
margin-top: 0mm;
|
||||
}
|
||||
.titleverticalleft {
|
||||
writing-mode: vertical-rl;
|
||||
display: none;
|
||||
font-size: 20pt;
|
||||
line-height: 100%;
|
||||
position: fixed;
|
||||
letter-spacing: normal;
|
||||
font-family: 'Roboto';
|
||||
top: 10mm;
|
||||
right: 10mm;
|
||||
margin-bottom: 10mm;
|
||||
margin-left: 10mm;
|
||||
margin-top: 7mm;
|
||||
margin-left: 0;
|
||||
}
|
||||
.title {
|
||||
display: none;
|
||||
font-size: 75pt;
|
||||
line-height: 100%;
|
||||
position: fixed;
|
||||
letter-spacing: normal;
|
||||
font-family: 'Roboto';
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin-bottom: 10mm;
|
||||
margin-left: 10mm;
|
||||
margin-top: 10mm;
|
||||
margin-bottom: 10mm;
|
||||
}
|
||||
.titlebottom {
|
||||
display: none;
|
||||
font-size: 75pt;
|
||||
line-height: 100%;
|
||||
position: fixed;
|
||||
letter-spacing: normal;
|
||||
font-family: 'Roboto';
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin-bottom: 10mm;
|
||||
margin-left: 10mm;
|
||||
margin-top: 10mm;
|
||||
margin-bottom: 10mm;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: black;
|
||||
text-align: left;
|
||||
font-size: 32pt;
|
||||
line-height: 34pt;
|
||||
z-index: 300;
|
||||
font-family: 'Roboto';
|
||||
}
|
||||
h2 {
|
||||
color: black;
|
||||
text-align: left;
|
||||
font-size: 13pt;
|
||||
line-height: 15pt;
|
||||
z-index: 300;
|
||||
font-family: 'Robotobold';
|
||||
}
|
||||
p {
|
||||
text-indent: 7mm;
|
||||
color: black;
|
||||
text-align: left;
|
||||
font-size: 13pt;
|
||||
line-height: 15pt;
|
||||
z-index: 300;
|
||||
font-family: 'Roboto';
|
||||
}
|
||||
p2 {
|
||||
text-indent: 10mm;
|
||||
color: black;
|
||||
text-align: left;
|
||||
font-size: 11pt;
|
||||
line-height: 13pt;
|
||||
z-index: 300;
|
||||
font-family: 'Roboto';
|
||||
}
|
||||
p3 {
|
||||
color: black;
|
||||
text-align: left;
|
||||
font-size: 11pt;
|
||||
line-height: 13pt;
|
||||
z-index: 300;
|
||||
font-family: 'Roboto';
|
||||
}
|
||||
p3special {
|
||||
color: black;
|
||||
text-align: left;
|
||||
font-size: 11pt;
|
||||
line-height: 13pt;
|
||||
z-index: 300;
|
||||
font-family: 'Roboto';
|
||||
padding-right: 10mm;
|
||||
}
|
||||
line {
|
||||
color: black;
|
||||
text-align: left;
|
||||
font-size: 11pt;
|
||||
line-height: 13pt;
|
||||
z-index: 300;
|
||||
font-family: 'Roboto';
|
||||
}
|
||||
bold {
|
||||
color: black;
|
||||
text-align: left;
|
||||
font-size: 11t;
|
||||
line-height: 13pt;
|
||||
z-index: 300;
|
||||
font-family: 'Robotobold';
|
||||
}
|
||||
medium {
|
||||
color: black;
|
||||
text-align: left;
|
||||
font-size: 11pt;
|
||||
line-height: 13pt;
|
||||
z-index: 300;
|
||||
font-family: 'Robotomedium';
|
||||
}
|
||||
garamond {
|
||||
font-family: 'EBGaramondregular';
|
||||
|
||||
}
|
||||
brut {
|
||||
font-family: 'Brut';
|
||||
color: black;
|
||||
text-align: left;
|
||||
font-size: 13pt;
|
||||
line-height: 15pt;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
|
||||
}
|
||||
.column {
|
||||
float: left;
|
||||
padding: 100mm;
|
||||
font-size: 24pt;
|
||||
line-height: 28pt;
|
||||
font-family: 'Roboto';
|
||||
vertical-align:bottom;
|
||||
}
|
||||
.columnleft {
|
||||
width: 30%;
|
||||
margin-left: 10mm;
|
||||
margin-top: 15mm;
|
||||
}
|
||||
.columnmiddle {
|
||||
width: 30%;
|
||||
margin-right: 5mm;
|
||||
margin-left: 5mm;
|
||||
margin-top: 15mm;
|
||||
}
|
||||
.columnright {
|
||||
width: 30%;
|
||||
margin-right: 30mm;
|
||||
margin-top: 15mm;
|
||||
}
|
||||
italic {
|
||||
font-family: 'EBGaramonditalicsemi';
|
||||
font-size: 14pt;
|
||||
line-height: 16pt;
|
||||
margin-left: 5mm;
|
||||
}
|
||||
bigitalic {
|
||||
text-indent: 30mm;
|
||||
font-family: 'EBGaramonditalicsemi';
|
||||
font-size: 19pt;
|
||||
line-height:21pt;
|
||||
}
|
||||
bigp {
|
||||
text-indent: 7mm;
|
||||
color: black;
|
||||
text-align: left;
|
||||
font-size: 16pt;
|
||||
line-height: 18pt;
|
||||
z-index: 300;
|
||||
font-family: 'Roboto';
|
||||
}
|
||||
bigmedium {
|
||||
text-indent: 7mm;
|
||||
color: black;
|
||||
text-align: left;
|
||||
font-size: 14pt;
|
||||
line-height: 16pt;
|
||||
z-index: 300;
|
||||
font-family: 'Roboto';
|
||||
}
|
||||
.screen {
|
||||
display:none;
|
||||
}
|
||||
symbol2 {
|
||||
font-size: 25pt;
|
||||
line-height: 17pt;
|
||||
font-family: 'Custom';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------
|
||||
--------------------------------------------------------------------SCREEN----------------------------------------------------------------------------------------------------
|
||||
------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
|
||||
|
||||
|
||||
@media screen{
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('Roboto-Regular.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Robotobold';
|
||||
src: url('Roboto-Bold.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Robotomedium';
|
||||
src: url('Roboto-Medium.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'WFTF';
|
||||
src: url('wftfs-Regular.otf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'EBGaramonditalic';
|
||||
src: url('EBGaramond-MediumItalic.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'EBGaramonditalicsemi';
|
||||
src: url('EBGaramond-SemiBoldItalic.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'EBGaramondregular';
|
||||
src: url('EBGaramond-Medium.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Brut';
|
||||
src: url('Brut_Grotesque-Text.otf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Custom';
|
||||
src: url('WFTF_custom-Regular.otf');
|
||||
}
|
||||
body{
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
background: black;
|
||||
width: 98%;
|
||||
}
|
||||
h1 {
|
||||
display: none;
|
||||
position: fixed;
|
||||
background: blue;
|
||||
color: black;
|
||||
font-family: helvetica;
|
||||
text-align: left;
|
||||
line-height: 110%;
|
||||
font-weight: 900;
|
||||
position: fixed;
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
z-index: 300;
|
||||
}
|
||||
.title {
|
||||
display: none;
|
||||
position: fixed;
|
||||
font-size: 100px;
|
||||
line-height: 100%;
|
||||
font-family: 'Roboto';
|
||||
margin-bottom: 10px;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.titlevertical {
|
||||
display: none;
|
||||
position: fixed;
|
||||
font-size: 100px;
|
||||
line-height: 100%;
|
||||
font-family: 'Roboto';
|
||||
margin-bottom: 10px;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
.screen {
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: 60px;
|
||||
font-family: 'Roboto';
|
||||
color: white;
|
||||
z-index: 10;
|
||||
|
||||
}
|
||||
a {
|
||||
color: grey;
|
||||
}
|
||||
.titleverticalleft {
|
||||
display: none;
|
||||
}
|
||||
.titlebottom {
|
||||
display: none;
|
||||
}
|
||||
h1 {
|
||||
display:none;
|
||||
}
|
||||
h2 {
|
||||
display:none;
|
||||
}
|
||||
p {
|
||||
display:none;
|
||||
}
|
||||
p2 {
|
||||
display:none;
|
||||
}
|
||||
p3 {
|
||||
display:none;
|
||||
}
|
||||
p3special {
|
||||
display:none;
|
||||
}
|
||||
line {
|
||||
display:none;
|
||||
}
|
||||
bold {
|
||||
display:none;
|
||||
}
|
||||
medium {
|
||||
display:none;
|
||||
}
|
||||
garamond {
|
||||
display:none;
|
||||
|
||||
}
|
||||
brut {
|
||||
display:none
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.row:after {
|
||||
display:none;
|
||||
}
|
||||
.column {
|
||||
display:none;
|
||||
}
|
||||
.columnleft {
|
||||
display:none;
|
||||
}
|
||||
.columnmiddle {
|
||||
display:none;
|
||||
}
|
||||
.columnright {
|
||||
display:none;
|
||||
|
||||
}
|
||||
italic {
|
||||
display:none;
|
||||
}
|
||||
bigitalic {
|
||||
display:none;
|
||||
}
|
||||
bigp {
|
||||
display:none;
|
||||
}
|
||||
bigmedium {
|
||||
display:none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Create two equal columns that sits next to each other */
|
||||
.column {
|
||||
vertical-align: text-bottom;
|
||||
flex: 100%;
|
||||
padding: 10px;
|
||||
height: 180px; /* Should be removed. Only for demonstration */
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
</html>
|
||||
<div><span class="screen">CTRL(⌘)+ P to print the A3 end credits (W.I.P)<br>
|
||||
Please use <a href="https://download-chromium.appspot.com/" target="blank">Chromium</a> Open Source browser and set to Horizontal A3<br><br>
|
||||
A3 Cover PDF<a href="A3BACK.pdf" target="blank">(here)</a><br><br>
|
||||
|
||||
|
||||
|
||||
Thank you!</span></div>
|
||||
|
||||
|
||||
|
||||
<div><span class="title">WѺR(L)DS<br>FҨӶ THξ FUTURЭ</span></div>
|
||||
<div><span class="titlevertical">WOR(<symbol2>L</symbol2>)DS FOR THE FUTURE</span></div>
|
||||
<div><span class="titleverticalleft">XPUB</span></div>
|
||||
<div><span class="titlebottom">XPUB 2020</span></div>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="row">
|
||||
<div class="columnleft" style="background-color:white;">
|
||||
|
||||
<h2>A pluralistic open license</h2>
|
||||
<p3><medium> © 2020 XPUB - SPECIAL ISSUE 13</medium>
|
||||
<br><br>
|
||||
|
||||
Permission is hereby granted, free of charge, to individual, group(s), and non-profit organization(s), obtaining a copy of this project, to use, copy, print, modify, merge, distribute, and/or sell contents or copies of the project, in whole or in parts, subject to the following conditions.</p3>
|
||||
|
||||
<br><br>
|
||||
<p3><h2>We encourage you to: </h2>
|
||||
• introduce the project to your neighbours, friends, family, etc;<br><br>
|
||||
|
||||
• translate the contents into other languages;<br><br>
|
||||
|
||||
• create new dramaturgies (structures, stories, worlds) from the contents;<br><br>
|
||||
|
||||
• extend this license, as long as the kinship, commercial use and attribution conditions remain in force.</p3>
|
||||
|
||||
<br><br>
|
||||
<p3><h2>Kinship:</h2>
|
||||
Kinship implies co-relations between Wor(l)ds For The Future and further distributions which will potentially be made.
|
||||
|
||||
If you want to republish and re-distribute the content, verbatim or derivative, we ask you to send us a copy. By copy we mean a copy of the republished content. For instance, if it is a print or a physical object please send it to XPUB/ WH4.141 t.a.v. Piet Zwart Institute/ WdKA/ Rotterdam Uni. Postbus 1272 300 BG Rotterdam, NL. If it is a file please send it to pzwart-info@hr.nl /attn: XPUB cc. If it is a change in a cloned git repository of the work, please send a patch so we can archive it in a branch. Which means, if you clone or download our git repos ( https://git.xpub.nl/XPUB/issue.xpub.nl/src/branch/master/13 ) to modify the project files, we ask you to send us the modifications so we can archive them as well.</p3>
|
||||
|
||||
<br><br>
|
||||
<p3><h2>Commercial use:</h2>
|
||||
Commercial use is only permitted if no profit is derived. Said differently, you can sell copies of the work only to cover the costs of the distribution, printing, production, needed to circulate copies of the work. We are asking you to be transparent about such expenses.</p3>
|
||||
|
||||
<br><br>
|
||||
<p3><h2>Attribution:</h2>
|
||||
The above copyright notice and this license shall be included in all copies or modified versions of the project. Any re-publication, verbatim or derivative, of the contents must explicitly credit the name(s) of the author(s) of WORDS FOR THE FUTURE, as well as those of the author(s) of WOR(L)DS FOR THE FUTURE. This attribution must make clear what changes have been made.</p3>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="columnmiddle " style="background-color:white;">
|
||||
<h2>Tutors:</h2>
|
||||
<p3><medium>Aymeric Mansoux</medium></p3><br><br>
|
||||
<p3><medium>Lídia Pereira</medium></p3><br><br>
|
||||
<p3><medium>Manetta Berends</medium></p3><br><br>
|
||||
<p3><medium>Michael Murtaugh</medium></p3><br><br>
|
||||
<p3><medium>Steve Rushton</medium></p3><br><br>
|
||||
|
||||
<!-- <h2>Students:</h2>
|
||||
<p3><medium>Camilo García</medium> Republishing response: ATATA / Print Production </p3><br><br>
|
||||
<p3><medium>Clara Gradel</medium> Republishing response: !? </p3><br><br>
|
||||
<p3><medium>Euna Lee</medium> Layout design, Glyph font desegn, xx, Republishing response: HOPE</p3><br><br>
|
||||
<p3><medium>Federico Poni</medium> Republishing response: Practical Vision</p3><br><br>
|
||||
<p3><medium>Jacopo Lega</medium> Launch department / Design department / Republishing response: Otherness</p3><br><br>
|
||||
<p3><medium>Kendal Beynon</medium> Print Production, Copyediting / Republishing response: Liquid</p3><br><br>
|
||||
<p3><medium>Louisa Teichmann</medium> Republishing response: Resurgence</p3><br><br>
|
||||
<p3><medium>Martin Foucaut</medium> Republishing response: ATATA, Design department </p3><br><br>
|
||||
<p3><medium>Nami Kim</medium> License, xx, xx, republishing response: UNDECIDABILITY </p3> -->
|
||||
|
||||
<h2>Print</h2>
|
||||
<p3><medium>Print run:</medium> 100<br><br>
|
||||
• The risograph pages were printed on a Riso MZ1070 in van Beek paper of 120gr at Wdka Print Station<br><br>
|
||||
• The A0 poster was printed by ------<br><br>
|
||||
<medium>Special Type set in:</medium> <br><br>
|
||||
• Custom Roboto (All caps Roboto with 10 custom characters made by XPUB1 students)<br><br>
|
||||
• wftfs regular ( 10 symbols made by XPUB1 students)<br><br>
|
||||
<h2>Thanks</h2>
|
||||
<medium>Made possible by Piet Zwart Institute</medium><br>
|
||||
<br>
|
||||
Rotterdam, NL<br>
|
||||
Winter, 2020<br>
|
||||
</p3>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="columnright" style="background-color:white">
|
||||
<h2>Words for the future (2017/18)</h2>
|
||||
<p3>Curated and edited by Nienke Scholts, in collaboration with Veem Huis for Performance, designed and printend by THE FUTURE printing & publishing: www.nienkescholts.com/words-for-the-future<br><br>
|
||||
<h2>Authors</h2></p3>
|
||||
<line>————————————————————————————————————————</line>
|
||||
<br><br>
|
||||
<brut>🡢</brut> <italic>Liquid</italic><p2> Rachel Armstrong Andrea Božic & Julia Willms (TILT)</p2><br>
|
||||
<br>
|
||||
<line>————————————————————————————————————————</line>
|
||||
<br><br>
|
||||
<brut>🡢</brut> <italic>Otherness</italic><p2> Daniel L. Everett, Sarah Moeremans</p2><br>
|
||||
<br><br>
|
||||
<line>————————————————————————————————————————</line>
|
||||
<br>
|
||||
|
||||
<brut>🡢</brut> <italic>Practical Vision</italic><p2> Moses Kilolo (Jalada), Klara van Duijkeren & Vincent Schipper (The Future)</p2><br>
|
||||
<br><br>
|
||||
<line>————————————————————————————————————————</line>
|
||||
<br><br>
|
||||
|
||||
<brut>🡢</brut> <italic>Eco-Swaraj</italic><p2> Ashish Kothari, Rodrigo Sobarzo</p2><br>
|
||||
<br>
|
||||
<line>————————————————————————————————————————</line>
|
||||
<br><br>
|
||||
|
||||
<brut>🡢</brut> <italic>Hope</italic><p2> by Gurur Ertem, Ogutu Murayalink</p2><br>
|
||||
<br>
|
||||
<line>————————————————————————————————————————</line>
|
||||
<br><br>
|
||||
|
||||
<brut>🡢</brut> <italic>Undecidability</italic><p2> Silvia Bottiroli, Jozef Wouters</p2><br>
|
||||
<br>
|
||||
<line>————————————————————————————————————————</line>
|
||||
<br><br>
|
||||
|
||||
<brut>🡢</brut> <italic>Resurgence</italic><p2> Isabelle Stengers, Ola Macijewska</p2><br>
|
||||
<br>
|
||||
<line>————————————————————————————————————————</line>
|
||||
<br><br>
|
||||
|
||||
<brut>🡢</brut> <italic>!?</italic><p2> Nina Power, Michiel Vandeveldelink</p2><br>
|
||||
<br>
|
||||
<line>————————————————————————————————————————</line>
|
||||
<br><br>
|
||||
|
||||
<brut>🡢</brut> <italic>Atata</italic><p2> Natalia Chavez Lopez, Hilda Moucharrafieh</p2><br>
|
||||
<br>
|
||||
<line>————————————————————————————————————————</line>
|
||||
<br><br>
|
||||
|
||||
<brut>🡢</brut> <italic>Tense</italic><p2> Simon(e) van Saarloos, Eilit Marom & Anna Massoni<br> & Elpida Orfanidou & Adina Secretan & Simone Truong </p2><br>
|
||||
<br>
|
||||
<line>————————————————————————————————————————</line>
|
||||
<br><br>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Wor(l)ds for the Future</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="plain-draggable.min.js"></script>
|
||||
<script data-require="p5.js@0.5.7" data-semver="0.5.7" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js"></script>
|
||||
<script data-require="p5.dom.js@0.5.7" data-semver="0.5.7" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/addons/p5.dom.min.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<map name="image-map">
|
||||
<area target="" alt="" title="" href="LIQUID/" coords="766,1156,942,1272" shape="rect">
|
||||
<area target="" alt="" title="" href="OTHERNESS/" coords="1740,264,2009,372" shape="rect">
|
||||
<area target="" alt="" title="" href="ECO-SWARAJ/" coords="166,1315,128" shape="circle">
|
||||
</map>
|
||||
<div id="container">
|
||||
|
||||
<p id="atata">Atata</p><br>
|
||||
|
||||
<p id="Liquid">Liquid</p><br><br>
|
||||
|
||||
<p id="!?">!?</p><br><br>
|
||||
|
||||
<p id="Otherness">Otherness</p><br><br><br><br><br>
|
||||
|
||||
<img id="Resurgence" src="grab.png">
|
||||
<img id="pic" class="pic" src="IMAGES/resurgence/resurgence-icon-01-01.png">
|
||||
<img id="pic2" class="pic" src="IMAGES/resurgence/rock2.png">
|
||||
<img id="pic3" class="pic" src="IMAGES/liquid/liquidsym2.png">
|
||||
|
||||
|
||||
<img id="pic4" class="pic" src="IMAGES/practical/practical1.png">
|
||||
<img id="pic5" class="pic" src="IMAGES/practical/practical2.png">
|
||||
<img id="pic6" class="pic" src="IMAGES/practical/practical3.png">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,353 @@
|
||||
@media screen{
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('Roboto-Regular.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Robotobold';
|
||||
src: url('Roboto-Bold.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Robotomedium';
|
||||
src: url('Roboto-Medium.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'WFTF';
|
||||
src: url('wftfs-Regular.otf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'EBGaramonditalic';
|
||||
src: url('EBGaramond-MediumItalic.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'EBGaramonditalicsemi';
|
||||
src: url('EBGaramond-SemiBoldItalic.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'EBGaramondregular';
|
||||
src: url('EBGaramond-Medium.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Brut';
|
||||
src: url('Brut_Grotesque-Text.otf');
|
||||
}
|
||||
|
||||
#atata {
|
||||
font-family:'Roboto';
|
||||
font-size: 3em;
|
||||
line-height: 100%;
|
||||
margin-left: 1%;
|
||||
}
|
||||
#symbolA {
|
||||
font-family:'WFTF';
|
||||
font-size: 3em;
|
||||
margin-left: 15%;
|
||||
}
|
||||
#symbolA2 {
|
||||
font-family:'WFTF';
|
||||
font-size: 3em;
|
||||
margin-left: 15%;
|
||||
}
|
||||
#symbolL {
|
||||
font-family:'WFTF';
|
||||
font-size: 3em;
|
||||
margin-left: 15%;
|
||||
}
|
||||
#symbolO {
|
||||
font-family:'WFTF';
|
||||
font-size: 3em;
|
||||
margin-left: 15%;
|
||||
}
|
||||
#symbolE {
|
||||
font-family:'WFTF';
|
||||
font-size: 3em;
|
||||
margin-left: 15%;
|
||||
}
|
||||
#symbolM {
|
||||
font-family:'WFTF';
|
||||
font-size: 3em;
|
||||
margin-left: 15%;
|
||||
}
|
||||
#symbolT {
|
||||
font-family:'WFTF';
|
||||
font-size: 3em;
|
||||
margin-left: 15%;
|
||||
}
|
||||
#symbolH {
|
||||
font-family:'WFTF';
|
||||
font-size: 3em;
|
||||
margin-left: 15%;
|
||||
}
|
||||
#symbolP {
|
||||
font-family:'WFTF';
|
||||
font-size: 3em;
|
||||
margin-left: 15%;
|
||||
}
|
||||
#symbolR {
|
||||
font-family:'WFTF';
|
||||
font-size: 3em;
|
||||
margin-left: 15%;
|
||||
}
|
||||
#symbolU {
|
||||
font-family:'WFTF';
|
||||
font-size: 3em;
|
||||
margin-left: 15%;
|
||||
}
|
||||
#Liquid {
|
||||
font-family:'Roboto';
|
||||
font-size: 3em;
|
||||
line-height: 100%;
|
||||
|
||||
margin-left: 1%;
|
||||
}
|
||||
#Otherness {
|
||||
font-family:'Roboto';
|
||||
font-size: 3em;
|
||||
line-height: 100%;
|
||||
|
||||
margin-left: 1%;
|
||||
}
|
||||
#Eco {
|
||||
font-family:'Roboto';
|
||||
font-size: 3em;
|
||||
|
||||
line-height: 100%;
|
||||
margin-left: 1%;
|
||||
}
|
||||
#M {
|
||||
font-family:'Roboto';
|
||||
font-size: 3em;
|
||||
|
||||
line-height: 100%;
|
||||
margin-left: 1%;
|
||||
}
|
||||
#Tense {
|
||||
font-family:'Roboto';
|
||||
font-size: 3em;
|
||||
|
||||
line-height: 100%;
|
||||
margin-left: 1%;
|
||||
}
|
||||
#Hope {
|
||||
font-family:'Roboto';
|
||||
font-size: 3em;
|
||||
|
||||
line-height: 100%;
|
||||
margin-left: 1%;
|
||||
}
|
||||
#Practical{
|
||||
font-family:'Roboto';
|
||||
font-size: 3em;
|
||||
|
||||
line-height: 100%;
|
||||
margin-left: 1%;
|
||||
}
|
||||
#Resurgence1{
|
||||
font-family:'Roboto';
|
||||
font-size: 3em;
|
||||
line-height: 100%;
|
||||
margin-left: 1%;
|
||||
}
|
||||
#Undecidability{
|
||||
font-family:'Roboto';
|
||||
font-size: 3em;
|
||||
line-height: 100%;
|
||||
margin-left: 1%;
|
||||
}
|
||||
text{
|
||||
font-family:'Roboto';
|
||||
font-size: 5em;
|
||||
color: purple;
|
||||
line-height: 100%;
|
||||
margin-left: 1%;
|
||||
}
|
||||
.colophon {
|
||||
position: fixed;
|
||||
bottom: 1%;
|
||||
right: 1%;
|
||||
}
|
||||
.licenses {
|
||||
position: fixed;
|
||||
bottom: 1%;
|
||||
left: 1%;
|
||||
}
|
||||
.about {
|
||||
position: fixed;
|
||||
top: 1%;
|
||||
right: 1%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
:root{
|
||||
font-family:'Roboto';
|
||||
--regular: 20%;
|
||||
|
||||
}
|
||||
|
||||
body{
|
||||
/*pointer-events: none;*/
|
||||
margin: 0 ;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-color: var(--background-color);
|
||||
background-image: url('grid.png');
|
||||
background-size: 8vw;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
p{
|
||||
font-family:'Roboto';
|
||||
line-height: 120%;
|
||||
|
||||
}
|
||||
|
||||
#pic {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.pic {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
#container{
|
||||
z-index: 1;
|
||||
line-height: 100%;
|
||||
}
|
||||
#background{z-index: 0;}
|
||||
|
||||
#map{width: 100%;
|
||||
height: auto;}
|
||||
|
||||
p:hover{box-shadow: 0px 0px 40px black}
|
||||
|
||||
|
||||
|
||||
|
||||
button{
|
||||
position: fixed;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
display: inline-block;
|
||||
padding: 0.5vw 1.3em;
|
||||
color: black;
|
||||
font-size: 1.5vw;
|
||||
text-decoration: none;
|
||||
margin-bottom: 1.5vw;
|
||||
background-color: transparent;
|
||||
border-radius: 40px;
|
||||
-webkit-box-shadow: 15px 15px 15px 15px;
|
||||
box-shadow: 0px 0px 15px 8px rgba(0,0,0,0);
|
||||
}
|
||||
button1{
|
||||
position: fixed;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
display: inline-block;
|
||||
padding: 0.5vw 1.3em;
|
||||
color: black;
|
||||
top: 1%;
|
||||
left: 30px;
|
||||
font-size: 1.5vw;
|
||||
text-decoration: none;
|
||||
margin-bottom: 1.5vw;
|
||||
background-color: transparent;
|
||||
border-radius: 40px;
|
||||
-webkit-box-shadow: 15px 15px 15px 15px;
|
||||
box-shadow: 0px 0px 15px 8px rgba(0,0,0,0);
|
||||
}
|
||||
button3{
|
||||
position: fixed;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
display: inline-block;
|
||||
padding: 0.5vw 1.3em;
|
||||
color: black;
|
||||
bottom: 1%;
|
||||
left: 90px;
|
||||
font-size: 1.5vw;
|
||||
text-decoration: none;
|
||||
margin-bottom: 1.5vw;
|
||||
background-color: transparent;
|
||||
border-radius: 40px;
|
||||
-webkit-box-shadow: 15px 15px 15px 15px;
|
||||
box-shadow: 0px 0px 15px 8px rgba(0,0,0,0);
|
||||
}
|
||||
.container{z-index:15; position: absolute;
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
padding: 10px;
|
||||
z-index: 10;
|
||||
color: black;
|
||||
position:fixed;
|
||||
border-radius: 10px;
|
||||
padding: 1em;
|
||||
box-shadow: 0 0 40px #214c12;
|
||||
background-color:white;
|
||||
resize: both;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index:10;
|
||||
transform: translate(-50%, -50%);}
|
||||
|
||||
.close{font-size: 1em;
|
||||
color: white;top: 2%;
|
||||
right: 2%;}
|
||||
|
||||
|
||||
span{color: white;
|
||||
}
|
||||
|
||||
.intro{z-index:15; position: absolute;
|
||||
height: 70%;
|
||||
width: 70%;
|
||||
padding: 10px;
|
||||
z-index: 10;
|
||||
color: black;
|
||||
position:fixed;
|
||||
border-radius: 10px;
|
||||
padding: 1em;
|
||||
box-shadow: 0 0 40px #214c12;
|
||||
background-color:white;
|
||||
resize: both;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index:10;
|
||||
transform: translate(-50%, -50%);
|
||||
overflow-x: hidden;
|
||||
resize: both;
|
||||
visibility: visible;
|
||||
opacity: 1;}
|
||||
|
||||
.enter{font-size: 1em;top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);}
|
||||
|
||||
#close{ position: absolute;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
display: inline-block;
|
||||
color: black;
|
||||
bottom: 1%;
|
||||
text-align: right;
|
||||
font-size: 0.5vw;
|
||||
text-decoration: none;
|
||||
margin-bottom: 0.1vw;
|
||||
background-color: transparent;
|
||||
border-radius: 40px;
|
||||
-webkit-box-shadow: 15px 15px 15px 15px;
|
||||
box-shadow: 0px 0px 15px 8px rgba(0,0,0,0)}
|
||||
@ -0,0 +1,92 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Wor(l)ds for the Future</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="plain-draggable.min.js"></script>
|
||||
<script data-require="p5.js@0.5.7" data-semver="0.5.7" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js"></script>
|
||||
<script data-require="p5.dom.js@0.5.7" data-semver="0.5.7" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/addons/p5.dom.min.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="louisa.css" media="screen"/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<map name="image-map">
|
||||
<area target="" alt="" title="" href="LIQUID/" coords="766,1156,942,1272" shape="rect">
|
||||
<area target="" alt="" title="" href="OTHERNESS/" coords="1740,264,2009,372" shape="rect">
|
||||
<area target="" alt="" title="" href="ECO-SWARAJ/" coords="166,1315,128" shape="circle">
|
||||
</map>
|
||||
<div id="container">
|
||||
|
||||
<p id="atata">Atata</p><br>
|
||||
|
||||
<p id="Liquid">Liquid</p><br><br>
|
||||
|
||||
<p id="!?">!?</p><br><br>
|
||||
|
||||
<p id="Otherness">Otherness</p><br><br><br><br><br>
|
||||
|
||||
<img id="Resurgence" src="grab.png">
|
||||
<img id="pic" class="pic" src="IMAGES/resurgence/resurgence-icon-01-01.png">
|
||||
<img id="pic2" class="pic" src="IMAGES/resurgence/rock2.png">
|
||||
<img id="pic3" class="pic" src="IMAGES/liquid/liquidsym2.png">
|
||||
<img id="pic4" class="pic" src="IMAGES/practical/practical1.png">
|
||||
<img id="pic5" class="pic" src="IMAGES/practical/practical2.png">
|
||||
<img id="pic6" class="pic" src="IMAGES/practical/practical3.png">
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<button id="practical" onclick=""><b>Practical Visions</b></button>
|
||||
<button id="complexities" onclick=""><b>Complexities</b></button>
|
||||
<button id="gramviz" onclick=""><b>A Data Visualization</b></button>
|
||||
<button id="collang" onclick=""><b>Colonial Languages</b></button>
|
||||
<button id="bot" onclick=""><b>Practical Bot</b></button>
|
||||
|
||||
<button class="colophon"><b>Colophon</b></button>
|
||||
<div class="container">THIS IS THE COLOPHON
|
||||
<span class="close"><button> ×</button></span>
|
||||
|
||||
<div>
|
||||
<div class="intro">WELCOME TO WOR(L)DS FOR THE FUTURE BLABLA DRAW OR DRAG AND DROP OR WHATEVER<button class="enter"><b>ENTER</b></button> <div>
|
||||
<script>
|
||||
|
||||
const button = document.querySelector(".colophon");
|
||||
const container = document.querySelector(".container");
|
||||
const close = document.querySelector(".close");
|
||||
|
||||
//const trailer2 = document.querySelector(".trailer2");
|
||||
//const close2 = document.querySelector(".close2");
|
||||
|
||||
button.addEventListener('click', () =>{
|
||||
container.style.visibility = "visible";
|
||||
container.style.opacity = 1;
|
||||
|
||||
});
|
||||
|
||||
close.addEventListener('click', () =>{
|
||||
container.style.visibility = "hidden";
|
||||
container.style.opacity = 0;
|
||||
});
|
||||
|
||||
|
||||
|
||||
//close2.addEventListener('click', () =>{
|
||||
//trailer2.style.visibility = "hidden";
|
||||
//trailer2.style.opacity = 0;
|
||||
//coin3.style.visibility = "visible";
|
||||
//coin3.style.opacity = 1;
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Wor(l)ds for the Future</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="plain-draggable.min.js"></script>
|
||||
<script data-require="p5.js@0.5.7" data-semver="0.5.7" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js"></script>
|
||||
<script data-require="p5.dom.js@0.5.7" data-semver="0.5.7" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/addons/p5.dom.min.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="louisa.css" media="screen"/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<map name="image-map">
|
||||
<area target="" alt="" title="" href="LIQUID/" coords="766,1156,942,1272" shape="rect">
|
||||
<area target="" alt="" title="" href="OTHERNESS/" coords="1740,264,2009,372" shape="rect">
|
||||
<area target="" alt="" title="" href="ECO-SWARAJ/" coords="166,1315,128" shape="circle">
|
||||
</map>
|
||||
<div id="container">
|
||||
|
||||
<p id="atata">Atata</p><p id="symbolA">A</p><br><br><br>
|
||||
|
||||
<p id="Liquid">Liquid</p><p id="symbolL">L</p><br><br><br>
|
||||
|
||||
<p id="Otherness">Otherness<p id="symbolO">O</p><br><br><br>
|
||||
|
||||
<p id="Eco">Eco-Swaraj<p id="symbolE">E</p><br><br><br>
|
||||
|
||||
<p id="M">!?<p id="symbolM">M</p><br><br><br>
|
||||
|
||||
<p id="Tense">Tense<p id="symbolT">T</p><br><br><br>
|
||||
|
||||
<p id="Hope">Hope<p id="symbolH">H</p><br><br><br>
|
||||
|
||||
<p id="Practical">Practical Vision<p id="symbolP">P</p><br><br><br>
|
||||
|
||||
<p id="Resurgence1">Resurgence<p id="symbolR">R</p><br><br><br>
|
||||
|
||||
<p id="Undecidability">Undecidability<p id="symbolU">U</p><br><br><br><br><br><br>
|
||||
|
||||
|
||||
|
||||
|
||||
<!--<img id="Resurgence" src="grab.png"><br><br>
|
||||
<img id="pic2" class="pic" src="IMAGES/resurgence/rock2.png"><br><br>
|
||||
<br><br>
|
||||
<img id="pic4" class="pic" src="IMAGES/practical/practical1.png"><br><br>
|
||||
<img id="pic5" class="pic" src="IMAGES/practical/practical2.png"><br><br>
|
||||
<img id="pic6" class="pic" src="IMAGES/practical/practical3.png"><br><br>-->
|
||||
|
||||
</div>
|
||||
<div class="intro">WELCOME TO WOR(L)DS FOR THE FUTURE BLABLA DRAW OR DRAG AND DROP OR WHATEVER<button class="enter"><b>ENTER</b></button> </div>
|
||||
|
||||
<button class="about" onclick=""><b>About</b></button>
|
||||
<div class="container"><span class="close"><button> ×</button></span>THIS IS ABOUT </div>
|
||||
|
||||
<button class="colophon"><b>Colophon</b></button>
|
||||
<div class="container">
|
||||
<p> THIS IS THE COLOPHON</p> <span class="close"><button id="close"> ×</button></span>
|
||||
|
||||
<div>
|
||||
|
||||
|
||||
<button class="licenses" onclick=""><b>Licenses</b></button></div>
|
||||
<div class="container"><p> THIS IS THE LICENSES </p><span class="close"><button> ×</button></span></div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
const button = document.querySelector(".colophon");
|
||||
const container = document.querySelector(".container");
|
||||
const close = document.querySelector(".close");
|
||||
const enter = document.querySelector(".enter");
|
||||
const intro = document.querySelector(".intro");
|
||||
|
||||
button.addEventListener('click', () =>{
|
||||
container.style.visibility = "visible";
|
||||
container.style.opacity = 1;
|
||||
|
||||
});
|
||||
|
||||
|
||||
button.addEventListener('click', () =>{
|
||||
container.style.visibility = "visible";
|
||||
container.style.opacity = 1;
|
||||
|
||||
});
|
||||
|
||||
close.addEventListener('click', () =>{
|
||||
container.style.visibility = "hidden";
|
||||
container.style.opacity = 0;
|
||||
});
|
||||
|
||||
enter.addEventListener('click', () =>{
|
||||
intro.style.visibility = "hidden";
|
||||
intro.style.opacity = 0;
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -0,0 +1,429 @@
|
||||
@media screen{
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('Roboto-Regular.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Robotobold';
|
||||
src: url('Roboto-Bold.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Robotomedium';
|
||||
src: url('Roboto-Medium.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'WFTF';
|
||||
src: url('wftfs-Regular.otf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'EBGaramonditalic';
|
||||
src: url('EBGaramond-MediumItalic.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'EBGaramonditalicsemi';
|
||||
src: url('EBGaramond-SemiBoldItalic.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'EBGaramondregular';
|
||||
src: url('EBGaramond-Medium.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Brut';
|
||||
src: url('Brut_Grotesque-Text.otf');
|
||||
}
|
||||
.grab{
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
#atata {
|
||||
font-family:'Roboto';
|
||||
font-size: 3em;
|
||||
line-height: 100%;
|
||||
margin-left: 1%;
|
||||
}
|
||||
#symbolA {
|
||||
font-family:'WFTF';
|
||||
font-size: 3em;
|
||||
margin-left: 15%;
|
||||
}
|
||||
#symbolA2 {
|
||||
font-family:'WFTF';
|
||||
font-size: 3em;
|
||||
margin-left: 15%;
|
||||
}
|
||||
#symbolL {
|
||||
font-family:'WFTF';
|
||||
font-size: 3em;
|
||||
margin-left: 15%;
|
||||
}
|
||||
#symbolO {
|
||||
font-family:'WFTF';
|
||||
font-size: 3em;
|
||||
margin-left: 15%;
|
||||
}
|
||||
#symbolE {
|
||||
font-family:'WFTF';
|
||||
font-size: 3em;
|
||||
margin-left: 15%;
|
||||
}
|
||||
#symbolM {
|
||||
font-family:'WFTF';
|
||||
font-size: 3em;
|
||||
margin-left: 15%;
|
||||
}
|
||||
#symbolT {
|
||||
font-family:'WFTF';
|
||||
font-size: 3em;
|
||||
margin-left: 15%;
|
||||
}
|
||||
#symbolH {
|
||||
font-family:'WFTF';
|
||||
font-size: 3em;
|
||||
margin-left: 15%;
|
||||
}
|
||||
#symbolP {
|
||||
font-family:'WFTF';
|
||||
font-size: 3em;
|
||||
margin-left: 15%;
|
||||
}
|
||||
#symbolR {
|
||||
font-family:'WFTF';
|
||||
font-size: 3em;
|
||||
margin-left: 15%;
|
||||
}
|
||||
#symbolU {
|
||||
font-family:'WFTF';
|
||||
font-size: 3em;
|
||||
margin-left: 15%;
|
||||
}
|
||||
#Liquid {
|
||||
font-family:'Roboto';
|
||||
font-size: 3em;
|
||||
line-height: 100%;
|
||||
|
||||
margin-left: 1%;
|
||||
}
|
||||
#Otherness {
|
||||
font-family:'Roboto';
|
||||
font-size: 3em;
|
||||
line-height: 100%;
|
||||
|
||||
margin-left: 1%;
|
||||
}
|
||||
#Eco {
|
||||
font-family:'Roboto';
|
||||
font-size: 3em;
|
||||
|
||||
line-height: 100%;
|
||||
margin-left: 1%;
|
||||
}
|
||||
#M {
|
||||
font-family:'Roboto';
|
||||
font-size: 3em;
|
||||
|
||||
line-height: 100%;
|
||||
margin-left: 1%;
|
||||
}
|
||||
#Tense {
|
||||
font-family:'Roboto';
|
||||
font-size: 3em;
|
||||
|
||||
line-height: 100%;
|
||||
margin-left: 1%;
|
||||
}
|
||||
#Hope {
|
||||
font-family:'Roboto';
|
||||
font-size: 3em;
|
||||
|
||||
line-height: 100%;
|
||||
margin-left: 1%;
|
||||
}
|
||||
#Practical{
|
||||
font-family:'Roboto';
|
||||
font-size: 3em;
|
||||
|
||||
line-height: 100%;
|
||||
margin-left: 1%;
|
||||
}
|
||||
#Resurgence1{
|
||||
font-family:'Roboto';
|
||||
font-size: 3em;
|
||||
line-height: 100%;
|
||||
margin-left: 1%;
|
||||
}
|
||||
#Undecidability{
|
||||
font-family:'Roboto';
|
||||
font-size: 3em;
|
||||
line-height: 100%;
|
||||
margin-left: 1%;
|
||||
}
|
||||
text{
|
||||
font-family:'Roboto';
|
||||
font-size: 5em;
|
||||
color: purple;
|
||||
line-height: 100%;
|
||||
margin-left: 1%;
|
||||
}
|
||||
.colophon {
|
||||
position: fixed;
|
||||
bottom: 1%;
|
||||
right: 1%;
|
||||
}
|
||||
.licenses {
|
||||
position: fixed;
|
||||
bottom: 1%;
|
||||
left: 1%;
|
||||
}
|
||||
.about {
|
||||
position: fixed;
|
||||
top: 1%;
|
||||
right: 1%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
:root{
|
||||
font-family:'Roboto';
|
||||
--regular: 20%;
|
||||
|
||||
}
|
||||
|
||||
body{
|
||||
/*pointer-events: none;*/
|
||||
margin: 0 ;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-color: var(--background-color);
|
||||
background-image: url('grid.png');
|
||||
background-size: 8vw;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
|
||||
p{
|
||||
font-family:'Roboto';
|
||||
line-height: 120%;
|
||||
}
|
||||
|
||||
#pic {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.pic {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
#container{
|
||||
z-index: 1;
|
||||
line-height: 100%;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
#background{
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#map{
|
||||
width: 100%;
|
||||
height: auto;}
|
||||
|
||||
p:hover{
|
||||
box-shadow: 0px 0px 40px black;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
button{
|
||||
position: fixed;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
display: inline-block;
|
||||
padding: 0.5vw 1.3em;
|
||||
color: black;
|
||||
font-size: 1.5vw;
|
||||
text-decoration: none;
|
||||
margin-bottom: 1.5vw;
|
||||
background-color: transparent;
|
||||
border-radius: 40px;
|
||||
-webkit-box-shadow: 15px 15px 15px 15px;
|
||||
box-shadow: 0px 0px 15px 8px rgba(0,0,0,0);
|
||||
}
|
||||
button1{
|
||||
position: fixed;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
display: inline-block;
|
||||
padding: 0.5vw 1.3em;
|
||||
color: black;
|
||||
top: 1%;
|
||||
left: 30px;
|
||||
font-size: 1.5vw;
|
||||
text-decoration: none;
|
||||
margin-bottom: 1.5vw;
|
||||
background-color: transparent;
|
||||
border-radius: 40px;
|
||||
-webkit-box-shadow: 15px 15px 15px 15px;
|
||||
box-shadow: 0px 0px 15px 8px rgba(0,0,0,0);
|
||||
}
|
||||
button3{
|
||||
position: fixed;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
display: inline-block;
|
||||
padding: 0.5vw 1.3em;
|
||||
color: black;
|
||||
bottom: 1%;
|
||||
left: 90px;
|
||||
font-size: 1.5vw;
|
||||
text-decoration: none;
|
||||
margin-bottom: 1.5vw;
|
||||
background-color: transparent;
|
||||
border-radius: 40px;
|
||||
-webkit-box-shadow: 15px 15px 15px 15px;
|
||||
box-shadow: 0px 0px 15px 8px rgba(0,0,0,0);
|
||||
}
|
||||
.container{
|
||||
z-index:15;
|
||||
position: absolute;
|
||||
overflow: scroll;
|
||||
font-size: 2em;
|
||||
line-height: 100%;
|
||||
color: blue;
|
||||
height: 97%;
|
||||
width: 20%;
|
||||
padding: 10px;
|
||||
margin-top: 3.5%;
|
||||
z-index: 10;
|
||||
color: #242322;
|
||||
position:fixed;
|
||||
right: 0.01px;
|
||||
border-radius: 2px;
|
||||
top: 10px;
|
||||
opacity: 1;
|
||||
padding: 1em;
|
||||
box-shadow: 0 0 40px #214c12;
|
||||
background-color:#bbb9c17d;
|
||||
overflow: scroll;
|
||||
overflow-x: hidden;
|
||||
resize: both;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.container2{
|
||||
z-index:15;
|
||||
position: absolute;
|
||||
overflow: scroll;
|
||||
color: blue;
|
||||
height: 97%;
|
||||
width: 20%;
|
||||
padding: 10px;
|
||||
z-index: 10;
|
||||
color: #242322;
|
||||
position:fixed;
|
||||
left: 0.01px;
|
||||
border-radius: 2px;
|
||||
top: 10px;
|
||||
opacity: 1;
|
||||
padding: 1em;
|
||||
box-shadow: 0 0 40px #214c12;
|
||||
background-color:#bbb9c17d;
|
||||
overflow: scroll;
|
||||
overflow-x: hidden;
|
||||
resize: both;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
.container3{
|
||||
z-index:15;
|
||||
position: absolute;
|
||||
overflow: scroll;
|
||||
color: blue;
|
||||
height: 97%;
|
||||
width: 20%;
|
||||
padding: 10px;
|
||||
z-index: 10;
|
||||
color: #242322;
|
||||
position:fixed;
|
||||
right: 0.01px;
|
||||
border-radius: 2px;
|
||||
top: 10px;
|
||||
opacity: 1;
|
||||
padding: 1em;
|
||||
box-shadow: 0 0 40px #214c12;
|
||||
background-color:#bbb9c17d;
|
||||
overflow: scroll;
|
||||
overflow-x: hidden;
|
||||
resize: both;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
.close{
|
||||
font-size: 2em;
|
||||
margin-left: 1%;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.intro{
|
||||
z-index:15; position: absolute;
|
||||
height: 70%;
|
||||
width: 70%;
|
||||
padding: 10px;
|
||||
z-index: 10;
|
||||
color: black;
|
||||
position:fixed;
|
||||
border-radius: 10px;
|
||||
padding: 1em;
|
||||
box-shadow: 0 0 40px #214c12;
|
||||
background-color:white;
|
||||
resize: both;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index:10;
|
||||
transform: translate(-50%, -50%);
|
||||
overflow-x: hidden;
|
||||
resize: both;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.enter{
|
||||
font-size: 1em;top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
#close{
|
||||
position: absolute;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
display: inline-block;
|
||||
color: black;
|
||||
bottom: 1%;
|
||||
text-align: right;
|
||||
font-size: 0.5vw;
|
||||
text-decoration: none;
|
||||
margin-bottom: 0.1vw;
|
||||
background-color: transparent;
|
||||
border-radius: 40px;
|
||||
-webkit-box-shadow: 15px 15px 15px 15px;
|
||||
box-shadow: 0px 0px 15px 8px rgba(0,0,0,0)
|
||||
}
|
||||
@ -0,0 +1,104 @@
|
||||
|
||||
//DRAG & DROPs
|
||||
|
||||
draggable = new PlainDraggable(document.getElementById('atata'));
|
||||
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
|
||||
// draggable.snap = {step: 30};
|
||||
|
||||
draggable = new PlainDraggable(document.getElementById('Liquid'));
|
||||
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
|
||||
// draggable.snap = {step: 30};
|
||||
|
||||
draggable = new PlainDraggable(document.getElementById('M'));
|
||||
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
|
||||
// draggable.snap = {step: 30};
|
||||
|
||||
draggable = new PlainDraggable(document.getElementById('Otherness'));
|
||||
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
|
||||
//draggable.snap = {step: 30};
|
||||
|
||||
draggable = new PlainDraggable(document.getElementById('pic'));
|
||||
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
|
||||
// draggable.snap = {step: 30};
|
||||
|
||||
draggable = new PlainDraggable(document.getElementById('Resurgence'));
|
||||
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
|
||||
// draggable.snap = {step: 30};
|
||||
|
||||
draggable = new PlainDraggable(document.getElementById('pic2'));
|
||||
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
|
||||
// draggable.snap = {step: 30};
|
||||
draggable = new PlainDraggable(document.getElementById('pic3'));
|
||||
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
|
||||
// draggable.snap = {step: 30};
|
||||
draggable = new PlainDraggable(document.getElementById('pic4'));
|
||||
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
|
||||
// draggable.snap = {step: 30};
|
||||
draggable = new PlainDraggable(document.getElementById('pic5'));
|
||||
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
|
||||
// draggable.snap = {step: 30};
|
||||
draggable = new PlainDraggable(document.getElementById('pic6'));
|
||||
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
|
||||
// draggable.snap = {step: 30};
|
||||
|
||||
//P5 DRAWING
|
||||
|
||||
// var numberOfRows; //determine the number of rows we want
|
||||
// var numberOfColumns; //determine the number of columns we want
|
||||
|
||||
// var xStep; //determine the size of the gap between two points on the x axis
|
||||
// var yStep; //determine the size of the gap between two points on the y axis
|
||||
|
||||
// var positions = []; //an array of positions where we will store each of our Vectors
|
||||
|
||||
|
||||
function setup() {
|
||||
|
||||
|
||||
canvas = createCanvas(windowWidth, windowHeight);
|
||||
canvas.position(0, 0);
|
||||
canvas.style('z-index', '-10');
|
||||
background(0,0,0,0);
|
||||
|
||||
|
||||
// numberOfColumns = 10; //we want 16 columns
|
||||
// numberOfRows = 10; //we want 9 rows
|
||||
|
||||
// xStep = windowWidth/numberOfColumns; //to make sure they are evenly spaced, we divide the width and height by numberOfColumns
|
||||
// yStep = windowHeight/numberOfRows; //and numberOfRows respectively
|
||||
|
||||
// for(var x = 0; x < width; x += xStep){ //start at the first column, where x = 0
|
||||
|
||||
// for(var y = 0; y < height; y += yStep){ //go through all the rows (y = 0, y = yStep * 1, y = yStep * 2, etc.)
|
||||
|
||||
// var p = createVector(x, y); //we create a vector at this location
|
||||
|
||||
// positions.push(p); // and then we put the vector into the array
|
||||
|
||||
// }
|
||||
// //at the end of the inner for loop, we go back to the first loop, and we increment x
|
||||
// //now our column is going to be x = xStep*1, and we populate all the rows with the inner for loop
|
||||
// //and again, and again until x > width
|
||||
// }
|
||||
|
||||
|
||||
}
|
||||
|
||||
function draw() {
|
||||
|
||||
fill(0,0,0);
|
||||
|
||||
// for(var i = 0; i < positions.length; i++){ //go through all our positions
|
||||
// ellipse(positions[i].x, positions[i].y, 2000, 2); //put a circle at each of them
|
||||
// }
|
||||
// for(var i = 0; i < positions.length; i++){ //go through all our positions
|
||||
// ellipse(positions[i].x, positions[i].y, 2, 2000); //put a circle at each of them
|
||||
// }
|
||||
|
||||
|
||||
if (mouseIsPressed === true) {
|
||||
stroke(0);
|
||||
strokeWeight(3)
|
||||
line(mouseX, mouseY, pmouseX, pmouseY);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
:root{
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
--background-color: white
|
||||
}
|
||||
|
||||
body{
|
||||
margin: 0 ;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: var(--background-color);
|
||||
background-image: url('map.png');
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
/* filter: invert(); */
|
||||
|
||||
}
|
||||
|
||||
#pic{width: 100px;}
|
||||
|
||||
|
||||
|
||||
.pic{width: 100px;}
|
||||
|
||||
#container{z-index: 1;}
|
||||
#background{z-index: 0;}
|
||||
|
||||
#map{width: 100%;
|
||||
height: auto;}
|
||||
|
||||
p:hover{box-shadow: 0px 0px 40px black}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8" ?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="1080">
|
||||
<rect fill="rgb(0,0,0)" fill-opacity="0" stroke="none" width="1920" height="1080"/>
|
||||
<ellipse fill="none" stroke="rgb(0,0,0)" stroke-width="0.029999999" stroke-miterlimit="0" transform="matrix(540 0 0 540 960 540)" cx="0" cy="0" rx="0.97000003" ry="0.97000003"/>
|
||||
<ellipse fill="rgb(0,0,0)" stroke="none" transform="matrix(523.035 -134.293 134.293 523.035 960 540)" cx="0.37" cy="0.050000012" rx="0.30500001" ry="0.57999998"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 586 B |
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue