proper mobile layout

static/css/style.css

@@ -4,8 +4,6 @@
   maybe use SASS or something
 
   the real TODO here is finding an image that doesn't require a white background
-
-  also TODO: proper mobile layout
 */
 
 body {
@@ -82,4 +80,43 @@ h1 {
 h2 {
   padding-top: 0px;
   font-size: 1.4em;
+}
+
+.logo {
+  /*max-width: 400px;*/
+  max-width: 100%;
+}
+
+/* width specific settings */
+@media screen and (max-width: 1200px) {
+
+  #words,
+  #bigwords {
+    width: 90%;
+  }
+}
+
+@media screen and (max-width: 800px) {
+
+  #words,
+  #bigwords {
+    width: 100%;
+  }
+
+  #leftfooter {
+    position: fixed;
+    bottom: 10px;
+    right: 10px;
+    text-align: right;
+  }
+
+  #rightfooter {
+    position: fixed;
+    bottom: 35px;
+    right: 10px;
+  }
+
+  #stuff {
+    margin: 15px 50px 25px 50px;
+  }
 }

templates/home.page.tmpl

@@ -1,13 +1,13 @@
 {{- template "base" . -}}
 
 {{- define "content" }}
-  <img src="static/img/moemoe.png">
+  <img src="static/img/moemoe.png" class="logo">
   <div id="header">
       <!-- <h1>燃え 萌え</h1> -->
       <h2>burning.moe</h2>
   </div>
   <a href="http://www.pixiv.net/member_illust.php?mode=medium&illust_id=22647957">
-      <img src="static/img/burningmoe.jpg" style="max-width:400px;" />
+      <img src="static/img/burningmoe.jpg" class="logo" />
   </a>
   <br />
   <span id="words">