Upload files to '08/ArtemisGryllaki'
parent
ba10e131b2
commit
d1f5a9bc7b
@ -0,0 +1,56 @@
|
||||
(function () {
|
||||
|
||||
Messages = [
|
||||
"HOW CAN DECENTRALIZED WEB HAVE AN IMPACT BEYOND GEEKS, SOCIAL WEB ENTHUSIASTS & HACKERS?",
|
||||
"WHY DO WE NEED A DECENTRALIZED NETWORK?",
|
||||
"HOW DO WE PERCEIVE FEDERATED PUBLISHING?",
|
||||
"WHAT IS THE CONTENT WE WANT TO PRODUCE?",
|
||||
"COLLECTIVITY VS INDIVIDUALITY: DOES DECENTRALIZATION HELPS?",
|
||||
"WHO MAKES A FEDERATED NETWORK? FOR WHO? WHY? HOW?",
|
||||
"WHAT CONTENT DOES A FEDERATED NETWORK HOST?",
|
||||
"IS THE MEDIUM THE MESSAGE?",
|
||||
"DOES THE MEDIUM TRANSFORM THE MESSAGE?",
|
||||
"DOES THE SAME STORY HAVE DIFFERENT VALUE, ACCORDING TO WHERE IS IT HEARD?",
|
||||
"HOW IMPORTANT IS TO CHOOSE, OR CREATE OUR MEDIA OF COMMUNICATION?",
|
||||
"IS DECENTRALIZATION A PANACEA, OR A “PHARMAKON”?",
|
||||
"IS DECENTRALIZATION ENOUGH?",
|
||||
"WHAT ARE THE DANGERS OF CENTRALIZED NETWORKS?",
|
||||
"WHOSE VOICE IS AMPLIFIED AND WHOSE VOICE IS CURBED IN A CENTRALIZED NETWORK?",
|
||||
"DO WE NEED DIGITAL SOCIAL NETWORKING PLATFORMS?",
|
||||
"DO WE NEED VIRTUAL PUBLIC SPHERES THAT ARE DIFFICULT TO SHUT DOWN?",
|
||||
"IS THE FEDERATED NETWORK ORIENTED TOWARDS ANSWERING A COMMON GOAL?",
|
||||
"HOW IS THE COMMON GOAL OF THE NETWORK SHAPED?",
|
||||
"IS BEING PART OF THE NETWORK AS IMPORTANT AS BEING A CUSTODIAN OF IT?",
|
||||
"WHO MAINTAINS A FEDERATED NETWORK?",
|
||||
"WHAT IS THE LIFESPAN OF A FEDERATED NETWORK?",
|
||||
"HOW CAN A FEDERATED NETWORK BE SUSTAINED WITH ECONOMIC, ECOLOGICAL AND TIME-EFFICIENT MEANS?"
|
||||
];
|
||||
|
||||
|
||||
function getRandomInt(min, max) {
|
||||
min = Math.ceil(min);
|
||||
max = Math.floor(max);
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
function sleep(ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
async function newMessage(id) {
|
||||
while (true) {
|
||||
ms = getRandomInt(1000, 3000);
|
||||
Message = Messages[Math.floor(Math.random()*Messages.length)];
|
||||
document.getElementById(id).innerHTML = Message;
|
||||
await sleep(ms);
|
||||
}
|
||||
}
|
||||
|
||||
function questions(){
|
||||
newMessage('oneliner-1');
|
||||
|
||||
}
|
||||
|
||||
window.onload = questions;
|
||||
|
||||
})();
|
||||
@ -0,0 +1,154 @@
|
||||
@font-face {
|
||||
font-family: georgia;
|
||||
src: url("fonts/Georgia Regular font.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: bree-serif;
|
||||
src: url("fonts/BreeSerif-Regular.otf");
|
||||
}
|
||||
|
||||
|
||||
* {
|
||||
margin: 0;/*
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
background-color: white;*/
|
||||
}
|
||||
html, body {
|
||||
font-family: bree-serif;
|
||||
font-size: 19px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
|
||||
h1 {
|
||||
font-size: 57px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: 0px;
|
||||
text-transform: none;
|
||||
line-height: 1.3em;
|
||||
font-family: bree-serif;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 14px;
|
||||
text-align: right;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: 0px;
|
||||
text-transform: none;
|
||||
line-height: 1.3em;
|
||||
font-family: georgia;
|
||||
margin-right: 50px;
|
||||
margin-left: 75%;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
|
||||
/*.underline {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: black;
|
||||
}*/
|
||||
|
||||
#container {/*
|
||||
background-color: white;*/
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.circle {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
background-color: #ec380b;
|
||||
}
|
||||
|
||||
.circle1 {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
background-color: #007872;
|
||||
}
|
||||
|
||||
.circle2 {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
.circle.link {
|
||||
background-color: #ec380b;
|
||||
}
|
||||
.text {
|
||||
padding-left: 10px;
|
||||
|
||||
}
|
||||
|
||||
.green {
|
||||
font-size: 19px;
|
||||
color: #007872;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.orange {
|
||||
font-size: 19px;
|
||||
color: #ec380b;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.grey {
|
||||
font-size: 19px;
|
||||
color: grey;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
.collapsible {
|
||||
background-color: white;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
padding-bottom: 10px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.active, .collapsible:hover {
|
||||
background-color: white;
|
||||
colour:#ea2709;
|
||||
}
|
||||
|
||||
.content {
|
||||
max-height: 0;
|
||||
max-width: 50%;
|
||||
margin-left: 28%;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.2s ease-out;
|
||||
background-color: white;
|
||||
text-align: left;
|
||||
font-family: georgia;
|
||||
font-size: 18px;
|
||||
color: rgb(40,40,40);
|
||||
}
|
||||
@ -0,0 +1,97 @@
|
||||
@font-face {
|
||||
font-family: Share Tech Mono;
|
||||
src: url("fonts/share-tech-mono.regular.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Fira Mono;
|
||||
src: url("fonts/FiraMono-Medium.otf");
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: white;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100%;
|
||||
background-attachment: fixed;
|
||||
font-size: 16px;
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
font-size: calc(12px + .4vw);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
font-size: 1.5rem;
|
||||
font-family: "Share Tech Mono";
|
||||
color: black;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 12rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 100px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: 0px;
|
||||
text-transform: none;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
font-family: "Share Tech Mono";
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: 0px;
|
||||
text-transform: none;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
line-height: 1.7em;
|
||||
letter-spacing: 0px;
|
||||
font-size: 15px;
|
||||
font-family: "Fira Mono";
|
||||
}
|
||||
|
||||
|
||||
header p, footer p {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
header p.italic, footer p.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
main p {
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.blink {
|
||||
animation: blinker 0s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes blinker {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a, a:active, a:visited {
|
||||
color: #ffffff;
|
||||
}
|
||||
@ -0,0 +1,356 @@
|
||||
@font-face {
|
||||
font-family: fluxisch-else;
|
||||
src: url("osp/ospfont/fonts/FluxischElse-Light.otf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: polsku;
|
||||
src: url("polsku/polsku/fonts/Polsku.ttf");
|
||||
}
|
||||
|
||||
|
||||
h1 {
|
||||
font-size: 50px;
|
||||
text-align: left;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: 0px;
|
||||
text-transform: none;
|
||||
line-height: 1.3em;
|
||||
font-family: polsku;
|
||||
src: url("polsku/polsku/fonts/Polsku.ttf");
|
||||
margin-left: 30px;
|
||||
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: 0px;
|
||||
text-transform: none;
|
||||
line-height: 1.3em;
|
||||
font-family: fluxisch-else;
|
||||
src: url("osp/ospfont/fonts/FluxischElse-Light.otf");
|
||||
margin-left: 30px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
#paragraph1 .circle-container {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
margin-:200px;
|
||||
}
|
||||
|
||||
#paragraph1 .circle {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background-color: black;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#paragraph1 .hidden {
|
||||
visibility: visible;
|
||||
margin-right:80px;
|
||||
font-family: fluxisch-else-bold;
|
||||
}
|
||||
|
||||
#paragraph1 .paragraph {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
font-size: 18px;
|
||||
font-family: "fluxisch-else";
|
||||
color: black;
|
||||
margin-left: 60px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#paragraph2 .circle-container {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;/*
|
||||
margin-right:10%;*/
|
||||
margin-top:95px;
|
||||
}
|
||||
|
||||
#paragraph2 .circle {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background-color: black;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#paragraph2 .hidden {
|
||||
visibility: visible;
|
||||
margin-right:30%;;
|
||||
margin-top:80px;
|
||||
font-family: "fluxisch-else";
|
||||
}
|
||||
|
||||
#paragraph2 .paragraph {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
font-size: 18px;
|
||||
font-family: "fluxisch-else";
|
||||
color: black;
|
||||
margin-left: 60px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#paragraph3 .circle-container {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;/*
|
||||
margin-right:40px;*/
|
||||
margin-top:220px;
|
||||
}
|
||||
|
||||
#paragraph3 .circle {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background-color: black;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#paragraph3 .hidden {
|
||||
visibility: visible;
|
||||
margin-right:100px;
|
||||
margin-top:210px;
|
||||
font-family: fluxisch-else;;
|
||||
}
|
||||
|
||||
#paragraph3 .frame {
|
||||
visibility: visible;
|
||||
margin-right:20%;
|
||||
margin-top:40px;
|
||||
}
|
||||
|
||||
#paragraph3 .print {
|
||||
display: none;
|
||||
margin-right:20%;
|
||||
margin-top:40px;
|
||||
}
|
||||
|
||||
#paragraph3 .paragraph {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
font-size: 18px;
|
||||
font-family: "fluxisch-else";
|
||||
color: black;
|
||||
margin-left: 60px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#paragraph4 .circle-container {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
margin-right:40px;
|
||||
margin-top:220px;
|
||||
}
|
||||
|
||||
#paragraph4 .circle {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background-color: black;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#paragraph4 .hidden {
|
||||
visibility: visible;
|
||||
margin-right:100px;
|
||||
margin-top:200px;
|
||||
font-family: fluxisch-else;
|
||||
}
|
||||
|
||||
|
||||
#paragraph4 .paragraph {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
font-size: 18px;
|
||||
font-family: "fluxisch-else";
|
||||
color: black;
|
||||
margin-left: 60px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
#paragraph5 .circle-container {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;/*
|
||||
margin-right:40px;*/
|
||||
margin-top:220px;
|
||||
}
|
||||
|
||||
#paragraph5 .circle {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background-color: black;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#paragraph5 .hidden {
|
||||
visibility: visible;
|
||||
margin-right:100px;
|
||||
margin-top:210px;
|
||||
font-family: fluxisch-else;
|
||||
}
|
||||
|
||||
#paragraph5 .frame {
|
||||
visibility: visible;
|
||||
margin-right:20%;
|
||||
margin-top:40px;
|
||||
}
|
||||
|
||||
|
||||
#paragraph5 .paragraph {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
font-size: 18px;
|
||||
font-family: "fluxisch-else";
|
||||
color: black;
|
||||
margin-left: 60px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
#paragraph6 .circle-container {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;/*
|
||||
margin-right:20px;*/
|
||||
margin-top:120px;
|
||||
}
|
||||
|
||||
#paragraph6 .circle {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background-color: black;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#paragraph6 .hidden {
|
||||
visibility: visible;
|
||||
margin-right:110px;
|
||||
margin-top:110px;
|
||||
font-family: fluxisch-else;
|
||||
}
|
||||
|
||||
#paragraph6 .frame {
|
||||
visibility: visible;
|
||||
margin-right:20%;/*
|
||||
margin-top:20px;*/
|
||||
}
|
||||
|
||||
|
||||
#paragraph6 .paragraph {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
font-size: 18px;
|
||||
font-family: "fluxisch-else";
|
||||
color: black;
|
||||
margin-left: 60px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
#paragraph7 .circle-container {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;/*
|
||||
margin-right:20px;*/
|
||||
margin-top:150px;
|
||||
}
|
||||
|
||||
#paragraph7 .circle {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background-color: black;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#paragraph7 .hidden {
|
||||
visibility: visible;
|
||||
margin-right:10%;
|
||||
margin-top:140px;
|
||||
font-family: fluxisch-else;
|
||||
}
|
||||
|
||||
#paragraph7 .frame {
|
||||
visibility: visible;
|
||||
margin-right:20%;/*
|
||||
margin-top:20px;*/
|
||||
}
|
||||
|
||||
|
||||
#paragraph7 .paragraph {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
font-size: 18px;
|
||||
font-family: "fluxisch-else";
|
||||
color: black;
|
||||
margin-left: 60px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#paragraph8 .paragraph {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
font-size: 18px;
|
||||
font-family: "fluxisch-else";
|
||||
color: black;
|
||||
margin-left: 60px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#paragraph9 .circle-container {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;/*
|
||||
margin-right:20px;*/
|
||||
margin-top:150px;
|
||||
}
|
||||
|
||||
#paragraph9 .circle {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background-color: black;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#paragraph9 .hidden {
|
||||
visibility: visible;
|
||||
margin-right:10%;
|
||||
margin-top:140px;
|
||||
font-family: fluxisch-else;
|
||||
}
|
||||
|
||||
#paragraph9 .frame {
|
||||
visibility: visible;
|
||||
margin-right:20%;
|
||||
margin-top:20px;
|
||||
}
|
||||
|
||||
|
||||
#paragraph9 .paragraph {
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
font-size: 18px;
|
||||
font-family: "fluxisch-else";
|
||||
color: black;
|
||||
margin-left: 60px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
@ -0,0 +1,77 @@
|
||||
@font-face {
|
||||
font-family: "Crickx";
|
||||
src: url("fonts2/fonts/Crickx.otf");
|
||||
}
|
||||
|
||||
html {
|
||||
padding-top: 100px;
|
||||
background-color: white;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100%;
|
||||
background-attachment: fixed;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
font-size: calc(12px + .4vw);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
font-size: 1.5rem;
|
||||
font-family: "Crickx";
|
||||
color: black;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 12rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
letter-spacing: -0.2rem;
|
||||
line-height: 4rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 4rem;
|
||||
font-family: "Crickx";
|
||||
letter-spacing: -0.1rem;
|
||||
}
|
||||
|
||||
|
||||
header p, footer p {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
header p.italic, footer p.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
main p {
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.blink {
|
||||
animation: blinker 0s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes blinker {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a, a:active, a:visited {
|
||||
color: #ffffff;
|
||||
}
|
||||
Loading…
Reference in New Issue