radioimplicancies - notes for si25
parent
c8f1fdbaff
commit
f6b3f603f5
@ -0,0 +1,17 @@
|
|||||||
|
md=$(wildcard *.md)
|
||||||
|
mp_html=$(md:%.md=%.html)
|
||||||
|
|
||||||
|
all: $(mp_html)
|
||||||
|
|
||||||
|
%.html: %.md
|
||||||
|
pandoc --from markdown --to html --standalone $< -o $@
|
||||||
|
|
||||||
|
si22_syllabus.md: si22_syllabus.mediawiki
|
||||||
|
pandoc --from mediawiki --to markdown $< -o $@
|
||||||
|
|
||||||
|
SI25-NADD-Proposal.docx: SI25-NADD-Proposal.md
|
||||||
|
pandoc $< -o $@
|
||||||
|
|
||||||
|
%.svg: %.dot
|
||||||
|
dot $< -Tsvg -O
|
||||||
|
|
||||||
@ -0,0 +1,76 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<!-- saved from url=(0057)https://hub.xpub.nl/sandbot/~floorvanmeeuwen/15/TheCloud/ -->
|
||||||
|
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=0.7">
|
||||||
|
<link rel="stylesheet" type="text/css" href="./THE CLOUD_files/cloud.css">
|
||||||
|
<title>THE CLOUD</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="all">
|
||||||
|
|
||||||
|
<img class="img1" src="./THE CLOUD_files/img1.png">
|
||||||
|
<img class="img2" src="./THE CLOUD_files/img2.png">
|
||||||
|
<img class="img3" src="./THE CLOUD_files/img3.png">
|
||||||
|
|
||||||
|
<div id="lefty"></div>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="middle">
|
||||||
|
|
||||||
|
|
||||||
|
<pre><h1>T H E C L O U D</h1></pre>
|
||||||
|
<p>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<audio controls autoplay src="THE CLOUD_files/cloud.mp3"></audio>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>You want to know what time it is. You take a glance at your smartphone and see you have gotten a message.</p>
|
||||||
|
|
||||||
|
<p class="shift">See it as THE CLOUD. Let THE CLOUD pass by.</p>
|
||||||
|
|
||||||
|
<p>You check Facebook but it seems not working. Is it down for everyone or just me?</p>
|
||||||
|
|
||||||
|
<p class="shift">See it as THE CLOUD. Let THE CLOUD pass by.</p>
|
||||||
|
|
||||||
|
<p>You hear the sound of an incoming e-mail. Your are drawn to your computer and your mailing program. It is an notification of We Transfer of this file that will get expired.</p>
|
||||||
|
|
||||||
|
<p class="shift">See it as THE CLOUD. Let THE CLOUD pass by.</p>
|
||||||
|
|
||||||
|
<p>You still don't know what time it is. You remember this quick fact on Bored Panda that "what is the time" was once one of the most googled questions</p>
|
||||||
|
|
||||||
|
<p class="shift">See it as THE CLOUD. Let THE CLOUD pass by.</p>
|
||||||
|
|
||||||
|
<p>On your banking app you notice a bank statement of 70 euro's from an unknown company.</p>
|
||||||
|
|
||||||
|
<p class="shift">See it as THE CLOUD. Let THE CLOUD pass by.</p>
|
||||||
|
|
||||||
|
<p>When you type this name in your favourite search engine you realise it's the payment of your webhosting service. It got more expensive this year, again.</p>
|
||||||
|
|
||||||
|
<p class="shift">See it as THE CLOUD. Let THE CLOUD pass by.</p>
|
||||||
|
|
||||||
|
<p>Youtube stopped playing. When you look at the screen it asks you if you are still listening.</p>
|
||||||
|
|
||||||
|
<p class="shift">See it as THE CLOUD. Let THE CLOUD pass by.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
@ -0,0 +1,123 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: Chap;
|
||||||
|
src: url(Chapaza.ttf);
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Aer;
|
||||||
|
src: url(Aerolite.otf);
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
font-family: Chap;
|
||||||
|
color:#8023FF;
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
/*/.shift{
|
||||||
|
animation: mymove 25s infinite;
|
||||||
|
}
|
||||||
|
@keyframes mymove {
|
||||||
|
0% { color:#0E02FF; }
|
||||||
|
30% { color:RosyBrown; }
|
||||||
|
50% { color:thistle; }
|
||||||
|
70% { color:RosyBrown; }
|
||||||
|
100%{ color:#0E02FF; }
|
||||||
|
}/*/
|
||||||
|
h1{
|
||||||
|
font-family:Aer;
|
||||||
|
font-size:50px;
|
||||||
|
color:silver;
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
audio{
|
||||||
|
text-align:center;
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
background:WhiteSmoke;
|
||||||
|
}
|
||||||
|
html, body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-box-sizing:border-box;
|
||||||
|
-moz-box-sizing:border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#lefty{
|
||||||
|
width:15%;
|
||||||
|
height:100%;
|
||||||
|
float:left;
|
||||||
|
text-align:justify;
|
||||||
|
position:relative;
|
||||||
|
}
|
||||||
|
#middle{
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
float:left;
|
||||||
|
padding-left:30%;
|
||||||
|
padding-right:30%;
|
||||||
|
text-align:justify;
|
||||||
|
position:relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
@keyframes img1 {
|
||||||
|
0% { left:750px; top:500px;}
|
||||||
|
25% { left:400px; top:430px;}
|
||||||
|
50% { left:400px; top:530px;}
|
||||||
|
75% { left:300px; top:410px;}
|
||||||
|
100% { left:750px; top:500px;}
|
||||||
|
}
|
||||||
|
.img1{
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
width:400px;
|
||||||
|
animation-name: img1;
|
||||||
|
animation-duration: 80s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes img2 {
|
||||||
|
0% { left:350px; top:300px;}
|
||||||
|
25% { left:400px; top:330px;}
|
||||||
|
50% { left:400px; top:130px;}
|
||||||
|
75% { left:300px; top:120px;}
|
||||||
|
100% { left:350px; top:300px;}
|
||||||
|
}
|
||||||
|
|
||||||
|
.img2{
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
width:400px;
|
||||||
|
animation-name: img2;
|
||||||
|
animation-duration: 100s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes img3 {
|
||||||
|
0% { left:500px; top:300px;}
|
||||||
|
25% { left:470px; top:340px;}
|
||||||
|
50% { left:530px; top:380px;}
|
||||||
|
75% { left:436px; top:340px;}
|
||||||
|
100% { left:500px; top:300px;}
|
||||||
|
}
|
||||||
|
|
||||||
|
.img3{
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
width:400px;
|
||||||
|
animation-name: img3;
|
||||||
|
animation-duration: 90s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue