223015c demos: port-grafik baseline-fix, handshake-caption vervollständigt, dingbat raus

slides/223015c/assets/demos/port-highlight.html

@@ -5,18 +5,17 @@
   <title>Port-Highlight</title>
   <style>
     html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
-    body { padding: 28px 40px; display: inline-block; }
+    body { padding: 28px 40px 110px; display: inline-block; }
     .line {
       font-family: ui-monospace, "SF Mono", monospace;
       font-size: 2.2rem;
       color: #1a1a2e;
       display: flex;
-      align-items: center;
+      align-items: baseline;
     }
     .port-wrap {
-      display: inline-flex;
-      flex-direction: column;
-      align-items: center;
+      position: relative;
+      display: inline-block;
       margin-left: 4px;
     }
     .port {
@@ -26,11 +25,20 @@
       border-radius: 4px;
       font-weight: 700;
     }
+    .below {
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-top: 4px;
+    }
     .connector {
       width: 2px;
       height: 18px;
       background: #c2410c;
-      margin-top: 4px;
     }
     .caption-text {
       background: #fed7aa;
@@ -42,16 +50,13 @@
       font-size: 1rem;
       font-family: system-ui, sans-serif;
       margin-top: 2px;
+      white-space: nowrap;
     }
   </style>
 </head>
 <body>
   <div class="line">
-    212.132.79.37:<div class="port-wrap">
-      <span class="port">443</span>
-      <div class="connector"></div>
-      <div class="caption-text">Port 443 = HTTPS</div>
-    </div>
+    212.132.79.37:<span class="port-wrap"><span class="port">443</span><span class="below"><span class="connector"></span><span class="caption-text">Port 443 = HTTPS</span></span></span>
   </div>
 </body>
 </html>