A assets/vip.css => assets/vip.css +62 -0
@@ 0,0 1,62 @@
+header {
+ background-color: var(--bg-color);
+ position: fixed;
+ top: 0;
+ left: 10%;
+ right: 10%;
+ width: 100%;
+}
+
+.controls {
+ position: fixed;
+ height: 40px;
+ right: 0;
+ bottom: 0;
+ margin-right: 30%;
+ width: auto;
+ z-index: 1;
+}
+
+.button {
+ cursor: pointer;
+ height: 100%;
+ padding: 0 10px;
+ float: left;
+ line-height: 40px;
+}
+
+.playlist {
+ display: table;
+ max-width: 55em;
+ border: 1px solid #2799c8;
+ box-sizing: border-box;
+ margin: 10em auto;
+}
+
+.playlist div {
+ border: 1px solid #2799c8;
+ color: #79bdd8;
+ padding: 5px;
+ font-size: 11pt;
+ cursor: pointer;
+}
+
+.playlist div.selected {
+ background-color: #79bdd8;
+ color: #fff;
+}
+
+.playlist div:hover {
+ background-color: #79bdd8;
+ color: #fff;
+}
+
+#splaylist {
+ border: 1px solid #090;
+ background-color: transparent;
+ height: 100%;
+ font-size: 12pt;
+ padding: 0;
+ color: #2799c8;
+ border: 0;
+}
M templates/vip.html => templates/vip.html +2 -78
@@ 1,82 1,7 @@
<html>
{{template "head"}}
- <style>
- header {
- background: #222;
- position: fixed;
- top: 0;
- width: 100%;
- z-index: 1;
- }
-
- .controls {
- position: fixed;
- height: 40px;
- right: 0;
- bottom: 0;
- margin-right: 30%;
- width: auto;
- z-index: 1;
- }
-
- .button {
- cursor: pointer;
- height: 100%;
- padding: 0 10px;
- float: left;
- line-height: 40px;
- }
-
- .quote {
- position: fixed;
- left: 70%;
- top: 50%;
- width: 25%;
- z-index: 1;
- }
-
- .playlist {
- display: table;
- left: 15;
- position: absolute;
- width: 60%;
- height: 25%;
- border: 1px solid #2799c8;
- box-sizing: border-box;
- -moz-box-sizing: border-box;
- margin: 50px auto;
- margin-top: 75px;
- }
-
- .playlist div {
- border: 1px solid #2799c8;
- color: #79bdd8;
- padding: 5px;
- font-size: 11pt;
- cursor: pointer;
- }
-
- .playlist div.selected {
- background-color: #79bdd8;
- color: #fff;
- }
-
- .playlist div:hover {
- background-color: #79bdd8;
- color: #fff;
- }
-
- #splaylist {
- border: 1px solid #090;
- background-color: transparent;
- height: 100%;
- font-size: 12pt;
- padding: 0;
- color: #2799c8;
- border: 0;
- }
- </style>
- <body>
+ <link rel="stylesheet" href="assets/vip.css">
+ <body>
{{template "nav"}}
<main>
<!-- this code is terrible -->
@@ 88,7 13,6 @@
</section>
<section class="playlist"></section>
- <section class="quote"><h4>Oblivion</h4>{{ . }}</section>
</main>
{{template "footer"}}
<script src="assets/vip.js"></script>