better styling for actions, especially mobile

views/honk.html

@@ -46,6 +46,9 @@ convoy: <a href="/t?c={{ .Convoy }}">{{ .Convoy }}</a>
 {{ end }}
 {{ if .BonkCSRF }}
 <p>
+<details>
+<summary>Actions
+</summary>
 <div>
 {{ if .Honk.Public }}
 <button onclick="bonk(this, '{{ .Honk.XID }}'); return false;"><a href="/bonk">bonk</a></button>
@@ -56,14 +59,15 @@ convoy: <a href="/t?c={{ .Convoy }}">{{ .Convoy }}</a>
 <input type="hidden" name="honk" value="{{ .Honk.XID }}">
 <input type="hidden" name="honker" value="{{ .Honk.Honker }}">
 <input type="hidden" name="convoy" value="{{ .Honk.Convoy }}">
+<button onclick="zonkit(this); return false;"><a href="/zonkit">zonk</a></button>
 <select name="wherefore">
 <option>this honk</option>
 <option>this honker</option>
 <option>this convoy</option>
 </select>
-<button onclick="zonkit(this); return false;"><a href="/zonkit">zonk</a></button>
 </form>
 </div>
+</details>
 <p>
 {{ end }}
 </article>

views/style.css

@@ -59,8 +59,8 @@ main {
 	margin-top 1em;
 	margin-bottom: 1em;
 }
-button, form input[type=submit], select {
-	font-size: 0.8em;
+.info label, button, form input[type=submit], select {
+	font-size: 16px;
 	font-family: monospace;
 	color: #dde;
 	background: #305;
@@ -99,13 +99,6 @@ button a {
 .info input[type=file] {
 	display: none;
 }
-.info label {
-	border: 1px solid #dde;
-	font-size: 0.8em;
-	padding: 0.5em;
-	font-size: 0.8em;
-	background: #305;
-}
 
 .honk {
 	width: 90%;
@@ -180,7 +173,7 @@ img.emu {
 }
 @media screen and (max-width: 740px) {
 	body {
-		font-size: 0.6em;
+		font-size: 12px;
 	}
 	.info textarea {
 		width: 20em;