diff --git a/web/assets/css/main.css b/web/assets/css/main.css index c8b5824..0c4b925 100644 --- a/web/assets/css/main.css +++ b/web/assets/css/main.css @@ -88,24 +88,22 @@ header { flex-wrap: wrap; justify-content: space-between; } -#logo { - display: block; - width: 360px; } +header svg { width: 360px; } -#logo text { fill: var(--text-color); } +header svg text { fill: var(--text-color); } -#logo .logo { +header svg text:first-child { font-size: 2rem; font-variant-caps: small-caps; font-weight: bold; } +header svg text:last-child { font-size: .88rem; } + @media screen and (-webkit-min-device-pixel-ratio:0) { - #logo .logo { font-size: 2.082rem; } } + header svg text:first-child { font-size: 2.082rem; } } @-moz-document url-prefix() { - #logo .logo { font-size: 2rem; } } - -#logo .under { font-size: .88rem; } + header svg text:first-child { font-size: 2rem; } } nav { margin-top: .5rem; } @@ -117,6 +115,41 @@ nav h1 { section { margin-top: 1rem; } +#banner { text-align: center; } + +#banner video { max-width: 90%; } + +#player { + flex-direction: row; + align-items: center; } + +#player p { text-indent: 1rem; } + +button[name="play"] { + -webkit-mask-image: url(/assets/img/play.svg); + background-color: var(--primary-color); + height: 3rem; + mask-image: url(/assets/img/play.svg); + min-width: 3rem; + width: 3rem; } + +button[name="play"]:hover { text-decoration: none; } + +input[name="volume"] { + accent-color: var(--primary-color); + height: 5rem; + margin-left: .5rem; } + +#player div:first-child { + display: none; + flex-direction: row; + align-items: center; } + +#player div:first-child div { + display: flex; + flex-direction: column; +} + #last-played { margin: 0 auto; min-width: 80%; @@ -127,41 +160,6 @@ section { margin-top: 1rem; } gap: .5rem; grid-template-columns: 3rem 2rem 1fr; } -#stopit { text-align: center; } - -#stopit video { max-width: 90%; } - -#radio { - flex-direction: row; - align-items: center; } - -#radio p { text-indent: 1rem; } - -#play { - -webkit-mask-image: url(/assets/img/play.svg); - background-color: var(--primary-color); - height: 3rem; - mask-image: url(/assets/img/play.svg); - min-width: 3rem; - width: 3rem; } - -#volume { - accent-color: var(--primary-color); - height: 5rem; - margin-left: .5rem; } - -#play:hover { text-decoration: none; } - -div.player { - display: none; - flex-direction: row; - align-items: center; } - -div.player div { - display: flex; - flex-direction: column; -} - footer { font-size: .8rem; text-align: center; @@ -178,4 +176,4 @@ footer { width: 100%; text-align: center; } - #radio { flex-direction: column; } } \ No newline at end of file + #player { flex-direction: column; } } \ No newline at end of file