more semantics in html

src/main/resources/static/stylesheet.css

@@ -24,10 +24,26 @@ nav {
 
 main {
     .show__meta {
+        font-size: 90%;
+
+        dl {
+            margin: 0;
+
             display: flex;
-        justify-content: space-evenly;
+            justify-content: center;
 
-        font-size: 90%;
+            dd {
+                margin-left: .3rem;
+            }
+
+            dt {
+                margin-left: 3rem;
+            }
+
+            dt:first-of-type {
+                margin: 0;
+            }
+        }
     }
 
     .tag-container {
@@ -40,8 +56,9 @@ main {
     }
 
     .tag-block {
+        border: 1px solid ButtonText;
         border-left: .5rem solid AccentColor;
-        padding-left: .5rem;
+        padding: .2rem .2rem .2rem .5rem;
     }
 
     fieldset {
@@ -49,7 +66,7 @@ main {
         margin-bottom: 1rem;
     }
 
-    .low-key-hint {
+    .low-key-hint, dt {
         color: #717171;
     }
 

src/main/resources/templates/show.html

@@ -16,18 +16,16 @@
             <fieldset class="show__meta">
                 <legend>meta</legend>
 
-                <span>
+                <dl>
-                    <span class="low-key-hint">id:</span>
+                    <dt>id:</dt>
-                    <th:block th:text="${document.id}"/>
+                    <dd th:text="${document.id}"></dd>
-                </span>
+
-                <span>
+                    <dt>erstellt:</dt>
-                    <span class="low-key-hint">erstellt:</span>
+                    <dd th:text="${#temporals.format(document.createdAt, 'yyyy-MM-dd HH:mm')}"></dd>
-                    <th:block th:text="${#temporals.format(document.createdAt, 'yyyy-MM-dd HH:mm')}"/>
+
-                </span>
+                    <dt>aktualisiert:</dt>
-                <span>
+                    <dd th:text="${#temporals.format(document.updatedAt, 'yyyy-MM-dd HH:mm')}"></dd>
-                    <span class="low-key-hint">aktualisiert:</span>
+                </dl>
-                    <th:block th:text="${#temporals.format(document.updatedAt, 'yyyy-MM-dd HH:mm')}"/>
-                </span>
             </fieldset>
 
             <fieldset class="show__tags">