more about-dicking

web/source/css/_media-wrapper.css

@@ -59,6 +59,7 @@
 			height: 100%;
 			width: 100%;
 			overflow: hidden;
+			z-index: 1;
 
 			display: grid;
 			padding: 1rem;

web/source/css/status.css

@@ -260,6 +260,7 @@
 
 			.stats-grouping {
 				column-gap: 1rem;
+				row-gap: 0.25rem;
 			}
 
 			.stats-item {
@@ -360,10 +361,20 @@
 				}
 			}
 
-			.stats-item.published-at dd time.dt-published {
+			.stats-item.published-at dd a {
+				time.dt-published {
 					text-decoration: underline;
 				}
 
+				&:focus-visible {
+					outline: 0;
+					time.dt-published {
+						outline: $link-focus-outline;
+						outline-offset: -0.25rem;
+					}
+				}
+			}
+
 			.stats-item:not(.published-at):not(.edit-timeline) {
 				user-select: none;
 			}

web/template/status_info.tmpl

@@ -39,7 +39,33 @@
 
 {{- with . }}
 <div class="status-stats">
-    <dl class="stats-grouping">
+    <dl class="stats-grouping text-cutoff">
+        <div class="stats-item published-at text-cutoff">
+            <dt class="sr-only">Published</dt>
+            <dd class="text-cutoff">
+                {{- if .Local }}
+                <a
+                    href="{{- .URL -}}"
+                    class="u-url text-cutoff"
+                    data-nosnippet
+                    title="Open thread at this post"
+                >
+                    <time class="dt-published text-cutoff" datetime="{{- .CreatedAt -}}">{{- .CreatedAt | timestampPrecise -}}</time>{{- if .EditedAt }}*{{- end }}
+                </a>
+                {{- else }}
+                <a
+                    href="{{- .URL -}}"
+                    class="u-url text-cutoff"
+                    data-nosnippet
+                    rel="nofollow noreferrer noopener" target="_blank"
+                    title="Open remote post (opens in a new window)"
+                >
+                    <time class="dt-published text-cutoff" datetime="{{- .CreatedAt -}}">{{- .CreatedAt | timestampPrecise -}}</time>{{- if .EditedAt }}*{{- end }}
+                </a>
+                {{- end }}
+            </dd>
+        </div>
+        <div class="stats-grouping">
             <div class="stats-item visibility-level" title="{{- template "visibility_title" . -}}">
                 <dt class="sr-only">Visibility</dt>
                 <dd>
@@ -47,31 +73,6 @@
                     <span class="sr-only">{{- template "visibility_title" . -}}</span>
                 </dd>
             </div>
-        <div class="stats-item published-at text-cutoff">
-            <dt class="sr-only">Published</dt>
-            <dd>
-                {{- if .Local }}
-                <a
-                    href="{{- .URL -}}"
-                    class="u-url"
-                    data-nosnippet
-                    title="Open thread at this post"
-                >
-                    <time class="dt-published" datetime="{{- .CreatedAt -}}">{{- .CreatedAt | timestampPrecise -}}</time>{{- if .EditedAt }}*{{- end }}
-                </a>
-                {{- else }}
-                <a
-                    href="{{- .URL -}}"
-                    class="u-url"
-                    data-nosnippet
-                    rel="nofollow noreferrer noopener" target="_blank"
-                    title="Open remote post (opens in a new window)"
-                >
-                    <time class="dt-published" datetime="{{- .CreatedAt -}}">{{- .CreatedAt | timestampPrecise -}}</time>{{- if .EditedAt }}*{{- end }}
-                </a>
-                {{- end }}
-            </dd>
-        </div>
             {{- if .Pinned }}
             <div class="stats-item" title="Pinned">
                 <dt>
@@ -82,6 +83,17 @@
             </div>
             {{- else }}
             {{- end }}
+            {{- if .RepliesCount }}
+            <div class="stats-item" title="Replies">
+                <dt>
+                    <span class="sr-only">Replies</span>
+                    <i class="fa fa-reply-all" aria-hidden="true"></i>
+                </dt>
+                <dd>{{- .RepliesCount -}}</dd>
+            </div>
+            {{- else }}
+            {{- end }}
+        </div>
     </dl>
     <details class="stats-more-info" name="stats-more-info">
         <summary title="More info">
@@ -105,6 +117,7 @@
                 </div>
                 {{- else }}
                 {{- end }}
+                {{- if not .RepliesCount }}
                 <div class="stats-item" title="Replies">
                     <dt>
                         <span class="sr-only">Replies</span>
@@ -112,6 +125,8 @@
                     </dt>
                     <dd>{{- .RepliesCount -}}</dd>
                 </div>
+                {{- else }}
+                {{- end }}
                 <div class="stats-item" title="Faves">
                     <dt>
                         <span class="sr-only">Favourites</span>