From 66a9b6728b81f78c439788224349b5f5bbf340fa Mon Sep 17 00:00:00 2001 From: poni Date: Mon, 5 Apr 2021 22:58:41 +0200 Subject: [PATCH] colophon fixed --- index.html | 135 +++++++++++++++++++++++-------------------- style.css | 166 ++++++++++++++++++++++++++++++++++++++++++----------- 2 files changed, 203 insertions(+), 98 deletions(-) diff --git a/index.html b/index.html index 5a589ee..8ff5ad3 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,8 @@ - + + I Don't Know Where We're Going, But.. @@ -41,13 +42,54 @@ -
- -
+ + + + +
+ + + + + + + + + + + + + + + + + + + + + +
+ + +
+ +
+ -
-
- X +
+
+ + + + +
+
Another lockdown; shops closed, museums closed, bars closed, cafés closed, restaurants closed. You turn to escapist media, in another attempt to climb the inner walls of a deflating castle. @@ -129,69 +171,36 @@ All deformation, reproduction, modification, derivation and transformation of th

-This license does not apply to the materials that were created by third party creators. Third party materials will be marked with this symbol : ⨂. +This license does not apply to the materials that were created by third party creators. Third party materials will be marked with a symbol. +

+

+
- - - -
- - - - - - - - - - - - - - - - - - - - - -
- - -
- -
- - -
-
- - - diff --git a/style.css b/style.css index 6624d82..f1a0638 100644 --- a/style.css +++ b/style.css @@ -13,9 +13,6 @@ a span.unclickable { text-decoration: none; /*----------------- CANVAS FROM P5.JS--------------------*/ -canvas{ - z-index: 20; -} #GIF { visibility: visible; @@ -34,33 +31,49 @@ canvas{ /*----------------- WHAT IS THIS? THE MODAL BOX MAYBE--------------------*/ -@keyframes disparition { - 0% {opacity:1; z-index: 15000;} - 10%, 90% { opacity: 0; z-index: -100;} - 100% {opacity : 0; z-index: -100;} -} /*----------------- HELP POP UP WINDOW--------------------*/ +a button{ + background-color: transparent; + margin-bottom: 0; + cursor: pointer; + border: none !important; + font-size:3vw; + margin-bottom: 0; + bottom:0%; + right: 1%; + cursor: url(symboles/CURSEUR.png), pointer; +opacity: 0.5; +} + +button{ +-webkit-user-select: none; +-moz-user-select: none; +-ms-user-select: none; +user-select: none; +display: inline-block; +padding: 3px 1em; +text-decoration: none; +margin-bottom: 1%; +background-color: rgba(0,0,0,.2); +border-radius: 40px; +color: white; +} + #openModal { display:none; font-family: 'ApfelGrotezk-Regular'; - color: #000; - z-index: 99999; + margin-top: 200%; } .modalDialog { - position: absolute; + border; red 1px solid; + position: relative; font-family: 'ApfelGrotezk-Regular'; - color: #FFFF; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: rgba(0, 0, 0, 1); - z-index: 99999; + cursor: url(symboles/CURSEUR.png), pointer; } @@ -77,13 +90,17 @@ canvas{ url('ApfelGrotezk-Regular.woff') format('woff'); width: 100%; color: white; - position: fixed; - margin: 1% auto; - padding: 1% 1% 1% 1%; - background: #000; + position: relative; + margin: auto; cursor: url(symboles/CURSEUR.png), pointer; } +canvas{ + z-index: 20; + height: 100%; +} + + /*----------------- CLOSE POP UP --------------------*/ *{ @@ -92,6 +109,7 @@ canvas{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -moz-tap-highlight-color: rgba(0, 0, 0, 0); outline: none; + scroll-behavior: smooth; } @font-face { @@ -112,7 +130,6 @@ canvas{ body{ font-size: 1.5em; - background-color: black; color: white; font-family: "ApfelGrotezk-Regular"; } @@ -123,20 +140,22 @@ body{ } #code-input{ - left: 1em; - bottom: 1em; + left: 1%; + bottom: 1%; border: none; position: fixed; background: transparent; color: white; font-family: "ApfelGrotezk-Regular"; - font-size: 0.8em; + font-size: 3vw; + cursor: url(symboles/CURSEUR.png), pointer; + opacity: 0.5; } #code-input:hover{ color: white; cursor: pointer; - + cursor: url(symboles/CURSEUR.png), pointer; } #input{ @@ -144,14 +163,14 @@ body{ border: 0; outline: 0; background: transparent; - left: 1em; - bottom: 1em; + left: 1%; + bottom: 1%; border: none; position: fixed; background: transparent; color: white; font-family: "ApfelGrotezk-Regular"; - font-size: 5vw; + font-size: 3vw; } @@ -159,8 +178,8 @@ body{ border: 0; outline: 0; background: transparent; - left: 1em; - bottom: 1em; + left: 1%; + bottom: 1%; border: none; position: fixed; background: transparent; @@ -278,6 +297,83 @@ cursor: url(symboles/NOcursor.png), pointer; min-height: 100%; @media screen and (max-width: 768px) { +a button{ + background-color: transparent; + margin-bottom: 0; + cursor: pointer; + border: none !important; + font-size:4vw; + margin-bottom: 0; + bottom:0%; + right: 1%; + cursor: url(symboles/CURSEUR.png), pointer; + opacity: 0.5; +} + +button{ +-webkit-user-select: none; +-moz-user-select: none; +-ms-user-select: none; +user-select: none; +display: inline-block; +padding: 3px 1em; +text-decoration: none; +margin-bottom: 1%; +background-color: rgba(0,0,0,.2); +border-radius: 40px; +color: white; +} + +#code-input{ + left: 1%; + bottom: 1%; + border: none; + position: fixed; + background: transparent; + color: white; + font-family: "ApfelGrotezk-Regular"; + font-size: 4vw; + cursor: url(symboles/CURSEUR.png), pointer; + opacity: 0.5; +} + +#code-input:hover{ + color: white; + cursor: pointer; + cursor: url(symboles/CURSEUR.png), pointer; +} + +#input{ + visibility: hidden; + border: 0; + outline: 0; + background: transparent; + left: 1%; + bottom: 1%; + border: none; + position: fixed; + background: transparent; + color: white; + font-family: "ApfelGrotezk-Regular"; + font-size: 3vw; + +} + +#fname{ + border: 0; + outline: 0; + background: transparent; + left: 1%; + bottom: 1%; + border: none; + position: fixed; + background: transparent; + color: white; + font-family: "ApfelGrotezk-Regular"; + font-size: 4vw; + +} + #textcontainer{ display: none; position: absolute; @@ -286,7 +382,7 @@ cursor: url(symboles/NOcursor.png), pointer; min-height: 100%; right:0; width: auto; height: auto; - font-size: 4.5vw; + font-size: 4vw; text-align: center; color: black; margin-top: 70px; @@ -308,8 +404,8 @@ cursor: url(symboles/NOcursor.png), pointer; min-height: 100%; p2 { text-align: center; - font-size: 3vw; - line-height: 110%; + font-size: 4vw; + line-height: 90%; padding-left:10%; padding-right:10%;