diff --git a/src/www/index.html b/src/www/index.html
index ad3ed47..bae9e42 100644
--- a/src/www/index.html
+++ b/src/www/index.html
@@ -3,78 +3,7 @@
kchan - {name}
-
+
diff --git a/src/www/style.css b/src/www/style.css
new file mode 100644
index 0000000..4aeaf36
--- /dev/null
+++ 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 }
+}