grid theme, fix close button in table, post popup

5 files changed, 77 insertions, 17 deletions

diff --git a/static/css/themes/default.css b/static/css/themes/default.css
index ac332f1..8b93e51 100644
--- a/static/css/themes/default.css
+++ b/static/css/themes/default.css
@@ -126,7 +126,8 @@ a.reply {
 }
 
 .popup-box {
-	position: absolute;
+	position: fixed;
+	min-width: 300px;
 	width: min-content;
 	z-index: 9;
 	display: block;
@@ -164,3 +165,33 @@ a.reply {
 	float: right;
 	display: none;
 }
+
+#boardGrid {
+	display: grid;
+	grid-auto-columns: 1fr;
+	border: 4px solid #820404;
+	background-color: #f9f9e0;
+}
+
+#boardGridHeader {
+	border-bottom: 2px solid #820404;
+	display: inline-grid;
+}
+
+.boardGridCell {
+	white-space: nowrap;
+	display: inline-grid;
+	text-align: left;
+	padding: 5px;
+	border-top: 2px solid #820404;
+	border-left: 2px solid #820404;
+}
+
+/* these may or may not work. my CSS is poor so i just kinda did stuff until it worked. */
+.boardGridCell:nth-child(-n+4) {
+	border-top: none;
+}
+
+.boardGridCell:nth-child(3n+2) {
+	border-left: none;
+}
diff --git a/static/css/themes/gruvbox.css b/static/css/themes/gruvbox.css
index 681991c..b534bed 100644
--- a/static/css/themes/gruvbox.css
+++ b/static/css/themes/gruvbox.css
@@ -103,11 +103,11 @@ input[type="text"] {
 }
 
 .popup-box {
-	position: absolute;
+	position: fixed;
+	min-width: 300px;
 	width: min-content;
 	z-index: 9;
 	display: block;
-	min-width: 300px;
 }
 
 /* TODO: rename */
@@ -143,3 +143,33 @@ input[type="text"] {
 	float: right;
 	display: none;
 }
+
+#boardGrid {
+	display: grid;
+	grid-auto-columns: 1fr;
+	border: 4px solid #928374;
+	background-color: #3c3836;
+}
+
+#boardGridHeader {
+	border-bottom: 2px solid #928374;
+	display: inline-grid;
+}
+
+.boardGridCell {
+	white-space: nowrap;
+	display: inline-grid;
+	text-align: left;
+	padding: 5px;
+	border-top: 2px solid #928374;
+	border-left: 2px solid #928374;
+}
+
+/* these may or may not work. my CSS is poor so i just kinda did stuff until it worked. */
+.boardGridCell:nth-child(-n+4) {
+	border-top: none;
+}
+
+.boardGridCell:nth-child(3n+2) {
+	border-left: none;
+}
diff --git a/static/index.html b/static/index.html
index b5fb93c..d45dd77 100644
--- a/static/index.html
+++ b/static/index.html
@@ -25,20 +25,20 @@
   {{ if .Boards }}
   {{ $l := len .Boards }}
   <div style="margin-top:50px;">
-    <div style="display: grid;border-right: 2px solid #820404;">
+    <div id="boardGrid">
       {{ if lt $l 2 }}
-      <div style="display: inline-grid; border-bottom: 2px solid #820404;border-left: 2px solid #820404;border-top: 2px solid #820404;"><span style="font-size: 1.5em;font-weight: bold;">Local boards</span></div>
+      <div id="boardGridHeader"><span style="font-size: 1.5em;font-weight: bold;">Local boards</span></div>
       {{ else if eq $l 2 }}
-      <div style="display: inline-grid; grid-column: 1 / 3; border-bottom: 2px solid #820404;border-left: 2px solid #820404;border-top: 2px solid #820404;"><span style="font-size: 1.5em;font-weight: bold;">Local boards</span></div>
+      <div id="boardGridHeader" style="grid-column: 1 / 3;"><span style="font-size: 1.5em;font-weight: bold;">Local boards</span></div>
       {{ else }}
-      <div style="display: inline-grid;grid-column: 1 / 4;border-bottom: 2px solid #820404;border-left: 2px solid #820404;border-top: 2px solid #820404;"><span style="font-size: 1.5em;font-weight: bold;">Local boards</span></div>
+      <div id="boardGridHeader" style="grid-column: 1 / 4;"><span style="font-size: 1.5em;font-weight: bold;">Local boards</span></div>
       {{ end }}
       {{ range .Boards }}
-      <div style="whitespace: nowrap;display: inline-grid;text-align: left;padding: 5px;border-bottom: 2px solid #820404;border-left: 2px solid #820404;"><a href="{{.Location}}"><b>/{{.Name}}/</b> - {{.PrefName}} {{ if not .Restricted }} [NSFW] {{ end }}</a></div>
+      <div class="boardGridCell"><a href="{{.Location}}"><b>/{{.Name}}/</b> - {{.PrefName}} {{ if not .Restricted }} [NSFW] {{ end }}</a></div>
       {{ end }}
       {{ if gt $l 2 }}
       {{ range .BoardRemainer }}
-      <div style="whitespace: nowrap;display: inline-grid;text-align: left;padding: 5px;border-bottom: 2px solid #820404;border-left: 2px solid #820404;"></div>
+      <div class="boardGridCell"></div>
       {{ end }}
       {{ end }}
     </div>
diff --git a/static/js/posts.js b/static/js/posts.js
index 39808dd..29541c0 100644
--- a/static/js/posts.js
+++ b/static/js/posts.js
@@ -2,14 +2,14 @@ function startNewPost(){
     var el = document.getElementById("newpostbtn");
     el.style="display:none;";
     el.setAttribute("state", "1");
-    document.getElementById("stopTablePost").style="";
     document.getElementById("newpost").style = "";
+    document.getElementById("stopTablePost").style = "display:unset;";
     sessionStorage.setItem("newpostState", true);
 }
 
 function stopNewPost(){
     var el = document.getElementById("newpostbtn");
-    el.style="display:block;";
+    el.style="display:block;margin-bottom:100px;";
     el.setAttribute("state", "0");
     document.getElementById("newpost").style = "display: none;";
     sessionStorage.setItem("newpostState", false);
diff --git a/static/main.html b/static/main.html
index 2b708e9..3e29053 100644
--- a/static/main.html
+++ b/static/main.html
@@ -41,7 +41,11 @@
 
     {{ template "bottom" . }}
 
-    <br>
+    <div align="center" style="width: 500px; margin:0 auto; margin-top: 50px;">
+      <a href="/">[Home]</a><a href="/static/rules.html">[Rules]</a><a href="/static/faq.html">[FAQ]</a>
+      <p>All trademarks and copyrights on this page are owned by their respective parties.</p>
+    </div>
+
     <div style="float: right;">
       Theme:
       <select id="themeSwitcher" onchange="setTheme(this.options[this.selectedIndex].value)">
@@ -52,11 +56,6 @@
       </select>
     </div>
 
-    <div align="center" style="width: 500px; margin:0 auto; margin-top: 50px;">
-      <a href="/">[Home]</a><a href="/static/rules.html">[Rules]</a><a href="/static/faq.html">[FAQ]</a>
-      <p>All trademarks and copyrights on this page are owned by their respective parties.</p>
-    </div>
-
     <script src="/static/js/themes.js"></script>
 {{ template "script" . }}
   </body>