improve css

wybiral · Jul 2, 2019 · 1e680ce · 1e680ce
1 parent c0bbabf
commit 1e680ce
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 19 deletions.
diff --git a/static/css/index.css → static/theme.css b/static/css/index.css → 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,47 +89,49 @@ 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;
     bottom: 10px;
     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
@@ -5,7 +5,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico">
-    <link rel="stylesheet" type="text/css" href="/static/css/index.css">
+    <link rel="stylesheet" type="text/css" href="/static/theme.css">
 </head>
 <body>
     <nav><a href="/">Tube</a></nav>
@@ -20,7 +20,7 @@ <h2>{{ $playing.Modified }}</h2>
             <video id="video" controls></video>
             {{ end }}
         </div>
-        <div id="sidebar">
+        <div id="playlist">
             {{ range $m := .Playlist }}
             {{ if eq $m.ID $playing.ID }}
             <a href="/v/{{ $m.ID }}" class="playing">