master
camilo 3 years ago
parent 1eec3cd4fe
commit 0327315ef4

@ -0,0 +1,591 @@
@font-face {
font-family: 'mono';
src: url('fonts/SyneMono-Regular.otf') format('opentype');
}
@font-face {
font-family: 'garamondt';
src: url('fonts/Garamondt-Italic.woff') format('woff');
}
@font-face {
font-family: 'garamondt-regular';
src: url('fonts/Garamondt-Regular.woff') format('woff');
}
@font-face {
font-family: 'graffiti';
src: url('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/back.png);
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: 30vw;
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;
}
Loading…
Cancel
Save