rework some of the front end styles for consistency

views/account.html

@@ -1,16 +1,15 @@
 {{ template "header.html" . }}
 <main>
 <div class="info">
-<p>account
+<p>account - <a href="/logout?CSRF={{ .LogoutCSRF }}">logout</a>
-<p><a href="/logout?CSRF={{ .LogoutCSRF }}">logout</a></p>
 <div>
 <form id="aboutform" action="/saveuser" method="POST">
-<p>about
 <input type="hidden" name="CSRF" value="{{ .UserCSRF }}">
+<p>about me:
 <p><textarea name="whatabout">{{ .User.About }}</textarea>
 <p><span><label for="skinny">skinny layout:</label>
 <input tabindex=1 type="checkbox" id="skinny" name="skinny" value="skinny" {{ if .User.SkinnyCSS }}checked{{ end }}><span></span></span>
-<p><input type="submit" value="update">
+<p><button>update settings</button>
 </form>
 </div>
 <div>
@@ -19,7 +18,7 @@
 <p>change password
 <p><input tabindex=1 type="password" name="oldpass"> - oldpass
 <p><input tabindex=1 type="password" name="newpass"> - newpass
-<p><input type="submit" value="update">
+<p><button>change</button>
 </form>
 </div>
 </main>

views/header.html

@@ -18,8 +18,9 @@
 {{ if .UserInfo }}
 <details id="topmenu">
 <summary>menu</summary>
-<p>
 <ul>
+<li><a id="homelink" href="/">home</a>
+<li><a id="atmelink" href="/atme">@me</a>
 <li><a id="firstlink" href="/first">first</a>
 <li><a href="/{{ .UserSep }}/{{ .UserInfo.Username }}">{{ .UserInfo.Username }}</a>
 <li><a href="/honkers">honkers</a>
@@ -45,9 +46,7 @@
 </form>
 </ul>
 </details>
-<p>
+<p></p>
-<span><a id="homelink" href="/">home</a></span>
-<span><a id="atmelink" href="/atme">@me</a></span>
 {{ else }}
 <span><a id="homelink" href="/">home</a></span>
 <span><a href="/about">about</a></span>

views/honkform.html

@@ -1,10 +1,9 @@
 <p id="honkformhost">
 <button onclick="showhonkform(); return false"><a href="/newhonk">it's honking time</a></button>
 <form id="honkform" action="/honk" method="POST" enctype="multipart/form-data" style="display: none">
-<p>
-in reply to: <input type="text" name="rid" id="ridinput" value="{{ .InReplyTo }}" autocomplete=off>
 <input type="hidden" name="CSRF" value="{{ .HonkCSRF }}">
 <input type="hidden" name="updatexid" value = "{{ .UpdateXID }}">
+<input type="hidden" name="rid" id="ridinput" value="{{ .InReplyTo }}">
 <p>
 <label id="donker">attach: {{ if .SavedFile }} {{ .SavedFile }} {{ else }} <input onchange="updatedonker();" type="file" name="donk"><span></span> {{ end }}</label>
 <input type="hidden" name="donkxid" value="{{ .SavedFile }}">
@@ -20,6 +19,6 @@ description: <input type="text" name="donkdesc" value="{{ .DonkDesc }}" autocomp
 <p>
 <textarea name="noise" id="honknoise">{{ .Noise }}</textarea>
 <p>
-<input type="submit" value="it's gonna be honked">
+<button>it's gonna be honked</button>
-<input type="submit" name="preview" value="preview">
+<button name="preview" value="preview">preview</button>
 </form>

views/honkpage.js

@@ -183,7 +183,7 @@ function showhonkform(elem, rid, hname) {
 	form.style = "display: block"
 	if (elem) {
 		form.remove()
-		elem.parentElement.insertAdjacentElement('beforebegin', form)
+		elem.parentElement.parentElement.parentElement.insertAdjacentElement('beforebegin', form)
 	} else {
 		elem = document.getElementById("honkformhost")
 		elem.insertAdjacentElement('afterend', form)

views/login.html

@@ -5,7 +5,7 @@
 	<p><span class="title">login</span>
 	<p><input tabindex=1 type="text" name="username" autocomplete=off> - username
 	<p><input tabindex=1 type="password" name="password"> - password
-	<p><input tabindex=1 type="submit" name="login" value="login">
+	<p><button tabindex=1 name="login" value="login">login</button>
 </form>
 </div>
 </main>

views/style.css

@@ -46,24 +46,32 @@ body > header {
 	margin: 1em auto;
 	font-size: 1.5em;
 }
-body > header p {
-	margin-left: 4em;
-}
 body > header span {
 	margin-left: 2em;
 }
+body > header p {
+	padding: 1em;
+}
 header > details {
 	background: $bg-page;
-	padding: 1em;
+	padding: 1em 1em 1em 1em;
 	position: fixed;
 	top: 0;
+	left: 0;
 	display: inline;
-	max-height: 100%;
+	max-height: calc(100% - 1em);
 	overflow: auto;
+	opacity: 0.7;
 }
 header > details[open] {
+	padding: 1em 1em 0em 1em;
 	background: $bg-dark;
 	border: 1px solid $fg;
+	margin-bottom: 1em;
+	opacity: 1.0;
+}
+header > details ul {
+	margin-left: -1em;
 }
 header > details li {
 	margin: 1em 0em 1em 0em;
@@ -83,7 +91,7 @@ main {
 	margin-top: 1em;
 	margin-bottom: 1em;
 }
-label, button, form input[type=submit], select {
+label, button, select {
 	font-size: 16px;
 	font-family: monospace;
 	color: $fg;
@@ -165,7 +173,7 @@ input[type=file] {
 .honk header p {
 	margin-top: 0px;
 }
-.honk button {
+.honk .actions button {
 	margin-left: 4em;
 	margin-top: 2em;
 }