chadtmiller.com/knotless
git that lives in your Atmosphere account
1
10
Review headers keep the name beside the avatar, and fields stop zooming on a phone
web/src/app.css+4−2
| @@ -705,6 +705,8 @@ a.row:hover{background:var(--hover)} | ||
.comment .byline>.mute{min-width:0} | ||
.comment .boxhead>:not(.byline){flex:none} | ||
.comment .boxhead:has(.verdict){flex-wrap:wrap;row-gap:var(--space-1)} | ||
/* Who said it stays beside their avatar: the verdict wraps under them instead. */ | ||
.comment .boxhead:has(.verdict)>.byline{flex-basis:var(--byline-min)} | ||
.comment .prose{padding:var(--space-4) var(--space-5);font-size:var(--text-base)} | ||
.event{display:flex;align-items:center;gap:var(--space-2-5);color:var(--mute);padding:0 var(--pad-x)} | ||
.event .dot{flex-shrink:0;display:inline-grid;place-items:center;width:var(--dot);height:var(--dot);border-radius:50%;background:var(--merged);color:var(--on-solid)} | ||
| @@ -723,7 +725,7 @@ a.row:hover{background:var(--hover)} | ||
:is(input,select).field{height:var(--control);padding-block:0} | ||
select.field{height:var(--control);padding-block:0} | ||
:is(input,select,textarea).field:focus{outline:0;border-color:var(--primary);box-shadow:var(--ring)} | ||
textarea.field{resize:vertical;font-family:var(--font-mono);font-size:var(--text-sm)} | ||
textarea.field{resize:vertical;font-family:var(--font-mono);font-size:var(--text-field-sm)} | ||
.problem{color:var(--danger);font-size:var(--text-sm)} | ||
/* What a name typed for a repository is: a hint, red when it cannot be given. */ | ||
.form .name-check.bad{color:var(--danger)} | ||
| @@ -1288,7 +1290,7 @@ textarea.field{resize:vertical;font-family:var(--font-mono);font-size:var(--text | ||
.row-end .btn{height:var(--control-sm);padding:0 var(--space-2);font-size:var(--text-xs)} | ||
.row-form{flex-basis:100%;max-width:var(--measure)} | ||
.row-form.reviews{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4)} | ||
.row-form.reviews select{width:auto;height:var(--control-sm);min-height:0;font-size:var(--text-sm)} | ||
.row-form.reviews select{width:auto;height:var(--control-sm);min-height:0;font-size:var(--text-field-sm)} | ||
.check{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm)} | ||
.form .check{font-weight:var(--weight-medium)} | ||
/* A choice of one, as a radio pair: each option its name, and who it is for. */ | ||
web/src/tokens.css+5−0
| @@ -156,6 +156,8 @@ | ||
/* What is typed into a field: never under 16px on a phone, where iOS | ||
zooms the page in on a field with smaller text, and leaves it so. */ | ||
--text-field: var(--text-base); | ||
/* A field drawn small, as Markdown is typed: no smaller than --text-field on a phone. */ | ||
--text-field-sm: var(--text-sm); | ||
--leading: 1.55; | ||
--leading-prose: 1.65; | ||
--leading-code: 20px; | ||
| @@ -237,6 +239,8 @@ | ||
--edge-phone: 6px; | ||
/* How far a row that scrolls sideways fades at an edge with more past it. */ | ||
--row-fade: 2rem; | ||
/* The least a comment's byline narrows to before what is beside it wraps. */ | ||
--byline-min: 12rem; | ||
/* How far a list scrolling in a box of its own fades at an edge with more past it: a little, as it scrolls up and down. */ | ||
--list-fade: 0.75rem; | ||
/* The most a repository's first link takes in its header, a longer one cut short; and the widest its list of links opens. */ | ||
| @@ -506,6 +510,7 @@ | ||
@media (max-width: 640px) { | ||
:root { | ||
--text-field: var(--text-lg); | ||
--text-field-sm: var(--text-lg); | ||
} | ||
} | ||