Add colors

This commit is contained in:
fillotassi 2018-10-10 23:10:39 +02:00
parent d7971a4b2a
commit 973ed18199
4 changed files with 77 additions and 117 deletions

View file

@ -1,56 +1,56 @@
<div id="illustrazione">
<div class="ascii-wrapper" style="top:1em;">
<pre style="text-align:center">
<span class="rainbow"> <span class="retard-2"> _ </span> _ _ _ _ _ _ </span>|
<span class="rainbow"> <span class="retard-1">|\</span> <span class="retard-2">|_|</span> |_| _ |_) | | | | | | | | _ |/ |_| |_| </span>|
<span class="rainbow"> <span class="retard-1">|_)</span> <span class="retard-2">| |</span> | | |_) |_| |_| |_| |_| |\ | | | | </span>|
|
|
|
<span class="stellina">+</span> <span class="stellina">+</span> |
<span class="stellina">+</span> <span class="stellina">+</span> |
<span class="stellina">+</span> <span class="stellina">+</span> |
<span class="stellina">+</span> <span class="vello">___ \ | / ___</span> <span class="stellina">+</span> |
<span class="vello">\</span> <span class="onecchie">></span> <span class="vello">\ /</span> <span class="onecchie"><</span> <span class="vello">/</span> |
<span class="stellina">+</span> <span class="setola">-</span> <span class="occhietti"></span> <span class="occhietti"></span> <span class="setola">-</span> <span class="stellina">+</span> |
<span class="stellina">+</span> <span class="vello">(</span> <span class="setola">-</span> <span class="bocca">c</span> <span class="setola">-</span> <span class="vello">)</span> <span class="stellina">+</span> |
<span class="stellina">+</span> <span class="vello">/</span><span class="setola">-</span> <span class="setola">-</span> <span class="setola">-</span> <span class="setola">-</span><span class="vello">\</span> <span class="stellina">+</span> |
<span class="vello">(</span><span class="setola">-</span> <span class="vello">__</span> <span class="setola">-</span> <span class="setola">-</span> <span class="pedibus">__</span> <span class="setola">-</span><span class="vello">)</span> |
<span class="stellina">+</span> <span class="vello">\</span><span class="pedibus">(__)</span><span class="vello">_</span><span class="setola">-</span><span class="vello">_<span class="pedibus">(__)</span>/</span> <span class="stellina">+</span> |
|
<span class="stellina">+</span> <span class="stellina">+</span> <span class="stellina">+</span> |
<span class="stellina">+</span> <span class="stellina">+</span> |
|
|
<span class="rainbow"> _ _ _ _ _ _ _ _ _ </span>|
<span class="rainbow"> |\ | | | | _ |\ |_| |_| | | | | _ |\| \_/ |_ | | | | | ) </span>|
<span class="rainbow"> |_) |_| |_| |_) | | | | |_| |_| | | / |_ |__ |_| |_| ( </span>|
<span class="rainbow"> ' </span>|
|
|_ _. _ | _ ._ _| o / | _ \ |
| | (_| (_ |< ─ (_) | ─ (_| | \ \/ | (/_ / |
/ |
_ _ , _ |
/ \ / \ /| / \ |
/ | | / | \_/ |
/ | | | / \ |
/__ \_/ | \_/ |
|
_ _ |
(_) __ /| | | |\ | _ _ ._ _ |_ ._ _ |
_) | |_| | \| (_) \/ (/_ | | | |_) | (/_ |
\|/
v
<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 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"><</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><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 style="display:none;">|</span>
|_ _. _ | _ ._ _| o / | _ \ <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;">\|/</span>
<span style="display:none;">v</span>
</pre>
</div>
<div class="text-wrapper">
<div class="text-offset"></div>
<div style="position:relative">
<!---
<pre class="fake-freccina" style="position:absolute;">
\|/
v
</pre>
<p id="call" style="background-color:black">
--> <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>
@ -100,6 +100,5 @@
Ci vediamo a Bologna.
</p>
</div>
</div>
</div>

View file

@ -132,8 +132,6 @@ 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 {
@ -146,12 +144,10 @@ body main #scrollable-column #right-column #calendario {
@media screen and (min-width: 900px) {
body main #scrollable-column #right-column #calendario {
position: fixed;
right: 10em;
}
}
body main #scrollable-column #right-column #calendario ul {
overflow-y: scroll;
max-width: 45em;
list-style-type: none;
background: transparent;
padding: 1em;
@ -213,9 +209,6 @@ body main #scrollable-column #right-column #raggiungerci {
z-index: 100;
margin-top: 1em;
}
body main #scrollable-column #left-column {
max-width: 45em;
}
@media screen and (max-width: 900px) {
body main #scrollable-column #left-column {
margin: auto;
@ -225,24 +218,25 @@ 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 .ascii-wrapper pre {
body main #scrollable-column #left-column #illustrazione pre {
margin: 0;
position: fixed;
}
@media screen and (max-width: 900px) {
body main #scrollable-column #left-column #illustrazione .ascii-wrapper pre {
@media screen and (max-width: 600px) {
body main #scrollable-column #left-column #illustrazione 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 {
@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 .ascii-wrapper pre {
body main #scrollable-column #left-column #illustrazione pre {
font-size: 1em;
}
}
@ -254,14 +248,14 @@ body main #scrollable-column #left-column #illustrazione .text-wrapper .text-off
flex-wrap: wrap;
background-color: transparent;
}
@media screen and (max-width: 900px) {
@media screen and (max-width: 600px) {
body main #scrollable-column #left-column #illustrazione .text-wrapper .text-offset {
height: 26em;
}
}
@media screen and (min-width: 900px) and (max-width: 1200px) {
@media screen and (min-width: 600px) and (max-width: 1200px) {
body main #scrollable-column #left-column #illustrazione .text-wrapper .text-offset {
height: 37.3em;
height: 41em;
}
}
@media screen and (min-width: 1200px) {
@ -274,39 +268,22 @@ body main #scrollable-column #left-column #illustrazione .text-wrapper .fake-fre
}
@media screen and (max-width: 900px) {
body main #scrollable-column #left-column #illustrazione .text-wrapper .fake-freccina {
left: 24.25em;
display: none;
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: 36.8em;
left: 46.3em;
}
}
@media screen and (min-width: 1200px) {
body main #scrollable-column #left-column #illustrazione .text-wrapper .fake-freccina {
left: 43.15em;
left: 52.35em;
}
}
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 main #scrollable-column #left-column #illustrazione .text-wrapper #call {
margin: 0;
padding: 1em 10% 2em 10%;
}
body footer {
animation-direction: normal;
@ -317,7 +294,8 @@ body footer {
text-align: center;
position: absolute;
bottom: 0;
visibility: hidden;
width: 100%;
background-color: black;
}
/*# sourceMappingURL=style.css.map */

View file

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

View file

@ -119,8 +119,6 @@ body {
width: 100%;
background-color: $BG-color;
z-index: 33;
display: flex;
justify-content: center;
@media screen and (max-width: $breakpoint-tablet) {
margin: auto;
}
@ -129,7 +127,6 @@ body {
height: 100%;
@media screen and (min-width: $breakpoint-tablet) {
position: fixed;
right: 10em;
}
ul {
@ -137,7 +134,6 @@ body {
overflow-y: hidden;
}
overflow-y: scroll;
max-width: 45em;
list-style-type: none;
background: transparent;
padding: 1em;
@ -209,7 +205,6 @@ body {
}
#left-column {
max-width: 45em;
@media screen and (max-width: $breakpoint-tablet) {
margin: auto;
}
@ -218,22 +213,20 @@ body {
margin-top: 1em;
display: flex;
flex-wrap: wrap;
.ascii-wrapper {
justify-content: center;
pre {
margin:0;
position: fixed;
@media screen and (max-width: $breakpoint-tablet) {
@media screen and (max-width: $breakpoint-phone) {
font-size:0.5em;
font-weight: bold;
}
@media screen and (min-width: $breakpoint-tablet) and (max-width: $breakpoint-normal-screen) {
@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;
}
}
}
.text-wrapper {
@ -242,11 +235,11 @@ body {
display: flex;
flex-wrap: wrap;
background-color: transparent;
@media screen and (max-width: $breakpoint-tablet) {
@media screen and (max-width: $breakpoint-phone) {
height:26em;
}
@media screen and (min-width: $breakpoint-tablet) and (max-width: $breakpoint-normal-screen) {
height:37.3em;
@media screen and (min-width: $breakpoint-phone) and (max-width: $breakpoint-normal-screen) {
height:41em;
}
@media screen and (min-width: $breakpoint-normal-screen) {
height:50em;
@ -256,30 +249,19 @@ body {
.fake-freccina{
margin-top: 0;
@media screen and (max-width: $breakpoint-tablet) {
left:24.25em;
display:none;
left:46.25em;
}
@media screen and (min-width: $breakpoint-tablet) and (max-width: $breakpoint-normal-screen) {
left:36.8em;
left:46.3em;
}
@media screen and (min-width: $breakpoint-normal-screen) {
left:43.15em;
left:52.35em;
}
}
}
#call {
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%;
#call {
margin:0;
padding:1em 10% 2em 10%;
}
}
}
@ -297,6 +279,7 @@ body {
text-align: center;
position: absolute;
bottom: 0;
visibility: hidden;
width:100%;
background-color: black;
}
}