Improve <pre> responsive view and adds colours

.directory

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

themes/.directory

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

themes/HOD2k18/layouts/index.html

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

themes/HOD2k18/layouts/partials/furby-hack-color.html

@@ -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>

themes/HOD2k18/static/css/style.css

@@ -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 {
   font-family: monospace;
   width: 100%;
@@ -12,8 +67,35 @@ body a {
 body a:visited {
   color: #cc0099;
 }
-body pre {
-  margin: 0;
+body .rainbow {
+  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 {
   width: 100%;
@@ -29,7 +111,7 @@ body main {
 }
 body main #scrollable-column {
   display: flex;
-  width: 80%;
+  width: 100%;
   margin: auto;
 }
 @media screen and (max-width: 900px) {
@@ -145,32 +227,97 @@ body main #scrollable-column #left-column #illustrazione {
   flex-wrap: wrap;
 }
 body main #scrollable-column #left-column #illustrazione .ascii-wrapper pre {
+  margin: 0;
   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 {
   position: relative;
 }
 body main #scrollable-column #left-column #illustrazione .text-wrapper .text-offset {
   display: flex;
   flex-wrap: wrap;
-  height: 50em;
   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 {
   padding-top: 4em;
   margin-bottom: 0;
   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 {
-  display: flex;
+  animation-direction: normal;
+  animation-fill-mode: forwards;
   justify-content: center;
   align-items: center;
-  width: 100%;
   height: 3em;
-  background: #000001;
   text-align: center;
   position: absolute;
   bottom: 0;
+  visibility: hidden;
 }
 
 /*# sourceMappingURL=style.css.map */

themes/HOD2k18/static/css/style.css.map

@@ -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"}

themes/HOD2k18/static/css/style.scss

@@ -7,6 +7,32 @@ $text-color: #37ffad;
 $new-link: #ff33cc;
 $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 {
   font-family: monospace;
   width: 100%;
@@ -23,8 +49,42 @@ body {
     color: $visited-link;
   }
 
-  pre {
-    margin: 0;
+  .rainbow{
+    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 {
@@ -52,7 +112,7 @@ body {
         }
       }
       display: flex;
-      width: 80%;
+      width: 100%;
       margin: auto;
 
       #right-column {
@@ -161,18 +221,50 @@ body {
 
           .ascii-wrapper {
             pre {
+              margin:0;
               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 {
             position: relative;
-
             .text-offset {
               display: flex;
               flex-wrap: wrap;
-              height: 50em;
               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;
             margin-bottom: 0;
             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 {
-    display: flex;
+//    animation: banner-stretch 3.3s 1s;
+    animation-direction: normal;
+    animation-fill-mode: forwards;
     justify-content: center;
     align-items: center;
-    width: 100%;
     height: 3em;
-    background: #000001;
     text-align: center;
     position: absolute;
     bottom: 0;
+    visibility: hidden;
   }
 }