diff options
| author | davy <davy.wybiral@gmail.com> | 2019-07-02 09:39:11 -0500 |
|---|---|---|
| committer | davy <davy.wybiral@gmail.com> | 2019-07-02 09:39:11 -0500 |
| commit | 1e680cef7bacce567d12a1d79e19406c9992d611 (patch) | |
| tree | 7b56284dbd349d29bbd61a7738dc6a00d8654dfb | |
| parent | c0bbabf69f0629ca7736ec7504928578dd6667f1 (diff) | |
improve css
| -rw-r--r-- | static/theme.css (renamed from static/css/index.css) | 63 | ||||
| -rw-r--r-- | templates/index.html | 4 |
2 files changed, 48 insertions, 19 deletions
diff --git a/static/css/index.css b/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 @@ <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 @@ <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">
|