index updated

4 years ago · 7831faa20f
parent 35409c825b
commit 7831faa20f
48 changed files with 490 additions and 77 deletions
--- a/PRACTICAL_VISION/scripts/hcindex.js
+++ b/PRACTICAL_VISION/scripts/hcindex.js
@ -27,7 +27,7 @@ cnv.position(innerWidth/4, innerHeight*0.1);
  cnv.style('z-index','-10');
 }
 else {
-  var cnv = createCanvas(innerWidth*0.9, windowHeight, WEBGL);
+  var cnv = createCanvas(innerWidth, windowHeight, WEBGL);
  cnv.position(innerWidth*1.35);
  cnv.style('z-index','-10');
 }
--- a/README.md
+++ b/README.md
@ -0,0 +1,4 @@
 # WOR(L)DS FOR THE FUTURE
 ## A Republishing Toolkit for an Imaginary Atlas
 SPECIAL ISSUE 13 - XPUB2020
--- a/0
+++ b/0
--- a/UNDECIDABILITY/index.html
+++ b/UNDECIDABILITY/index.html
@ -1,3 +1,5 @@
 <!DOCTYPE html>
 <html>
    <head>
@ -748,7 +750,9 @@ var chap1 = document.getElementById("emoji");
 chap1.addEventListener('click', function changeText(){
    chap1.innerHTML = "When are your 'thinking <b>and</b> imagining <b>and</b> fantasisng <b>and</b> conceptualising' born?<br> Have you ever seen physical births of these activities? They are not tangible <b>and</b> not visible. Don't you normally have them during your daily rituals? For instance,<br><br>when you have a 🚿 to refresh yourself.<br><b>And</b> when you drink a cup of ☕.<br><b>And</b> when you get some  🔆. <br><b>And</b> when you water your 🌱. <br><b>And</b> when you smoke 🚬  <br><b>And</b> when you 📞  your freinds.<br> You may think you're not in working mode, yet in fact, unconsciously get into labours...";
-    chap1.style.cssText = "position: relative; display: inline-block; font-size: 16px; font-family: 'Avenir'; margin-left: 12%; left: 30px; line-height: 1.8; color: white; background-color: black; width: 60%; text-align: left; border: 1px solid; box-shadow: 5px 5px blue;"});  
+    chap1.style.cssText = "position: relative; display: inline-block; font-size: 16px; font-family: 'Avenir'; margin-left: 12%; left: 30px; line-height: 1.8; color: white; background-color: black; width: 60%; text-align: left; border: 1px solid; box-shadow: 5px 5px blue;"
 });  
--- a/UNDECIDABILITY/und_response.html
+++ b/UNDECIDABILITY/und_response.html
@ -43,7 +43,7 @@ a{
 #buttons {
    position: absolute;
    padding: 5px; 
-    top: 75px;
+    top: 55px;
    left: 580px;
    width: 400px;
    color: blue;
@ -57,7 +57,7 @@ a{
 #symbol{
    position: absolute;
-    top: 50px;
+    top: 40px;
    margin-left: 50px;
    font-family: 'wftfs-Regular';
    font-size: 47px;
@ -72,7 +72,7 @@ h1 {
    font-size: 24px; 
    position: absolute;
    left: 100px;
-    top: 41px;
+    top: 31px;
    text-justify: inter-word;
    line-height: 2.4;
@ -93,7 +93,7 @@ h1 {
    display: inline-block;
    width: 420px;
    margin-left: 50px;
-    margin-top: 145px;   
+    margin-top: 135px;   
    border: 1px solid; 
    box-shadow: 5px 5px blue;
@ -102,7 +102,7 @@ h1 {
 #text {
    position: absolute;
    padding-right: 15px;
-    top: 145px;
+    top: 135px;
    margin-left: 540px;
    font-family: Noto Serif;
    font-size: 12.4pt;
@ -118,7 +118,7 @@ h1 {
 #text2 {
    position: absolute;
    padding-right: 15px;
-    top: 145px;
+    top: 135px;
    left: 1940px;
    font-family: Noto Serif;
    font-size: 12.4pt;
--- a/fonts/EBGaramond-Bold.ttf
+++ b/fonts/EBGaramond-Bold.ttf
--- a/fonts/EBGaramond-BoldItalic.ttf
+++ b/fonts/EBGaramond-BoldItalic.ttf
--- a/fonts/EBGaramond-ExtraBold.ttf
+++ b/fonts/EBGaramond-ExtraBold.ttf
--- a/fonts/EBGaramond-ExtraBoldItalic.ttf
+++ b/fonts/EBGaramond-ExtraBoldItalic.ttf
--- a/fonts/EBGaramond-Italic.ttf
+++ b/fonts/EBGaramond-Italic.ttf
--- a/fonts/EBGaramond-Medium.ttf
+++ b/fonts/EBGaramond-Medium.ttf
--- a/fonts/EBGaramond-MediumItalic.ttf
+++ b/fonts/EBGaramond-MediumItalic.ttf
--- a/fonts/EBGaramond-Regular.ttf
+++ b/fonts/EBGaramond-Regular.ttf
--- a/fonts/EBGaramond-SemiBold.ttf
+++ b/fonts/EBGaramond-SemiBold.ttf
--- a/fonts/EBGaramond-SemiBoldItalic.ttf
+++ b/fonts/EBGaramond-SemiBoldItalic.ttf
--- a/fonts/Roboto-Black.ttf
+++ b/fonts/Roboto-Black.ttf
--- a/fonts/Roboto-BlackItalic.ttf
+++ b/fonts/Roboto-BlackItalic.ttf
--- a/fonts/Roboto-Bold.ttf
+++ b/fonts/Roboto-Bold.ttf
--- a/fonts/Roboto-BoldItalic.ttf
+++ b/fonts/Roboto-BoldItalic.ttf
--- a/fonts/Roboto-Italic.ttf
+++ b/fonts/Roboto-Italic.ttf
--- a/fonts/Roboto-Light.ttf
+++ b/fonts/Roboto-Light.ttf
--- a/fonts/Roboto-LightItalic.ttf
+++ b/fonts/Roboto-LightItalic.ttf
--- a/fonts/Roboto-Medium.ttf
+++ b/fonts/Roboto-Medium.ttf
--- a/fonts/Roboto-MediumItalic.ttf
+++ b/fonts/Roboto-MediumItalic.ttf
--- a/fonts/Roboto-Regular.ttf
+++ b/fonts/Roboto-Regular.ttf
--- a/fonts/Roboto-Thin.ttf
+++ b/fonts/Roboto-Thin.ttf
--- a/fonts/Roboto-ThinItalic.ttf
+++ b/fonts/Roboto-ThinItalic.ttf
--- a/fonts/RobotoMono-Bold.ttf
+++ b/fonts/RobotoMono-Bold.ttf
--- a/fonts/RobotoMono-BoldItalic.ttf
+++ b/fonts/RobotoMono-BoldItalic.ttf
--- a/fonts/RobotoMono-ExtraLight.ttf
+++ b/fonts/RobotoMono-ExtraLight.ttf
--- a/fonts/RobotoMono-ExtraLightItalic.ttf
+++ b/fonts/RobotoMono-ExtraLightItalic.ttf
--- a/fonts/RobotoMono-Italic.ttf
+++ b/fonts/RobotoMono-Italic.ttf
--- a/fonts/RobotoMono-Light.ttf
+++ b/fonts/RobotoMono-Light.ttf
--- a/fonts/RobotoMono-LightItalic.ttf
+++ b/fonts/RobotoMono-LightItalic.ttf
--- a/fonts/RobotoMono-Medium.ttf
+++ b/fonts/RobotoMono-Medium.ttf
--- a/fonts/RobotoMono-MediumItalic.ttf
+++ b/fonts/RobotoMono-MediumItalic.ttf
--- a/fonts/RobotoMono-Regular.ttf
+++ b/fonts/RobotoMono-Regular.ttf
--- a/fonts/RobotoMono-SemiBold.ttf
+++ b/fonts/RobotoMono-SemiBold.ttf
--- a/fonts/RobotoMono-SemiBoldItalic.ttf
+++ b/fonts/RobotoMono-SemiBoldItalic.ttf
--- a/fonts/RobotoMono-Thin.ttf
+++ b/fonts/RobotoMono-Thin.ttf
--- a/fonts/RobotoMono-ThinItalic.ttf
+++ b/fonts/RobotoMono-ThinItalic.ttf
--- a/fonts/WFTF_custom-Regular.otf
+++ b/fonts/WFTF_custom-Regular.otf
--- a/fonts/wftfs-Regular.otf
+++ b/fonts/wftfs-Regular.otf
--- a/DRAW/assets/grid.png
+++ b/DRAW/assets/grid.png
--- a/index.html
+++ b/index.html
@ -4,21 +4,17 @@
 <html>
    <head>
        <meta charset="utf-8">
-        <title>Wor(l)ds for the Future!</title>
+        <title>Wor(l)ds for the Future</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="scripts/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"/>
-        
+        <script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
-    
+        <meta http-equiv="page-exit" content="revealtrans(duration=3,transition=2">
    </head>
    <body>
-            <div class="header">
+        <div class="header">
-                 <p id="title">WOR(L)DS FOR THE FUTURE!<br><span id="sub">A Republishing Toolkit for an Imaginary Atlas</span></p>
+            <p id="title">WOR(<span class="customfont">L</span>)DS FOR THE FUTURE<br><span id="sub">A Republishing Toolkit for an Imaginary Atlas</span></p> 
-                 
+        </div>
            </div>
        <div class="row">
@ -29,7 +25,11 @@
            <div class="column right">
-                <div id="button"><button onclick="myFunction()">▼ intro</button>  <button onclick="myFunction2()">▼ colophon</button></div>
+            <div id="button">
                <button onclick="myFunction()">▼ Intro</button>  
                <button onclick="myFunction2()">▼ Colophon</button>
                <button onclick="myFunction3()">▼ Print</button>
                </div>
                <p id="intro">Words have the power to shape reality. Wor(l)ds for the Future is a set of map making tools to reimagine common landscapes. We invite you to delve into the materials and traverse the texts in any way you desire: by cutting and pasting the printed matter, or by unravelling the texts online. The choice is yours. You can reconstruct images and reinterpret wor(l)ds, to create Wor(l)ds for the Future.
@ -37,20 +37,82 @@
 </p>
                <p id="colophon">people did things</p>
                 <p id="print">people print stuff</p>
                <p id='gallery'></p>
            </div>                        
            </div>
    <script>
-function myFunction() {
+        
-  document.getElementById("intro").style.visibility = "visible";
+
-  document.getElementById("colophon").style.visibility = "hidden";
+        
-}
+    
-        
+        
-function myFunction2() {
+        
-  document.getElementById("colophon").style.visibility = "visible";
+        
-  document.getElementById("intro").style.visibility = "hidden";
+        function myFunction() {
-}
+          document.getElementById("intro").style.visibility = "visible";
          document.getElementById("colophon").style.visibility = "hidden";
          document.getElementById("print").style.visibility = "hidden";
            document.getElementById("gallery").style.visibility = "hidden";
            }
        function myFunction2() {
          document.getElementById("intro").style.visibility = "hidden";
          document.getElementById("colophon").style.visibility = "visible";
          document.getElementById("print").style.visibility = "hidden";
            document.getElementById("gallery").style.visibility = "hidden";
            }
                function myFunction3() {
          document.getElementById("intro").style.visibility = "hidden";
          document.getElementById("colophon").style.visibility = "hidden";
          document.getElementById("print").style.visibility = "visible";
                    document.getElementById("gallery").style.visibility = "hidden";
            }
            gallery = document.getElementById("gallery");
            var typewriter = new Typewriter(gallery, {
                loop:true,
                cursor:""
            });
            typewriter.typeString('A')
                    .pauseFor(100)
                    .deleteAll()
                    .typeString('M')
                    .pauseFor(100)
                    .deleteAll()
                    .typeString('T')
                    .pauseFor(100)
                    .deleteAll()
                    .typeString('L')
                    .pauseFor(100)
                    .deleteAll()
                    .typeString('P')
                    .pauseFor(100)
                    .deleteAll()
                    .typeString('R')
                    .pauseFor(100)
                    .deleteAll()
                    .typeString('U')
                    .pauseFor(100)
                    .deleteAll()
                    .typeString('H')
                    .pauseFor(100)
                    .deleteAll()
                    .typeString('O')
                    .pauseFor(100)
                    .deleteAll()
                    .typeString('E')
                    .pauseFor(100)
                    .deleteAll()
                    .start();
 </script>
--- a/js.js
+++ b/js.js
@ -1,6 +1,6 @@
 let NN = ["punctuation", "symbol", "conflict", "matter", "flux", "loop", "visibility", "multiplicity", "imagination", "democracy","darkness", "subjectivity", "reciprocity","corn", "water", "communities", "Kanye West", "cunt", "god", "language", "knowledge", "web", "ruins", "interdependence", "oneness", "identity", "values", "systems", "democracy"];
-let VB = ["embrace", "flow", "combine", "reinterpret", "understand", "argue","perform", "dominate", "agrue", "overuse", "express", "imagine", "perform", "coexist", "give", "receive", "reflect", "translate", "disseminate", "learn", "weave", "complicate", "demoralise", "experience", "expand", "dominate", "overuse", "express", "happen", "arrive", "submit", "self-govern"];
+let VB = ["embrace", "flow", "combine", "reinterpret", "understand","perform", "dominate", "argue", "overuse", "express", "imagine", "perform", "coexist", "give", "receive", "reflect", "translate", "disseminate", "learn", "weave", "complicate", "demoralise", "experience", "expand", "dominate", "overuse", "express", "happen", "arrive", "submit", "self-govern"];
 let AC = ["boundless","political","pluralistic","accessible", "organic", "sublime", "imaginistic", "linguistic", "undecidable", "potential", "autonomous", "indigenous", "systemic", "reciprocal", "plural", "collective", "foreign", "unrelated", "suspicious", "other", "descriptive", "feminist", "alive", "ecologic", "harmonous"];
@ -43,7 +43,7 @@ var links = {
     "boundless": "LIQUID/",
    "organic": "LIQUID/",
    "sublime": "LIQUID/",
-    "vundecidability": "UNDECIDABILITY/",
+    "undecidability": "UNDECIDABILITY/",
    "visibility": "UNDECIDABILITY/",
    "multiplicity": "UNDECIDABILITY/",
    "imagination": "UNDECIDABILITY/",
@ -93,7 +93,7 @@ var links = {
    "unrelated": "OTHERNESS/",
    "suspicious": "OTHERNESS/",
    "other": "OTHERNESS/",
-    "tence": "TENSE/",
+    "tense": "TENSE/",
    "happen": "TENSE/",
    "arrive": "TENSE/",
    "submit": "TENSE/",
@ -119,13 +119,120 @@ var links = {
    "interdependece": "RESURGENCE/",    
 }
 var icons = {
    "?!": "M",
    "dominate" : "M",
    "overuse" : "M",
    "express" : "M",
    "punctuation" : "M",
    "symbol" : "M",
    "conflict" : "M",
    "political" : "M",
    "imaginistic" : "M",
    "linguistic" : "M",
    "liquid": "L",
    "flow": "L",
    "combine": "L",
    "reinterpret": "L",
    "matter": "L",
    "flux": "L",
    "loop": "L",
     "boundless": "L",
    "organic": "L",
    "sublime": "L",
    "undecidability": "U",
    "visibility": "U",
    "multiplicity": "U",
    "imagination": "U",
    "imagine": "U",
    "perform": "U",
    "coexist": "U",
    "undecidable": "U",
    "potential": "U",
    "autonomous": "U",
    "hope": "H",
    "embrace": "H",
    "understand": "H",
    "argue": "H",
    "democracy": "H",
    "darkness": "H",
    "subjectivity": "H",
    "political": "H",
    "pluralistic": "H",
    "accessible": "H",
    "atata": "A",
    "give": "A",
    "receive": "A",
    "reflect": "A",
    "reciprocity": "A",
    "corn": "A",
    "water": "A",
    "indigenous": "A",
    "systemic": "A",
    "reciprocal": "A",
    "practical vision": "P",
    "translate": "P",
    "disseminate": "P",
    "learn": "P",
    "plural": "P",
    "collective": "P",
    "foreign": "P",
    "language": "P",
    "knowledge": "P",
    "web": "P",
    "otherness": "O",
    "experience": "O",
    "expand": "O",
    "understand": "O",
    "oneness": "O",
    "identity": "O",
    "values": "O",
    "unrelated": "O",
    "suspicious": "O",
    "other": "O",
    "tense": "T",
    "happen": "T",
    "arrive": "T",
    "submit": "T",
    "Kanye West": "T",
    "cunt": "T",
    "god": "T",
    "descriptive": "T",
    "feminist": "T",
    "alive": "T",
    "eco swaraj": "E",
    "ecologic": "E",
    "harmonous": "E",
    "political": "E",
    "self-govern": "E",
    "communities": "E",
    "systems": "E",
    "democracy": "E",
    "resurgence": "R",
    "weave": "R",
    "complicate": "R",
    "demoralise": "R",
    "ruins": "R",
    "interdependece": "R",
 }
 let message = `In the <a2 onClick="window.location.reload();" id="future">future</a2>, the world could be full of <a class="${icons[TS[0]]}" target="_blank" href="${links[TS[0]]}">${TS[0]} <span class="${icons[TS[0]]}">${icons[TS[0]]}</span></a>.\n\
 Beings could <a target="_blank" class="${icons[VB[0]]}" href="${links[VB[0]]}">${VB[0]} <span class="${icons[VB[0]]}">${icons[VB[0]]}</span></a> and <a target="_blank" class="${icons[VB[1]]}" href="${links[VB[1]]}">${VB[1]} <span class="${icons[VB[1]]}">${icons[VB[1]]}</span></a> in 
 <a target="_blank" class="${icons[NNP[0]]}"href="${links[NNP[0]]}">${NNP[0]} <span class="${icons[NNP[0]]}">${icons[NNP[0]]}</span></a> <a target="_blank" class="${icons[NNP[1]]}" href="${links[NNP[1]]}">${NNP[1]} <span class="${icons[NNP[1]]}">${icons[NNP[1]]}</span></a>.\n\
 The <a target="_blank" class="${icons[TS[2]]}" href="${links[TS[2]]}">${TS[2]} <span class="${icons[TS[2]]}">${icons[TS[2]]}</span></a> would no longer be <a target="_blank" class="${icons[AC[4]]}" href="${links[AC[4]]}">${AC[4]} <span class="${icons[AC[4]]}">${icons[AC[4]]}</span></a>, but 
 <a target="_blank" class="${icons[AC[2]]}" href="${links[AC[2]]}">${AC[2]} <span class="${icons[AC[2]]}">${icons[AC[2]]}</span></a> and <a target="_blank" class="${icons[AC[5]]}" href="${links[AC[5]]}">${AC[5]} <span class="${icons[AC[5]]}">${icons[AC[5]]}</span></a>.\n\ 
 Only with the <a target="_blank" class="${icons[AC[3]]}" href="${links[AC[3]]}">${AC[3]} <span class="${icons[AC[3]]}">${icons[AC[3]]}</span></a> <a target="_blank" class="${icons[TS[3]]}" href="${links[TS[3]]}">${TS[3]} <span class="${icons[TS[3]]}">${icons[TS[3]]}</span></a>, there could finally be 
 <a target="_blank" class="${icons[TS[4]]}" href="${links[TS[4]]}">${TS[4]} <span class="${icons[TS[4]]}">${icons[TS[4]]}</span></a>.\n\ 
 Without <a target="_blank" class="${icons[TS[5]]}" href="${links[TS[5]]}">${TS[5]} <span class="${icons[TS[5]]}">${icons[TS[5]]}</span></a>, <a target="_blank" class="${icons[NNP[1]]}" href="${links[NNP[1]]}">${NNP[1]} <span class="${icons[NNP[1]]}">${icons[NNP[1]]}</span></a> <a target="_blank" class="${icons[TS[6]]}" href="${links[TS[6]]}">${TS[6]} <span class="${icons[TS[6]]}">${icons[TS[6]]}</span></a> could never <a  target="_blank" class="${icons[VB[3]]}" href="${links[VB[3]]}">${VB[3]} <span class="${icons[VB[3]]}">${icons[VB[3]]}</span></a>.\n\ 
-let message = `In the future, the world could be full of <a href="${links[TS[0]]}">${TS[0]}</a>.\n\  
+This is why we have to <a target="_blank" class="${icons[VB[2]]}" href="${links[VB[2]]}">${VB[2]} <span class="${icons[VB[2]]}">${icons[VB[2]]}</span></a> for the <a target="_blank" class="${icons[TS[7]]}" href="${links[TS[7]]}">${TS[7]} <span class="${icons[TS[7]]}">${icons[TS[7]]}</span></a> of new <a  target="_blank" class="${icons[NN[0]]}" href="${links[NN[0]]}">${NN[0]} <span class="${icons[NN[0]]}">${icons[NN[0]]}</span></a>.`
 Humans could <a href="${links[VB[0]]}">${VB[0]}</a> and <a href="${links[VB[1]]}">${VB[1]}</a> in <a href="${links[NNP[0]]}">${NNP[0]}</a> <a href="${links[TS[1]]}">${TS[1]}</a>.\n\
 The <a href="${links[TS[2]]}">${TS[2]}</a> would no longer be <a href="${links[AC[4]]}">${AC[4]}</a>, but <a href="${links[AC[2]]}">${AC[2]}</a> and <a href="${links[AC[1]]}">${AC[1]}</a>.\n\ 
 Only with the <a href="${links[AC[3]]}">${AC[3]}</a> <a href="${links[TS[3]]}">${TS[3]}</a>, there could finally be <a href="${links[TS[4]]}">${TS[4]}</a>.\n\ 
 Without <a href="${links[TS[5]]}">${TS[5]}</a>, <a href="${links[NNP[1]]}">${NNP[1]}</a> <a href="${links[TS[6]]}">${TS[6]}</a> could never <a href="${links[VB[3]]}">${VB[3]}</a>.\n\ 
 This is why we have to <a href="${links[VB[2]]}">${VB[2]}</a> for the <a href="${links[TS[7]]}">${TS[7]}</a> of new <a href="${links[NN[0]]}">${NN[0]}</a>.`
 document.querySelector('#showMessage').innerHTML = message
--- a/24
+++ b/24
@ -0,0 +1,24 @@
 XPUB - WOR(L)DS FOR THE FUTURE LICENSE (v 0.1)
 A pluralistic open license
 © 2020 XPUB - SPECIAL ISSUE 13
 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.
 We encourage you to:
    introduce the project to your neighbours, friends, family, etc;
    translate the contents into other languages;
    create new dramaturgies (structures, stories, worlds) from the contents;
    extend this license, as long as the kinship, commercial use and attribution conditions remain in force.
 Kinship:
 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/S13) to modify the project files, we ask you to send us the modifications so we can archive them as well.
 Commercial use:
 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 and/or production, needed to circulate copies of the work. We are asking you to be transparent about such expenses.
 Attribution:
 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.
--- a/style.css
+++ b/style.css
@ -39,6 +39,11 @@
        src:  url('fonts/Brut_Grotesque-Text.otf');
 } 
    @font-face {
        font-family: 'WFTF_custom-Regular';
        src:  url('fonts/WFTF_custom-Regular.otf');
 }  
 * {
  box-sizing: border-box;
 }
@ -47,12 +52,16 @@
    font-family:'Roboto';
    --title: 6vw;
    --sub: 3vw;
-    --regular: 3vw;
+    --regular: 2vw;
-    --description: 1vw
+    --description: 1vw;
    --right: 1vw;
    --icon: 1.7vw
 }
 body{
-    margin: 0;
+    background-image: url('grid.png');
    background-size: 8vw;
    margin: 0 10vw;
    padding: 0;
    max-width: 100%;
    min-height: 100vh;
@ -62,21 +71,22 @@ body{
    z-index: 100;
 }
-    .row{
+
        margin: 0 6vw;
    }
 button{
    margin-left: 2vw;
    font-family:'Robotomono';
    color: black;
    background-color: white;
    font-size: var(--description);
    border-radius: 40px
 }
 .header{
    position: relative;
 /*     height: 1vw; */
-    margin: 0 6vw;    
+/*     margin: 0 6vw;     */
    width: 100vw;
    line-height: 4vw
 }
@ -88,71 +98,273 @@ button{
    }
 #sub{
-    font-family:'Roboto';
+    font-family: 'EBGaramonditalic';
    font-size: var(--sub);
    }
 .column {
  float: left;
 }
 .left {
-    width: 70%;
+    width: 65%;
    background-color: white;
    font-family:'Robotomono';   
    background-color: rgba(0,0,0,0)}
    #showMessage{
    margin-top:3vw;
    padding-right: 2vw;
    font-family:'EBGaramondregular';
    font-size: var(--regular);
    line-height: 3vw;
    }
 }
 .right {
-    width: 30%;
+    width: 35%;
    background-color: white;
    border-left: 2px solid black;
-    height: 100vw;
+    height: 300vw;
    text-align: right;
        background-color: rgba(0,0,0,0)
 }
    .right p{
        font-size: var(--right);
        line-height: 1.5vw;
        padding: 0 10vw  0 2vw
    }
    #button{
        text-align: right;
    #button{
 text-align: center
    }
    button{
        font-size: var(--description)}
 #showMessage{
    margin-top:3vw;
    font-size:1.5vw;
    padding: 2vw;
    font-family:'EBGaramondregular';
    font-size: var(--regular);
    }
   #showMessage p{
    font-size: 5vw
    }
 #intro{
    visibility: hidden; 
    position: absolute; 
-    font-family:'Robotomono';     
+      
    overflow-y: scroll;
-    margin: 2vw;
+     margin: 2vw;
    line-height: 1.5vw}
-#colophon{
+ #colophon{
    visibility: hidden;
    position: absolute; 
-    font-family:'Robotomono';     
+   
    overflow-y: scroll;
    margin: 2vw;}
-#showMessage{
+#print{
-    margin-top:3vw;
+    visibility: hidden;
-    font-size:1.5vw;
+    position: absolute; 
    overflow-y: scroll;
    margin: 2vw;} 
    .A{
        color: orange;
    }
-a #showMessage{
+    .M{
-    margin-top:3vw;
+        color: red;
-    font-size:1.5vw;
+    }
-    color: blue;
+    
        .T{
        color: silver;
    }
    .L{
        color: aqua;
    }
    .P{
        color: pink;
    }
    .R{
        color: #0F0;
    }
    .U{
        color: grey;
    }
    .H{
        color: yellow;
    }
    .O{
        color: blue;
    }
    .E{
        color: green;
    }
    #showMessage a{
    color: black;
    text-decoration: none;
    font-family: 'EBGaramonditalic';
    }
    #showMessage span{
        font-family: "WFTF";
        text-decoration: underline;
        font-size: var(--icon);
    }
        #showMessage .A:hover{
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
 /*     text-decoration: underline; */
            color: orange;
    }
            #showMessage .M:hover{
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
 /*     text-decoration: underline; */
            color: red;
    }
            #showMessage .T:hover{
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
 /*     text-decoration: underline; */
            color: silver;
    }
            #showMessage .L:hover{
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
 /*     text-decoration: underline; */
            color: aqua;
    }
            #showMessage .P:hover{
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
 /*     text-decoration: underline; */
            color: pink;
    }
            #showMessage .R:hover{
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
 /*     text-decoration: underline; */
            color: #0f0;
    }
            #showMessage .U:hover{
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
 /*     text-decoration: underline; */
            color: grey
    }
                #showMessage .E:hover{
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
 /*     text-decoration: underline; */
            color: green;
    }
                #showMessage .H:hover{
        -webkit-transition: all .5sease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5sease;
        transition: all .5s ease;
 /*     text-decoration: underline; */
            color: yellow;
    }
                #showMessage .O:hover{
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
 /*     text-decoration: underline; */
            color: blue;
    }
    #future{
        text-decoration: none;
        font-family: 'EBGaramonditalic';
    }
    #future:hover{
        text-decoration: underline;
        filter: blur(1px);
        -webkit-transition: all .5sease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5sease;
        transition: all .5s ease;
        animation: sexy 1s infinite;
    }
    @keyframes sexy{
        0%{font-family: 'Roboto';}
        70%{font-family: 'Brut';}
        100%{font-family: 'EBGaramonditalicsemi';}
    }
        #gallery{
        font-family: "WFTF";
        font-size: 15vw;
 /*         text-align: center; */
        margin: 40% 25%
    }
    .customfont{
        font-family: "WFTF_custom-Regular";
        font-size: 4vw
    }