jigen/HOD2018_website
1
0
Fork 0
forked from fillotassi/HOD2018_website
Code Releases Activity

Improve <pre> responsive view and adds colours

Browse source
This commit is contained in:
fillotassi 2018-10-08 23:14:09 +02:00
parent 22799e6b7e
commit d7971a4b2a
7 changed files with 378 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.directory Normal file
View file

@ -0,0 +1,3 @@
[Dolphin]
Timestamp=2018,10,6,19,32,23
Version=4

4
themes/.directory Normal file
View file

@ -0,0 +1,4 @@
[Dolphin]
PreviewsShown=true
Timestamp=2018,10,6,19,32,21
Version=4

2
themes/HOD2k18/layouts/index.html
View file

@ -2,7 +2,7 @@
<main> <main>
<div id="scrollable-column"> <div id="scrollable-column">
<div id="left-column"> <div id="left-column">
{{ partial "furby-hack.html" . }} {{ partial "furby-hack-color.html" . }}
</div> </div>
<div id="right-column"> <div id="right-column">
{{ partial "talk-calendar.html" . }} {{ partial "talk-calendar.html" . }}

105
themes/HOD2k18/layouts/partials/furby-hack-color.html Normal file
View file

@ -0,0 +1,105 @@
<div id="illustrazione">
<div class="ascii-wrapper" style="top:1em;">
<pre style="text-align:center">
<span class="rainbow"> <span class="retard-2"> _ </span> _ _ _ _ _ _ </span>|
<span class="rainbow"> <span class="retard-1">|\</span> <span class="retard-2">|_|</span> |_| _ |_) | | | | | | | | _ |/ |_| |_| </span>|
<span class="rainbow"> <span class="retard-1">|_)</span> <span class="retard-2">| |</span> | | |_) |_| |_| |_| |_| |\ | | | | </span>|
|
|
|
<span class="stellina">+</span> <span class="stellina">+</span> |
<span class="stellina">+</span> <span class="stellina">+</span> |
<span class="stellina">+</span> <span class="stellina">+</span> |
<span class="stellina">+</span> <span class="vello">___ \ | / ___</span> <span class="stellina">+</span> |
<span class="vello">\</span> <span class="onecchie">></span> <span class="vello">\ /</span> <span class="onecchie"><</span> <span class="vello">/</span> |
<span class="stellina">+</span> <span class="setola">-</span> <span class="occhietti">○</span> <span class="occhietti">○</span> <span class="setola">-</span> <span class="stellina">+</span> |
<span class="stellina">+</span> <span class="vello">(</span> <span class="setola">-</span> <span class="bocca">c</span> <span class="setola">-</span> <span class="vello">)</span> <span class="stellina">+</span> |
<span class="stellina">+</span> <span class="vello">/</span><span class="setola">-</span> <span class="setola">-</span> <span class="setola">-</span> <span class="setola">-</span><span class="vello">\</span> <span class="stellina">+</span> |
<span class="vello">(</span><span class="setola">-</span> <span class="vello">__</span> <span class="setola">-</span> <span class="setola">-</span> <span class="pedibus">__</span> <span class="setola">-</span><span class="vello">)</span> |
<span class="stellina">+</span> <span class="vello">\</span><span class="pedibus">(__)</span><span class="vello">_</span><span class="setola">-</span><span class="vello">_<span class="pedibus">(__)</span>/</span> <span class="stellina">+</span> |
|
<span class="stellina">+</span> <span class="stellina">+</span> <span class="stellina">+</span> |
<span class="stellina">+</span> <span class="stellina">+</span> |
|
|
<span class="rainbow"> _ _ _ _ _ _ _ _ _ </span>|
<span class="rainbow"> |\ | | | | _ |\ |_| |_| | | | | _ |\| \_/ |_ | | | | | ) </span>|
<span class="rainbow"> |_) |_| |_| |_) | | | | |_| |_| | | / |_ |__ |_| |_| ( </span>|
<span class="rainbow"> ' </span>|
|
|_ _. _ | _ ._ _| o / | _ \ |
| | (_| (_ |< ─ (_) | ─ (_| | \ \/ | (/_ / |
/ |
_ _ , _ |
/ \ / \ /| / \ |
/ | | / | \_/ |
/ | | | / \ |
/__ \_/ | \_/ |
|
_ _ |
(_) __ /| | | |\ | _ _ ._ _ |_ ._ _ |
_) | |_| | \| (_) \/ (/_ | | | |_) | (/_ |
\|/
v
</pre>
</div>
<div class="text-wrapper">
<div class="text-offset"></div>
<div style="position:relative">
<pre class="fake-freccina" style="position:absolute;">
\|/
v
</pre>
<p id="call" style="background-color:black">
Apro gli occhi, goccia di sudore dritta nelle palpebre, brucia. Bestemmio.<br>
Fa caldo, anche oggi non si dorme. Bestemmio.<br>
Son le 6, fra due ore devo pure lavorare. Bestemmio.<br>
Un ronzio tra l'esterno e il cervello, è una zanzara. Bestemmio.<br><br>
Ne ho fatte quattro, prima o poi mi scrivo un bestemmiatore automatico.<br>
Accendo il thinkpad, tanto lo so che non dormo.
Boota: leggo che dice il kernel, pure le cpu soffrono il caldo.<br><br>
Login.<br>
`cdm`<br>
Invio.<br>
Alt+P.<br>
thunderbird.<br>
Nuova mail: <b>[Hackmeeting] Hack or Di(y|e) chapter 4 !!!! 9 e 10 novembre
@ XM24, Bologna: oh papere venite!</b>
<br><br>
Ah, di nuovo i bolognesi, ma non le dovevano sgomberare?<br>
Vabbè, so vive, vediamo la mail:<br><br>
```<br>
<i>OH OH OH OH, è di nuovo quel periodo dell'anno la!<br>
[cut]<br>
tra fine ottobre e inizio novembre<br>
[cut]<br></i>
```<br><br>
Ma che oh! hanno copiato il testo dall'anno scorso?! Mo je scrivo e faccio il
flame... anzi no, se che sembro troppo autistic* che mi ricordo tutte le
mail.<br><br>
Vabbò, vediamo se c'ho roba da portare.<br><br>
Mi guardo intorno: ci sono i furby sulla mensola, magari porto uno di quelli, faccio la cosa di prima, le bestemmie...meglio, lo faccio bestemmiare in furbish. Lo guardo, mi guarda, lo guardo, l'incarnazione meccanica di satana
percepisce e risponde<br><i>«dah‐boo oo‐kah doo‐dah oo‐nye loo?»</i><br> che, dalle lezioni di furbish dell'IPSIA, sarebbe <i><br>«no! zì stai scherzando?!».</i><br>
<br>
Sulla scrivania c'è il trasmettitore radio per onde lunghe, l'ho finito ieri, se va porto quello. Lo accendo, fuma, scalda, la temperatura nella stanza aumenta di un grado.<br> Lo butto.
Potrei parlare della configurazione nuova del server di posta, dai ci sta.<br><br>
Scrivo la mail.<br>
Il destinatario:<br> <b>hackordiye@totallynot.science</b><br>
Premo invia: Il server non risponde.<br><br>
Guardo sotto la scrivania, c'è il server, ronza come uno sciame di zanzare e aggiunge almeno tre gradi alla stanza.<br><br>
Col piede sinistro lo calcio, con l'indice destro premo invia: Mail inviata.<br><br>
Ci vediamo a Bologna.
</p>
</div>
</div>
</div>

161
themes/HOD2k18/static/css/style.css
View file

@ -1,3 +1,58 @@
@-webkit-keyframes rainbow {
0% {
color: orange;
}
10% {
color: purple;
}
20% {
color: red;
}
40% {
color: yellow;
}
60% {
color: green;
}
100% {
color: blue;
}
100% {
color: orange;
}
}
@-webkit-keyframes banner-stretch {
0% {
width: 0%;
left: 0;
}
15% {
width: 100%;
}
75% {
width: 100%;
}
100% {
width: 0%;
right: 0;
}
}
@-webkit-keyframes banner-opacity {
0% {
opacity: 0%;
}
35% {
opacity: 100%;
visibility: visible;
}
65% {
opacity: 80%;
}
100% {
opacity: 0;
display: none;
}
}
body { body {
font-family: monospace; font-family: monospace;
width: 100%; width: 100%;
@ -12,8 +67,35 @@ body a {
body a:visited { body a:visited {
color: #cc0099; color: #cc0099;
} }
body pre { body .rainbow {
margin: 0; animation: rainbow 18s ease infinite;
/*
.retard-1{
animation-delay: -1s;
}
.retard-2{
animation-delay: 12s;
}
*/
}
body .stellina {
color: blue;
}
body .bocca, body .onecchie {
color: burlywood;
}
body .occhietti {
color: white;
}
body .vello {
color: brown;
}
body .setola {
color: lightcoral;
}
body .pedibus {
color: chocolate;
} }
body main { body main {
width: 100%; width: 100%;
@ -29,7 +111,7 @@ body main {
} }
body main #scrollable-column { body main #scrollable-column {
display: flex; display: flex;
width: 80%; width: 100%;
margin: auto; margin: auto;
} }
@media screen and (max-width: 900px) { @media screen and (max-width: 900px) {
@ -145,32 +227,97 @@ body main #scrollable-column #left-column #illustrazione {
flex-wrap: wrap; flex-wrap: wrap;
} }
body main #scrollable-column #left-column #illustrazione .ascii-wrapper pre { body main #scrollable-column #left-column #illustrazione .ascii-wrapper pre {
margin: 0;
position: fixed; position: fixed;
} }
@media screen and (max-width: 900px) {
body main #scrollable-column #left-column #illustrazione .ascii-wrapper pre {
font-size: 0.5em;
font-weight: bold;
}
}
@media screen and (min-width: 900px) and (max-width: 1200px) {
body main #scrollable-column #left-column #illustrazione .ascii-wrapper pre {
font-size: 0.8em;
}
}
@media screen and (min-width: 1200px) {
body main #scrollable-column #left-column #illustrazione .ascii-wrapper pre {
font-size: 1em;
}
}
body main #scrollable-column #left-column #illustrazione .text-wrapper { body main #scrollable-column #left-column #illustrazione .text-wrapper {
position: relative; position: relative;
} }
body main #scrollable-column #left-column #illustrazione .text-wrapper .text-offset { body main #scrollable-column #left-column #illustrazione .text-wrapper .text-offset {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
height: 50em;
background-color: transparent; background-color: transparent;
} }
@media screen and (max-width: 900px) {
body main #scrollable-column #left-column #illustrazione .text-wrapper .text-offset {
height: 26em;
}
}
@media screen and (min-width: 900px) and (max-width: 1200px) {
body main #scrollable-column #left-column #illustrazione .text-wrapper .text-offset {
height: 37.3em;
}
}
@media screen and (min-width: 1200px) {
body main #scrollable-column #left-column #illustrazione .text-wrapper .text-offset {
height: 50em;
}
}
body main #scrollable-column #left-column #illustrazione .text-wrapper .fake-freccina {
margin-top: 0;
}
@media screen and (max-width: 900px) {
body main #scrollable-column #left-column #illustrazione .text-wrapper .fake-freccina {
left: 24.25em;
display: none;
}
}
@media screen and (min-width: 900px) and (max-width: 1200px) {
body main #scrollable-column #left-column #illustrazione .text-wrapper .fake-freccina {
left: 36.8em;
}
}
@media screen and (min-width: 1200px) {
body main #scrollable-column #left-column #illustrazione .text-wrapper .fake-freccina {
left: 43.15em;
}
}
body main #scrollable-column #left-column #illustrazione #call { body main #scrollable-column #left-column #illustrazione #call {
padding-top: 4em; padding-top: 4em;
margin-bottom: 0; margin-bottom: 0;
padding-bottom: 1em; padding-bottom: 1em;
} }
@media screen and (max-width: 900px) {
body main #scrollable-column #left-column #illustrazione #call {
padding: 0 10% 0 10%;
}
}
@media screen and (min-width: 900px) and (max-width: 1200px) {
body main #scrollable-column #left-column #illustrazione #call {
padding: 0 10% 0 10%;
}
}
@media screen and (min-width: 1200px) {
body main #scrollable-column #left-column #illustrazione #call {
padding: 0 10% 0 10%;
}
}
body footer { body footer {
display: flex; animation-direction: normal;
animation-fill-mode: forwards;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%;
height: 3em; height: 3em;
background: #000001;
text-align: center; text-align: center;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
visibility: hidden;
} }
/*# sourceMappingURL=style.css.map */ /*# sourceMappingURL=style.css.map */

2
themes/HOD2k18/static/css/style.css.map
View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AASA;EACE;EACA;EACA,kBARS;EAST,OARW;EASX;EACA;;AAEA;EACE,OAZO;;AAeT;EACE,OAfW;;AAkBb;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AACA;EANF;IAOI;;;AAGF;EAcE;EACA;EACA;;AAfA;EADF;IAEI;;;AAEF;EACE;IACE;IACA;;EAEA;IACE;;;AAQN;EACE;EACA,kBAvDG;EAwDH;EACA;EACA;;AACA;EANF;IAOI;;;AAGF;EACE;;AACA;EAFF;IAGI;IACA;;;AAGF;EAIE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAVA;EACE;;AAWF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,OAtGL;EAuGK;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;;AAMR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAKN;EACE,kBA5IC;EA6ID;EACA;;AAIJ;EACE;;AACA;EAFF;IAGI;;;AAGF;EACE;EACA;EACA;;AAGE;EACE;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAOV;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"style.css"} {"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AASA;EACE;IAAG;;EACH;IAAI;;EACJ;IAAI;;EACJ;IAAI;;EACJ;IAAI;;EACJ;IAAK;;EACL;IAAK;;;AAGP;EACE;IAAG;IACH;;EACA;IAAI;;EACJ;IAAI;;EACJ;IAAK;IACL;;;AAGF;EACE;IAAG;;EACH;IAAI;IAAe;;EACnB;IAAI;;EACJ;IAAK;IAAU;;;AAGjB;EACE;EACA;EACA,kBAlCS;EAmCT,OAlCW;EAmCX;EACA;;AAEA;EACE,OAtCO;;AAyCT;EACE,OAzCW;;AA4Cb;EACE;AACJ;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAYE;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AACA;EANF;IAOI;;;AAGF;EAcE;EACA;EACA;;AAfA;EADF;IAEI;;;AAEF;EACE;IACE;IACA;;EAEA;IACE;;;AAQN;EACE;EACA,kBAnHG;EAoHH;EACA;EACA;;AACA;EANF;IAOI;;;AAGF;EACE;;AACA;EAFF;IAGI;IACA;;;AAGF;EAIE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAVA;EACE;;AAWF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,OAlKL;EAmKK;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;;AAMR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAKN;EACE,kBAxMC;EAyMD;EACA;;AAIJ;EACE;;AACA;EAFF;IAGI;;;AAGF;EACE;EACA;EACA;;AAGE;EACE;EACA;;AACA;EAHF;IAII;IACA;;;AAEF;EAPF;IAQI;;;AAEF;EAVF;IAWI;;;AAKN;EACE;;AACA;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;AAEF;EAPF;IAQI;;;AAEF;EAVF;IAWI;;;AAIJ;EACE;;AACA;EAFF;IAGI;IACA;;;AAEF;EANF;IAOI;;;AAEF;EATF;IAUI;;;AAKN;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;AAEF;EAPF;IAQI;;;AAEF;EAVF;IAWI;;;AAQZ;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"style.css"}

118
themes/HOD2k18/static/css/style.scss
View file

@ -7,6 +7,32 @@ $text-color: #37ffad;
$new-link: #ff33cc; $new-link: #ff33cc;
$visited-link: #cc0099; $visited-link: #cc0099;
@-webkit-keyframes rainbow{
0%{color: orange;}
10%{color: purple;}
20%{color: red;}
40%{color: yellow;}
60%{color: green;}
100%{color: blue;}
100%{color: orange;}
}
@-webkit-keyframes banner-stretch{
0%{width: 0%;
left:0;}
15%{width: 100%;}
75%{width:100%;};
100%{width:0%;
right:0;};
}
@-webkit-keyframes banner-opacity{
0%{opacity: 0%;}
35%{opacity: 100%; visibility: visible;}
65%{opacity: 80%;}
100%{opacity:0;display: none;};
}
body { body {
font-family: monospace; font-family: monospace;
width: 100%; width: 100%;
@ -23,8 +49,42 @@ body {
color: $visited-link; color: $visited-link;
} }
pre { .rainbow{
margin: 0; animation: rainbow 18s ease infinite;
/*
.retard-1{
animation-delay: -1s;
}
.retard-2{
animation-delay: 12s;
}
*/ }
// FURBY-COLOR
.stellina{
color:blue;
}
.bocca, .onecchie{
color: burlywood;
}
.occhietti,{
color: white;
}
.vello{
color:brown;
}
.setola{
color:lightcoral;
}
.pedibus{
color:chocolate;
} }
main { main {
@ -52,7 +112,7 @@ body {
} }
} }
display: flex; display: flex;
width: 80%; width: 100%;
margin: auto; margin: auto;
#right-column { #right-column {
@ -161,18 +221,50 @@ body {
.ascii-wrapper { .ascii-wrapper {
pre { pre {
margin:0;
position: fixed; position: fixed;
@media screen and (max-width: $breakpoint-tablet) {
font-size:0.5em;
font-weight: bold;
}
@media screen and (min-width: $breakpoint-tablet) and (max-width: $breakpoint-normal-screen) {
font-size: 0.8em;
}
@media screen and (min-width: $breakpoint-normal-screen) {
font-size: 1em;
}
} }
} }
.text-wrapper { .text-wrapper {
position: relative; position: relative;
.text-offset { .text-offset {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
height: 50em;
background-color: transparent; background-color: transparent;
@media screen and (max-width: $breakpoint-tablet) {
height:26em;
}
@media screen and (min-width: $breakpoint-tablet) and (max-width: $breakpoint-normal-screen) {
height:37.3em;
}
@media screen and (min-width: $breakpoint-normal-screen) {
height:50em;
}
}
.fake-freccina{
margin-top: 0;
@media screen and (max-width: $breakpoint-tablet) {
left:24.25em;
display:none;
}
@media screen and (min-width: $breakpoint-tablet) and (max-width: $breakpoint-normal-screen) {
left:36.8em;
}
@media screen and (min-width: $breakpoint-normal-screen) {
left:43.15em;
}
} }
} }
@ -180,6 +272,15 @@ body {
padding-top: 4em; padding-top: 4em;
margin-bottom: 0; margin-bottom: 0;
padding-bottom: 1em; padding-bottom: 1em;
@media screen and (max-width: $breakpoint-tablet) {
padding:0 10% 0 10%;
}
@media screen and (min-width: $breakpoint-tablet) and (max-width: $breakpoint-normal-screen) {
padding:0 10% 0 10%;
}
@media screen and (min-width: $breakpoint-normal-screen) {
padding:0 10% 0 10%;
}
} }
} }
} }
@ -187,14 +288,15 @@ body {
} }
footer { footer {
display: flex; // animation: banner-stretch 3.3s 1s;
animation-direction: normal;
animation-fill-mode: forwards;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%;
height: 3em; height: 3em;
background: #000001;
text-align: center; text-align: center;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
visibility: hidden;
} }
} }