<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< link rel = 'stylesheet' href = 'http://www.cnap.graphismeenfrance.fr/faune/styles/faune-fontes.css' >
< style >
@font-face {
font-family: faune;
src: url(Faune-TextRegular.otf);
}
@font-face {
font-family: fauneit;
src: url(Faune-DisplayBoldItalic.otf);
}
@font-face {
font-family: faunei;
src: url(Faune-TextItalic.otf);
}
body {
background: white;
margin-top: 2.5%;
margin-left: 18%;
color: #193bc4;
white-space: pre-wrap;
font-family: faune, sans-serif;
font-size: 16px;
text-align: 22px;
text-justify: inter-word;
columns: 420px;
column-gap: 24px;
column-fill: auto; /* balance */
width: 1500px;
height: 92%;
position: absolute;
overflow-y: hidden;
}
.nav {
height: 100%;
width: 16%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background: linear-gradient(to right, #193bc4, white);
overflow-x: hidden;
text-align: center;
color: yellow;
}
::selection {
background: #ffce3f;
}
a {
color: yellow;
text-decoration: none;
}
h1{
font-size: 100px;
font-family: fauneit;
line-height: 92px;
margin-top: 16%;
}
.printtit{
display: none;
}
.button {
background-color: Transparent;
background-repeat:no-repeat;
border: 0.5px solid yellow;
border-radius: 5px;
cursor: pointer;
overflow: hidden;
outline:none;
color: yellow;
font-size: 16px;
width: 30px;
height: 25px;
padding: 3px 3px;
}
.button2 {
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor: pointer;
font-size: 16px;
}
.navp{
line-height: 30px;
}
textarea{
font-family: faune, sans-serif;
font-size: 16px;
text-align: 26px;
color: #193bc4;
}
#output{
white-space: pre-wrap;
}
.credit{
padding-top: 75px;
font-size: 12px;
line-height: 15px;
}
@media print {
body {
columns: 250px;
column-gap: 25px;
width: 1000px;
height: 96%;
overflow-y: scroll;
font-size: 12px;
text-align: 15px;
margin-left:3%;
}
.nav{
display: none;
}
.printtit{
display: inline-block;
text-align: center;
font-size: 15px;
}
h1{
font-style: oblique;
font-size: 36px;
}
.ta{
display: none;
}
}
@media only screen and (max-width: 600px) {
body {
columns: 280px;
margin-left: 21%;
height: 94%;
margin-top: 5%;
}
.nav {
width: 19%;
}
h1{
font-size: 48px;
line-height: 45px;
}
.button {
font-size: 12px;
width: 24px;
height: 24px;
padding: 3px 3px;
}
.credit{
padding-top: 45px;
font-size: 10px;
line-height: 13px;
}
}
< / style >
< title > < / title >
< / head >
< body > < div class = "nav" > < h1 > < a href = "index_ori.html" > Z< br > E< br > R< br > O< / a > < / h1 > < p class = "navp" > < a href = "zero.html" > < button class = "button" > ∙< / button > < / a > < br > < a href = "zero2.html" > < button class = "button" > ∶ < / button > < / a > < br > < input type = "button" class = "button" value = "⎙" onClick = "window.print()" > < br > < button class = "button" > < a href = "../" style = "font-size: 14px;" > ☖< / a > < / button > < / p > < p class = "credit" > Original Artistic Response< br > by Ogutu MURAYA< br > Reinpreted < br > by Euna LEE< / p > < / div > < div class = "printtit" > < h1 > Zero< / h1 > < br > by Ogutu Muraya< br > < br > < br > < br > < br > < br > < / div > < div > < span style = "font-family: faunei" > Zero is zero but what else can it be?< / span >
< form name = "myform" >
< p class = "ta" > Zero is < textarea name = "inputtext" cols = "44" rows = "1" onKeyDown = {this.onEnterPress} > < / textarea > < input type = "button" class = "button2" style = "color:#193bc4" value = "✒" onClick = "addtext();" > < / p >
< p id = "output" > < / p >
< / form >
< / div >
< script language = "javascript" type = "text/javascript" >
/*var c = 0 and add c before "zero is" and c=c+1 on next line*/
function addtext() {
var newtext = document.myform.inputtext.value;
var p = document.getElementById("output")
p.innerHTML += "Zero is " + newtext + "< br > < br > ";
}
< / script >
< / body >
