~nature/galaxy.moe

34c86e9e03f8ed1e7fa52e26ce0ff0f499fc6d48 — LordNature 4 years ago 41fc0e1
vip: Seperated CSS, centered content, & removed quotes
2 files changed, 64 insertions(+), 78 deletions(-)

A assets/vip.css
M templates/vip.html
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>