From d7971a4b2aef83b46f3bc9c357fa2f121d362773 Mon Sep 17 00:00:00 2001 From: fillotassi Date: Mon, 8 Oct 2018 23:14:09 +0200 Subject: [PATCH] Improve 
 responsive view and adds colours

---
 .directory                                    |   3 +
 themes/.directory                             |   4 +
 themes/HOD2k18/layouts/index.html             |   2 +-
 .../layouts/partials/furby-hack-color.html    | 105 ++++++++++++
 themes/HOD2k18/static/css/style.css           | 161 +++++++++++++++++-
 themes/HOD2k18/static/css/style.css.map       |   2 +-
 themes/HOD2k18/static/css/style.scss          | 118 ++++++++++++-
 7 files changed, 378 insertions(+), 17 deletions(-)
 create mode 100644 .directory
 create mode 100644 themes/.directory
 create mode 100644 themes/HOD2k18/layouts/partials/furby-hack-color.html

diff --git a/.directory b/.directory
new file mode 100644
index 0000000..fcd9212
--- /dev/null
+++ b/.directory
@@ -0,0 +1,3 @@
+[Dolphin]
+Timestamp=2018,10,6,19,32,23
+Version=4
diff --git a/themes/.directory b/themes/.directory
new file mode 100644
index 0000000..deb44e8
--- /dev/null
+++ b/themes/.directory
@@ -0,0 +1,4 @@
+[Dolphin]
+PreviewsShown=true
+Timestamp=2018,10,6,19,32,21
+Version=4
diff --git a/themes/HOD2k18/layouts/index.html b/themes/HOD2k18/layouts/index.html
index e1a6a0f..cae47ad 100644
--- a/themes/HOD2k18/layouts/index.html
+++ b/themes/HOD2k18/layouts/index.html
@@ -2,7 +2,7 @@
 	

 		

 			

-				{{ partial "furby-hack.html" . }}
+				{{ partial "furby-hack-color.html" . }}
 			

 			

 					{{ partial "talk-calendar.html" . }}
diff --git a/themes/HOD2k18/layouts/partials/furby-hack-color.html b/themes/HOD2k18/layouts/partials/furby-hack-color.html
new file mode 100644
index 0000000..a54a933
--- /dev/null
+++ b/themes/HOD2k18/layouts/partials/furby-hack-color.html
@@ -0,0 +1,105 @@
+

+	

+			
+                 _         _   _   _     _   _        _                   |
+            |\  |_| |_| _ |_) | | | |   | | | | _ |/ |_| |_|              |
+            |_) | | | |   |_) |_| |_|   |_| |_|   |\ | | | |              |
+                                                                          |
+                                                                          |
+                                                                          |
+                                +      +                                  |
+                          +                  +                            |
+                               +        +                                 |
+                      +     ___   \ | /   ___    +                        |
+                            \ > \       / < /                             |
+                        +     -   ○   ○   -    +                          |
+                    +         ( -   c  -  )        +                      |
+                          +   /-  -   -  -\  +                            |
+                             (- __ - - __ -)                              |
+                      +       \(__)_-_(__)/      +                        |
+                                                                          |
+                          +         +        +                            |
+                                +       +                                 |
+                                                                          |
+                                                                          |
+       _   _         _         _   _             _        _   _   _       |
+  |\  | | | | _ |\  |_| |_|   | | | | _ |\| \_/ |_   |   | | | |   )      |
+  |_) |_| |_|   |_) | | | |   |_| |_|   | |  /  |_   |__ |_| |_|  (       |
+                                                                  '       |
+                                                                          |
+          |_   _.  _ |       _  ._       _| o /    |  _  \                |
+          | | (_| (_ |<  ─  (_) |   ─   (_| | \ \/ | (/_ /                |
+                                                /                         |
+                            _    _     ,   _                              |
+                           / \  / \   /|  / \                             |
+                             / |   | / |  \_/                             |
+                            /  |   |   |  / \                             |
+                           /__  \_/    |  \_/                             |
+                                                                          |
+            _         _                                                   |
+           (_) __ /| | |   |\ |  _      _  ._ _  |_  ._  _                |
+            _)     | |_|   | \| (_) \/ (/_ | | | |_) |  (/_               |
+                                                                          \|/
+                                                                          v
+		  

+	

+  

+    

+      

+      
+\|/
+ v
+      

+      

+        Apro gli occhi, goccia di sudore dritta nelle palpebre, brucia. Bestemmio.

+        Fa caldo, anche oggi non si dorme. Bestemmio.

+        Son le 6, fra due ore devo pure lavorare. Bestemmio.

+        Un ronzio tra l'esterno e il cervello, è una zanzara. Bestemmio.


+
+        Ne ho fatte quattro, prima o poi mi scrivo un bestemmiatore automatico.

+
+        Accendo il thinkpad, tanto lo so che non dormo.
+        Boota: leggo che dice il kernel, pure le cpu soffrono il caldo.


+
+        Login.

+        `cdm`

+        Invio.

+        Alt+P.

+        thunderbird.

+        Nuova mail: [Hackmeeting] Hack or Di(y|e) chapter 4 !!!! 9 e 10 novembre
+        @ XM24, Bologna: oh papere venite!
+      


+        Ah, di nuovo i bolognesi, ma non le dovevano sgomberare?

+        Vabbè, so vive, vediamo la mail:


+        ```

+        OH OH OH OH, è di nuovo quel periodo dell'anno la!

+        [cut]

+        tra fine ottobre e inizio novembre

+        [cut]

+        ```


+
+        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.


+
+        Vabbò, vediamo se c'ho roba da portare.


+
+        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
«dah‐boo oo‐kah doo‐dah oo‐nye loo?»
 che, dalle lezioni di furbish dell'IPSIA, sarebbe 
«no! zì stai scherzando?!».

+        

+        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.
 Lo butto.
+
+        Potrei parlare della configurazione nuova del server di posta, dai ci sta.


+        Scrivo la mail.

+        Il destinatario:
 hackordiye@totallynot.science

+        Premo invia: Il server non risponde.


+        Guardo sotto la scrivania, c'è il server, ronza come uno sciame di zanzare e aggiunge almeno tre gradi alla stanza.


+
+        Col piede sinistro lo calcio, con l'indice destro premo invia: Mail inviata.


+
+        Ci vediamo a Bologna.
+      

+  

+  

+
+

diff --git a/themes/HOD2k18/static/css/style.css b/themes/HOD2k18/static/css/style.css
index cd479a7..0cc3ca5 100644
--- a/themes/HOD2k18/static/css/style.css
+++ b/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 */
diff --git a/themes/HOD2k18/static/css/style.css.map b/themes/HOD2k18/static/css/style.css.map
index 05cb0e3..9e48714 100644
--- a/themes/HOD2k18/static/css/style.css.map
+++ b/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"}
\ No newline at end of file
+{"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"}
\ No newline at end of file
diff --git a/themes/HOD2k18/static/css/style.scss b/themes/HOD2k18/static/css/style.scss
index 71ba407..02d91f3 100644
--- a/themes/HOD2k18/static/css/style.scss
+++ b/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;
   }
 }