proper mobile layout

cmd/web/routes.go

@@ -3,10 +3,11 @@ package main
 import (
 	"net/http"
 
-	"git.burning.moe/celediel/burning.moe/internal/config"
-	"git.burning.moe/celediel/burning.moe/internal/handlers"
 	"github.com/go-chi/chi/v5"
 	"github.com/go-chi/chi/v5/middleware"
+
+	"git.burning.moe/celediel/burning.moe/internal/config"
+	"git.burning.moe/celediel/burning.moe/internal/handlers"
 )
 
 // routes handles all of the HTTP setup. Middleware is enabled,

internal/config/config.go

@@ -5,9 +5,10 @@ import (
 	"os"
 	"time"
 
-	"git.burning.moe/celediel/burning.moe/internal/models"
 	"github.com/charmbracelet/log"
 	"github.com/ilyakaznacheev/cleanenv"
+
+	"git.burning.moe/celediel/burning.moe/internal/models"
 )
 
 // AppConfig contains data to be accessed across the app.

internal/td/td.go

@@ -6,9 +6,9 @@ import (
 	"strings"
 	"time"
 
-	"git.burning.moe/celediel/burning.moe/internal/models"
-
 	"github.com/ilyakaznacheev/cleanenv"
+
+	"git.burning.moe/celediel/burning.moe/internal/models"
 )
 
 const dataDir string = "./templates/data/"

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 {
@@ -83,3 +81,42 @@ 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/data/about.page.yaml

@@ -1,5 +1,5 @@
 StringMap:
-  about: she/her; 1989; queer anarchist; lover of music, games, reading, free software, history, fog, mountains, and forests; self-taught, aspiring developer and sysadmin
+  about: she/her; 1989; queer anarchist; lover of music, games, books, free software, history, fog, mountains, and forests; self-taught, aspiring developer and sysadmin
 LinkMap:
   Personal:
     - href: https://matrix.to/#/@celediel:burning.moe

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">