M views/honk.html → views/honk.html

@@ -21,34 +21,31 @@ {{ end }}
 <img alt="" src="/a?a={{ .Oonker}}">
 </a>
 {{ end }}
-<p>
 {{ if $bonkcsrf }}
 <a class="honkerlink" href="/h?xid={{ .Honker }}" data-xid="{{ .Honker }}">{{ .Username }}</a>
 {{ else }}
 <a href="{{ .Honker }}" rel=noreferrer>{{ .Username }}</a>
 {{ end }}
-<span class="clip"><a href="{{ .URL }}" rel=noreferrer>{{ .What }}</a> <span style="float: right;" title='{{ .Date.Local.Format "02 Jan 2006 15:04" }}' id="honkdate">{{ .DatePretty }}</span> </span>
+<span style="display:inline-block;"><a href="{{ .URL }}" rel=noreferrer>{{ .What }}</a></span>
+<ul class="honkmeta">
+  <li><span title='{{ .Date.Local.Format "02 Jan 2006 15:04" }}' id="honkdate">{{ .DatePretty }}</span>
+  <li><span><a class="convoylink" href="/t?c={{ .Convoy }}">convoy</a></span>
+
 {{ if .Oonker }}
-<br>
-<span class="left1em clip">
+  <li><span>
 {{ if $bonkcsrf }}
-original: <a class="honkerlink" href="/h?xid={{ .Oonker }}" data-xid="{{ .Oonker }}">{{ .Oondle }}</a>
+<a class="honkerlink" href="/h?xid={{ .Oonker }}" data-xid="{{ .Oonker }}">original</a>
 {{ else }}
-original: <a href="{{ .Oonker }}" rel=noreferrer>{{ .Oondle }}</a>
+<a href="{{ .Oonker }}" rel=noreferrer>original</a>
 {{ end }}
-</span>
+  </span></li>
 {{ else }}
 {{ if .RID }}
-<span style="float:right; margin-right: .3em;" class="clip">
-<a href="{{ .RID }}" rel=noreferrer>parent</a>
-·
-</span>
+  <li><span><a href="{{ .RID }}" rel=noreferrer>parent</a></span>
 {{ end }}
 {{ end }}
 {{ if $bonkcsrf }}
-<span style="float:right; margin-right: .3em;" class="clip"><a class="convoylink" href="/t?c={{ .Convoy }}">convoy</a>
-·
-</span>
+</ul>
 {{ end }}
 </header>
 <p>

M views/local.css → views/local.css

@@ -138,8 +138,8 @@ label.button, button, select {
   font-size: 14px;
   font-family: -apple-system, sans-serif;
   color: var(--fg);
-  padding: 0.5em;
-  background: #ddd;
+  padding: 0.2em;
+  background: var(--bg-dark);
   white-space: nowrap;
 }
 
@@ -239,7 +239,6 @@ text-overflow: ellipsis;
   font-size: 0.8em;
   line-height: 1.1;
   margin-top: 1em;
-  height: 64px;
 }
 
 .honk header  .clip a {
@@ -260,10 +259,7 @@ }
 .honk header  p {
   margin-top: 0px;
 }
-.honk .actions button {
-  margin-left: 4em;
-  margin-top: 2em;
-}
+
 .honk .noise {
   line-height: 1.4;
 }
@@ -320,6 +316,28 @@ list-style: none;
   padding-left: 1em;
 }
 
+.honkmeta {
+  display: inline;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.honkmeta li:before {
+  content: '\00B7';
+  padding-right: 5px;
+}
+
+.honkmeta li:last-child:before {
+  content: '';
+}
+
+.honkmeta li {
+  float: right;
+  padding-right: 10px;
+  display: inline-block;
+}
+
 nav {
   float: right;
 }
@@ -367,9 +385,7 @@ @media screen and (max-width: 740px) {
   body {
     font-size: 12px;
   }
-  .honk header {
-    height: 52px;
-  }
+
   .honk header img {
     width: 48px;
     height: 48px;

M views/style.css → views/style.css

@@ -260,10 +260,7 @@ }
 .honk	header	p {
 			margin-top: 0px;
 		}
-.honk	.actions button {
-		margin-left: 4em;
-		margin-top: 2em;
-	}
+
 .honk	.noise {
 		line-height: 1.4;
 	}