@@ -10,7 +10,7 @@ <style>
       {{ .UserStyle }}
     </style>
     <link href="/icon.png" rel="icon">
-    <meta name="theme-color" media="(prefers-color-scheme: light) "content="#f4f4f4">
+    <meta name="theme-color" media="(prefers-color-scheme: light) "content="#F5EFFF">
     <meta name="theme-color" media="(prefers-color-scheme: dark) "content="#111111">
     <meta name="viewport" content="width=device-width">
   </head>
@@ -59,9 +59,6 @@ </details>
           <li><a href="/help/honk.1.html">help</a>
         </ul>
       </details>
-      <div id="topspacer">
-        <p>
-      </div>
       {{ else }}
       <div id="topmenu">
         <span><a id="homelink" href="/">home</a></span>

@@ -26,9 +26,11 @@ <a class="honkerlink" href="/h?xid={{ .Honker }}" data-xid="{{ .Honker }}">{{ .Username }}</a>
 {{ else }}
 <a href="{{ .Honker }}" rel=noreferrer>{{ .Username }}</a>
 {{ end }}
+{{ if $bonkcsrf }}
 <span style="display:inline-block;"><a href="{{ .URL }}" rel=noreferrer>{{ .What }}</a></span>
 <ul class="honkmeta">
   <li><span><a class="convoylink" href="/t?c={{ .Convoy }}">convoy</a></span>
+{{ end }}
 
 {{ if .Oonker }}
   <li><span>

@@ -52,4 +52,20 @@ <p class="buttonarray">
 <button>post!</button>
 <button name="preview" value="preview">preview</button>
 <button type=button name="cancel" value="cancel" onclick="cancelhonking()">cancel</button>
+
+  <details>
+    <summary>emus</summary>
+    <div id="emupicker">
+      {{ range .Emus }}
+      <img class="emu" alt=":{{.}}:" onclick="addemu(':{{.}}:');" src="/emu/{{ . }}.png">
+        {{ end }}
+    </div>
+  </details>
+</form>
+<script>
+function addemu(data){
+  const box = document.getElementById("honknoise");
+  box.value += data;
+}
+</script>
 </form>

@@ -14,6 +14,7 @@ <script>
 var csrftoken = {{ .HonkCSRF }}
 var honksforpage = { }
 var curpagestate = { name: "{{ .PageName }}", arg : "{{ .PageArg }}" }
+console.log(curpagestate)
 var tophid = { }
 tophid[curpagestate.name + ":" + curpagestate.arg] = "{{ .TopHID }}"
 var servermsgs = { }

@@ -1,433 +0,0 @@ 
-:root {
-  --bg-page: #f4f4f4;
-  --bg-dark: #eee;
-  --bg-limited: #ddd;
-  --fg: #000;
-  --fg-subtle: #666;
-  --fg-limited: #509c93;
-  --hl: #c2c2c2;
-}
-
-::selection {
-  background: var(--fg-limited);
-  color: white;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg-page: #111;
-    --bg-dark: #222;
-    --fg: #ccc;
-    --hl: #333;
-    --fg-subtle: #ccc;
-    --fg-limited: #509c93;
-    --bg-limited: #333;
-  }
-}
-
-* {
-  font-size: 14px !important;
-}
-
-body {
-  background: var(--bg-page);
-  color: var(--fg);
-  font-size: 14px !important;
-  word-wrap: break-word;
-  font-family: -apple-system, "Inter", sans-serif, "Noto Color Emoji";
-  line-height: 1.2;
-  overscroll-behavior-y: contain;
-}
-pre, code {
-  white-space: pre-wrap;
-}
-blockquote {
-  margin-left: 0em;
-  margin-bottom: 0em;
-  padding-left: 0.5em;
-  border-left: 1px solid var(--fg-subtle);
-}
-cite {
-  margin-left: 2em;
-}
-table {
-  display: block;
-  max-width: 100%;
-  overflow-x: auto;
-}
-a {
-  color: var(--fg);
-}
-
-a:hover {
-  background: var(--bg-limited);
-}
-
-form, input, textarea {
-  font-family: -apple-system, "Inter", sans-serif, "Noto Color Emoji";
-}
-p {
-  margin-top: 1em;
-  margin-bottom: 1em;
-}
-input {
-  background: var(--bg-page);
-  color: var(--fg);
-  font-size: 1.0em;
-  line-height: 1.2em;
-  padding: 0.4em;
-}
-#honkform input {
-  font-size: 0.8em;
-}
-body > header {
-  max-width: 655px;
-  margin: 1em auto;
-  font-size: 1.5em;
-}
-body > header span {
-  margin-left: 2em;
-}
-body > header p {
-  padding: 1em;
-}
-header > details {
-  background: var(--bg-page);
-  padding: 1em 1em 1em 1em;
-  position: fixed;
-  top: 0;
-  left: 0;
-  display: inline;
-  max-height: calc(100% - 1em);
-  overflow: auto;
-  opacity: 0.7;
-  overscroll-behavior: contain;
-  z-index: 2;
-}
-header > details[open] {
-  padding: 1em 1em 0em 1em;
-  background: var(--bg-dark);
-  border: 1px solid var(--hl);
-  margin-bottom: 1em;
-  opacity: 1.0;
-}
-header > details summary span {
-  display: none;
-}
-header > details[open] summary span {
-  display: inline;
-}
-header > details li {
-  margin: 1em 0em 1em 0em;
-}
-details summary {
-  cursor: pointer;
-}
-main {
-  max-width: 655px;
-  margin: auto;
-  font-size: 1.5em;
-}
-hr {
-  border-color: var(--hl);
-}
-.info {
-  background: var(--bg-dark);
-  border: 1px solid var(--bg-dark);
-  margin-bottom: 1em;
-  padding: 0em 1em 0em 1em;
-}
-.info div {
-  margin-top: 1em;
-  margin-bottom: 1em;
-}
-label {
-  font-size: 0.8em;
-}
-label.button, button, select {
-  font-size: 14px;
-  font-family: -apple-system, "Inter", sans-serif, "Noto Color Emoji";
-  color: var(--fg);
-  padding: 0.2em;
-  background: var(--bg-dark);
-  white-space: nowrap;
-}
-
-button:hover {
-  background: var(--bg-limited);
-}
-
-.buttonarray {
-  margin-top: -2.0em;
-}
-.buttonarray button, .buttonarray > span {
-  margin-top: 2.0em;
-  display: inline-block;
-}
-button a {
-  text-decoration: none;
-}
-button {
-  cursor: pointer;
-}
-form {
-  margin-top: 1em;
-}
-textarea {
-  padding: 0.5em;
-  font-size: 1em;
-  background: var(--bg-page);
-  color: var(--fg);
-  width: 600px;
-  height: 4em;
-  margin-bottom: 0.5em;
-  box-sizing: border-box;
-  max-width: 100%;
-}
-textarea#honknoise {
-  height: 10em;
-}
-input[type="checkbox"] {
-  position: fixed;
-  top: -9999px;
-}
-input[type="checkbox"] + span:after {
-  content: "no";
-}
-input[type="checkbox"]:checked + span:after {
-  content: "yes";
-}
-input[type="checkbox"]:focus + span:after {
-  outline: 1px solid var(--fg);
-}
-input[type=file] {
-  display: none;
-}
-
-.glow {
-  box-shadow: 0px 0px 16px var(--hl);
-}
-
-.honk {
-  margin: auto;
-  background: var(--bg-dark);
-  border: 0px solid var(--hl);
-  margin-bottom: 1em;
-  border-radius: 0em !important;
-  padding-left: 1em;
-  padding-right: 1em;
-  padding-top: 0;
-  overflow: hidden;
-}
-
-.chat {
-  border-bottom: 0.5px solid var(--fg-subtle);
-  padding-left: 1em;
-}
-.chat p {
-  margin-top: 0.2em;
-  margin-bottom: 0.2em;
-}
-.chattarget {
-  border-bottom: 1px solid var(--fg-subtle);
-}
-.chatstamp {
-  margin-left: -1em;
-}
-
-.honk #honkform {
-  padding: 1em;
-  border: 1px solid var(--fg);
-}
-.honk a {
-  color: var(--fg);
-}
-.honk header {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 0.8em;
-  line-height: 1.1;
-  margin-top: 1em;
-}
-
-.honk header  .clip a {
-  color: var(--fg-subtle);
-}
-
-.clip {
-  text-transform: lowercase;
-}
-
-.honk header img {
-  float: left;
-  margin-right: 1em;
-  border-radius: 10%;
-  width: 64px;
-  height: 64px;
-}
-.honk header  p {
-  margin-top: 0px;
-}
-
-.honk .noise {
-  line-height: 1.4;
-}
-
-.honk .noise  code .kw { font-weight: bold; }
-.honk .noise  code .bi { font-weight: bold; }
-.honk .noise  code .st { color: var(--fg-subtle); }
-.honk .noise  code .nm { color: #ba88ff; }
-.honk .noise  code .op { color: #ba88ff; }
-.honk .noise  code .tp { font-weight: bold; }
-.honk .noise  code .cm { color: var(--fg-subtle); font-style: italic; }
-.honk .noise  code .al { color: #aaffbb; }
-.honk .noise  code .dl { color: #ffaabb; }
-
-summary::marker {
-  content: '\2192';
-}
-
-.honk details.actions summary {
-  color: var(--fg-subtle);
-}
-.subtle .noise {
-  color: var(--fg-subtle);
-  font-size: 0.8em;
-}
-.subtle .noise a {
-  color: var(--fg-subtle);
-}
-.limited {
-  background: var(--bg-limited);
-  border: 0px solid var(--fg-limited);
-  color: var(--fg-subtle);
-}
-.limited  .glow {
-  box-shadow: 0px 0px 16px var(--fg-limited);
-}
-.limited  .noise {
-  color: var(--fg-subtle);
-}
-.limited  .noise a {
-  color: var(--fg-limited);
-}
-.limited  details.actions summary {
-  color: var(--fg-limited);
-}
-details.noise[open] summary {
-  display: none;
-}
-h1, h2 {
-  font-size: 1.2em;
-}
-h3, h4 {
-  font-size: 1.1em;
-}
-
-#topmenu ul {
-  list-style: none;
-  padding-left: 1em;
-}
-
-.honkmeta {
-  color: var(--fg-subtle);
-  float: right;
-  display: inline-flex;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-.honkmeta a {
-  color: var(--fg-subtle);
-}
-
-.honkmeta li:after {
-  content: '\00B7';
-  padding-right: 2px;
-  padding-left: 2px;
-}
-
-.honkmeta li:last-child:after {
-  content: '';
-}
-
-.honkmeta li {
-  padding-left: 2px;
-  display: inline-block;
-}
-
-nav {
-  float: right;
-}
-
-nav ul {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  padding-bottom: 20px;
-}
-
-nav ul li {
-  padding-right: 10px;
-  display: inline-block;
-}
-
-img:not(.emu) {
-  background: var(--bg-page);
-}
-img, video {
-  max-width: 100%;
-  max-height: 600px;
-}
-.noise img:not(.emu) {
-  display: block;
-}
-img.emu {
-  width: 2em;
-  height: 2em;
-  vertical-align: middle;
-  margin: -2px;
-  object-fit: contain;
-}
-.nophone {
-  position: fixed;
-  opacity: 0.7;
-  cursor: pointer;
-}
-@media screen and (max-width: 1360px) {
-  .nophone {
-    display: none;
-  }
-}
-@media screen and (max-width: 740px) {
-  body {
-    font-size: 12px;
-  }
-
-  main {
-    margin: 0 -0.6rem;
-  }
-
-  .honk header img {
-    width: 48px;
-    height: 48px;
-    border-radius: 10%;
-  }
-  details summary {
-    outline: none;
-  }
-}
-@media print {
-  #topmenu, #topspacer, #infobox, #refreshbox, .actions {
-    display: none;
-  }
-  html {
-    --bg-page: white;
-    --bg-dark: white;
-    --fg: black;
-    --fg-subtle: black;
-    --fg-limited: #a79;
-  }
-}

@@ -1,337 +1,445 @@ 
-html {
-	--bg-page: #306;
-	--bg-dark: #002;
-	--fg: #dcf;
-	--hl: #dcf;
-	--fg-subtle: #a9c;
-	--fg-limited: #a79;
+:root {
+  --bg-page: #F5EFFF;
+  --bg-dark: #E5D9F2;
+  --bg-limited: #CDC1FF;
+  --fg: #02013C;
+  --fg-subtle: #3A37FB;
+  --fg-limited: #E5D9F2;
+  --hl: #CDC1FF;
+}
+
+::selection {
+  background: var(--fg-limited);
+  color: white;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-page: #111;
+    --bg-dark: #222;
+    --fg: #ccc;
+    --hl: #333;
+    --fg-subtle: #ccc;
+    --fg-limited: #509c93;
+    --bg-limited: #333;
+  }
+}
+
+* {
+  font-size: 14px !important;
 }
 
 body {
-	background: var(--bg-page);
-	color: var(--fg);
-	font-size: 1em;
-	word-wrap: break-word;
-	font-family: sans-serif, "Noto Color Emoji";
-	line-height: 1.2;
-	overscroll-behavior-y: contain;
+  padding: 0px;
+  margin: 0px;
+  background: var(--bg-page);
+  color: var(--fg);
+  font-size: 14px !important;
+  word-wrap: break-word;
+  font-family: -apple-system, "Inter", sans-serif, "Noto Color Emoji";
+  line-height: 1.2;
+  overscroll-behavior-y: contain;
 }
 pre, code {
-	white-space: pre-wrap;
+  white-space: pre-wrap;
 }
 blockquote {
-	margin-left: 0em;
-	margin-bottom: 0em;
-	padding-left: 0.5em;
-	border-left: 1px solid var(--fg-subtle);
+  margin-left: 0em;
+  margin-bottom: 0em;
+  padding-left: 0.5em;
+  border-left: 1px solid var(--fg-subtle);
 }
 cite {
-	margin-left: 2em;
+  margin-left: 2em;
 }
 table {
-	display: block;
-	max-width: 100%;
-	overflow-x: auto;
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
 }
 a {
-	color: var(--fg);
+  color: var(--fg);
+}
+
+a:hover {
+  background: var(--bg-limited);
 }
+
 form, input, textarea {
-	font-family: monospace, "Noto Color Emoji";
+  font-family: -apple-system, "Inter", sans-serif, "Noto Color Emoji";
 }
 p {
-	margin-top: 1em;
-	margin-bottom: 1em;
+  margin-top: 1em;
+  margin-bottom: 1em;
 }
 input {
-	background: var(--bg-page);
-	color: var(--fg);
-	font-size: 1.0em;
-	line-height: 1.2em;
-	padding: 0.4em;
+  background: var(--bg-page);
+  color: var(--fg);
+  font-size: 1.0em;
+  line-height: 1.2em;
+  padding: 0.4em;
 }
 #honkform input {
-	font-size: 0.8em;
+  font-size: 0.8em;
 }
 body > header {
-	margin: 1em auto;
-	font-size: 1.5em;
+  max-width: 100%;
+  margin: 0px;
+  padding: 1em 0em 2em 0em;
+  font-size: 1.5em;
+  color: white !important;
 }
 body > header span {
-	margin-left: 2em;
+  margin-left: 2em;
 }
-body > header p {
-	padding: 1em;
+
+header > a {
+  text-decoration: none !important;
 }
+
 header > details {
-	background: var(--bg-page);
-	padding: 1em 1em 1em 1em;
-	position: fixed;
-	top: 0;
-	left: 0;
-	display: inline;
-	max-height: calc(100% - 1em);
-	overflow: auto;
-	opacity: 0.7;
-	overscroll-behavior: contain;
-	z-index: 2;
+  padding: 1em 1em 1em 1em;
+  color: var(--fg);
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: inline;
+  max-height: calc(100% - 1em);
+  overflow: auto;
+  opacity: 1;
+  overscroll-behavior: contain;
+  z-index: 2;
 }
 header > details[open] {
-	padding: 1em 1em 0em 1em;
-	background: var(--bg-dark);
-	border: 1px solid var(--hl);
-	margin-bottom: 1em;
-	opacity: 1.0;
+  padding: 1em 1em 0em 1em;
+  background: var(--bg-dark);
+  margin-bottom: 1em;
+  opacity: 1.0;
 }
 header > details summary span {
-	display: none;
+  display: none;
 }
 header > details[open] summary span {
-	display: inline;
+  display: inline;
 }
 header > details li {
-	margin: 1em 0em 1em 0em;
+  margin: 1em 0em 1em 0em;
 }
 details summary {
-	cursor: pointer;
+  cursor: pointer;
 }
 main {
-	max-width: 1200px;
-	margin: auto;
-	font-size: 1.5em;
+  max-width: 655px;
+  margin: auto;
+  font-size: 1.5em;
 }
 hr {
-	border-color: var(--hl);
+  border-color: var(--hl);
 }
 .info {
-	background: var(--bg-dark);
-	border: 1px solid var(--hl);
-	margin-bottom: 1em;
-	padding: 0em 1em 0em 1em;
+  background: var(--bg-dark);
+  border: 1px solid var(--bg-dark);
+  margin-bottom: 1em;
+  padding: 0em 1em 0em 1em;
+  margin-top: 1em;
 }
 .info div {
-	margin-top: 1em;
-	margin-bottom: 1em;
+  margin-top: 1em;
+  margin-bottom: 1em;
 }
 label {
-	font-size: 0.8em;
+  font-size: 0.8em;
 }
 label.button, button, select {
-	font-size: 16px;
-	font-family: monospace;
-	color: var(--fg);
-	background: var(--bg-page);
-	border: 1px solid var(--hl);
-	padding: 0.5em;
-	white-space: nowrap;
+  border: 1px solid var(--hl);
+  font-size: 14px;
+  font-family: -apple-system, "Inter", sans-serif, "Noto Color Emoji";
+  color: var(--fg);
+  padding: 0.2em;
+  background: var(--bg-dark);
+  white-space: nowrap;
+}
+
+button:hover {
+  background: var(--bg-limited);
 }
+
 .buttonarray {
-	margin-top: -2.0em;
+  margin-top: -2.0em;
 }
 .buttonarray button, .buttonarray > span {
-	margin-top: 2.0em;
-	display: inline-block;
+  margin-top: 2.0em;
+  display: inline-block;
 }
 button a {
-	text-decoration: none;
+  text-decoration: none;
 }
 button {
-	cursor: pointer;
+  cursor: pointer;
 }
 form {
-	margin-top: 1em;
+  margin-top: 1em;
 }
 textarea {
-	padding: 0.5em;
-	font-size: 1em;
-	background: var(--bg-page);
-	color: var(--fg);
-	width: 600px;
-	height: 4em;
-	margin-bottom: 0.5em;
-	box-sizing: border-box;
-	max-width: 100%;
+  padding: 0.5em;
+  font-size: 1em;
+  background: var(--bg-page);
+  color: var(--fg);
+  width: 600px;
+  height: 4em;
+  margin-bottom: 0.5em;
+  box-sizing: border-box;
+  max-width: 100%;
 }
 textarea#honknoise {
-	height: 10em;
+  height: 10em;
 }
 input[type="checkbox"] {
-	position: fixed;
-	top: -9999px;
+  position: fixed;
+  top: -9999px;
 }
 input[type="checkbox"] + span:after {
-	content: "no";
+  content: "no";
 }
 input[type="checkbox"]:checked + span:after {
-	content: "yes";
+  content: "yes";
 }
 input[type="checkbox"]:focus + span:after {
-	outline: 1px solid var(--fg);
+  outline: 1px solid var(--fg);
 }
 input[type=file] {
-	display: none;
+  display: none;
 }
 
 .glow {
-	box-shadow: 0px 0px 16px var(--hl);
+  box-shadow: 0px 0px 16px var(--hl);
 }
 
 .honk {
-	margin: auto;
-	background: var(--bg-dark);
-	border: 1px solid var(--hl);
-	border-radius: 1em;
-	margin-bottom: 1em;
-	padding-left: 1em;
-	padding-right: 1em;
-	padding-top: 0;
-	overflow: hidden;
+  margin: auto;
+  background: var(--bg-dark);
+  border: 0px solid var(--hl);
+  margin-bottom: 1em;
+  border-radius: 0em !important;
+  padding-left: 1em;
+  padding-right: 1em;
+  padding-top: 0;
+  overflow: hidden;
 }
 
 .chat {
-	border-bottom: 0.5px solid var(--fg-subtle);
-	padding-left: 1em;
+  border-bottom: 0.5px solid var(--fg-subtle);
+  padding-left: 1em;
 }
 .chat p {
-	margin-top: 0.2em;
-	margin-bottom: 0.2em;
+  margin-top: 0.2em;
+  margin-bottom: 0.2em;
 }
 .chattarget {
-	border-bottom: 1px solid var(--fg-subtle);
+  border-bottom: 1px solid var(--fg-subtle);
 }
 .chatstamp {
-	margin-left: -1em;
+  margin-left: -1em;
 }
 
-.honk	#honkform {
-		padding: 1em;
-		border: 1px solid var(--fg);
-	}
-.honk	a {
-		color: var(--fg);
-	}
-.honk	header {
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		font-size: 0.8em;
-		line-height: 1.1;
-		margin-top: 1em;
-		height: 64px;
-	}
+.honk #honkform {
+  padding: 1em;
+  border: 1px solid var(--fg);
+}
+.honk a {
+  color: var(--fg);
+}
+.honk header {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 0.8em;
+  line-height: 1.1;
+  margin-top: 1em;
+}
+
+.honk header  .clip a {
+  color: var(--fg-subtle);
+}
+
+.clip {
+  text-transform: lowercase;
+}
+
+.honk header img {
+  float: left;
+  margin-right: 1em;
+  border-radius: 10%;
+  width: 64px;
+  height: 64px;
+}
+.honk header  p {
+  margin-top: 0px;
+}
 
-.honk	header	.clip a {
-			color: var(--fg-subtle);
-		}
-.honk	header	img {
-			float: left;
-			margin-right: 1em;
-			width: 64px;
-			height: 64px;
-		}
-.honk	header	p {
-			margin-top: 0px;
-		}
+.honk .noise {
+  line-height: 1.4;
+}
 
-.honk	.noise {
-		line-height: 1.4;
-	}
+.honk .noise  code .kw { font-weight: bold; }
+.honk .noise  code .bi { font-weight: bold; }
+.honk .noise  code .st { color: var(--fg-subtle); }
+.honk .noise  code .nm { color: #ba88ff; }
+.honk .noise  code .op { color: #ba88ff; }
+.honk .noise  code .tp { font-weight: bold; }
+.honk .noise  code .cm { color: var(--fg-subtle); font-style: italic; }
+.honk .noise  code .al { color: #aaffbb; }
+.honk .noise  code .dl { color: #ffaabb; }
 
-.honk	.noise	code .kw { font-weight: bold; }
-.honk	.noise	code .bi { font-weight: bold; }
-.honk	.noise	code .st { color: var(--fg-subtle); }
-.honk	.noise	code .nm { color: #ba88ff; }
-.honk	.noise	code .op { color: #ba88ff; }
-.honk	.noise	code .tp { font-weight: bold; }
-.honk	.noise	code .cm { color: var(--fg-subtle); font-style: italic; }
-.honk	.noise	code .al { color: #aaffbb; }
-.honk	.noise	code .dl { color: #ffaabb; }
+summary::marker {
+  content: '\2192';
+}
 
-.honk	details.actions summary {
-		color: var(--fg-subtle);
+.honk details.actions summary {
+  color: var(--fg-subtle);
 }
 .subtle .noise {
-		color: var(--fg-subtle);
-		font-size: 0.8em;
+  color: var(--fg-subtle);
+  font-size: 0.8em;
 }
 .subtle .noise a {
-		color: var(--fg-subtle);
+  color: var(--fg-subtle);
 }
 .limited {
-	border: 1px solid var(--fg-limited);
-	color: var(--fg-limited);
+  background: var(--bg-limited);
+  border: 0px solid var(--fg-limited);
+  color: var(--fg-subtle);
+}
+.limited  .glow {
+  box-shadow: 0px 0px 16px var(--fg-limited);
+}
+.limited  .noise {
+  color: var(--fg-subtle);
 }
-.limited	.glow {
-		box-shadow: 0px 0px 16px var(--fg-limited);
+.limited  .noise a {
+  color: var(--fg-limited);
+}
+.limited  details.actions summary {
+  color: var(--fg-limited);
 }
-.limited	.noise {
-		color: var(--fg-limited);
-	}
-.limited	.noise a {
-		color: var(--fg-limited);
-	}
-.limited	details.actions summary {
-		color: var(--fg-limited);
-	}
 details.noise[open] summary {
-	display: none;
+  display: none;
 }
 h1, h2 {
-	font-size: 1.2em;
+  font-size: 1.2em;
 }
 h3, h4 {
-	font-size: 1.1em;
+  font-size: 1.1em;
+}
+
+#topmenu ul {
+  list-style: none;
+  padding-left: 1em;
+}
+
+.honkmeta {
+  color: var(--fg-subtle);
+  float: right;
+  display: inline-flex;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.honkmeta a {
+  color: var(--fg-subtle);
+}
+
+.honkmeta li:after {
+  content: '\00B7';
+  padding-right: 2px;
+  padding-left: 2px;
+}
+
+.honkmeta li:last-child:after {
+  content: '';
+}
+
+.honkmeta li {
+  padding-left: 2px;
+  display: inline-block;
+}
+
+nav {
+  float: right;
+  max-width: 100%;
+}
+
+nav ul {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  padding-bottom: 20px;
+}
+
+nav ul li {
+  padding-right: 10px;
+  display: inline-block;
 }
 
 img:not(.emu) {
-	background: var(--bg-page);
+  background: var(--bg-page);
 }
 img, video {
-	max-width: 100%;
-	max-height: 600px;
+  max-width: 100%;
+  max-height: 600px;
 }
 .noise img:not(.emu) {
-	display: block;
+  display: block;
 }
 img.emu {
-	width: 2em;
-	height: 2em;
-	vertical-align: middle;
-	margin: -2px;
-	object-fit: contain;
+  width: 2em;
+  height: 2em;
+  vertical-align: middle;
+  margin: -2px;
+  object-fit: contain;
 }
 .nophone {
-	position: fixed;
-	opacity: 0.7;
-	cursor: pointer;
+  position: fixed;
+  opacity: 0.7;
+  cursor: pointer;
 }
+
+#emupicker{height:300px;overflow-y:scroll;padding:3px;background:var(--bg-dark);border:solid 1px var(--fg-subtle);text-align:center;}
+#emupicker img{margin:0;}
+
 @media screen and (max-width: 1360px) {
-	.nophone {
-		display: none;
-	}
+  .nophone {
+    display: none;
+  }
 }
 @media screen and (max-width: 740px) {
-	body {
-		font-size: 12px;
-	}
-	
-	.honk header img {
-		width: 48px;
-		height: 48px;
-	}
-	details summary {
-		outline: none;
-	}
+  body {
+    font-size: 12px;
+  }
+
+  main {
+    margin: 0 -0.6rem;
+  }
+
+  .honk header img {
+    width: 48px;
+    height: 48px;
+    border-radius: 10%;
+  }
+  details summary {
+    outline: none;
+  }
 }
 @media print {
-	#topmenu, #topspacer, #infobox, #refreshbox, .actions {
-		display: none;
-	}
-	html {
-		--bg-page: white;
-		--bg-dark: white;
-		--fg: black;
-		--fg-subtle: black;
-		--fg-limited: #a79;
-	}
+  #topmenu, #topspacer, #infobox, #refreshbox, .actions {
+    display: none;
+  }
+  html {
+    --bg-page: white;
+    --bg-dark: white;
+    --fg: black;
+    --fg-subtle: black;
+    --fg-limited: #a79;
+  }
 }

@@ -1075,6 +1075,18 @@ honkpage(w, u, honks, templinfo)
 }
 
 func honkpage(w http.ResponseWriter, u *login.UserInfo, honks []*Honk, templinfo map[string]interface{}) {
+	var emunames []string
+	dir, err := os.Open(dataDir + "/emus")
+	if err == nil {
+		emunames, _ = dir.Readdirnames(0)
+		dir.Close()
+	}
+	for i, e := range emunames {
+		if len(e) > 4 {
+			emunames[i] = e[:len(e)-4]
+		}
+	}
+	templinfo["Emus"] = emunames
 	var userid int64 = -1
 	if u != nil {
 		userid = u.UserID
@@ -1093,7 +1105,7 @@ }
 	if u == nil && !develMode {
 		w.Header().Set("Cache-Control", "max-age=60")
 	}
-	err := readviews.Execute(w, "honkpage.html", templinfo)
+	err = readviews.Execute(w, "honkpage.html", templinfo)
 	if err != nil {
 		elog.Print(err)
 	}