Final touches on responsive and animations

content/posts/talk1.md

@@ -3,5 +3,5 @@ title: "Gadgety Sound System"
 #date: 2018-09-22T10:41:39+02:00
 orario: 09.00
 draft: false
-text: Gadgety Sound System è ddslod jsdfojf
 ---
+Gadgety Sound System è un sistema distribuito di moduli musicali.

content/posts/talk2.md

@@ -1,8 +1,7 @@
 ---
-title: "Talk1 afsadf dfadafadgbfh s"
+title: "Gadgety  oaidjf a System"
 #date: 2018-09-22T10:41:39+02:00
+orario: 09.00
 draft: false
-text: IUSAHFLidfujsaki è ddslod jsdfojf
 ---
-
-Etc etc
+Gadgety Sound System è un sistema distribuito di moduli musicali.

content/posts/talk3.md

@@ -1,8 +1,7 @@
 ---
-title: "Talk3 dfh fj yj  gf hn"
+title: "Gakajdfhsklfjdsstem"
 #date: 2018-09-22T10:41:39+02:00
-draft: true
-text: SDASDALKD è dslod jsdfojf
+orario: 09.00
+draft: false
 ---
-
-Etc etc
+Gadgety Sound System è un sistema distribuito di moduli musicali.

content/posts/talk4.md

@@ -1,7 +1,7 @@
 ---
-title: "Talk4 sdf sfg dfh djjn "
+title: "GadSAISDUHJAIKDJSem"
 #date: 2018-09-22T10:41:39+02:00
-draft: true
+orario: 09.00
+draft: false
 ---
-
-Etc etc
+Gadgety Sound System è un sistema distribuito di moduli musicali.

content/posts/talk5.md

@@ -1,7 +0,0 @@
----
-title: "Talk5  dsgdfg dh dyt duj"
-#date: 2018-09-22T10:41:39+02:00
-draft: true
----
-
-Etc etc

content/posts/talk6.md

@@ -1,7 +0,0 @@
----
-title: "Talk6 dsfs g dgse hs"
-#date: 2018-09-22T10:41:39+02:00
-draft: true
----
-
-Etc etc

content/posts/talk83.md

@@ -3,31 +3,25 @@ title: "raggiungerci"
 #date: 2018-09-22T10:41:39+02:00
 draft: true
 ---
+Allo Spazio Sociale Autogestito XM24 via Fioravanti 24, Bologna. Come arrivarci:
 
-Spazio Sociale Autogestito XM24 via Fioravanti 24, Bologna
+<h4>Dall’aereoporto Marconi (BLQ)</h4>
+Modo più economico: Uscito dal terminal “Arrivi” dirigiti a sinistra, passa attraverso il parcheggio autobus e segui il percorso pedonale fino ad arrivare ad una grande rotonda. Attraversa la strada, passa sotto il cavalcavia e dopo 100 metri sulla destra trovi la fermata “Birra” dove passa il bus 81/91 che ti lascia in stazione centrale. Prosegui seguendo le indicazioni qui sotto. Il biglietto urbano si può fare nel bar/tabacchino di fronte alla fermata.
 
-XM24 è uno Spazio Pubblico Autogestito basato sull’antifascismo, antisessismo ed antirazzismo. Fascist, xenofob, omofob, sessist non sono benvenut* né il alcun modo tollerat*
-Come arrivare all’XM24
-Dall’aereoporto Marconi (BLQ)
-Più economico:
+Modo più costoso: Prendi il bus BLQ di fronte all’aeroporto e scendi in stazione centrale. Prosegui seguendo le indicazioni qui sotto.
 
-Uscito dal terminal “Arrivi” dirigiti a sinistra, passa attraverso il parcheggio autobus e segui il percorso pedonale fino ad arrivare ad una grande rotonda. Attraversa la strada, passa sotto il cavalcavia e dopo 100 metri sulla destra trovi la fermata “Birra” dove passa il bus 81/91 che ti lascia in stazione centrale. Prosegui seguendo le indicazioni qui sotto. Il biglietto urbano si può fare nel bar/tabacchino di fronte alla fermata. Fuck the BLQ.
-Più costoso
+<h4>Dalla stazione centrale</h4>
 
-Prendi il bus BLQ di fronte all’aeroporto e scendi in stazione centrale. Prosegui seguendo le indicazioni qui sotto.
-Dalla stazione centrale
-A piedi/In bici
+A piedi/In bici: Esci dal retro della stazione (“Uscita via Carracci”) attraversa la strada e gira a sinistra fino ad incontare sulla tua destra via Fioravanti (noterai un grosso edificio a vetri). Percorrila per circa 700 metri e sulla sinistra troverai l’ex-mercato dove sta XM24, prosegui 100 metri e arriva alla rotonda, vicino alla paretona gigante col murales c’è l’entrata.
 
-Esci dal retro della stazione (“Uscita via Carracci”) attraversa la strada e gira a sinistra fino ad incontare sulla tua destra via Fioravanti (noterai un grosso edificio a vetri). Percorrila per circa 700 metri e sulla sinistra troverai l’ex-mercato dove sta XM24, prosegui 100 metri e arriva alla rotonda, vicino alla paretona gigante col murales c’è l’entrata.
-In autobus
+In autobus: Sei sicur*? Fai prima a piedi! Comunque, le linee 21, 27, 25, 35 passano tutte nei pressi dell’uscita principale della stazione (Medaglie d’oro, Autostazione, Indipendenza) e arrivano fino Piazza dell’Unità, da li potete proseguire a piedi per circa 550 metri lungo Via Tibaldi o via Bolognese fino ad arrivare di fronte all’ex-mercato ortofrutticolo, vai verso la rotonda: vicino alla parete con il murale gigante c’è l’entrata principale. Se prendi l’autobus 11 puoi scendere alla seconda fermata di Via Bolognese, a circa 100 metri dalla rotonda.
 
-Sei sicur*? Fai prima a piedi! Comunque, le linee 21, 27, 25, 35 passano tutte nei pressi dell’uscita principale della stazione (Medaglie d’oro, Autostazione, Indipendenza) e arrivano fino Piazza dell’Unità, da li potete prosegui a piedi per circa 550 metri lungo Via Tibaldi o via Bolognese fino ad arrivare di fronte all’ex-mercato ortofrutticolo, vai verso la rotonda: vicino alla parete con il murale gigante c’è l’entrata principale. Se prendi l’autobus 11 puoi scendere alla seconda fermata di Via Bolognese, a circa 100 metri dalla rotonda.
+<h4>In auto</h4>
 
-Ulteriori informazioni sui servizi di linea: TPER
-In auto
-
-    be arrivi da ovest esci dall’autostrada a Borgo Panigale e prendi la tangenziale in direzione S.Lazzaro.
-    Se arrivi da nord esci dall’autostrada a Bologna Arcoveggio e prendi la tangenziale in direzione Casalecchio.
-    Se arrivi da est/sud esci dall’autostrada a S.Lazzaro e prendi la tangenziale in direzione Casalecchio.
+Se arrivi da ovest esci dall’autostrada a Borgo Panigale e prendi la tangenziale in direzione S.Lazzaro.
+Se arrivi da nord esci dall’autostrada a Bologna Arcoveggio e prendi la tangenziale in direzione Casalecchio.
+Se arrivi da est/sud esci dall’autostrada a S.Lazzaro e prendi la tangenziale in direzione Casalecchio.
 
 In ogni caso esci dalla tangenziale all’uscita 6 zona Arcoveggio/Corticella. Percorri via Corticella andando verso il centro, per un paio di km. Arrivati al semaforo di Piazza dell’Unità per le auto la svolta è obbligata a destra in Via Bolognese. Percorrila tutta arrivando alla rotonda e sulla sinistra puoi vedere XM24. Trova parcheggio (dentro ad XM NON c’è posto).
+
+<span class="rainbow">XM24 è uno Spazio Pubblico Autogestito basato sull’antifascismo, antisessismo ed antirazzismo. Fascist, xenofob, omofob, sessist non sono benvenut* né il alcun modo tollerat*.</span>

public/categories/index.html

@@ -12,14 +12,6 @@
 	<meta name="generator" content="Hugo 0.42.2" />
 </head>
 <body>
-	<header>
-		<a href="">Hack-or-d(i|y)e 2018</a>
-		<nav>
-			<ul>
-				
-			</ul>
-		</nav>
-	</header>
 
 	<main>
 		
@@ -40,13 +32,13 @@
 					
 					<li><a href="/categories/">Categories</a></li>
 					
-					<li><a href="/">Hack-or-d(i|y)e 2018</a></li>
+					<li><a href="/posts/talk4/">GadSAISDUHJAIKDJSem</a></li>
 					
-					<li><a href="/posts/">Posts</a></li>
+					<li><a href="/posts/talk2/">Gadgety  oaidjf a System</a></li>
 					
-					<li><a href="/tags/">Tags</a></li>
+					<li><a href="/posts/talk1/">Gadgety Sound System</a></li>
 					
-					<li><a href="/posts/talk2/">Talk1</a></li>
+					<li><a href="/posts/talk3/">Gakajdfhsklfjdsstem</a></li>
 					
 				</ul>
 			</div>
@@ -55,6 +47,7 @@
 
 	<footer>
 		
+		<p>Questo sito i cookies li mangia / There are no cookies in outer space</p>
 	</footer>
 </body>
 </html>

public/css/style-old.scss

@@ -0,0 +1,87 @@
+$breakpoint-phone: 600px;
+$breakpoint-tablet: 900px;
+$breakpoint-normal-screen: 1200px;
+$breakpoint-big-screen: 1800px;
+
+ body {
+   margin:0;
+   padding:0;
+   background: #000001;
+   color: #37ffad;
+   font-family: monospace;
+   width:100%;
+   @media screen and (max-width: $breakpoint-normal-screen) {
+     display:flex;
+     flex-wrap: wrap;
+   }
+   header{
+     flex:1 1 100%;
+   }
+   main{
+    display: flex;
+    justify-content: center;
+    @media screen and (max-width: $breakpoint-normal-screen) {
+      flex-wrap: wrap;
+    }
+
+     article{
+       max-width:42em;
+       margin:auto;
+     }
+     aside{
+       border:solid 1pt yellow;
+       padding:2em 3em;
+       max-width: 42em;
+
+     }
+   }
+
+   section{
+     width:100%;
+     ul{
+       display: flex;
+       list-style-type: none;
+       flex-wrap: wrap;
+       width:80%;
+       margin:auto;
+       li{
+         display:flex;
+         .orario{
+           width:4em;
+           background:red;
+           height:1.3em;
+           color:white;
+           display: flex;
+           justify-content: center;
+         }
+       h4{
+         margin:0 1em;
+         /*
+         a{
+         {{ range .Site.RegularPages }}
+           # {{ replace .Title " " "_" }}:target > .descrizione-talk{
+             display: block;
+           }
+         {{ end }}
+       }*/
+       }
+       flex:1 1 80%;
+       margin-bottom: 0.7em;
+       height:4em;
+       text-decoration:none;
+       border:solid 1pt white;
+       }
+     }
+
+   }
+
+   @media screen and (max-width: $breakpoint-phone) {
+     main{
+       margin: 0 5% 0 5%;
+     }
+   }
+ }
+
+header {
+  background-color: yellow;
+}

public/css/style.css

@@ -1,35 +1,426 @@
+@-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 {
-  margin: 0;
+  font-family: monospace;
+  width: 100%;
+  background-color: #000001;
+  color: #37ffad;
   padding: 0;
+  margin: 0;
+}
+body .rainbow {
+  animation-name: rainbow;
+  animation-duration: 18s;
+  animation-iteration-count: infinite;
+}
+body a {
+  color: #ff33cc;
+}
+body a:visited {
+  color: #cc0099;
+}
+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%;
+  height: 98vh;
   background: #000001;
-  color: #37ffad;
-  font-family: monospace;
+  display: flex;
+  overflow: scroll;
+}
+@media screen and (max-width: 900px) {
+  body main {
+    flex-wrap: wrap;
+  }
 }
-body main article {
-  max-width: 42em;
+body main #scrollable-column {
+  display: flex;
+  width: 100%;
   margin: auto;
 }
-body section {
-  background-color: lawngreen;
+@media screen and (max-width: 900px) {
+  body main #scrollable-column {
+    flex-wrap: wrap;
+  }
 }
-@media screen and (max-width: 600px) {
-  body main {
-    margin: 0 5% 0 5%;
+@media screen and (min-width: 900px) {
+  body main #scrollable-column #raggiungerci {
+    position: absolute;
+    bottom: 7em;
+    padding-top: 0.1em;
   }
 }
-@media screen and (min-width: 600px) {
-  body main {
-    margin: 0 20% 0 20%;
+body main #scrollable-column #right-column {
+  width: 100%;
+  background-color: #000001;
+  z-index: 33;
+  display: flex;
+  justify-content: center;
+}
+@media screen and (max-width: 900px) {
+  body main #scrollable-column #right-column {
+    display: flex;
+    justify-content: center;
   }
 }
+body main #scrollable-column #right-column #calendario {
+  height: 100%;
+  max-width: 40em;
+}
 @media screen and (min-width: 900px) {
-  body main {
-    margin: 0 25% 0 25%;
+  body main #scrollable-column #right-column #calendario {
+    position: fixed;
   }
 }
-
-header {
-  background-color: yellow;
+@media screen and (min-width: 1200px) {
+  body main #scrollable-column #right-column #calendario {
+    width: 40%;
+  }
+}
+body main #scrollable-column #right-column #calendario ul {
+  overflow-y: scroll;
+  list-style-type: none;
+  background: transparent;
+  padding: 1em;
+  display: flex;
+  flex-wrap: wrap;
+  max-height: 80%;
+}
+body main #scrollable-column #right-column #calendario ul #overflow-scroll {
+  overflow-y: hidden;
+}
+body main #scrollable-column #right-column #calendario ul li {
+  flex-wrap: wrap;
+  margin-bottom: 1em;
+}
+body main #scrollable-column #right-column #calendario ul li .filler {
+  display: flex;
+  flex: 1 1 100%;
+}
+body main #scrollable-column #right-column #calendario ul li .filler + div {
+  border: solid 1pt white;
+  margin: 1.3em 0 -0.4em 0;
+}
+body main #scrollable-column #right-column #calendario ul li .title-wrapper {
+  display: flex;
+  border-top: 1pt solid white;
+  border-right: 1pt solid white;
+  border-left: 1pt solid white;
+  border-bottom: 1pt solid white;
+  padding: 0.1em;
+  margin-bottom: -5px;
+  z-index: 32;
+}
+@media screen and (max-width: 900px) {
+  body main #scrollable-column #right-column #calendario ul li .title-wrapper {
+    width: 100%;
+  }
+}
+body main #scrollable-column #right-column #calendario ul li .title-wrapper .orario {
+  color: #37ffad;
+  height: 1.2em;
+  width: 4em;
+  display: flex;
+  justify-content: center;
+}
+body main #scrollable-column #right-column #calendario ul li .title-wrapper h4 {
+  height: 1.2em;
+  margin: 0 1em;
+}
+body main #scrollable-column #right-column #calendario ul li .title-wrapper h4 a {
+  text-decoration: none;
+}
+body main #scrollable-column #right-column #calendario ul .descrizione-talk {
+  display: none;
+  flex: 1 1 100%;
+  overflow-y: hidden;
+  /*@media screen and (min-width: $breakpoint-normal-screen) {
+  max-width: 75%;
+  }*/
+  hyphens: auto;
+}
+body main #scrollable-column #right-column #calendario ul .descrizione-talk div {
+  max-height: 30em;
+  overflow-y: scroll;
+  padding: 3em;
+}
+body main #scrollable-column #right-column #raggiungerci {
+  background-color: #000001;
+  z-index: 100;
+  margin-top: 1em;
+  width: 100%;
+}
+@media screen and (max-width: 900px) {
+  body main #scrollable-column #left-column {
+    margin: auto;
+  }
+}
+body main #scrollable-column #left-column #illustrazione {
+  margin-top: 1em;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+body main #scrollable-column #left-column #illustrazione pre {
+  margin: 0;
+  position: fixed;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-1 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 0.1s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-2 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 0.2s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-3 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 0.3s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-4 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 0.4s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-5 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 0.5s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-6 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 0.6s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-7 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 0.7s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-8 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 0.8s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-9 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 0.9s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-10 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 1s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-11 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 1.1s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-12 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 1.2s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-13 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 1.3s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-14 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 1.4s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-15 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 1.5s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-16 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 1.6s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-17 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 1.7s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-18 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 1.8s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-19 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 1.9s;
+}
+@media screen and (max-width: 600px) {
+  body main #scrollable-column #left-column #illustrazione pre {
+    font-size: 0.6em;
+    font-weight: bold;
+  }
+}
+@media screen and (min-width: 600px) and (max-width: 1200px) {
+  body main #scrollable-column #left-column #illustrazione pre {
+    font-size: 0.8em;
+  }
+}
+@media screen and (min-width: 1200px) {
+  body main #scrollable-column #left-column #illustrazione pre {
+    font-size: 0.9em;
+  }
+}
+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;
+  background-color: transparent;
+}
+@media screen and (max-width: 600px) {
+  body main #scrollable-column #left-column #illustrazione .text-wrapper .text-offset {
+    height: 33em;
+  }
+}
+@media screen and (min-width: 600px) and (max-width: 1200px) {
+  body main #scrollable-column #left-column #illustrazione .text-wrapper .text-offset {
+    height: 43em;
+  }
+}
+@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: 46.25em;
+  }
+}
+@media screen and (min-width: 900px) and (max-width: 1200px) {
+  body main #scrollable-column #left-column #illustrazione .text-wrapper .fake-freccina {
+    left: 46.3em;
+  }
+}
+@media screen and (min-width: 1200px) {
+  body main #scrollable-column #left-column #illustrazione .text-wrapper .fake-freccina {
+    left: 52.35em;
+  }
+}
+body main #scrollable-column #left-column #illustrazione .text-wrapper #call {
+  margin: 0;
+  padding: 1em 10% 2em 10%;
+}
+body footer {
+  display: flex;
+  animation-direction: normal;
+  animation-fill-mode: forwards;
+  justify-content: center;
+  align-items: center;
+  height: 3em;
+  text-align: center;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  background-color: black;
 }
 
 /*# sourceMappingURL=style.css.map */

public/css/style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAKC;EACE;EACA;EACA;EACA;EACA;;AAEE;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;IACE;;;AAGJ;EACE;IACE;;;AAGJ;EACE;IACE;;;;AAKP;EACE","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;EACI;EACA;EACA;;AAGJ;EACE,OA5CO;;AA+CT;EACE,OA/CW;;AAoDb;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AACA;EANF;IAOI;;;AAGF;EAYE;EACA;EACA;;AAbA;EADF;IAEI;;;AAEF;EACE;IACE;IACA;IACA;;;AAQJ;EACE;EACA,kBA3GG;EA4GH;EACA;EACA;;AACA;EANF;IAOI;IACA;;;AAGF;EACE;EACA;;AACA;EAHF;IAII;;;AAEF;EANF;IAOI;;;AAGF;EAIE;EACA;EACA;EACA;EACA;EACA;EACA;;AATA;EACE;;AAUF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAVF;IAWI;;;AAEF;EACE,OArKL;EAsKK;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;;AAMR;EACE;EACA;EACA;AAMA;AAAA;AAAA;EAGA;;AARA;EACE;EACA;EACA;;AAUR;EACE,kBA1MC;EA2MD;EACA;EACA;;AAKF;EADF;IAEI;;;AAGF;EACE;EACA;EACA;EACA;;AACE;EACE;EACA;;AAEE;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGJ;EAzIF;IA0II;IACA;;;AAEF;EA7IF;IA8II;;;AAEF;EAhJF;IAiJI;;;AAIN;EACE;;AACA;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;AAEF;EAPF;IAQI;;;AAEF;EAVF;IAWI;;;AAIJ;EACE;;AACA;EAFF;IAGI;;;AAEF;EALF;IAMI;;;AAEF;EARF;IASI;;;AAIJ;EACE;EACA;;AAQZ;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"style.css"}

public/css/style.scss

@@ -2,41 +2,426 @@ $breakpoint-phone: 600px;
 $breakpoint-tablet: 900px;
 $breakpoint-normal-screen: 1200px;
 $breakpoint-big-screen: 1800px;
+$BG-color: #000001;
+$text-color: #37ffad;
+$new-link: #ff33cc;
+$visited-link: #cc0099;
 
- body {
-   margin:0;
-   padding:0;
-   background: #000001;
-   color: #37ffad;
-   font-family: monospace;
-   main{
-     article{
-       max-width:42em;
-       margin:auto;
-     }
-   }
-
-   section{
-     background-color: lawngreen;
-   }
-
-   @media screen and (max-width: $breakpoint-phone) {
-     main{
-       margin: 0 5% 0 5%;
-     }
-   }
-   @media screen and (min-width: $breakpoint-phone) {
-     main{
-       margin: 0 20% 0 20%;
-     }
-   }
-   @media screen and (min-width: $breakpoint-tablet) {
-     main{
-       margin: 0 25% 0 25%;
-     }
-   }
- }
-
-header {
-  background-color: yellow;
+@-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%;
+  background-color: $BG-color;
+  color: $text-color;
+  padding: 0;
+  margin: 0;
+
+  .rainbow{
+      animation-name: rainbow;
+      animation-duration: 18s;
+      animation-iteration-count: infinite;
+  }
+
+  a {
+    color: $new-link;
+  }
+
+  a:visited {
+    color: $visited-link;
+  }
+
+// FURBY-COLOR
+
+  .stellina{
+    color:blue;
+  }
+
+  .bocca, .onecchie{
+    color: burlywood;
+  }
+
+  .occhietti,{
+    color: white;
+  }
+
+  .vello{
+    color:brown;
+  }
+
+  .setola{
+    color:lightcoral;
+  }
+
+  .pedibus{
+    color:chocolate;
+  }
+
+  main {
+    width: 100%;
+    height: 98vh;
+    background: #000001;
+    display: flex;
+    overflow: scroll;
+    @media screen and (max-width: $breakpoint-tablet) {
+      flex-wrap: wrap;
+    }
+
+    #scrollable-column {
+      @media screen and (max-width: $breakpoint-tablet) {
+        flex-wrap: wrap;
+      }
+      @media screen and (min-width: $breakpoint-tablet) {
+        #raggiungerci {
+          position: absolute;
+          bottom: 7em;
+          padding-top: 0.1em;
+        }
+      }
+
+      display: flex;
+      width: 100%;
+      margin: auto;
+
+      #right-column {
+        width: 100%;
+        background-color: $BG-color;
+        z-index: 33;
+        display: flex;
+        justify-content: center;
+        @media screen and (max-width: $breakpoint-tablet) {
+          display:flex;
+          justify-content: center;
+        }
+
+        #calendario {
+          height: 100%;
+          max-width: 40em;
+          @media screen and (min-width: $breakpoint-tablet) {
+            position: fixed;
+          }
+          @media screen and (min-width: $breakpoint-normal-screen) {
+            width:40%;
+          }
+
+          ul {
+            #overflow-scroll {
+              overflow-y: hidden;
+            }
+            overflow-y: scroll;
+            list-style-type: none;
+            background: transparent;
+            padding: 1em;
+            display: flex;
+            flex-wrap: wrap;
+            max-height: 80%;
+
+            li {
+              flex-wrap: wrap;
+              margin-bottom: 1em;
+
+              .filler {
+                display: flex;
+                flex: 1 1 100%;
+              }
+
+              .filler + div{
+                border: solid 1pt white;
+                margin:1.3em 0 -0.4em 0;
+              }
+
+              .title-wrapper {
+                display: flex;
+                border-top: 1pt solid white;
+                border-right: 1pt solid white;
+                border-left: 1pt solid white;
+                border-bottom: 1pt solid white;
+                padding: 0.1em;
+                margin-bottom: -5px;
+                z-index: 32;
+
+                @media screen and (max-width: $breakpoint-tablet) {
+                  width:100%;
+                }
+                .orario {
+                  color: $text-color;
+                  height: 1.2em;
+                  width: 4em;
+                  display: flex;
+                  justify-content: center;
+                }
+
+                h4 {
+                  height: 1.2em;
+                  margin: 0 1em;
+
+                  a {
+                    text-decoration: none;
+                  }
+                }
+              }
+            }
+
+            .descrizione-talk {
+              display: none;
+              flex: 1 1 100%;
+              overflow-y: hidden;
+              div{
+                max-height:30em;
+                overflow-y: scroll;
+                padding:3em;
+              }
+              /*@media screen and (min-width: $breakpoint-normal-screen) {
+              max-width: 75%;
+              }*/
+              hyphens: auto;
+            }
+          }
+        }
+
+        #raggiungerci {
+          background-color: $BG-color;
+          z-index: 100;
+          margin-top: 1em;
+          width:100%;
+        }
+      }
+
+      #left-column {
+        @media screen and (max-width: $breakpoint-tablet) {
+          margin: auto;
+        }
+
+        #illustrazione {
+          margin-top: 1em;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: center;
+            pre {
+              margin:0;
+              position: fixed;
+              .rainbow{
+                .retard-1{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 0.1s;
+                }
+
+                .retard-2{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 0.2s;
+                }
+
+                .retard-3{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 0.3s;
+                }
+
+                .retard-4{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 0.4s;
+                }
+
+                .retard-5{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 0.5s;
+                }
+
+                .retard-6{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 0.6s;
+                }
+
+                .retard-7{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 0.7s;
+                }
+
+                .retard-8{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 0.8s;
+                }
+
+                .retard-9{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 0.9s;
+                }
+
+                .retard-10{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 1s;
+                }
+
+                .retard-11{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 1.1s;
+                }
+
+                .retard-12{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 1.2s;
+                }
+
+                .retard-13{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 1.3s;
+                }
+
+                .retard-14{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 1.4s;
+                }
+
+                .retard-15{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 1.5s;
+                }
+
+                .retard-16{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 1.6s;
+                }
+
+                .retard-17{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 1.7s;
+                }
+
+                .retard-18{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 1.8s;
+                }
+
+                .retard-19{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 1.9s;
+                }
+             }
+              @media screen and (max-width: $breakpoint-phone) {
+                font-size:0.6em;
+                font-weight: bold;
+              }
+              @media screen and (min-width: $breakpoint-phone) and (max-width: $breakpoint-normal-screen) {
+                font-size: 0.8em;
+              }
+              @media screen and (min-width: $breakpoint-normal-screen) {
+                font-size: 0.9em;
+              }
+          }
+
+          .text-wrapper {
+            position: relative;
+            .text-offset {
+              display: flex;
+              flex-wrap: wrap;
+              background-color: transparent;
+              @media screen and (max-width: $breakpoint-phone) {
+                height:33em;
+                }
+              @media screen and (min-width: $breakpoint-phone) and (max-width: $breakpoint-normal-screen) {
+                height:43em;
+              }
+              @media screen and (min-width: $breakpoint-normal-screen) {
+                height:50em;
+              }
+            }
+
+            .fake-freccina{
+              margin-top: 0;
+              @media screen and (max-width: $breakpoint-tablet) {
+                left:46.25em;
+              }
+              @media screen and (min-width: $breakpoint-tablet) and (max-width: $breakpoint-normal-screen) {
+                left:46.3em;
+              }
+              @media screen and (min-width: $breakpoint-normal-screen) {
+                left:52.35em;
+              }
+            }
+
+            #call {
+              margin:0;
+              padding:1em 10% 2em 10%;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  footer {
+//    animation: banner-stretch 3.3s 1s;
+    display: flex;
+    animation-direction: normal;
+    animation-fill-mode: forwards;
+    justify-content: center;
+    align-items: center;
+    height: 3em;
+    text-align: center;
+    position: absolute;
+    bottom: 0;
+    width:100%;
+    background-color: black;
+  }
 }

public/index.html

@@ -5,27 +5,256 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<title>Hack-or-d(i|y)e 2018</title>
+	
+	
 	<link rel="stylesheet" href="css/style.css">
 	<link href="/index.xml" rel="feed" type="application/rss+xml" title="Hack-or-d(i|y)e 2018">
 	<meta name="generator" content="Hugo 0.42.2" />
 </head>
 <body>
-	<header>
-    {{ partial "header.html" . }}
-	</header>
+
 	<main>
-  	<main>
-  		<div id="scrollable-column">
-  			<div id="left-column">
-  				{{ partial "furby-hack.html" . }}
-  			</div>
-  			<div id="right-column">
-  					{{ partial "talk-calendar.html" . }}
-  			</div>
-  		</div>
-  	</main>
+		<div id="scrollable-column">
+			<div id="left-column">
+				<div id="illustrazione">
+			<pre style="text-align:center">
+<span class="rainbow">                <span class="retard-2"> _ </span>        <span class="retard-5">_</span>   <span class="retard-6">_</span>   <span class="retard-7">_</span>     <span class="retard-9">_</span>   <span class="retard-10">_</span>        <span class="retard-13">_</span>                   </span><span style="display:none;">|</span>
+<span class="rainbow">            <span class="retard-1">|\</span>  <span class="retard-2">|_|</span> <span class="retard-3">|_|</span> <span class="retard-4">_</span> <span class="retard-5">|_)</span> <span class="retard-6">| |</span> <span class="retard-7">| |</span>   <span class="retard-9">| |</span> <span class="retard-10">| |</span> <span class="retard-11">_</span> <span class="retard-12">|/</span> <span class="retard-13">|_|</span> <span class="retard-14">|_|</span>              <span style="display:none;">|</span>
+<span class="rainbow">            <span class="retard-1">|_)</span> <span class="retard-2">| |</span> <span class="retard-3">| |</span>   <span class="retard-5">|_)</span> <span class="retard-6">|_|</span> <span class="retard-7">|_|</span>   <span class="retard-9">|_|</span> <span class="retard-10">|_|</span>   <span class="retard-12">|\</span> <span class="retard-13">| |</span> <span class="retard-14">| |</span>              </span><span style="display:none;">|</span>
+                                                                          <span style="display:none;">|</span>
+                                                                          <span style="display:none;">|</span>
+                                                                          <span style="display:none;">|</span>
+                                <span class="stellina">+</span>      <span class="stellina">+</span>                                  <span style="display:none;">|</span>
+                          <span class="stellina">+</span>                  <span class="stellina">+</span>                            <span style="display:none;">|</span>
+                               <span class="stellina">+</span>        <span class="stellina">+</span>                                 <span style="display:none;">|</span>
+                      <span class="stellina">+</span>     <span class="vello">___   \ | /   ___</span>    <span class="stellina">+</span>                        <span style="display:none;">|</span>
+                            <span class="vello">\</span> <span class="onecchie">></span> <span class="vello">\       /</span> <span class="onecchie">&lt;</span> <span class="vello">/</span>                             <span style="display:none;">|</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 style="display:none;">|</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 style="display:none;">|</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 style="display:none;">|</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 style="display:none;">|</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 style="display:none;">|</span>
+                                                                          <span style="display:none;">|</span>
+                          <span class="stellina">+</span>         <span class="stellina">+</span>        <span class="stellina">+</span>                            <span style="display:none;">|</span>
+                                <span class="stellina">+</span>       <span class="stellina">+</span>                                 <span style="display:none;">|</span>
+                                                                          <span style="display:none;">|</span>
+                                                                          <span style="display:none;">|</span>
+<span class="rainbow">       <span class="retard-2">_</span>   <span class="retard-3">_</span>         <span class="retard-6">_</span>         <span class="retard-9">_</span>   <span class="retard-10">_</span>             <span class="retard-14">_</span>        <span class="retard-17">_</span>   <span class="retard-18">_</span>   <span class="retard-19">_</span>       </span><span style="display:none;">|</span>
+<span class="rainbow">  <span class="retard-1">|\</span>  <span class="retard-2">| |</span> <span class="retard-3">| |</span> <span class="retard-4">_</span> <span class="retard-5">|\</span>  <span class="retard-6">|_|</span> <span class="retard-7">|_|</span>   <span class="retard-9">| |</span> <span class="retard-10">| |</span> <span class="retard-11">_</span> <span class="retard-12">|\|</span> <span class="retard-13">\_/</span> <span class="retard-14">|_</span>   <span class="retard-16">|</span>   <span class="retard-17">| |</span> <span class="retard-18">| |</span>   <span class="retard-19">)</span>      </span><span style="display:none;">|</span>
+<span class="rainbow">  <span class="retard-1">|_)</span> <span class="retard-2">|_|</span> <span class="retard-3">|_|</span>   <span class="retard-5">|_)</span> <span class="retard-6">| |</span> <span class="retard-7">| |</span>   <span class="retard-9">|_|</span> <span class="retard-10">|_|</span>   <span class="retard-12">| |</span>  <span class="retard-13">/</span>  <span class="retard-14">|_</span>   <span class="retard-16">|__</span> <span class="retard-17">|_|</span> <span class="retard-18">|_|</span>  <span class="retard-19">(</span>       </span><span style="display:none;">|</span>
+<span class="rainbow">                                                                  <span class="retard-19">'</span>       </span><span style="display:none;">|</span>
+
+                                                                          <span style="display:none;">|</span>
+          |_   _.  _ |       _  ._       _| o /    |  _  \                <span style="display:none;">|</span>
+          | | (_| (_ |&lt;  ─  (_) |   ─   (_| | \ \/ | (/_ /                <span style="display:none;">|</span>
+                                                /                         <span style="display:none;">|</span>
+                            _    _     ,   _                              <span style="display:none;">|</span>
+                           / \  / \   /|  / \                             <span style="display:none;">|</span>
+                             / |   | / |  \_/                             <span style="display:none;">|</span>
+                            /  |   |   |  / \                             <span style="display:none;">|</span>
+                           /__  \_/    |  \_/                             <span style="display:none;">|</span>
+                                                                          <span style="display:none;">|</span>
+            _         _                                                   <span style="display:none;">|</span>
+           (_) __ /| | |   |\ |  _      _  ._ _  |_  ._  _                <span style="display:none;">|</span>
+            _)     | |_|   | \| (_) \/ (/_ | | | |_) |  (/_               <span style="display:none;">|</span>
+                                                                          <span style="display:none;">|</span>
+                                                                          <span style="display:none;">|</span>
+                                                                          <span style="display:none;">\|/</span>
+                                                                          <span style="display:none;">v</span>
+		  </pre>
+  <div class="text-wrapper">
+    <div class="text-offset"></div>
+     <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>
+			<div id="right-column">
+					
+<style>
+  
+      #GadSAISDUHJAIKDJSem:target > .descrizione-talk{
+        display:block !important;
+        margin-bottom:0;
+      }
+    #GadSAISDUHJAIKDJSem:target > .filler{
+      margin-bottom: -1em !important;
+    }
+    #GadSAISDUHJAIKDJSem:target > .filler >.title-wrapper{
+      border-bottom:5pt solid #000001 !important;
+    }
+  
+      #Gadgety__oaidjf_a_System:target > .descrizione-talk{
+        display:block !important;
+        margin-bottom:0;
+      }
+    #Gadgety__oaidjf_a_System:target > .filler{
+      margin-bottom: -1em !important;
+    }
+    #Gadgety__oaidjf_a_System:target > .filler >.title-wrapper{
+      border-bottom:5pt solid #000001 !important;
+    }
+  
+      #Gadgety_Sound_System:target > .descrizione-talk{
+        display:block !important;
+        margin-bottom:0;
+      }
+    #Gadgety_Sound_System:target > .filler{
+      margin-bottom: -1em !important;
+    }
+    #Gadgety_Sound_System:target > .filler >.title-wrapper{
+      border-bottom:5pt solid #000001 !important;
+    }
+  
+      #Gakajdfhsklfjdsstem:target > .descrizione-talk{
+        display:block !important;
+        margin-bottom:0;
+      }
+    #Gakajdfhsklfjdsstem:target > .filler{
+      margin-bottom: -1em !important;
+    }
+    #Gakajdfhsklfjdsstem:target > .filler >.title-wrapper{
+      border-bottom:5pt solid #000001 !important;
+    }
+  
+</style>
+
+<section id="calendario">
+  <ul>
+    <div id="overflow-scroll">
+      
+      <li id="GadSAISDUHJAIKDJSem">
+        <div class="filler">
+            <div class="title-wrapper">
+              <div class="orario"> --.-- </div>
+            
+              <a class="titolo" href="#GadSAISDUHJAIKDJSem">
+                <h4>GadSAISDUHJAIKDJSem</h4>
+              </a>
+            </div>
+        </div>
+        <div class="descrizione-talk">
+          <div>
+            <p>Gadgety Sound System è un sistema distribuito di moduli musicali.</p>
+
+          </div>
+        </div>
+      </li>
+    
+      <li id="Gadgety__oaidjf_a_System">
+        <div class="filler">
+            <div class="title-wrapper">
+              <div class="orario"> --.-- </div>
+            
+              <a class="titolo" href="#Gadgety__oaidjf_a_System">
+                <h4>Gadgety  oaidjf a System</h4>
+              </a>
+            </div>
+        </div>
+        <div class="descrizione-talk">
+          <div>
+            <p>Gadgety Sound System è un sistema distribuito di moduli musicali.</p>
+
+          </div>
+        </div>
+      </li>
+    
+      <li id="Gadgety_Sound_System">
+        <div class="filler">
+            <div class="title-wrapper">
+              <div class="orario"> --.-- </div>
+            
+              <a class="titolo" href="#Gadgety_Sound_System">
+                <h4>Gadgety Sound System</h4>
+              </a>
+            </div>
+        </div>
+        <div class="descrizione-talk">
+          <div>
+            <p>Gadgety Sound System è un sistema distribuito di moduli musicali.</p>
+
+          </div>
+        </div>
+      </li>
+    
+      <li id="Gakajdfhsklfjdsstem">
+        <div class="filler">
+            <div class="title-wrapper">
+              <div class="orario"> --.-- </div>
+            
+              <a class="titolo" href="#Gakajdfhsklfjdsstem">
+                <h4>Gakajdfhsklfjdsstem</h4>
+              </a>
+            </div>
+        </div>
+        <div class="descrizione-talk">
+          <div>
+            <p>Gadgety Sound System è un sistema distribuito di moduli musicali.</p>
+
+          </div>
+        </div>
+      </li>
+    
+    </div>
+  </ul>
+</section>
+
+			</div>
+		</div>
 	</main>
-	<footer>
-  	{{ partial "footer.html" . }}
-  </footer>
+		<footer>
+		
+		<p>Questo sito i cookies li mangia / There are no cookies in outer space</p>
+	</footer>
 </body>
+</html>
+

public/index.xml

@@ -11,21 +11,39 @@
     
     
     <item>
-      <title>Talk1</title>
+      <title>GadSAISDUHJAIKDJSem</title>
+      <link>/posts/talk4/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>/posts/talk4/</guid>
+      <description>Gadgety Sound System è un sistema distribuito di moduli musicali.</description>
+    </item>
+    
+    <item>
+      <title>Gadgety  oaidjf a System</title>
       <link>/posts/talk2/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
       <guid>/posts/talk2/</guid>
-      <description>Etc etc</description>
+      <description>Gadgety Sound System è un sistema distribuito di moduli musicali.</description>
     </item>
     
     <item>
-      <title>Talk2</title>
+      <title>Gadgety Sound System</title>
       <link>/posts/talk1/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
       <guid>/posts/talk1/</guid>
-      <description>Etc etc</description>
+      <description>Gadgety Sound System è un sistema distribuito di moduli musicali.</description>
+    </item>
+    
+    <item>
+      <title>Gakajdfhsklfjdsstem</title>
+      <link>/posts/talk3/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>/posts/talk3/</guid>
+      <description>Gadgety Sound System è un sistema distribuito di moduli musicali.</description>
     </item>
     
   </channel>

public/posts/index.html

@@ -12,14 +12,6 @@
 	<meta name="generator" content="Hugo 0.42.2" />
 </head>
 <body>
-	<header>
-		<a href="">Hack-or-d(i|y)e 2018</a>
-		<nav>
-			<ul>
-				
-			</ul>
-		</nav>
-	</header>
 
 	<main>
 		
@@ -40,13 +32,13 @@
 					
 					<li><a href="/categories/">Categories</a></li>
 					
-					<li><a href="/">Hack-or-d(i|y)e 2018</a></li>
+					<li><a href="/posts/talk4/">GadSAISDUHJAIKDJSem</a></li>
 					
-					<li><a href="/posts/">Posts</a></li>
+					<li><a href="/posts/talk2/">Gadgety  oaidjf a System</a></li>
 					
-					<li><a href="/tags/">Tags</a></li>
+					<li><a href="/posts/talk1/">Gadgety Sound System</a></li>
 					
-					<li><a href="/posts/talk2/">Talk1</a></li>
+					<li><a href="/posts/talk3/">Gakajdfhsklfjdsstem</a></li>
 					
 				</ul>
 			</div>
@@ -55,6 +47,7 @@
 
 	<footer>
 		
+		<p>Questo sito i cookies li mangia / There are no cookies in outer space</p>
 	</footer>
 </body>
 </html>

public/posts/index.xml

@@ -11,21 +11,39 @@
     
     
     <item>
-      <title>Talk1</title>
+      <title>GadSAISDUHJAIKDJSem</title>
+      <link>/posts/talk4/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>/posts/talk4/</guid>
+      <description>Gadgety Sound System è un sistema distribuito di moduli musicali.</description>
+    </item>
+    
+    <item>
+      <title>Gadgety  oaidjf a System</title>
       <link>/posts/talk2/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
       <guid>/posts/talk2/</guid>
-      <description>Etc etc</description>
+      <description>Gadgety Sound System è un sistema distribuito di moduli musicali.</description>
     </item>
     
     <item>
-      <title>Talk2</title>
+      <title>Gadgety Sound System</title>
       <link>/posts/talk1/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
       <guid>/posts/talk1/</guid>
-      <description>Etc etc</description>
+      <description>Gadgety Sound System è un sistema distribuito di moduli musicali.</description>
+    </item>
+    
+    <item>
+      <title>Gakajdfhsklfjdsstem</title>
+      <link>/posts/talk3/</link>
+      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
+      
+      <guid>/posts/talk3/</guid>
+      <description>Gadgety Sound System è un sistema distribuito di moduli musicali.</description>
     </item>
     
   </channel>

public/posts/talk1/index.html

@@ -4,7 +4,7 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<title>Talk2</title>
+	<title>Gadgety Sound System</title>
 	
 	
 	<link rel="stylesheet" href="css/style.css">
@@ -12,21 +12,13 @@
 	<meta name="generator" content="Hugo 0.42.2" />
 </head>
 <body>
-	<header>
-		<a href="">Hack-or-d(i|y)e 2018</a>
-		<nav>
-			<ul>
-				
-			</ul>
-		</nav>
-	</header>
 
 	<main>
 		<article>
-			<h1>Talk2</h1>
+			<h1>Gadgety Sound System</h1>
 			<time>01.01.0001 00:00</time>
 			<div>
-				<p>Etc etc</p>
+				<p>Gadgety Sound System è un sistema distribuito di moduli musicali.</p>
 
 			</div>
 			<div>
@@ -49,13 +41,13 @@
 					
 					<li><a href="/categories/">Categories</a></li>
 					
-					<li><a href="/">Hack-or-d(i|y)e 2018</a></li>
+					<li><a href="/posts/talk4/">GadSAISDUHJAIKDJSem</a></li>
 					
-					<li><a href="/posts/">Posts</a></li>
+					<li><a href="/posts/talk2/">Gadgety  oaidjf a System</a></li>
 					
-					<li><a href="/tags/">Tags</a></li>
+					<li><a href="/posts/talk1/">Gadgety Sound System</a></li>
 					
-					<li><a href="/posts/talk2/">Talk1</a></li>
+					<li><a href="/posts/talk3/">Gakajdfhsklfjdsstem</a></li>
 					
 				</ul>
 			</div>
@@ -64,6 +56,7 @@
 
 	<footer>
 		
+		<p>Questo sito i cookies li mangia / There are no cookies in outer space</p>
 	</footer>
 </body>
 </html>

public/posts/talk2/index.html

@@ -4,7 +4,7 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<title>Talk1</title>
+	<title>Gadgety  oaidjf a System</title>
 	
 	
 	<link rel="stylesheet" href="css/style.css">
@@ -12,21 +12,13 @@
 	<meta name="generator" content="Hugo 0.42.2" />
 </head>
 <body>
-	<header>
-		<a href="">Hack-or-d(i|y)e 2018</a>
-		<nav>
-			<ul>
-				
-			</ul>
-		</nav>
-	</header>
 
 	<main>
 		<article>
-			<h1>Talk1</h1>
+			<h1>Gadgety  oaidjf a System</h1>
 			<time>01.01.0001 00:00</time>
 			<div>
-				<p>Etc etc</p>
+				<p>Gadgety Sound System è un sistema distribuito di moduli musicali.</p>
 
 			</div>
 			<div>
@@ -49,13 +41,13 @@
 					
 					<li><a href="/categories/">Categories</a></li>
 					
-					<li><a href="/">Hack-or-d(i|y)e 2018</a></li>
+					<li><a href="/posts/talk4/">GadSAISDUHJAIKDJSem</a></li>
 					
-					<li><a href="/posts/">Posts</a></li>
+					<li><a href="/posts/talk2/">Gadgety  oaidjf a System</a></li>
 					
-					<li><a href="/tags/">Tags</a></li>
+					<li><a href="/posts/talk1/">Gadgety Sound System</a></li>
 					
-					<li><a href="/posts/talk2/">Talk1</a></li>
+					<li><a href="/posts/talk3/">Gakajdfhsklfjdsstem</a></li>
 					
 				</ul>
 			</div>
@@ -64,6 +56,7 @@
 
 	<footer>
 		
+		<p>Questo sito i cookies li mangia / There are no cookies in outer space</p>
 	</footer>
 </body>
 </html>

public/posts/talk3/index.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>Gakajdfhsklfjdsstem</title>
+	
+	
+	<link rel="stylesheet" href="css/style.css">
+	
+	<meta name="generator" content="Hugo 0.42.2" />
+</head>
+<body>
+
+	<main>
+		<article>
+			<h1>Gakajdfhsklfjdsstem</h1>
+			<time>01.01.0001 00:00</time>
+			<div>
+				<p>Gadgety Sound System è un sistema distribuito di moduli musicali.</p>
+
+			</div>
+			<div>
+				<ul id="tags">
+					
+				</ul>
+			</div>
+			<div>
+				
+			</div>
+		</article>
+	</main>
+	<aside>
+		<div>
+			<div>
+				<h3>LATEST POSTS</h3>
+			</div>
+			<div>
+				<ul>
+					
+					<li><a href="/categories/">Categories</a></li>
+					
+					<li><a href="/posts/talk4/">GadSAISDUHJAIKDJSem</a></li>
+					
+					<li><a href="/posts/talk2/">Gadgety  oaidjf a System</a></li>
+					
+					<li><a href="/posts/talk1/">Gadgety Sound System</a></li>
+					
+					<li><a href="/posts/talk3/">Gakajdfhsklfjdsstem</a></li>
+					
+				</ul>
+			</div>
+		</div>
+	</aside>
+
+	<footer>
+		
+		<p>Questo sito i cookies li mangia / There are no cookies in outer space</p>
+	</footer>
+</body>
+</html>

public/posts/talk4/index.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>GadSAISDUHJAIKDJSem</title>
+	
+	
+	<link rel="stylesheet" href="css/style.css">
+	
+	<meta name="generator" content="Hugo 0.42.2" />
+</head>
+<body>
+
+	<main>
+		<article>
+			<h1>GadSAISDUHJAIKDJSem</h1>
+			<time>01.01.0001 00:00</time>
+			<div>
+				<p>Gadgety Sound System è un sistema distribuito di moduli musicali.</p>
+
+			</div>
+			<div>
+				<ul id="tags">
+					
+				</ul>
+			</div>
+			<div>
+				
+			</div>
+		</article>
+	</main>
+	<aside>
+		<div>
+			<div>
+				<h3>LATEST POSTS</h3>
+			</div>
+			<div>
+				<ul>
+					
+					<li><a href="/categories/">Categories</a></li>
+					
+					<li><a href="/posts/talk4/">GadSAISDUHJAIKDJSem</a></li>
+					
+					<li><a href="/posts/talk2/">Gadgety  oaidjf a System</a></li>
+					
+					<li><a href="/posts/talk1/">Gadgety Sound System</a></li>
+					
+					<li><a href="/posts/talk3/">Gakajdfhsklfjdsstem</a></li>
+					
+				</ul>
+			</div>
+		</div>
+	</aside>
+
+	<footer>
+		
+		<p>Questo sito i cookies li mangia / There are no cookies in outer space</p>
+	</footer>
+</body>
+</html>

public/sitemap.xml

@@ -8,26 +8,34 @@
   </url>
   
   <url>
-    <loc>/</loc>
-    <priority>0</priority>
+    <loc>/posts/talk4/</loc>
   </url>
   
   <url>
-    <loc>/posts/</loc>
-    <priority>0</priority>
+    <loc>/posts/talk2/</loc>
   </url>
   
   <url>
-    <loc>/tags/</loc>
+    <loc>/posts/talk1/</loc>
+  </url>
+  
+  <url>
+    <loc>/posts/talk3/</loc>
+  </url>
+  
+  <url>
+    <loc>/</loc>
     <priority>0</priority>
   </url>
   
   <url>
-    <loc>/posts/talk2/</loc>
+    <loc>/posts/</loc>
+    <priority>0</priority>
   </url>
   
   <url>
-    <loc>/posts/talk1/</loc>
+    <loc>/tags/</loc>
+    <priority>0</priority>
   </url>
   
 </urlset>

public/tags/index.html

@@ -12,14 +12,6 @@
 	<meta name="generator" content="Hugo 0.42.2" />
 </head>
 <body>
-	<header>
-		<a href="">Hack-or-d(i|y)e 2018</a>
-		<nav>
-			<ul>
-				
-			</ul>
-		</nav>
-	</header>
 
 	<main>
 		
@@ -40,13 +32,13 @@
 					
 					<li><a href="/categories/">Categories</a></li>
 					
-					<li><a href="/">Hack-or-d(i|y)e 2018</a></li>
+					<li><a href="/posts/talk4/">GadSAISDUHJAIKDJSem</a></li>
 					
-					<li><a href="/posts/">Posts</a></li>
+					<li><a href="/posts/talk2/">Gadgety  oaidjf a System</a></li>
 					
-					<li><a href="/tags/">Tags</a></li>
+					<li><a href="/posts/talk1/">Gadgety Sound System</a></li>
 					
-					<li><a href="/posts/talk2/">Talk1</a></li>
+					<li><a href="/posts/talk3/">Gakajdfhsklfjdsstem</a></li>
 					
 				</ul>
 			</div>
@@ -55,6 +47,7 @@
 
 	<footer>
 		
+		<p>Questo sito i cookies li mangia / There are no cookies in outer space</p>
 	</footer>
 </body>
 </html>

themes/HOD2k18/layouts/partials/footer.html

@@ -1,6 +1,6 @@
 	<footer>
 		<!--<p>&copy; {{ now.Year }} <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></p>-->
-		<p>There are no cookies in outer space</p>
+		<p>Questo sito i cookies li mangia / There are no cookies in outer space</p>
 	</footer>
 </body>
 </html>

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

@@ -1,8 +1,8 @@
 <div id="illustrazione">
 			<pre style="text-align:center">
-<span class="rainbow">                <span class="retard-2"> _ </span>        _   _   _     _   _        _                   </span><span style="display:none;">|</span>
-<span class="rainbow">            <span class="retard-1">|\</span>  <span class="retard-2">|_|</span> |_| _ |_) | | | |   | | | | _ |/ |_| |_|              </span><span style="display:none;">|</span>
-<span class="rainbow">            <span class="retard-1">|_)</span> <span class="retard-2">| |</span> | |   |_) |_| |_|   |_| |_|   |\ | | | |              </span><span style="display:none;">|</span>
+<span class="rainbow">                <span class="retard-2"> _ </span>        <span class="retard-5">_</span>   <span class="retard-6">_</span>   <span class="retard-7">_</span>     <span class="retard-9">_</span>   <span class="retard-10">_</span>        <span class="retard-13">_</span>                   </span><span style="display:none;">|</span>
+<span class="rainbow">            <span class="retard-1">|\</span>  <span class="retard-2">|_|</span> <span class="retard-3">|_|</span> <span class="retard-4">_</span> <span class="retard-5">|_)</span> <span class="retard-6">| |</span> <span class="retard-7">| |</span>   <span class="retard-9">| |</span> <span class="retard-10">| |</span> <span class="retard-11">_</span> <span class="retard-12">|/</span> <span class="retard-13">|_|</span> <span class="retard-14">|_|</span>              <span style="display:none;">|</span>
+<span class="rainbow">            <span class="retard-1">|_)</span> <span class="retard-2">| |</span> <span class="retard-3">| |</span>   <span class="retard-5">|_)</span> <span class="retard-6">|_|</span> <span class="retard-7">|_|</span>   <span class="retard-9">|_|</span> <span class="retard-10">|_|</span>   <span class="retard-12">|\</span> <span class="retard-13">| |</span> <span class="retard-14">| |</span>              </span><span style="display:none;">|</span>
                                                                           <span style="display:none;">|</span>
                                                                           <span style="display:none;">|</span>
                                                                           <span style="display:none;">|</span>
@@ -21,10 +21,11 @@
                                 <span class="stellina">+</span>       <span class="stellina">+</span>                                 <span style="display:none;">|</span>
                                                                           <span style="display:none;">|</span>
                                                                           <span style="display:none;">|</span>
-<span class="rainbow">       _   _         _         _   _             _        _   _   _       </span><span style="display:none;">|</span>
-<span class="rainbow">  |\  | | | | _ |\  |_| |_|   | | | | _ |\| \_/ |_   |   | | | |   )      </span><span style="display:none;">|</span>
-<span class="rainbow">  |_) |_| |_|   |_) | | | |   |_| |_|   | |  /  |_   |__ |_| |_|  (       </span><span style="display:none;">|</span>
-<span class="rainbow">                                                                  '       </span><span style="display:none;">|</span>
+<span class="rainbow">       <span class="retard-2">_</span>   <span class="retard-3">_</span>         <span class="retard-6">_</span>         <span class="retard-9">_</span>   <span class="retard-10">_</span>             <span class="retard-14">_</span>        <span class="retard-17">_</span>   <span class="retard-18">_</span>   <span class="retard-19">_</span>       </span><span style="display:none;">|</span>
+<span class="rainbow">  <span class="retard-1">|\</span>  <span class="retard-2">| |</span> <span class="retard-3">| |</span> <span class="retard-4">_</span> <span class="retard-5">|\</span>  <span class="retard-6">|_|</span> <span class="retard-7">|_|</span>   <span class="retard-9">| |</span> <span class="retard-10">| |</span> <span class="retard-11">_</span> <span class="retard-12">|\|</span> <span class="retard-13">\_/</span> <span class="retard-14">|_</span>   <span class="retard-16">|</span>   <span class="retard-17">| |</span> <span class="retard-18">| |</span>   <span class="retard-19">)</span>      </span><span style="display:none;">|</span>
+<span class="rainbow">  <span class="retard-1">|_)</span> <span class="retard-2">|_|</span> <span class="retard-3">|_|</span>   <span class="retard-5">|_)</span> <span class="retard-6">| |</span> <span class="retard-7">| |</span>   <span class="retard-9">|_|</span> <span class="retard-10">|_|</span>   <span class="retard-12">| |</span>  <span class="retard-13">/</span>  <span class="retard-14">|_</span>   <span class="retard-16">|__</span> <span class="retard-17">|_|</span> <span class="retard-18">|_|</span>  <span class="retard-19">(</span>       </span><span style="display:none;">|</span>
+<span class="rainbow">                                                                  <span class="retard-19">'</span>       </span><span style="display:none;">|</span>
+
                                                                           <span style="display:none;">|</span>
           |_   _.  _ |       _  ._       _| o /    |  _  \                <span style="display:none;">|</span>
           | | (_| (_ |<  ─  (_) |   ─   (_| | \ \/ | (/_ /                <span style="display:none;">|</span>

themes/HOD2k18/layouts/partials/talk-calendar.html

@@ -21,20 +21,20 @@
       <li id="{{ replace .Title " " "_" }}">
         <div class="filler">
             <div class="title-wrapper">
-              <div class="orario"> 09.00 </div>
+              <div class="orario"> --.-- </div>
             <!--<h4><a class="titolo" href="{{ .Permalink }}">{{ .Title }}</a></h4>-->
               <a class="titolo" href="#{{ replace .Title " " "_" }}">
                 <h4>{{ .Title }}</h4>
               </a>
             </div>
         </div>
-        <div>
+        <div class="descrizione-talk">
+          <div>
+            {{ .Content }}
+          </div>
         </div>
-          <p class="descrizione-talk">
-              {{ .Title }}
-            {{ end }}
-          </p>
       </li>
+    {{ end }}
     </div>
   </ul>
 </section>

themes/HOD2k18/static/css/style.css

@@ -61,24 +61,17 @@ body {
   padding: 0;
   margin: 0;
 }
+body .rainbow {
+  animation-name: rainbow;
+  animation-duration: 18s;
+  animation-iteration-count: infinite;
+}
 body a {
   color: #ff33cc;
 }
 body a:visited {
   color: #cc0099;
 }
-body .rainbow {
-  animation: rainbow 18s ease infinite;
-  /*
-      .retard-1{
-        animation-delay: -1s;
-      }
-
-      .retard-2{
-        animation-delay: 12s;
-      }
-  */
-}
 body .stellina {
   color: blue;
 }
@@ -122,30 +115,37 @@ body main #scrollable-column {
 @media screen and (min-width: 900px) {
   body main #scrollable-column #raggiungerci {
     position: absolute;
-    bottom: 3em;
-  }
-  body main #scrollable-column #raggiungerci .descrizione-talk {
-    padding: 0 !important;
+    bottom: 7em;
+    padding-top: 0.1em;
   }
 }
 body main #scrollable-column #right-column {
   width: 100%;
   background-color: #000001;
   z-index: 33;
+  display: flex;
+  justify-content: center;
 }
 @media screen and (max-width: 900px) {
   body main #scrollable-column #right-column {
-    margin: auto;
+    display: flex;
+    justify-content: center;
   }
 }
 body main #scrollable-column #right-column #calendario {
   height: 100%;
+  max-width: 40em;
 }
 @media screen and (min-width: 900px) {
   body main #scrollable-column #right-column #calendario {
     position: fixed;
   }
 }
+@media screen and (min-width: 1200px) {
+  body main #scrollable-column #right-column #calendario {
+    width: 40%;
+  }
+}
 body main #scrollable-column #right-column #calendario ul {
   overflow-y: scroll;
   list-style-type: none;
@@ -166,6 +166,10 @@ body main #scrollable-column #right-column #calendario ul li .filler {
   display: flex;
   flex: 1 1 100%;
 }
+body main #scrollable-column #right-column #calendario ul li .filler + div {
+  border: solid 1pt white;
+  margin: 1.3em 0 -0.4em 0;
+}
 body main #scrollable-column #right-column #calendario ul li .title-wrapper {
   display: flex;
   border-top: 1pt solid white;
@@ -174,7 +178,12 @@ body main #scrollable-column #right-column #calendario ul li .title-wrapper {
   border-bottom: 1pt solid white;
   padding: 0.1em;
   margin-bottom: -5px;
-  z-index: 2;
+  z-index: 32;
+}
+@media screen and (max-width: 900px) {
+  body main #scrollable-column #right-column #calendario ul li .title-wrapper {
+    width: 100%;
+  }
 }
 body main #scrollable-column #right-column #calendario ul li .title-wrapper .orario {
   color: #37ffad;
@@ -193,21 +202,22 @@ body main #scrollable-column #right-column #calendario ul li .title-wrapper h4 a
 body main #scrollable-column #right-column #calendario ul .descrizione-talk {
   display: none;
   flex: 1 1 100%;
-  padding: 1em 0 2em 2em;
-  border-top: 1pt solid white;
-  border-right: 1pt solid white;
-  border-left: 1pt solid white;
-  border-bottom: 1pt solid white;
+  overflow-y: hidden;
+  /*@media screen and (min-width: $breakpoint-normal-screen) {
   max-width: 75%;
+  }*/
   hyphens: auto;
 }
-body main #scrollable-column #right-column #calendario ul .titolo:target + .descrizionedescrizione-talk {
-  display: flex;
+body main #scrollable-column #right-column #calendario ul .descrizione-talk div {
+  max-height: 30em;
+  overflow-y: scroll;
+  padding: 3em;
 }
 body main #scrollable-column #right-column #raggiungerci {
   background-color: #000001;
   z-index: 100;
   margin-top: 1em;
+  width: 100%;
 }
 @media screen and (max-width: 900px) {
   body main #scrollable-column #left-column {
@@ -224,9 +234,123 @@ body main #scrollable-column #left-column #illustrazione pre {
   margin: 0;
   position: fixed;
 }
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-1 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 0.1s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-2 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 0.2s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-3 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 0.3s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-4 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 0.4s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-5 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 0.5s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-6 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 0.6s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-7 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 0.7s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-8 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 0.8s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-9 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 0.9s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-10 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 1s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-11 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 1.1s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-12 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 1.2s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-13 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 1.3s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-14 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 1.4s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-15 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 1.5s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-16 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 1.6s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-17 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 1.7s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-18 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 1.8s;
+}
+body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-19 {
+  animation-name: rainbow;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-delay: 1.9s;
+}
 @media screen and (max-width: 600px) {
   body main #scrollable-column #left-column #illustrazione pre {
-    font-size: 0.5em;
+    font-size: 0.6em;
     font-weight: bold;
   }
 }
@@ -237,7 +361,7 @@ body main #scrollable-column #left-column #illustrazione pre {
 }
 @media screen and (min-width: 1200px) {
   body main #scrollable-column #left-column #illustrazione pre {
-    font-size: 1em;
+    font-size: 0.9em;
   }
 }
 body main #scrollable-column #left-column #illustrazione .text-wrapper {
@@ -250,12 +374,12 @@ body main #scrollable-column #left-column #illustrazione .text-wrapper .text-off
 }
 @media screen and (max-width: 600px) {
   body main #scrollable-column #left-column #illustrazione .text-wrapper .text-offset {
-    height: 26em;
+    height: 33em;
   }
 }
 @media screen and (min-width: 600px) and (max-width: 1200px) {
   body main #scrollable-column #left-column #illustrazione .text-wrapper .text-offset {
-    height: 41em;
+    height: 43em;
   }
 }
 @media screen and (min-width: 1200px) {
@@ -286,6 +410,7 @@ body main #scrollable-column #left-column #illustrazione .text-wrapper #call {
   padding: 1em 10% 2em 10%;
 }
 body footer {
+  display: flex;
   animation-direction: normal;
   animation-fill-mode: forwards;
   justify-content: center;

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

@@ -1 +1 @@
-{"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;;AACA;EAJF;IAKI;;;AAGF;EACE;;AACA;EAFF;IAGI;;;AAGF;EAIE;EACA;EACA;EACA;EACA;EACA;EACA;;AATA;EACE;;AAUF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,OA9JL;EA+JK;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;;AAMR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAKN;EACE,kBApMC;EAqMD;EACA;;AAKF;EADF;IAEI;;;AAGF;EACE;EACA;EACA;EACA;;AACE;EACE;EACA;;AACA;EAHF;IAII;IACA;;;AAEF;EAPF;IAQI;;;AAEF;EAVF;IAWI;;;AAIN;EACE;;AACA;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;AAEF;EAPF;IAQI;;;AAEF;EAVF;IAWI;;;AAIJ;EACE;;AACA;EAFF;IAGI;;;AAEF;EALF;IAMI;;;AAEF;EARF;IASI;;;AAIJ;EACE;EACA;;AAQZ;EAEE;EACA;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;EACI;EACA;EACA;;AAGJ;EACE,OA5CO;;AA+CT;EACE,OA/CW;;AAoDb;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AACA;EANF;IAOI;;;AAGF;EAYE;EACA;EACA;;AAbA;EADF;IAEI;;;AAEF;EACE;IACE;IACA;IACA;;;AAQJ;EACE;EACA,kBA3GG;EA4GH;EACA;EACA;;AACA;EANF;IAOI;IACA;;;AAGF;EACE;EACA;;AACA;EAHF;IAII;;;AAEF;EANF;IAOI;;;AAGF;EAIE;EACA;EACA;EACA;EACA;EACA;EACA;;AATA;EACE;;AAUF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAVF;IAWI;;;AAEF;EACE,OArKL;EAsKK;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;;AAMR;EACE;EACA;EACA;AAMA;AAAA;AAAA;EAGA;;AARA;EACE;EACA;EACA;;AAUR;EACE,kBA1MC;EA2MD;EACA;EACA;;AAKF;EADF;IAEI;;;AAGF;EACE;EACA;EACA;EACA;;AACE;EACE;EACA;;AAEE;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGJ;EAzIF;IA0II;IACA;;;AAEF;EA7IF;IA8II;;;AAEF;EAhJF;IAiJI;;;AAIN;EACE;;AACA;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;AAEF;EAPF;IAQI;;;AAEF;EAVF;IAWI;;;AAIJ;EACE;;AACA;EAFF;IAGI;;;AAEF;EALF;IAMI;;;AAEF;EARF;IASI;;;AAIJ;EACE;EACA;;AAQZ;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"style.css"}

themes/HOD2k18/static/css/style.scss

@@ -41,6 +41,12 @@ body {
   padding: 0;
   margin: 0;
 
+  .rainbow{
+      animation-name: rainbow;
+      animation-duration: 18s;
+      animation-iteration-count: infinite;
+  }
+
   a {
     color: $new-link;
   }
@@ -49,18 +55,6 @@ body {
     color: $visited-link;
   }
 
-  .rainbow{
-    animation: rainbow 18s ease infinite;
-/*
-    .retard-1{
-      animation-delay: -1s;
-    }
-
-    .retard-2{
-      animation-delay: 12s;
-    }
-*/ }
-
 // FURBY-COLOR
 
   .stellina{
@@ -104,13 +98,11 @@ body {
       @media screen and (min-width: $breakpoint-tablet) {
         #raggiungerci {
           position: absolute;
-          bottom: 3em;
-
-          .descrizione-talk {
-            padding: 0 !important;
-          }
+          bottom: 7em;
+          padding-top: 0.1em;
         }
       }
+
       display: flex;
       width: 100%;
       margin: auto;
@@ -119,15 +111,22 @@ body {
         width: 100%;
         background-color: $BG-color;
         z-index: 33;
+        display: flex;
+        justify-content: center;
         @media screen and (max-width: $breakpoint-tablet) {
-          margin: auto;
+          display:flex;
+          justify-content: center;
         }
 
         #calendario {
           height: 100%;
+          max-width: 40em;
           @media screen and (min-width: $breakpoint-tablet) {
             position: fixed;
           }
+          @media screen and (min-width: $breakpoint-normal-screen) {
+            width:40%;
+          }
 
           ul {
             #overflow-scroll {
@@ -150,6 +149,11 @@ body {
                 flex: 1 1 100%;
               }
 
+              .filler + div{
+                border: solid 1pt white;
+                margin:1.3em 0 -0.4em 0;
+              }
+
               .title-wrapper {
                 display: flex;
                 border-top: 1pt solid white;
@@ -158,8 +162,11 @@ body {
                 border-bottom: 1pt solid white;
                 padding: 0.1em;
                 margin-bottom: -5px;
-                z-index: 2;
+                z-index: 32;
 
+                @media screen and (max-width: $breakpoint-tablet) {
+                  width:100%;
+                }
                 .orario {
                   color: $text-color;
                   height: 1.2em;
@@ -182,18 +189,17 @@ body {
             .descrizione-talk {
               display: none;
               flex: 1 1 100%;
-              padding: 1em 0 2em 2em;
-              border-top: 1pt solid white;
-              border-right: 1pt solid white;
-              border-left: 1pt solid white;
-              border-bottom: 1pt solid white;
+              overflow-y: hidden;
+              div{
+                max-height:30em;
+                overflow-y: scroll;
+                padding:3em;
+              }
+              /*@media screen and (min-width: $breakpoint-normal-screen) {
               max-width: 75%;
+              }*/
               hyphens: auto;
             }
-
-            .titolo:target+.descrizionedescrizione-talk {
-              display: flex;
-            }
           }
         }
 
@@ -201,6 +207,7 @@ body {
           background-color: $BG-color;
           z-index: 100;
           margin-top: 1em;
+          width:100%;
         }
       }
 
@@ -217,15 +224,149 @@ body {
             pre {
               margin:0;
               position: fixed;
+              .rainbow{
+                .retard-1{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 0.1s;
+                }
+
+                .retard-2{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 0.2s;
+                }
+
+                .retard-3{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 0.3s;
+                }
+
+                .retard-4{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 0.4s;
+                }
+
+                .retard-5{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 0.5s;
+                }
+
+                .retard-6{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 0.6s;
+                }
+
+                .retard-7{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 0.7s;
+                }
+
+                .retard-8{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 0.8s;
+                }
+
+                .retard-9{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 0.9s;
+                }
+
+                .retard-10{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 1s;
+                }
+
+                .retard-11{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 1.1s;
+                }
+
+                .retard-12{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 1.2s;
+                }
+
+                .retard-13{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 1.3s;
+                }
+
+                .retard-14{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 1.4s;
+                }
+
+                .retard-15{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 1.5s;
+                }
+
+                .retard-16{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 1.6s;
+                }
+
+                .retard-17{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 1.7s;
+                }
+
+                .retard-18{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 1.8s;
+                }
+
+                .retard-19{
+                  animation-name: rainbow;
+                  animation-duration: 1s;
+                  animation-iteration-count: infinite;
+                  animation-delay: 1.9s;
+                }
+             }
               @media screen and (max-width: $breakpoint-phone) {
-                font-size:0.5em;
+                font-size:0.6em;
                 font-weight: bold;
               }
               @media screen and (min-width: $breakpoint-phone) and (max-width: $breakpoint-normal-screen) {
                 font-size: 0.8em;
               }
               @media screen and (min-width: $breakpoint-normal-screen) {
-                font-size: 1em;
+                font-size: 0.9em;
               }
           }
 
@@ -236,10 +377,10 @@ body {
               flex-wrap: wrap;
               background-color: transparent;
               @media screen and (max-width: $breakpoint-phone) {
-                height:26em;
+                height:33em;
                 }
               @media screen and (min-width: $breakpoint-phone) and (max-width: $breakpoint-normal-screen) {
-                height:41em;
+                height:43em;
               }
               @media screen and (min-width: $breakpoint-normal-screen) {
                 height:50em;
@@ -271,6 +412,7 @@ body {
 
   footer {
 //    animation: banner-stretch 3.3s 1s;
+    display: flex;
     animation-direction: normal;
     animation-fill-mode: forwards;
     justify-content: center;