You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
592 lines
10 KiB
CSS
592 lines
10 KiB
CSS
|
|
@font-face {
|
|
|
|
font-family: 'mono';
|
|
src: url('Radio_8/fonts/SyneMono-Regular.otf') format('opentype');
|
|
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'garamondt';
|
|
src: url('Radio_8/fonts/Garamondt-Italic.woff') format('woff');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'garamondt-regular';
|
|
src: url('Radio_8/fonts/Garamondt-Regular.woff') format('woff');
|
|
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'graffiti';
|
|
src: url('Radio_8/fonts/Crédible-Regular.woff') format('woff');
|
|
|
|
}
|
|
|
|
@media only screen and (max-width: 10000px) {
|
|
|
|
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
width:100vw;
|
|
font-size: 1em;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
background-image: url(./img/backlow.jpg);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
|
|
.head {
|
|
padding-bottom: 0;
|
|
padding-top: 0;
|
|
padding-right: 2vw;
|
|
padding-left: 3.3vw;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
h1{
|
|
color: lightblue;
|
|
font-family: garamondt;
|
|
font-size: 9vw;
|
|
margin-top: 1vh;
|
|
margin-bottom: 0;
|
|
text-align: left;
|
|
flex-basis: auto;
|
|
text-shadow: 1px 1px 15px DeepSkyBlue;
|
|
/* -webkit-text-stroke: 0.1px white; */
|
|
}
|
|
|
|
|
|
.weather {
|
|
|
|
flex-basis: auto;
|
|
padding: 1.2vw;
|
|
|
|
}
|
|
|
|
/* <!-------- STREAM -----------------------------------------------------------------------------> */
|
|
|
|
|
|
|
|
.title {
|
|
font-family: mono;
|
|
color: lightblue;
|
|
font-size: 2.7em;
|
|
line-height: 1em;
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
.title2 {
|
|
font-family: graffiti;
|
|
color: yellow;
|
|
font-size: 2.5em;
|
|
text-align: center;
|
|
position: absolute;
|
|
z-index: 1000;
|
|
animation-name: title2;
|
|
animation-duration: 80s;
|
|
animation-iteration-count: infinite;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
@keyframes title2 {
|
|
0% {left:300px; top:550px;}
|
|
30% {left:450px; top:400px;}
|
|
60% {left:350px; top:420px;}
|
|
100% {left:300px; top:550px;}
|
|
}
|
|
|
|
|
|
p.intro {
|
|
text-align: left;
|
|
width: 100%;
|
|
font-size: 1.2em;
|
|
color: lightblue;
|
|
font-family: mono;
|
|
|
|
|
|
}
|
|
|
|
.setlistbox{
|
|
padding-top: 0;
|
|
padding: 1.2vw;
|
|
}
|
|
|
|
p.setlist {
|
|
column-count: 3;
|
|
text-align: left;
|
|
width: 100%;
|
|
font-size: 1em;
|
|
color: lightblue;
|
|
font-family: mono;
|
|
|
|
}
|
|
|
|
.stream {
|
|
padding-top: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
/* width: 100vw; */
|
|
padding: 1.2vw;
|
|
|
|
}
|
|
|
|
.text{
|
|
flex-basis: auto;
|
|
padding: 1.2vw;
|
|
width: 100%;
|
|
}
|
|
|
|
.chat {
|
|
flex-basis: auto;
|
|
padding: 1.2vw;
|
|
}
|
|
|
|
.video {
|
|
width: 45vw;
|
|
height: 25vw;
|
|
box-shadow: 1px 1px 20px lightblue;
|
|
}
|
|
|
|
|
|
embed {
|
|
height: 100%;
|
|
box-shadow: 1px 1px 20px lightblue;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
#vid {
|
|
flex-basis: auto;
|
|
float:left;
|
|
padding: 1.2vw;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* <!-------- ARCHIVE -----------------------------------------------------------------------------> */
|
|
|
|
|
|
.issues {
|
|
display: flex;
|
|
justify-content:space-around;
|
|
margin: 1.2vw;
|
|
padding-bottom: 4vw;
|
|
padding-right: 2.3vw;
|
|
|
|
}
|
|
|
|
|
|
/* .block {
|
|
|
|
flex-basis: auto;
|
|
width:10vw;
|
|
padding: 1.2vw;
|
|
background:none;
|
|
|
|
} */
|
|
|
|
|
|
h2{
|
|
font-family: garamondt;
|
|
font-size: 2.5em;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
h3{
|
|
font-family: garamondt;
|
|
font-size: 2.1em;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.time{
|
|
font-family: mono;
|
|
font-size: 3em;
|
|
margin-top: 1vw;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
b{
|
|
font-family: garamondt;
|
|
font-size: 2em;
|
|
margin-top: 0;
|
|
font-style: normal;
|
|
text-shadow: 1px 1px 15px DeepSkyBlue;
|
|
|
|
}
|
|
|
|
.level{
|
|
font-family: garamondt;
|
|
padding-top: 1em;
|
|
font-size: 2em;
|
|
font-style: normal;
|
|
|
|
}
|
|
|
|
i{
|
|
font-family: garamondt;
|
|
font-size: 1.3em;
|
|
margin-top: 0;
|
|
font-style: normal;
|
|
}
|
|
|
|
|
|
.star {
|
|
margin: 0;
|
|
color: yellow;
|
|
font-size: 2em;
|
|
background: linear-gradient(90deg, rgba(186,148,62,1) 0%, rgba(236,172,32,1) 20%, rgba(186,148,62,1) 39%, rgba(249,244,180,1) 50%, rgba(186,148,62,1) 60%, rgba(236,172,32,1) 80%, rgba(186,148,62,1) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: shine 3s infinite;
|
|
background-size: 200%;
|
|
background-position: left;
|
|
}
|
|
|
|
@keyframes shine {
|
|
to{background-position: right}
|
|
|
|
}
|
|
|
|
button{
|
|
font-family: garamondt;
|
|
font-size: 7em;
|
|
color:lightblue;
|
|
border-radius: 50%;
|
|
border: none;
|
|
background:none;
|
|
box-shadow: 1px 1px 20px lightblue;
|
|
|
|
}
|
|
|
|
buttonback{
|
|
font-family: garamondt;
|
|
font-size: 3em;
|
|
color:lightblue;
|
|
border-radius: 20%;
|
|
border: none;
|
|
background:none;
|
|
box-shadow: 1px 1px 20px lightblue;
|
|
|
|
}
|
|
|
|
button:hover {
|
|
cursor: pointer;
|
|
background-color:lightblue;
|
|
color: #6874bb;
|
|
text-shadow: 1px 1px 10px #6874bb;
|
|
}
|
|
|
|
|
|
|
|
/* <!-------- BANNER -----------------------------------------------------------------------------> */
|
|
* { box-sizing: border-box; }
|
|
|
|
body,
|
|
html { overflow-x: hidden; }
|
|
|
|
.bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
|
|
width: 100%;
|
|
padding: 1.3vh;
|
|
|
|
background-color: #e74c3c;
|
|
color: white;
|
|
|
|
font-family: mono;
|
|
font-size: 1.7em;
|
|
z-index: 1001;
|
|
}
|
|
|
|
|
|
.bar_content {
|
|
display: inline-block; /* Important to give the content a width */
|
|
|
|
width: 100%;
|
|
transform: translateX(100%); /* Animation start out of the screen */
|
|
|
|
/* Add the animation */
|
|
animation: move 35s linear infinite /* infinite make reapeat the animation indefinitely */;
|
|
}
|
|
|
|
/* Create the animation */
|
|
@keyframes move {
|
|
to { transform: translateX(-350%); }
|
|
}
|
|
|
|
|
|
/* <!-------- CARDS -----------------------------------------------------------------------------> */
|
|
|
|
.flip-card {
|
|
flex-basis: auto;
|
|
padding: 1.2vw;
|
|
background:none;
|
|
background-color: transparent;
|
|
perspective: 1000px;
|
|
width:10vw;
|
|
height: 35vw;
|
|
}
|
|
|
|
.flip-card-inner {
|
|
position: absolute;
|
|
width:10vw;
|
|
height: 35vw;
|
|
text-align: center;
|
|
transition: transform 0.6s;
|
|
transform-style: preserve-3d;
|
|
color: lightblue;
|
|
text-align:center;
|
|
font-family: mono;
|
|
font-size: 0.7em;
|
|
}
|
|
|
|
.flip-card:hover .flip-card-inner {
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.flip-card-front {
|
|
position: absolute;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
width:10vw;
|
|
height: 35vw;
|
|
color: lightblue;
|
|
text-align:center;
|
|
font-family: mono;
|
|
font-size: 0.7em;
|
|
background:none;
|
|
box-shadow: 1px 1px 20px lightblue;
|
|
border-radius: 25px;
|
|
}
|
|
|
|
|
|
.flip-card-back {
|
|
position: absolute;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
width:10vw;
|
|
height: 35vw;
|
|
color: lightblue;
|
|
text-align:center;
|
|
font-family: mono;
|
|
font-size: 0.7em;
|
|
background-color: 50% lightblue;
|
|
box-shadow: 1px 1px 20px lightblue;
|
|
border-radius: 25px;
|
|
}
|
|
|
|
.flip-card-front {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.flip-card-back {
|
|
background-color: transparent;
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
}
|
|
|
|
@media only screen and (max-width: 1800px) {
|
|
|
|
p.setlist {
|
|
column-count: 2;
|
|
text-align: left;
|
|
width: 100%;
|
|
font-size: 1em;
|
|
color: lightblue;
|
|
font-family: mono;
|
|
|
|
margin-top: 2.5vw;
|
|
|
|
|
|
}
|
|
p.intro {
|
|
padding-top: 1.2wv;
|
|
column-count: 1;
|
|
text-align: left;
|
|
width: 100%;
|
|
font-size: 1em;
|
|
color: lightblue;
|
|
font-family: mono;
|
|
|
|
|
|
}
|
|
.head {
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
display: flex;
|
|
}
|
|
|
|
h1{
|
|
padding-right:2vw;
|
|
margin-bottom: 3vw;
|
|
font-size: 10vw;
|
|
text-align: center;
|
|
text-shadow: 1px 1px 15px DeepSkyBlue;
|
|
/* -webkit-text-stroke: 0.1px white; */
|
|
|
|
}
|
|
|
|
.stream {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center
|
|
padding: 1.2vw;
|
|
|
|
}
|
|
|
|
.title {
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
@keyframes title2 {
|
|
0% {left:150px; top:250px;}
|
|
30% {left:200px; top:200px;}
|
|
60% {left:110px; top:110px;}
|
|
100% {left:150px; top:250px;}
|
|
}
|
|
|
|
|
|
.text{
|
|
column-count: 2;
|
|
flex-basis: auto;
|
|
padding: 1.2vw;
|
|
margin: 2.5vw;
|
|
margin-left: 3vw;
|
|
margin-right: 3vw;
|
|
/* width: 100%; */
|
|
}
|
|
|
|
.video {
|
|
flex-basis: auto;
|
|
width: 45vw;
|
|
height: 30vw;
|
|
}
|
|
|
|
embed {
|
|
flex-basis: auto;
|
|
height: 150px;
|
|
|
|
}
|
|
|
|
.issues {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
padding: 1.2vw;
|
|
padding-right: 2.3vw;
|
|
|
|
}
|
|
|
|
|
|
@media only screen and (max-width: 800px) {
|
|
|
|
body{
|
|
padding-bottom: 15vw;
|
|
}
|
|
p.setlist {
|
|
column-count: 1;
|
|
text-align: left;
|
|
width: 100%;
|
|
font-size: 1em;
|
|
color: lightblue;
|
|
font-family: mono;
|
|
padding: 1.2vw;
|
|
margin-top: 4vw;
|
|
margin-left: 1.2vw;
|
|
padding-right: 7vw;
|
|
|
|
}
|
|
|
|
p.intro {
|
|
padding-top: 1.2wv;
|
|
column-count: 1;
|
|
text-align: left;
|
|
width: 100%;
|
|
font-size: 1em;
|
|
color: lightblue;
|
|
font-family: mono;
|
|
|
|
|
|
}
|
|
|
|
.head {
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
display: flex;
|
|
}
|
|
|
|
h1{
|
|
margin-bottom: 3vw;
|
|
font-size: 17vw;
|
|
text-align: center;
|
|
text-shadow: 1px 1px 15px DeepSkyBlue;
|
|
/* -webkit-text-stroke: 0.1px white; */
|
|
|
|
}
|
|
|
|
.stream {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center
|
|
padding: 1.2vw;
|
|
|
|
}
|
|
|
|
.title {
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
@keyframes title2 {
|
|
0% {left:150px; top:250px;}
|
|
30% {left:200px; top:200px;}
|
|
60% {left:110px; top:110px;}
|
|
100% {left:150px; top:250px;}
|
|
}
|
|
|
|
|
|
.text{
|
|
column-count: 1;
|
|
flex-basis: auto;
|
|
padding: 1.2vw;
|
|
margin: 2.5vw;
|
|
margin-left: 3vw;
|
|
margin-right: 3vw;
|
|
/* width: 100%; */
|
|
}
|
|
|
|
.video {
|
|
flex-basis: auto;
|
|
width: 80vw;
|
|
height: 55vw;
|
|
|
|
}
|
|
|
|
embed {
|
|
flex-basis: auto;
|
|
height: 150px;
|
|
|
|
}
|
|
|
|
.issues {
|
|
display: none;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
padding: 1.2vw;
|
|
padding-right: 2.3vw;
|
|
|
|
}
|
|
|