From 1e680cef7bacce567d12a1d79e19406c9992d611 Mon Sep 17 00:00:00 2001 From: davy Date: Tue, 2 Jul 2019 09:39:11 -0500 Subject: [PATCH] improve css --- static/{css/index.css => theme.css} | 63 +++++++++++++++++++++-------- templates/index.html | 4 +- 2 files changed, 48 insertions(+), 19 deletions(-) rename static/{css/index.css => theme.css} (69%) diff --git a/static/css/index.css b/static/theme.css similarity index 69% rename from static/css/index.css rename to static/theme.css index d73211c..522f97d 100644 --- a/static/css/index.css +++ b/static/theme.css @@ -1,4 +1,9 @@ -/* Normalize */ +:root { + --main-title-color: #ae81ff; + --link-hover-color: #ae81ff; +} + +/* normalize */ * { font-weight: inherit; font-size: inherit; @@ -25,7 +30,7 @@ body { nav { z-index: 100; - color: #ae81ff; + color: var(--main-title-color); text-shadow: -2px 2px 3px rgba(0, 0, 0, 0.7); font-weight: 700; font-size: 20px; @@ -45,11 +50,12 @@ main { } #player { - width: 856px; + width: 854px; display: inline-block; vertical-align: top; } +/* 480p */ #video { width: 100%; height: 480px; @@ -74,7 +80,7 @@ main { white-space: normal; } -#sidebar { +#playlist { font-size: 13px; display: inline-block; margin-left: 10px; @@ -83,29 +89,30 @@ main { box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.2); } -#sidebar > a { +#playlist > a { display: block; padding: 10px; position: relative; + min-height: 54px; } -#sidebar > a:hover { - color: #ae81ff; +#playlist > a:hover { + color: var(--link-hover-color); } -#sidebar > a.playing { +#playlist > a.playing { background: #383a3e; } -#sidebar > a + a { +#playlist > a + a { border-top: 1px solid #1e1e1e; } -#sidebar > a > img { +#playlist > a > img { width: 70px; } -#sidebar > a > div { +#playlist > a > div { position: absolute; top: 10px; right: 10px; @@ -113,17 +120,18 @@ main { left: 90px; } -#sidebar > a > div > h1 { +#playlist > a > div > h1 { white-space: normal; } -#sidebar > a > div > h2 { +#playlist > a > div > h2 { margin-top: 5px; color: #676867; font-size: 90%; } -@media only screen and (max-width: 1156px) { +/* 360p */ +@media only screen and (max-width: 1180px) { main { width: 940px; } @@ -135,7 +143,8 @@ main { } } -@media only screen and (max-width: 940px) { +/* 240p */ +@media only screen and (max-width: 965px) { main { width: 726px; } @@ -147,7 +156,8 @@ main { } } -@media only screen and (max-width: 726px) { +/* 240p with shifted playlist */ +@media only screen and (max-width: 750px) { main { width: 426px; } @@ -157,10 +167,29 @@ main { #video { height: 240px; } - #sidebar { + #playlist { width: 426px; margin-top: 10px; margin-left: 0; display: block; } } + +/* responsive width with shifted playlist */ +@media only screen and (max-width: 440px) { + main { + width: 100%; + } + #player { + width: 100%; + } + #video { + height: auto; + } + #playlist { + width: 100%; + margin-top: 10px; + margin-left: 0; + display: block; + } +} diff --git a/templates/index.html b/templates/index.html index ab91c8a..aa772c6 100644 --- a/templates/index.html +++ b/templates/index.html @@ -5,7 +5,7 @@ - + @@ -20,7 +20,7 @@ {{ end }} -