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

@@ -28,7 +28,6 @@ <a href="{{ .Honker }}" rel=noreferrer>{{ .Username }}</a>
 {{ end }}
 <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 }}
@@ -45,6 +44,7 @@ <li><span><a href="{{ .RID }}" rel=noreferrer>parent</a></span>
 {{ end }}
 {{ end }}
 {{ if $bonkcsrf }}
+<li><span title='{{ .Date.Local.Format "02 Jan 2006 15:04" }}' id="honkdate">{{ .DatePretty }}</span>
 </ul>
 {{ end }}
 </header>
@@ -91,7 +91,7 @@ {{ end }}
 {{ if and $bonkcsrf (not $IsPreview) }}
 <p>
 <details class="actions">
-<summary>Actions</summary>
+<summary>actions</summary>
 <div>
 <p>
 {{ if .Honk.Public }}

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

@@ -8,6 +8,11 @@ --fg-limited: #509c93;
   --hl: #c2c2c2;
 }
 
+::selection {
+  background: var(--bg-limited);
+  opacity: 0.3;
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --bg-page: #111;
@@ -29,7 +34,7 @@ background: var(--bg-page);
   color: var(--fg);
   font-size: 14px !important;
   word-wrap: break-word;
-  font-family: -apple-system, sans-serif, "Noto Color Emoji";
+  font-family: -apple-system, "Inter", sans-serif, "Noto Color Emoji";
   line-height: 1.2;
   overscroll-behavior-y: contain;
 }
@@ -59,7 +64,7 @@ background: var(--bg-limited);
 }
 
 form, input, textarea {
-  font-family: -apple-system, sans-serif, "Noto Color Emoji";
+  font-family: -apple-system, "Inter", sans-serif, "Noto Color Emoji";
 }
 p {
   margin-top: 1em;
@@ -141,7 +146,7 @@ font-size: 0.8em;
 }
 label.button, button, select {
   font-size: 14px;
-  font-family: -apple-system, sans-serif;
+  font-family: -apple-system, "Inter", sans-serif, "Noto Color Emoji";
   color: var(--fg);
   padding: 0.2em;
   background: var(--bg-dark);
@@ -149,7 +154,7 @@ white-space: nowrap;
 }
 
 button:hover {
-  background: var(--hl);
+  background: var(--bg-limited);
 }
 
 .buttonarray {
@@ -279,6 +284,10 @@ .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);
 }
@@ -322,24 +331,30 @@ padding-left: 1em;
 }
 
 .honkmeta {
-  display: inline;
+  color: var(--fg-subtle);
+  float: right;
+  display: inline-flex;
   padding: 0;
   margin: 0;
   list-style: none;
 }
 
-.honkmeta li:before {
+.honkmeta a {
+  color: var(--fg-subtle);
+}
+
+.honkmeta li:after {
   content: '\00B7';
-  padding-right: 2.5px;
+  padding-right: 2px;
+  padding-left: 2px;
 }
 
-.honkmeta li:last-child:before {
+.honkmeta li:last-child:after {
   content: '';
 }
 
 .honkmeta li {
-  float: right;
-  padding-right: 5px;
+  padding-left: 2px;
   display: inline-block;
 }
 

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

@@ -347,9 +347,7 @@ @media screen and (max-width: 740px) {
 	body {
 		font-size: 12px;
 	}
-	.honk header {
-		height: 52px;
-	}
+	
 	.honk header img {
 		width: 48px;
 		height: 48px;