fix broken dns tree and port connector, full-bleed handshake and dns-lookup slides, siezen in all demos, first-letter sizing

This commit is contained in:
2026-04-20 12:06:04 +02:00
parent c45ddc779c
commit 0367f07166
17 changed files with 89 additions and 81 deletions

View File

@@ -10,43 +10,48 @@
font-family: ui-monospace, "SF Mono", monospace;
font-size: 2.2rem;
color: #1a1a2e;
display: flex;
align-items: center;
}
.port-wrap {
display: inline-flex;
flex-direction: column;
align-items: center;
margin-left: 4px;
}
.port {
background: #fde68a;
color: #7c2d12;
padding: 2px 8px;
padding: 2px 10px;
border-radius: 4px;
font-weight: 700;
}
.caption {
margin-top: 14px;
font-size: 1rem;
color: #4a4a6a;
padding-left: 210px;
position: relative;
}
.caption::before {
content: "";
position: absolute;
top: -8px;
left: 210px;
.connector {
width: 2px;
height: 10px;
height: 18px;
background: #c2410c;
margin-top: 4px;
}
.caption-text {
background: #fed7aa;
padding: 4px 10px;
padding: 6px 12px;
border-radius: 4px;
border-left: 3px solid #c2410c;
display: inline-block;
border: 2px solid #c2410c;
color: #7c2d12;
font-weight: 600;
font-size: 1rem;
font-family: system-ui, sans-serif;
margin-top: 2px;
}
</style>
</head>
<body>
<div class="line">212.132.79.37:<span class="port">443</span></div>
<div class="caption"><span class="caption-text">Port 443 = HTTPS</span></div>
<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>
</div>
</body>
</html>