refactor base.css

static/base.css

@@ -54,136 +54,6 @@ img.aa {
 header {
 	position: relative; /* for #results */
 }
-header label, header input {
-	position: absolute;
-}
-header label[for="user"] {
-	left: 480px;
-	top: 5px;
-}
-header input#user {
-	left: 570px;
-	top: 0px;
-}
-header label[for="song"] {
-	left: 300px;
-	top: 55px;
-}
-header input#song {
-	left: 390px;
-	top: 50px;
-	width: 420px;
-	text-align: center;
-}
-header input[type="submit"] {
-	left: 830px;
-	top: 50px;
-}
-div#results {
-	display: none;
-	position: absolute;
-	width: 430px;
-	height: 560px;
-	left: 390px;
-	top: 83px;
-	background-color: #111;
-	border: 1px solid #aaa;
-	z-index: 1;
-}
-div#results ul {
-	margin: 5px 10px;
-	padding: 0;
-}
-div#results ul li {
-	list-style: none;
-	display: block;
-	height: 50px;
-	margin: 5px 0;
-	overflow: hidden;
-}
-div#results ul li:hover {
-	background-color: #024;
-}
-div#results ul li a {
-	display: block;
-	height: 100%;
-}
-div#results ul li a:hover {
-	text-decoration: none;
-}
-div#results ul li img {
-	height: 50px;
-	width: 66px;
-	float: left;
-	margin-right: 10px;
-}
-
-object#player {
-	position: absolute;
-	left: -1px;
-	top: 0;
-}
-
-section.song {
-	background-color: #111;
-	padding: 10px 15px;
-	margin-top: 7px;
-	position: relative; /* for remove */
-}
-section.song div.info {
-	margin-bottom: 10px;
-	float: left;
-}
-section.song div.user {
-	float: right;
-	margin-right: 20px;
-}
-section.song div.remove {
-	position: absolute;
-	top: 0;
-	right: 5px;
-}
-section.song div.remove img {
-	opacity: 0.6;
-}
-section.song div.remove img:hover {
-	opacity: 1.0;
-}
-section.song div.reorder {
-	position: absolute;
-	bottom: 0;
-	right: 5px;
-}
-section.song div.reorder img {
-	display: block;
-	margin-bottom: 5px;
-	opacity: 0.6;
-}
-section.song div.reorder img:hover {
-	opacity: 1.0;
-}
-section.song div.thumb {
-	float: left;
-	width: 140px;
-	height: 90px;
-	overflow: hidden;
-}
-section.song div.thumb img {
-	height: 90px;
-}
-section.song canvas, section.song > img {
-	position: relative;
-	left: 5px;
-}
-section.song > img[src$='pause.png'] {
-	display: none;
-}
-section.song > img {
-	opacity: 0.5;
-}
-section.song > img:hover {
-	opacity: 1.0;
-}
 
 .clear {
 	line-height: 0;

static/p.css

@@ -0,0 +1,130 @@
+header label, header input {
+	position: absolute;
+}
+header label[for="user"] {
+	left: 480px;
+	top: 5px;
+}
+header input#user {
+	left: 570px;
+	top: 0px;
+}
+header label[for="song"] {
+	left: 300px;
+	top: 55px;
+}
+header input#song {
+	left: 390px;
+	top: 50px;
+	width: 420px;
+	text-align: center;
+}
+header input[type="submit"] {
+	left: 830px;
+	top: 50px;
+}
+div#results {
+	display: none;
+	position: absolute;
+	width: 430px;
+	height: 560px;
+	left: 390px;
+	top: 83px;
+	background-color: #111;
+	border: 1px solid #aaa;
+	z-index: 1;
+}
+div#results ul {
+	margin: 5px 10px;
+	padding: 0;
+}
+div#results ul li {
+	list-style: none;
+	display: block;
+	height: 50px;
+	margin: 5px 0;
+	overflow: hidden;
+}
+div#results ul li:hover {
+	background-color: #024;
+}
+div#results ul li a {
+	display: block;
+	height: 100%;
+}
+div#results ul li a:hover {
+	text-decoration: none;
+}
+div#results ul li img {
+	height: 50px;
+	width: 66px;
+	float: left;
+	margin-right: 10px;
+}
+
+object#player {
+	position: absolute;
+	left: -1px;
+	top: 0;
+}
+
+section.song {
+	background-color: #111;
+	padding: 10px 15px;
+	margin-top: 7px;
+	position: relative; /* for remove */
+}
+section.song div.info {
+	margin-bottom: 10px;
+	float: left;
+}
+section.song div.user {
+	float: right;
+	margin-right: 20px;
+}
+section.song div.remove {
+	position: absolute;
+	top: 0;
+	right: 5px;
+}
+section.song div.remove img {
+	opacity: 0.6;
+}
+section.song div.remove img:hover {
+	opacity: 1.0;
+}
+section.song div.reorder {
+	position: absolute;
+	bottom: 0;
+	right: 5px;
+}
+section.song div.reorder img {
+	display: block;
+	margin-bottom: 5px;
+	opacity: 0.6;
+}
+section.song div.reorder img:hover {
+	opacity: 1.0;
+}
+section.song div.thumb {
+	float: left;
+	width: 140px;
+	height: 90px;
+	overflow: hidden;
+}
+section.song div.thumb img {
+	height: 90px;
+}
+section.song canvas, section.song > img {
+	position: relative;
+	left: 5px;
+}
+section.song > img[src$='pause.png'] {
+	display: none;
+}
+section.song > img {
+	opacity: 0.5;
+}
+section.song > img:hover {
+	opacity: 1.0;
+}

templates/header.html

@@ -8,6 +8,7 @@
 	-->
 	<link href="/static/cantarell.css" rel="stylesheet">
 	<link href="/static/base.css" rel="stylesheet">
+	{{.}}
 </head>
 
 <body>

templates/home.html

@@ -1,4 +1,4 @@
-{{template "header.html"}}
+{{template "header.html" ""}}
 
 <header>
 	<img src="/static/audioaxis-white.png" alt="Audio Axis" class="aa">

templates/p.html

@@ -1,4 +1,5 @@
-{{template "header.html"}}
+{{$head := `<link href="/static/p.css" rel="stylesheet">`}}
+{{template "header.html" $head}}
 
 <header>
 	<img src="/static/audioaxis-white.png" alt="Audio Axis" class="aa">