Separate styles from template

3 years ago · f30d196457
parent 5378ecca19
commit f30d196457
2 changed files with 71 additions and 72 deletions
--- a/src/www/index.html
+++ b/src/www/index.html
@ -3,78 +3,7 @@
 <head>
 	<title>kchan - {name}</title>
 	<link rel="icon" type="image/x-icon" href="favicon.ico">
-	<style>
-		.wrap {
-			max-width: 60rem;
-			margin: 0 auto;
-		}
-		body {
-			margin: 0;
-			box-sizing: border-box;
-			font-size: 18px;
-			line-height: 1.5;
-		}
-
-		header {
-			box-shadow: 0 0 20px 5px rgba(0,0,0,0.2);
-			padding: .25em .5em;
-			margin-bottom: 3rem;
-		}
-		nav a {
-			text-decoration: none;
-			color: #000;
-		}
-		nav a:hover {
-			color: blue;
-		}
-		nav a:before {
-			content: "[ ";
-			color: #999;
-		}
-		nav a:after {
-			content: " ]";
-			color: #999;
-		}
-
-		main { padding: 0 .5rem }
-
-		article { margin-bottom: 3rem }
-		article:after {
-			/* reset float and keep bottom margin */
-			content: "";
-			display: block;
-			float: none;
-			clear: both;
-		}
-		article img {
-			float: left;
-			width: 15rem;
-			max-height: 25rem;
-			margin-right: 1rem;
-		}
-		article .title {
-			font-weight: bold;
-			margin-bottom: .5rem;
-		}
-		article .meta {
-			display: flex;
-			margin-bottom: .5rem;
-		}
-		article .image-info {
-			font-size: .8rem;
-			color: #444;
-			margin-bottom: .5rem;
-		}
-
-		@media screen and (max-width: 900px) {
-			article img { width: 10rem }
-		}
-		@media screen and (max-width: 700px) {
-			body { font-size: 16px }
-			article img { width: 6rem }
-			article .meta { flex-direction: column-reverse }
-		}
-	</style>
+	<link rel="stylesheet" href="style.css">
 </head>
 <body>
 	<header>
--- a/src/www/style.css
+++ b/src/www/style.css
@ -0,0 +1,70 @@
+.wrap {
+	max-width: 60rem;
+	margin: 0 auto;
+}
+body {
+	margin: 0;
+	box-sizing: border-box;
+	font-size: 18px;
+	line-height: 1.5;
+}
+
+header {
+	box-shadow: 0 0 20px 5px rgba(0,0,0,0.2);
+	padding: .25em .5em;
+	margin-bottom: 3rem;
+}
+nav a {
+	text-decoration: none;
+	color: #000;
+}
+nav a:hover {
+	color: blue;
+}
+nav a:before {
+	content: "[ ";
+	color: #999;
+}
+nav a:after {
+	content: " ]";
+	color: #999;
+}
+
+main { padding: 0 .5rem }
+
+article { margin-bottom: 3rem }
+article:after {
+	/* reset float and keep bottom margin */
+	content: "";
+	display: block;
+	float: none;
+	clear: both;
+}
+article img {
+	float: left;
+	width: 15rem;
+	max-height: 25rem;
+	margin-right: 1rem;
+}
+article .title {
+	font-weight: bold;
+	margin-bottom: .5rem;
+}
+article .meta {
+	display: flex;
+	margin-bottom: .5rem;
+}
+article .image-info {
+	font-size: .8rem;
+	color: #444;
+	margin-bottom: .5rem;
+}
+
+@media screen and (max-width: 900px) {
+	article img { width: 10rem }
+}
+@media screen and (max-width: 700px) {
+	body { font-size: 16px }
+	article img { width: 6rem }
+	article .meta { flex-direction: column-reverse }
+}