style
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…
Reference in New Issue