feat(ui): text-fit, line-height, and ems against the font size an element ends with

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Orkun ÇAKILKAYA 2026-09-24 21:51:41 +03:00
parent d163bad406
commit 355201f094
16 changed files with 149 additions and 21 deletions

View file

@ -0,0 +1,10 @@
@import "base.lss";
.page { width: 400px }
.chip { width: 100px; font-size: 16px; text-fit: shrink 10px }
.mid { width: 80px }
.lines { width: 60px; font-size: 16px; line-height: 2 }
.tall { line-height: 30px }
.em { padding: 1em; font-size: 20px }
.em2 { padding: 1em }
.page .em2 { font-size: 24px }
.tie { color: #00ff00 }

View file

@ -0,0 +1,4 @@
# Fit.ludic - chips too narrow for their words, lines spaced by line-height, ems read against the
# font size an element ends with, and a sheet's own rule over an imported one of the same weight
component Fit {
}

View file

@ -0,0 +1,10 @@
<div class="page">
<p class="chip long">Photograph the Bells from the signs</p>
<p class="chip">Short</p>
<p class="chip mid">Medium words</p>
<p class="lines">one two three four five six</p>
<p class="tall">a</p>
<div class="em">x</div>
<div class="em2">y</div>
<p class="tie">t</p>
</div>

View file

@ -0,0 +1 @@
.tie { color: #0000ff }