458 lines
6.2 KiB
CSS
458 lines
6.2 KiB
CSS
@media screen and (max-width: 700px) {
|
|
|
|
.accordion-strip{
|
|
right: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
.accordion-strip > a > h3{
|
|
margin-top:0em;
|
|
}
|
|
|
|
#about{
|
|
bottom:0 !important;
|
|
}
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 999px) {
|
|
|
|
body{
|
|
position: relative;
|
|
}
|
|
|
|
main{
|
|
position: relative;
|
|
|
|
}
|
|
|
|
aside{
|
|
}
|
|
|
|
nav {
|
|
flex-wrap: wrap;
|
|
position: relative;
|
|
padding:2em;
|
|
}
|
|
|
|
#logo{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
#logo > div{
|
|
margin: auto;
|
|
}
|
|
|
|
#radio-player{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.accordion-strip{
|
|
bottom: 0;
|
|
position: absolute;
|
|
margin-top: 5em;
|
|
}
|
|
|
|
.accordion-title{
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.text-wrapper{
|
|
height: 100vh;
|
|
padding: 0 2em;
|
|
}
|
|
}
|
|
|
|
|
|
@media screen and (min-width: 1000px) {
|
|
|
|
nav {
|
|
-moz-box-shadow: 0 0 10px #000000;
|
|
-webkit-box-shadow: 0 0 10px #000000;
|
|
box-shadow: 0 0 10px #000000;
|
|
flex: 1 1 100%;
|
|
height:7em;
|
|
display: flex;position: fixed;
|
|
width: 100%;
|
|
background: white;
|
|
z-index: 20;
|
|
}
|
|
|
|
main{
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 87em;
|
|
display: flex;
|
|
justify-content: left;
|
|
padding-top:7em;
|
|
}
|
|
|
|
#radio-player{
|
|
position: relative;
|
|
flex:0 1 50%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
padding: 5em 5em 5em 0;
|
|
}
|
|
|
|
|
|
|
|
#now-playing{
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
align-content: flex-start;
|
|
padding: 0 4em 0 4em;
|
|
}
|
|
|
|
#piece-text
|
|
{
|
|
border: solid 1px black;
|
|
width:100%;
|
|
}
|
|
|
|
#social{
|
|
flex: 0 1 18%;
|
|
padding-top:5em;
|
|
}
|
|
|
|
#connected-people{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
border: solid 1px black;
|
|
height: 13em;
|
|
margin-bottom: 3em;
|
|
}
|
|
|
|
#piece-text > h3{
|
|
padding-left: 1em;
|
|
padding-right: 1em;
|
|
}
|
|
|
|
#piece-text > p{
|
|
width: 70%;
|
|
margin: auto;
|
|
margin-bottom: 3em;
|
|
}
|
|
|
|
#about{
|
|
height: 100vh;
|
|
right: -60%;
|
|
max-width: 60%;
|
|
position: fixed;
|
|
z-index: 33 !important;
|
|
padding: 0 0 0 1%;
|
|
}
|
|
|
|
#about:hover{
|
|
animation-name: tendina;
|
|
animation-duration: 1s;
|
|
animation-fill-mode: forwards;
|
|
animation-timing-function: cubic-bezier(.17,.84,.44,1);
|
|
column-fill:auto;
|
|
}
|
|
|
|
.text-wrapper{
|
|
width: 80%;
|
|
}
|
|
|
|
.text
|
|
{
|
|
max-width: auto;
|
|
margin: 2em auto;
|
|
border-right: solid black 0.3em;
|
|
padding-right: 2.5em;
|
|
column-count: 2;
|
|
column-fill: auto;
|
|
width:100%;
|
|
max-height: 30em;
|
|
}
|
|
|
|
.accordion-title{
|
|
margin: 1em 0.5em 0 0.5em;
|
|
}
|
|
|
|
.accordion-strip{
|
|
}
|
|
|
|
.accordion-strip > a > h3{
|
|
margin-top:1em;
|
|
}
|
|
/*
|
|
#about:hover > .cookies{
|
|
right: 0em;
|
|
width: 40%;
|
|
font-size: 0.8em;
|
|
}
|
|
*/
|
|
|
|
#logo{
|
|
margin: auto;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
#logo > div{
|
|
margin-left: 1em;
|
|
}
|
|
|
|
#news
|
|
{
|
|
display: flex;
|
|
margin: 0 17em 0 4em;
|
|
}
|
|
|
|
.cookies{
|
|
bottom: 0;
|
|
}
|
|
|
|
#pd-ring{
|
|
position: absolute;
|
|
bottom: 2em;
|
|
width: 100%;
|
|
}
|
|
|
|
#pd-ring > table{
|
|
margin:auto;
|
|
}
|
|
|
|
@keyframes tendina {
|
|
0% {right: -60%;}
|
|
100% {right: 0;}
|
|
}
|
|
|
|
@keyframes schiacciamento {
|
|
0% {height: 0em;}
|
|
50% {height: 4em;}
|
|
100% {height: 0em;}
|
|
}
|
|
|
|
@keyframes scomparsa {
|
|
0% {color: transparent;}
|
|
20% {color: white;}
|
|
50% {color: white;}
|
|
80% {color: transparent;}
|
|
}
|
|
|
|
h1 {
|
|
background-color:#ffffff;
|
|
font:36px mono;
|
|
font-weight:bold;
|
|
color:#000000;
|
|
text-decoration:none;
|
|
margin-left:10%;
|
|
margin-right:10%;
|
|
}
|
|
|
|
#now-playing > h2, #now-playing > h3{
|
|
background: none;
|
|
border:solid 1pt black;
|
|
flex:1 1 100%;
|
|
padding-left:1em;
|
|
padding-right:1em;
|
|
margin-bottom: 0;
|
|
margin-top: 1em;
|
|
}
|
|
|
|
#piece-text{
|
|
margin-bottom: 0;
|
|
margin-top: 1em;
|
|
}
|
|
|
|
a.logo:link {
|
|
color:#000000;
|
|
text-decoration:none;
|
|
}
|
|
|
|
a.logo:visited {
|
|
color:#000000;
|
|
text-decoration:none;
|
|
}
|
|
|
|
a.logo:hover {
|
|
color:#f1b2b7;
|
|
text-decoration:underline;
|
|
}
|
|
|
|
a.logo:active {
|
|
color:#ffffff;
|
|
background-color:#ffffff;
|
|
text-decoration:none;
|
|
}
|
|
|
|
a.corpo:link {
|
|
color:#000000;
|
|
text-decoration:underline;
|
|
}
|
|
|
|
a.corpo:visited {
|
|
color:#000000;
|
|
text-decoration:underline;
|
|
}
|
|
|
|
a.corpo:hover {
|
|
color:#f1b2b7;
|
|
text-decoration:none;
|
|
}
|
|
|
|
a.corpo:active {
|
|
color:#ffffff;
|
|
background-color:#ffffff;
|
|
text-decoration:none;
|
|
}
|
|
|
|
a.barra:link {
|
|
color:#000000;
|
|
text-decoration:underline;
|
|
}
|
|
|
|
a.barra:visited {
|
|
color:#000000;
|
|
text-decoration:underline;
|
|
}
|
|
|
|
a.barra:hover {
|
|
color:#f1b2b7;
|
|
background-color:#ffffff;
|
|
text-decoration:none;
|
|
}
|
|
|
|
a.barra:active {
|
|
color:#ffffff;
|
|
background-color:#ffffff;
|
|
text-decoration:none;
|
|
}
|
|
|
|
audio {
|
|
background-color:#000000;
|
|
}
|
|
|
|
.pd_ring {
|
|
width:260px;
|
|
height:75px;
|
|
background-color:"#FFFFFF";
|
|
}
|
|
|
|
.pd_ringnext {
|
|
width:55px;
|
|
height:25px;
|
|
vertical-align:middle;
|
|
border:none;
|
|
}
|
|
|
|
.pd_ringlist {
|
|
width: 62px;
|
|
height: 25px;
|
|
vertical-align:middle;
|
|
border:none;
|
|
}
|
|
|
|
.pd_ringrandom {
|
|
width:63px;
|
|
height:25px;
|
|
vertical-align:middle;
|
|
border:none;
|
|
}
|
|
|
|
.pd_ringprevious {
|
|
width:80px;
|
|
height:25px;
|
|
vertical-align:middle;
|
|
border:none;
|
|
}
|
|
|
|
.pd_ringinfo {
|
|
width:260px;
|
|
height:50px;
|
|
vertical-align:middle;
|
|
border:none;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/*=======================COMUNE=====================*/
|
|
|
|
html{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin:0;
|
|
font-family: monospace;
|
|
width: 100%;
|
|
height:100%;
|
|
height: 100vh;
|
|
}
|
|
|
|
#about{
|
|
background: #333333;
|
|
z-index: 10;
|
|
}
|
|
|
|
#about-randio:target > .text, #listen:target > .text, #functioning:target > .text, #further:target > .text, #random:target > .text, #contribution:target > .text, #policy:target > .text, #patches:target > .text, #contacts:target > .text, #other-radios:target > .text
|
|
{
|
|
display:block;
|
|
}
|
|
|
|
|
|
.text-wrapper > article{
|
|
margin: 0;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.accordion-strip > a > h3{
|
|
margin: 0;
|
|
background: white;
|
|
border:0.1em solid black;
|
|
color:black;
|
|
padding-left:1em;
|
|
padding-right:1em;
|
|
}
|
|
|
|
.accordion-strip{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.accordion-title{
|
|
text-decoration: none;
|
|
display: block;
|
|
}
|
|
|
|
.text
|
|
{
|
|
display:none;
|
|
color:white;
|
|
line-height: 1.5em;
|
|
max-height: 30em;
|
|
overflow: scroll;
|
|
}
|
|
|
|
.cookies{
|
|
background:black;
|
|
width:100%;
|
|
height: 0%;
|
|
position: fixed;
|
|
text-align: center;
|
|
left: 0;
|
|
display: flex;
|
|
animation-name: schiacciamento;
|
|
animation-duration: 4s;
|
|
animation-delay: 0.3s;
|
|
animation-fill-mode: forwards;
|
|
animation-iteration-count: 1;
|
|
}
|
|
|
|
.cookies > p{
|
|
color: white;
|
|
animation-name: scomparsa;
|
|
animation-duration: 4s;
|
|
animation-delay: 0.3s;
|
|
}
|