From d5f0151bb1fd749b3763c2775dc8f59fcf8db4d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lilian=20J=C3=B3nsd=C3=B3ttir?=
 <lilian.jonsdottir@gmail.com>
Date: Wed, 24 Jan 2024 16:07:57 -0800
Subject: [PATCH] proper mobile layout

---
 static/css/style.css     | 41 ++++++++++++++++++++++++++++++++++++++--
 templates/home.page.tmpl |  4 ++--
 2 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 98683ef..bc5f077 100644
--- a/static/css/style.css
+++ b/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;
+  }
 }
\ No newline at end of file
diff --git a/templates/home.page.tmpl b/templates/home.page.tmpl
index 48fd1d3..5d7019b 100644
--- a/templates/home.page.tmpl
+++ b/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">