Scale library type up 50%
Every font size in the library design multiplied by 1.5 — card title and stamp, list title, meta, excerpt and tags, filter tabs, and the prototype's header. Geometry had to follow, or the larger type would have broken the layout it sits in: - The card grid drops from three columns to two. At 16.5pt in a 95pt column a card gets about nine characters per line and every title truncates; the text size is what sets the column count. - Filter tabs grow 30pt -> 42pt tall, the card gains padding and a slightly squarer aspect, and the list's color chip, unread dot and tag chips scale with the text they sit beside. Verified in both layouts against the live server. Suite passes. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JgLHztZGaEHvS3KNeGQmRM
This commit is contained in:
co-authored by
Claude Opus 5
parent
3c7a783b6c
commit
cdbec4aaf8
@@ -27,7 +27,7 @@ struct LibraryListRow: View {
|
||||
HStack(alignment: .top, spacing: 12) {
|
||||
RoundedRectangle(cornerRadius: 3)
|
||||
.fill(item.swatch)
|
||||
.frame(width: 26, height: 34)
|
||||
.frame(width: 34, height: 46)
|
||||
.overlay(alignment: .topLeading) {
|
||||
if bookmark.unread {
|
||||
// Ink, not blue: the palette is the only color the
|
||||
@@ -35,15 +35,15 @@ struct LibraryListRow: View {
|
||||
// the chip it sits on.
|
||||
Circle()
|
||||
.fill(Paper.ink)
|
||||
.frame(width: 7, height: 7)
|
||||
.overlay(Circle().stroke(Paper.sheet, lineWidth: 1.5))
|
||||
.offset(x: -3, y: -3)
|
||||
.frame(width: 10, height: 10)
|
||||
.overlay(Circle().stroke(Paper.sheet, lineWidth: 2))
|
||||
.offset(x: -4, y: -4)
|
||||
}
|
||||
}
|
||||
|
||||
VStack(alignment: .leading, spacing: 5) {
|
||||
Text(item.listDisplay)
|
||||
.font(.system(size: 14, design: .serif))
|
||||
.font(.system(size: 21, design: .serif))
|
||||
.foregroundStyle(Paper.ink)
|
||||
.lineLimit(2)
|
||||
.fixedSize(horizontal: false, vertical: true)
|
||||
@@ -55,13 +55,13 @@ struct LibraryListRow: View {
|
||||
for: bookmark.dateAdded, relativeTo: Date()
|
||||
))
|
||||
}
|
||||
.font(.system(size: 10, design: .monospaced))
|
||||
.font(.system(size: 15, design: .monospaced))
|
||||
.foregroundStyle(Paper.ink.opacity(0.45))
|
||||
.lineLimit(1)
|
||||
|
||||
if let excerpt = rowExcerpt {
|
||||
Text(excerpt.text)
|
||||
.font(.system(size: 12, design: .serif))
|
||||
.font(.system(size: 18, design: .serif))
|
||||
.italic(excerpt.isAI)
|
||||
.foregroundStyle(Paper.ink.opacity(0.6))
|
||||
.lineLimit(2)
|
||||
@@ -80,14 +80,14 @@ struct LibraryListRow: View {
|
||||
onPodcast()
|
||||
} label: {
|
||||
Image(systemName: podcastCached ? "headphones.circle.fill" : "headphones.circle")
|
||||
.font(.system(size: 17, weight: .light))
|
||||
.font(.system(size: 25.5, weight: .light))
|
||||
.foregroundStyle(Paper.ink.opacity(podcastCached ? 0.75 : 0.3))
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
.sensoryFeedback(.impact(weight: .medium), trigger: podcastTapCount)
|
||||
}
|
||||
}
|
||||
.padding(.vertical, 12)
|
||||
.padding(.vertical, 14)
|
||||
.contentShape(Rectangle())
|
||||
.overlay(alignment: .bottom) {
|
||||
if readingProgress > 0.02 {
|
||||
@@ -115,12 +115,12 @@ struct LibraryListRow: View {
|
||||
HStack(spacing: 5) {
|
||||
ForEach(effectiveTags, id: \.self) { tag in
|
||||
Text(tag)
|
||||
.font(.system(size: 10, design: .monospaced))
|
||||
.font(.system(size: 15, design: .monospaced))
|
||||
.foregroundStyle(Paper.ink.opacity(0.55))
|
||||
.padding(.horizontal, 6)
|
||||
.padding(.vertical, 2)
|
||||
.padding(.horizontal, 8)
|
||||
.padding(.vertical, 3)
|
||||
.overlay(
|
||||
RoundedRectangle(cornerRadius: 3)
|
||||
RoundedRectangle(cornerRadius: 4)
|
||||
.stroke(Paper.rule.opacity(0.6), lineWidth: 0.6)
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user