[ CiF ] 
Radio
+ [ CiF ] Radio
The Sound of Socialism
+
diff --git a/style.css b/style.css
index 543332b..16b10a8 100644
--- a/style.css
+++ b/style.css
@@ -8,304 +8,338 @@
font-family: "Ubuntu";
src: url("./Fonts/Ubuntu.ttf") format("truetype");
}
-
-/*Knob CSS*/
- .knob-surround {
- position: relative;
- width: 250px;
- height: 250px;
- border-radius: 50%;
- margin: 1em auto;
+
+/*Basic Site CSS*/
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ padding-top: 10px;
+ display: grid;
+ place-items: center;
+ scroll-behavior: smooth;
+ text-align: center;
+ position: absolute;
+ margin-top: 10px;
+ font-family: "Ubuntu";
+ width: 100%;
+}
+
+h2 {
+ font-size: 25pt;
+ z-index: 1;
+ margin-top: 5pt;
+}
+
+.title{
+ font-size: 12vh;
+ z-index: 1;
+ font-family: "Futura";
+}
+
+.card {
+ width: 80vw;
+ height: auto;
+ border-radius: 30px;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ margin-top: 3vh;
+}
+
+
+/*Loading Animation*/
+@keyframes slideAndFade {
+ to {
+ opacity: 1;
+ transform: translateY(0);
}
- .knob {
- position: absolute;
- width: 100%;
- height: 100%;
- border-radius: 50%;
- -webkit-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -o-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
- z-index: 10;
+}
+
+
+/*Knob*/
+.knob-surround {
+ position: relative;
+ width: 25vh;
+ height: 25vh;
+ border-radius: 50%;
+ margin: 1em auto;
+}
+.knob {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ transform: rotate(0deg);
+ z-index: 10;
+}
+.knob:before {
+ content: "";
+ position: absolute;
+ bottom: 19%;
+ left: 19%;
+ width: 3%;
+ height: 3%;
+ background-color: #ff5a99;
+ border-radius: 50%;
+}
+.min,
+.max {
+ display: block;
+ font-family: "Ubuntu";
+ text-transform: uppercase;
+ font-size: 75%;
+ position: absolute;
+ opacity: 0.50;
+}
+.min {
+ bottom: 0px;
+ left: 0px;
+}
+.max {
+ bottom: 0px;
+ right: 0px;
+}
+.tick {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ z-index: 5;
+ overflow: visible;
+}
+.tick:after {
+ content: "";
+ width: 0.08em;
+ height: 0.6em;
+ position: absolute;
+ top: -20px;
+ left: 50%;
+ transition: all 1000ms ease-in-out;
+}
+.activetick:after {
+ top: -25px;
+ transition: all 1000ms ease-in-out;
+}
+
+.volume-knob-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 1em;
+}
+
+.volume-value {
+ margin-top: 2.5px;
+ font-family: "Ubuntu";
+ font-size: 15px;
+ color: #ff5a99;
+ opacity: 0.50;
+}
+
+
+/*Song Info*/
+.now-playing {
+ text-align: center;
+ margin-top: 2rem;
+ padding: 1rem;
+ border-radius: 30px;
+}
+
+.song-title {
+ font-size: 1.2rem;
+ font-weight: bold;
+ margin-bottom: 0.5rem;
+}
+
+.artist {
+ font-size: 1rem;
+}
+
+footer {
+ font-size: 30px;
+ position: fixed;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ height: 5vh;
+ text-align: center;
+ color: white;
+ text-align: center;
+}
+
+footer img {
+ height: 30px;
+}
+
+/*Light Color Themes*/
+@media (prefers-color-scheme: light) {
+ .title{
+ color: #ff5a99;
}
- .knob:before {
- content: "";
- position: absolute;
- bottom: 19%;
- left: 19%;
- width: 3%;
- height: 3%;
- background-color: #ff5a99;
- border-radius: 50%;
+
+ .song-title {
+ color: #060606;
}
- .min,
- .max {
- display: block;
- font-family: "Ubuntu";
+
+ h2 {
color: #ff5a99;
- text-transform: uppercase;
- font-size: 75%;
- position: absolute;
- opacity: 0.50;
}
- .min {
- bottom: 0px;
- left: 0px;
+
+ .neomorphicbg{
+ background: #ffa7c7;
+ box-shadow: -5px -5px 20px rgb(254,254,255, 0.69),
+ 2px 2px 20px rgb(255,90,153)
}
- .max {
- bottom: 0px;
- right: 0px;
+
+ .neomorphic{
+ background: #ffa7c7;
+ box-shadow: -5px -5px 20px rgb(254,254,255, 0.69),
+ 2px 2px 20px rgb(255,90,153)
}
- .tick {
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- z-index: 5;
- overflow: visible;
+
+ .neomorphic-i{
+ background: #ffa7c7;
+ box-shadow: -3px -3px 15px rgba(254, 254, 255, 0.69) inset,
+ 1px 1px 15px rgb(255,90,153) inset
+ }
+
+ .neomorphic2{
+ background: #ffa7c7;
+ transition: all 0.1s ease-in-out;
+ transform: scale(1);
+ cursor: pointer;
+ box-shadow: -5px -5px 20px rgba(254,254,255,0.5),
+ 2px 2px 20px rgb(255,90,153)
}
- .tick:after {
- content: "";
- width: 0.08em;
- height: 0.6em;
- position: absolute;
- top: -20px;
- left: 50%;
- transition: all 1000ms ease-in-out;
+
+ .neomorphic2:hover{
+ background: #ffa7c7;
+ transform: scale(0.98);
+ box-shadow: -5px -5px 20px rgba(254, 254, 255, 0),
+ 2px 2px 20px rgba(255, 90, 153, 0)
}
- .activetick:after {
- top: -25px;
- transition: all 1000ms ease-in-out;
+
+ .neomorphic2:active{
+ background: #ffa7c7;
+ transform: scale(0.96);
+ box-shadow: -3px -3px 15px rgba(254, 254, 255, 0.69) inset,
+ 1px 1px 15px rgb(255,90,153) inset
}
-
- .volume-knob-container {
- display: flex;
- flex-direction: column;
- align-items: center;
- margin-top: 1em;
+
+ .artist {
+ color: #ff5a99;
+ font-size: 1rem;
}
-
- .volume-value {
- margin-top: 2.5px;
- font-family: "Ubuntu";
- font-size: 15px;
+
+ .cards2 h2 {
+ color: #060606;
+ }
+
+ .min,
+ .max {
color: #ff5a99;
- opacity: 0.50;
}
-/*Song Info*/
- .now-playing {
- text-align: center;
- margin-top: 2rem;
- padding: 1rem;
- border-radius: 30px;
+ .tick:after {
+ background-color: #ff5a9980;
}
-
+ .activetick:after {
+ background-color: #fff3f9;
+ box-shadow: 0 0 0.3em 0.08em #fff3f9;
+ }
+}
+
+
+/*Dark Color Themes*/
+@media (prefers-color-scheme: dark) {
+ :root{
+ background-color: #060606;
+ }
+
+ .title{
+ color: #00d791;
+ }
+
.song-title {
- font-size: 1.2rem;
- font-weight: bold;
- margin-bottom: 0.5rem;
+ color: #00d791;
}
-
+
+ h2 {
+ color: #55052c;
+ }
+
+ .min,
+ .max {
+ color: #00d791;
+ }
+
.artist {
- color: #aaa;
+ color: #060606;
font-size: 1rem;
}
- /*Basic Site CSS*/
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
-
- body {
- padding-top: 10px;
- display: grid;
- place-items: center;
- scroll-behavior: smooth;
- text-align: center;
- position: absolute;
- margin-top: 10px;
- font-family: "Ubuntu";
- width: 100%;
- }
-
- h2 {
- font-size: 25pt;
- z-index: 1;
- margin-top: 5pt;
- }
-
- @keyframes slideAndFade {
- to {
- opacity: 1;
- transform: translateY(0);
- }
- }
-
- .title{
- font-size: 120px;
- z-index: 1;
- }
+ .neomorphicbg{
+ background: #55052c;
+ box-shadow: -5px -5px 20px rgba(1, 1, 0, 0.69),
+ 2px 2px 20px rgba(0, 215, 143, 0.425)
+ }
- .card {
- width: 800pt;
- height: auto;
- border-radius: 30px;
- display: flex;
- align-items: center;
- flex-direction: column;
- margin-top: 30pt;
- }
+ .neomorphic{
+ background: #55052c;
+ box-shadow: -5px -5px 20px rgba(1, 1, 0, 0.69),
+ 2px 2px 20px rgba(0, 215, 143, 0.425)
+ }
- .cards1 {
- width: 180pt;
- height: auto;
- border-radius: 40pt;
- display: flex;
- align-items: center;
- flex-direction: column; /* Changed from column to row */
- margin-top: 30pt;
- gap: 20px; /* Adds some space between image and text */
- }
+ .neomorphic-i{
+ background: #55052c;
+ box-shadow: -3px -3px 15px rgba(1, 1, 0, 0.8) inset,
+ 2px 2px 20px rgba(0, 215, 143, 0.5) inset
+ }
- .cards2 {
- width: 150pt;
- height: auto;
- border-radius: 30pt;
- display: flex;
- align-items: center;
- flex-direction: column;
- }
+ .neomorphic2{
+ background: #55052c;
+ box-shadow: -5px -5px 20px rgba(1, 1, 0, 0.5),
+ 2px 2px 20px rgba(0, 215, 143, 0.534)
+ }
- /*Light Color Themes*/
- @media (prefers-color-scheme: light) {
- .title{
- color: #ff5a99;
- }
-
- h2 {
- color: #ff5a99;
- }
-
- .neomorphic{
- background: #ffa7c7;
- box-shadow: -5px -5px 20px rgb(254,254,255, 0.69),
- 2px 2px 20px rgb(255,90,153)
- }
-
- .neomorphic-i{
- background: #ffa7c7;
- box-shadow: -3px -3px 15px rgba(254, 254, 255, 0.69) inset,
- 1px 1px 15px rgb(255,90,153) inset
- }
-
- .neomorphic2{
- background: #ffa7c7;
- transition: all 0.1s ease-in-out;
- transform: scale(1);
- cursor: pointer;
- box-shadow: -5px -5px 20px rgba(254,254,255,0.5),
- 2px 2px 20px rgb(255,90,153)
- }
-
- .neomorphic2:hover{
- background: #ffa7c7;
- transform: scale(0.98);
- box-shadow: -5px -5px 20px rgba(254, 254, 255, 0),
- 2px 2px 20px rgba(255, 90, 153, 0)
- }
-
- .neomorphic2:active{
- background: #ffa7c7;
- transform: scale(0.96);
- box-shadow: -3px -3px 15px rgba(254, 254, 255, 0.69) inset,
- 1px 1px 15px rgb(255,90,153) inset
- }
-
- .cards2 h2 {
- color: #060606;
- }
-
-
-
- .tick:after {
- background-color: #ff5a9980;
- }
- .activetick:after {
- background-color: #fff3f9;
- box-shadow: 0 0 0.3em 0.08em #fff3f9;
- }
- }
+ .tick:after {
+ background-color: #06060680;
+ }
- /*Dark Color Themes*/
- @media (prefers-color-scheme: dark) {
- :root{
- background-color: #060606;
- }
-
- .title{
- color: #00d791;
- }
-
- h2 {
- color: #55052c;
- }
-
- .neomorphic{
- background: #55052c;
- box-shadow: -5px -5px 20px rgba(1, 1, 0, 0.69),
- 2px 2px 20px rgba(0, 215, 143, 0.425)
- }
-
- .neomorphic-i{
- background: #55052c;
- box-shadow: -3px -3px 15px rgba(1, 1, 0, 0.69) inset,
- 1px 1px 15px rgb(0, 0, 0) inset
- }
-
- .neomorphic2{
- background: #55052c;
- box-shadow: -5px -5px 20px rgba(1, 1, 0, 0.5),
- 2px 2px 20px rgba(0, 215, 143, 0.534)
- }
-
- .tick:after {
- background-color: #06060680;
- }
-
- .activetick:after {
- background-color: #00d791;;
- box-shadow: 0 0 0.3em 0.08em #00d791;
- }
- }
+ .activetick:after {
+ background-color: #00d791;;
+ box-shadow: 0 0 0.3em 0.08em #00d791;
+ }
+}
header img {
- height: 120px;
+ height: 10vh;
width: auto;
align-content: baseline;
}
#cover-container {
margin: 20px auto;
- max-width: 400px;
+ max-width: 40vh;
position: relative;
}
.image-wrapper {
- width: 400px;
- height: 400px;
+ width: 40vh;
+ height: 40vh;
border-radius: 30px;
overflow: hidden;
position: relative;
background-color: #e0e0e000;
}
#cover-image, #temp-image, #placeholder-image {
- width: 400px;
- height: 400px;
+ width: 40vh;
+ height: 40vh;
object-fit: cover;
position: absolute;
top: 0;
@@ -313,8 +347,8 @@
transition: opacity 0.3s ease;
}
#placeholder-image {
- width: 350px;
- height: 350px;
+ width: 35vh;
+ height: 35vh;
object-fit: cover;
position: absolute;
top: 0;
@@ -331,27 +365,271 @@
#placeholder-image {
z-index: 3;
opacity: 1;
- margin: 25px;
+ margin: 2.5vh;
}
+.container {
+ text-align: center;
+}
+.child {
+ display: inline-block;
+ padding: 1rem 1rem;
+ vertical-align: middle;
+}
+.child2 {
+ z-index: -20;
+ display: inline-block;
+ padding: 1rem 1rem;
+ vertical-align: middle;
+}
+@media only screen and (orientation: portrait) {
+
+ h2 {
+ display: none;
+ }
+
+ .image-wrapper {
+ display: none;
+ }
+ .stats {
+ display: none;
+ }
+ .card {
+ width: 100vw;
+ height: auto;
+ border-radius: 30px 30px 0 0;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ margin-bottom: 0px;
+ }
+ .now-playing {
+ text-align: center;
+ margin-top: 2rem;
+ padding: 1rem;
+ width: 80vw;
+ border-radius: 30px;
+ }
+ footer {
+ height: 0px;
+ }
+ h1 title {
+ display: none;
+ }
+ .child2 {
+ z-index: -20;
+ display: inline-block;
+ vertical-align: middle;
+ }
+ .knob-surround {
+ position: relative;
+ width: 35vh;
+ height: 35vh;
+ border-radius: 50%;
+ margin: 1em auto;
+ }
+ .knob {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ transform: rotate(0deg);
+ z-index: 10;
+ }
+ .knob:before {
+ content: "";
+ position: absolute;
+ bottom: 19%;
+ left: 19%;
+ width: 3%;
+ height: 3%;
+ background-color: #ff5a99;
+ border-radius: 50%;
+ }
+ .min,
+ .max {
+ display: block;
+ font-family: "Ubuntu";
+ text-transform: uppercase;
+ font-size: 75%;
+ position: absolute;
+ opacity: 0.50;
+ }
+ .min {
+ bottom: 0px;
+ left: 0px;
+ }
+ .max {
+ bottom: 0px;
+ right: 0px;
+ }
+ .tick {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ z-index: 5;
+ overflow: visible;
+ }
+ .tick:after {
+ content: "";
+ width: 0.08em;
+ height: 0.6em;
+ position: absolute;
+ top: -20px;
+ left: 50%;
+ transition: all 1000ms ease-in-out;
+ }
+ .activetick:after {
+ top: -25px;
+ transition: all 1000ms ease-in-out;
+ }
+ .volume-knob-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 1em;
+ }
-.container {
- text-align: center;
-}
-.child {
- display: inline-block;
- padding: 1rem 1rem;
- vertical-align: middle;
+ .volume-value {
+ margin-top: 2.5px;
+ font-family: "Ubuntu";
+ font-size: 15px;
+ color: #ff5a99;
+ opacity: 0.50;
+ }
+ .cif {
+ display: none;
+ }
+ .neomorphicbg{
+ overflow: hidden;
+ }
}
-.child2 {
-z-index: -20;
- display: inline-block;
- padding: 1rem 1rem;
- vertical-align: middle;
+@media only screen and (max-height: 450px) {
+ body{
+ background-color: #55052c;
+ }
+ h2 {
+ display: none;
+ }
+ img {
+ display: none;
+ }
+ .title {
+ display: none;
+ }
+ .image-wrapper {
+ display: none;
+ }
+ .stats {
+ display: none;
+ }
+ .card {
+ width: 100vw;
+ height: 100vh;
+ border-radius: 0 0 0 0;
+ }
+ .now-playing {
+ display: none;
+ }
+ h1 title {
+ display: none;
+ }
+ .child2 {
+ z-index: -20;
+ display: inline-block;
+ vertical-align: middle;
+ }
+
+ .knob-surround {
+ position: relative;
+ width: 75vh;
+ height: 75vh;
+ border-radius: 50%;
+ }
+ .knob {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ transform: rotate(0deg);
+ z-index: 10;
+ }
+ .knob:before {
+ content: "";
+ position: absolute;
+ bottom: 19%;
+ left: 19%;
+ width: 3%;
+ height: 3%;
+ background-color: #ff5a99;
+ border-radius: 50%;
+ }
+ .min,
+ .max {
+ display: block;
+ font-family: "Ubuntu";
+ text-transform: uppercase;
+ font-size: 75%;
+ position: absolute;
+ opacity: 0.50;
+ }
+ .min {
+ bottom: 0px;
+ left: 0px;
+ }
+ .max {
+ bottom: 0px;
+ right: 0px;
+ }
+ .tick {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ z-index: 5;
+ overflow: visible;
+ }
+ .tick:after {
+ content: "";
+ width: 0.08em;
+ height: 0.6em;
+ position: absolute;
+ top: -20px;
+ left: 50%;
+ transition: all 1000ms ease-in-out;
+ }
+ .activetick:after {
+ top: -25px;
+ transition: all 1000ms ease-in-out;
+ }
+
+ .volume-knob-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 1em;
+ }
+
+ .volume-value {
+ margin-top: 2.5px;
+ font-family: "Ubuntu";
+ font-size: 15px;
+ color: #ff5a99;
+ opacity: 0.50;
+ }
+ .cif {
+ display: none;
+ }
+ .neomorphicbg{
+ overflow: hidden;
+ }
}
\ No newline at end of file