expando image fixes, multi instance root fix

public/style.css

@@ -545,11 +545,14 @@ form.blockpost {
 #settingspopup.open, #mycommunities.open {
   display: inline-block;
 }
+.expando {
+  text-align: center;
+}
 .expando.open{
   display: block;
 }
 .expando .image {
-  max-width: 578px;
+  max-width: 100%;
 }
 .expando .md {
   background-color: #fafafa;
@@ -615,6 +618,12 @@ main {
   margin: 0px 10px;
 }
 @media (min-width: 900px) {
+  .expando {
+    text-align: left;
+  }
+  .expando .image {
+    max-width: 578px;
+  }
   .side {
     display: block;
     position: absolute;

public/utils.js

@@ -12,6 +12,9 @@ function request(url, params, callback, errorcallback = function(){}) {
   xmlHttp.open(method, url, true);
   xmlHttp.send(params);
 }
+var resizeTarget
+var startCoordinates = [0,0]
+var startSize = [0,0]
 function postClick(e) {
   e = e || window.event;
   if (e.target.className.indexOf("expando-button") == -1) { return }
@@ -24,28 +27,15 @@ function postClick(e) {
     btn.className = "expando-button"
     targ.getElementsByClassName("embed")[0].innerHTML = ""
   } else {
+    if (window.innerWidth <= 800) targ.appendChild(bdy);
     bdy.className = 'expando open';
     btn.className = "expando-button open"
     var url = targ.getElementsByClassName("url")[0].href
     if (id = parseYoutube(url)) {
       targ.getElementsByClassName("embed")[0].innerHTML = youtubeIframe(id)
     }
-    // TODO set image handler
-    var images = bdy.getElementsByTagName('img')
-    for (var i = 0; i < images.length; i++) {
-      images[i].onmousedown = function(e) {
-        e.preventDefault()
-        startCoordinates = [e.clientX, e.clientY]
-        startSize = [e.target.height, e.target.width]
-        resizeTarget = e.target
-        return false
-      }
-    }
   }
 }
-var resizeTarget
-var startCoordinates = [0,0]
-var startSize = [0,0]
 document.onmousemove = function(e) {
   if (resizeTarget) {
     resizeTarget.style.maxWidth = 'unset';
@@ -58,9 +48,9 @@ document.onmousemove = function(e) {
     resizeTarget.width = newX > 30 ? newX : 30
   }
 }
-document.onmouseup = function(e){
+window.addEventListener('mouseup', function(e){
  resizeTarget = false;
-}
+})
 function uptil (el, f) { 
   if (el) return f(el) ? el : uptil(el.parentNode, f) 
 }
@@ -492,6 +482,16 @@ function setup() {
         btn.className = "expando-button"
       }
     }
+    let images = posts[i].getElementsByTagName('img')
+    for (let i = 0; i < images.length; i++) {
+      images[i].onmousedown = function(e) {
+        e.preventDefault()
+        startCoordinates = [e.clientX, e.clientY]
+        startSize = [e.target.height, e.target.width]
+        resizeTarget = e.target
+        return false
+      }
+    }
   }
   var comments = document.getElementsByClassName("comment")
   for (var i = 0; i < comments.length; i++) {

routes.go

@@ -357,8 +357,8 @@ func GetRoot(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
 	data["Title"] = r.Host
 	if dark := getCookie(r, "Dark"); dark != "" {
 		data["Dark"] = dark != "0"
-	} else {
+	} else if dark := os.Getenv("DARK"); dark != "" {
-		data["Dark"] = os.Getenv("DARK") != ""
+		data["Dark"] = true
 	}
 	tmpl, err := GetTemplate("root.html")
 	if err != nil {

templates/root.html

@@ -8,7 +8,7 @@
     {{ end }}
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
-  <body{{ if is .Dark }} class="dark"{{end}}>
+  <body{{ if is .Dark }} class="dark" {{end}}>
     <nav>
       <div class="spacer"></div>
       <span class="title">{{ .Title }}</span>