From 0327315ef47ec9e0c2d6cf16cec0300a4fedc283 Mon Sep 17 00:00:00 2001 From: camilo Date: Thu, 17 Jun 2021 14:55:21 +0200 Subject: [PATCH] style --- style.css | 591 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 591 insertions(+) create mode 100644 style.css diff --git a/style.css b/style.css new file mode 100644 index 0000000..49addc1 --- /dev/null +++ b/style.css @@ -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; + +} + +/* */ + + + +.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; + +} + + + +/* */ + + +.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; +} + + + +/* */ +* { 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%); } +} + + +/* */ + +.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; + +} +