249 lines
7.5 KiB
CSS
249 lines
7.5 KiB
CSS
@font-face{
|
|
font-family: ubuntu;
|
|
src: url('./fonts/Ubuntu-R.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face{
|
|
font-family: ubuntu-mono;
|
|
src: url('./fonts/UbuntuMono-R.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
:root {
|
|
--dimensone-titolo: 4vw;
|
|
--dimensione-corpo: 2vw;
|
|
--dimensione-autore: 2vw;
|
|
|
|
--indentazione: 4;
|
|
}
|
|
|
|
|
|
body {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
background: #FAFAFA;
|
|
|
|
text-align: center;
|
|
font-family: 'ubuntu';
|
|
|
|
}
|
|
|
|
titolo {
|
|
position: absolute;
|
|
top: 2vw;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: var(--dimensone-titolo);
|
|
}
|
|
|
|
corpo {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translateY(-50%) translateX(-50%);
|
|
width: 70%;
|
|
font-size: var(--dimensione-corpo);
|
|
}
|
|
|
|
autore {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
font-size: var(--dimensione-autore);
|
|
margin: 1vw;
|
|
color: #666666;
|
|
}
|
|
|
|
autore::before {
|
|
content: "- ";
|
|
}
|
|
|
|
ul, ol, codeblock, block {
|
|
display: inline-block;
|
|
width: auto;
|
|
text-align: left;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
li {
|
|
margin-left: 5vw;
|
|
}
|
|
|
|
|
|
small {
|
|
font-size: 1.25vw;
|
|
}
|
|
|
|
small p {
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
codeblock {
|
|
font-family: 'ubuntu-mono';
|
|
background: #EAEAEA;
|
|
padding: 2vw 2vw 2vw 2vw;
|
|
border-radius: 1vw;
|
|
}
|
|
|
|
code {
|
|
font-family: 'ubuntu-mono';
|
|
background: #EAEAEA;
|
|
padding: 0.5vw 0.5vw 0.5vw 0.5vw;
|
|
border-radius: 0.25vw;
|
|
}
|
|
|
|
idt {
|
|
width: calc(var(--dimensione-corpo) / 2 * var(--indentazione));
|
|
display: inline-block;
|
|
}
|
|
|
|
name {
|
|
color: #111199;
|
|
font-style: italic;
|
|
}
|
|
|
|
kw {
|
|
color: #AA5500;
|
|
font-weight: 600;
|
|
}
|
|
|
|
comment {
|
|
color: #494949;
|
|
}
|
|
|
|
imgbox {
|
|
height: calc(var(--dimensione-corpo) * 3);
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 1vw;
|
|
margin-bottom: 1vw;
|
|
}
|
|
|
|
imgbox span {
|
|
margin-top: var(--dimensione-corpo);
|
|
margin-bottom: var(--dimensione-corpo);
|
|
}
|
|
|
|
imgbox img {
|
|
height: 100%;
|
|
margin-left: 2vw;
|
|
}
|
|
|
|
|
|
@keyframes grazieAnim {
|
|
0% {content: "Grazie per l'attenzione"; opacity: 1;}
|
|
8% {content: "Grazie per l'attenzione"; opacity: 1;}
|
|
9% {content: "Grazie per l'attenzione"; opacity: 0;}
|
|
|
|
9.01% {content: "Thanks for your attention"; opacity: 0;}
|
|
10% {content: "Thanks for your attention"; opacity: 1;}
|
|
13% {content: "Thanks for your attention"; opacity: 1;}
|
|
14% {content: "Thanks for your attention"; opacity: 0;}
|
|
|
|
14.01% {content: "感谢您的关注"; opacity: 0;}
|
|
15% {content: "感谢您的关注"; opacity: 1;}
|
|
18% {content: "感谢您的关注"; opacity: 1;}
|
|
19% {content: "感谢您的关注"; opacity: 0;}
|
|
|
|
19.01% {content: "愛してるよ、リル"; opacity: 0;}
|
|
20% {content: "愛してるよ、リル"; opacity: 1;}
|
|
23% {content: "愛してるよ、リル"; opacity: 1;}
|
|
24% {content: "愛してるよ、リル"; opacity: 0;}
|
|
|
|
24.01% {content: "torre di controllo"; opacity: 0;}
|
|
25% {content: "torre di controllo"; opacity: 1;}
|
|
28% {content: "torre di controllo"; opacity: 1;}
|
|
29% {content: "torre di controllo"; opacity: 0;}
|
|
|
|
29.01% {content: "multumesc pentru atentie"; opacity: 0;}
|
|
30% {content: "multumesc pentru atentie"; opacity: 1;}
|
|
33% {content: "multumesc pentru atentie"; opacity: 1;}
|
|
34% {content: "multumesc pentru atentie"; opacity: 0;}
|
|
|
|
34.01% {content: "(｡･ω･｡)ﾉ♡"; opacity: 0;}
|
|
35% {content: "(｡･ω･｡)ﾉ♡"; opacity: 1;}
|
|
38% {content: "(｡･ω･｡)ﾉ♡"; opacity: 1;}
|
|
39% {content: "(｡･ω･｡)ﾉ♡"; opacity: 0;}
|
|
|
|
39.01% {content: "Gracias por su atención"; opacity: 0;}
|
|
40% {content: "Gracias por su atención"; opacity: 1;}
|
|
43% {content: "Gracias por su atención"; opacity: 1;}
|
|
44% {content: "Gracias por su atención"; opacity: 0;}
|
|
|
|
44.01% {content: "Feliz Navidad!"; opacity: 0;}
|
|
45% {content: "Feliz Navidad!"; opacity: 1;}
|
|
48% {content: "Feliz Navidad!"; opacity: 1;}
|
|
49% {content: "Feliz Navidad!"; opacity: 0;}
|
|
|
|
49.01% {content: "ध्यान देने के लिए आपको धन्यवाद"; opacity: 0;}
|
|
50% {content: "ध्यान देने के लिए आपको धन्यवाद"; opacity: 1;}
|
|
53% {content: "ध्यान देने के लिए आपको धन्यवाद"; opacity: 1;}
|
|
54% {content: "ध्यान देने के लिए आपको धन्यवाद"; opacity: 0;}
|
|
|
|
54.01% {content: "Faleminderit për vëmendjen tuaj"; opacity: 0;}
|
|
55% {content: "Faleminderit për vëmendjen tuaj"; opacity: 1;}
|
|
58% {content: "Faleminderit për vëmendjen tuaj"; opacity: 1;}
|
|
59% {content: "Faleminderit për vëmendjen tuaj"; opacity: 0;}
|
|
|
|
59.01% {content: "gratias tibi operam"; opacity: 0;}
|
|
60% {content: "gratias tibi operam"; opacity: 1;}
|
|
63% {content: "gratias tibi operam"; opacity: 1;}
|
|
64% {content: "gratias tibi operam"; opacity: 0;}
|
|
|
|
64.01% {content: "System.out.println(\"Hello, world!\");"; opacity: 0;}
|
|
65% {content: "System.out.println(\"Hello, world!\");"; opacity: 1;}
|
|
68% {content: "System.out.println(\"Hello, world!\");"; opacity: 1;}
|
|
69% {content: "System.out.println(\"Hello, world!\");"; opacity: 0;}
|
|
|
|
69.01% {content: "io metterei 10 a tutti"; opacity: 0;}
|
|
70% {content: "io metterei 10 a tutti"; opacity: 1;}
|
|
73% {content: "io metterei 10 a tutti"; opacity: 1;}
|
|
74% {content: "io metterei 10 a tutti"; opacity: 0;}
|
|
|
|
74.01% {content: "concordo"; opacity: 0;}
|
|
75% {content: "concordo"; opacity: 1;}
|
|
78% {content: "concordo"; opacity: 1;}
|
|
79% {content: "concordo"; opacity: 0;}
|
|
|
|
79.01% {content: "-[------->+<]>--.+++[->+++++<]>.+++[->+++<]>++.+[----->+<]>.--[->+++<]>+.----.--[--->+<]>-.[-->+++++++<]>.-----------.+++++++++++++.[-->+++++<]>+++.++[--->++<]>.[--->+<]>+++.-[--->+<]>-.--[--->+<]>-..+++[->+++<]>.+++++++++.[--->+<]>.--[->+++<]>+.++++++.-.---------."; opacity: 0;}
|
|
80% {content: "-[------->+<]>--.+++[->+++++<]>.+++[->+++<]>++.+[----->+<]>.--[->+++<]>+.----.--[--->+<]>-.[-->+++++++<]>.-----------.+++++++++++++.[-->+++++<]>+++.++[--->++<]>.[--->+<]>+++.-[--->+<]>-.--[--->+<]>-..+++[->+++<]>.+++++++++.[--->+<]>.--[->+++<]>+.++++++.-.---------."; opacity: 1;}
|
|
83% {content: "-[------->+<]>--.+++[->+++++<]>.+++[->+++<]>++.+[----->+<]>.--[->+++<]>+.----.--[--->+<]>-.[-->+++++++<]>.-----------.+++++++++++++.[-->+++++<]>+++.++[--->++<]>.[--->+<]>+++.-[--->+<]>-.--[--->+<]>-..+++[->+++<]>.+++++++++.[--->+<]>.--[->+++<]>+.++++++.-.---------."; opacity: 1;}
|
|
84% {content: "-[------->+<]>--.+++[->+++++<]>.+++[->+++<]>++.+[----->+<]>.--[->+++<]>+.----.--[--->+<]>-.[-->+++++++<]>.-----------.+++++++++++++.[-->+++++<]>+++.++[--->++<]>.[--->+<]>+++.-[--->+<]>-.--[--->+<]>-..+++[->+++<]>.+++++++++.[--->+<]>.--[->+++<]>+.++++++.-.---------."; opacity: 0;}
|
|
|
|
84.01% {content: "sudo rm -rf /"; opacity: 0;}
|
|
85% {content: "sudo rm -rf /"; opacity: 1;}
|
|
88% {content: "sudo rm -rf /"; opacity: 1;}
|
|
89% {content: "sudo rm -rf /"; opacity: 0;}
|
|
|
|
89.01% {content: "418 I'm a teapot"; opacity: 0;}
|
|
90% {content: "418 I'm a teapot"; opacity: 1;}
|
|
93% {content: "418 I'm a teapot"; opacity: 1;}
|
|
94% {content: "418 I'm a teapot"; opacity: 0;}
|
|
|
|
94.01% {content: "Hacked by SiegedSec"; opacity: 0;}
|
|
95% {content: "Hacked by SiegedSec"; opacity: 1;}
|
|
98% {content: "Hacked by SiegedSec"; opacity: 1;}
|
|
99% {content: "Hacked by SiegedSec"; opacity: 0;}
|
|
|
|
99.01% {content: "Grazie per l'attenzione"; opacity: 0;}
|
|
100% {content: "Grazie per l'attenzione"; opacity: 1;}
|
|
}
|
|
|
|
grazie::before {
|
|
content: "ciao";
|
|
animation-name: grazieAnim;
|
|
animation-duration: 200s;
|
|
animation-iteration-count: infinite;
|
|
animation-fill-mode: forwards;
|
|
}
|