diff --git a/Resources/assets/img/screenshots/archive-iphone-de.png b/Resources/assets/img/screenshots/archive-iphone-de.png index f8f4a2be..cfbf2ff2 100644 Binary files a/Resources/assets/img/screenshots/archive-iphone-de.png and b/Resources/assets/img/screenshots/archive-iphone-de.png differ diff --git a/Resources/assets/img/screenshots/archive-iphone-en.png b/Resources/assets/img/screenshots/archive-iphone-en.png index f6af08a8..55025655 100644 Binary files a/Resources/assets/img/screenshots/archive-iphone-en.png and b/Resources/assets/img/screenshots/archive-iphone-en.png differ diff --git a/Resources/assets/img/screenshots/tagging-mac-de.png b/Resources/assets/img/screenshots/tagging-mac-de.png new file mode 100644 index 00000000..214d8439 Binary files /dev/null and b/Resources/assets/img/screenshots/tagging-mac-de.png differ diff --git a/Resources/assets/img/screenshots/tagging-mac-en.png b/Resources/assets/img/screenshots/tagging-mac-en.png new file mode 100644 index 00000000..f66d6c2c Binary files /dev/null and b/Resources/assets/img/screenshots/tagging-mac-en.png differ diff --git a/Resources/css/styles.css b/Resources/css/styles.css index 71a4b117..3f430445 100644 --- a/Resources/css/styles.css +++ b/Resources/css/styles.css @@ -593,10 +593,10 @@ pre { border: 1px solid var(--rule); border-radius: 1.5rem; padding: clamp(2rem, 5vw, 3.5rem); - display: grid; - grid-template-columns: 1fr 1fr; - gap: clamp(2rem, 5vw, 3.5rem); - align-items: center; +} + +.spotlight-copy { + max-width: 34em; } .spotlight-title { @@ -613,25 +613,46 @@ pre { margin-bottom: 0; } -@media (max-width: 800px) { - .spotlight { - grid-template-columns: 1fr; - } +/* Window and phone standing on one line. At this size the silhouettes carry the section's + claim, not the pixels — so they are sized to be told apart, not to be read. */ +.device-row { + margin-top: clamp(2.5rem, 5vw, 3.5rem); + display: flex; + align-items: flex-end; + justify-content: center; + gap: clamp(1rem, 3vw, 2.25rem); } -/* The screenshot is a bare capture, so the rounding and shadow give it its device edge. - Cropped from the top: the first rows of the archive carry the message. */ -.spotlight-shot { - width: 100%; - max-width: 22rem; - max-height: 30rem; - margin-inline: auto; - object-fit: cover; - object-position: top; - border-radius: 1.5rem; +/* Bare captures: the rounding and the shadow are what give them a device edge. The + aspect ratio holds the box before the image arrives, so the section below cannot jump. */ +.device-shot { + height: auto; box-shadow: 0 30px 60px -30px rgba(20, 28, 39, 0.5); - /* The crop would otherwise cut a row in half; fading it out reads as "the list goes on". */ - mask-image: linear-gradient(to bottom, #000 80%, transparent); +} + +/* The capture carries the window's own squircle corners as alpha, which a circular radius can + never match — so the radius here only shapes the shadow, and the corners come from the file. */ +.device-mac { + width: 58%; + aspect-ratio: 1440 / 900; + border-radius: 1.15rem; +} + +.device-iphone { + width: 18%; + aspect-ratio: 630 / 1368; + border-radius: 1rem; +} + +/* Narrow enough that the pair would shrink out of recognition; they take more of the row. */ +@media (max-width: 700px) { + .device-mac { + width: 66%; + } + + .device-iphone { + width: 21%; + } } /* ---------- Keep it: the arc closes, same filename, at rest ---------- */ diff --git a/Sources/PDFArchiverWebsite/Localization/SiteStrings+English.swift b/Sources/PDFArchiverWebsite/Localization/SiteStrings+English.swift index 32faa06a..3c73aebb 100644 --- a/Sources/PDFArchiverWebsite/Localization/SiteStrings+English.swift +++ b/Sources/PDFArchiverWebsite/Localization/SiteStrings+English.swift @@ -66,8 +66,18 @@ extension SiteStrings { folder. """ ], - spotlightImagePath: "/assets/img/screenshots/archive-iphone-en.png", - spotlightImageAlt: "The PDF Archiver archive on an iPhone, listing documents with their dates and tags", + spotlightShots: [ + Screenshot( + device: "mac", + path: "/assets/img/screenshots/tagging-mac-en.png", + alt: "Tagging a scanned receipt on a Mac: the document beside its date, description and tags" + ), + Screenshot( + device: "iphone", + path: "/assets/img/screenshots/archive-iphone-en.png", + alt: "The same archive on an iPhone, listing documents with their dates and tags" + ) + ], keepTitle: "Keep\u{00A0}it.", keepLead: """ diff --git a/Sources/PDFArchiverWebsite/Localization/SiteStrings+German.swift b/Sources/PDFArchiverWebsite/Localization/SiteStrings+German.swift index 7f2b68ee..2892485c 100644 --- a/Sources/PDFArchiverWebsite/Localization/SiteStrings+German.swift +++ b/Sources/PDFArchiverWebsite/Localization/SiteStrings+German.swift @@ -66,8 +66,18 @@ extension SiteStrings { Download-Ordner. """ ], - spotlightImagePath: "/assets/img/screenshots/archive-iphone-de.png", - spotlightImageAlt: "Das Archiv von PDF Archiver auf einem iPhone, mit Dokumenten samt Datum und Tags", + spotlightShots: [ + Screenshot( + device: "mac", + path: "/assets/img/screenshots/tagging-mac-de.png", + alt: "Ein gescannter Beleg wird am Mac getaggt: das Dokument neben Datum, Beschreibung und Tags" + ), + Screenshot( + device: "iphone", + path: "/assets/img/screenshots/archive-iphone-de.png", + alt: "Dasselbe Archiv auf einem iPhone, mit Dokumenten samt Datum und Tags" + ) + ], keepTitle: "Keep\u{00A0}it.", keepLead: """ diff --git a/Sources/PDFArchiverWebsite/Localization/SiteStrings.swift b/Sources/PDFArchiverWebsite/Localization/SiteStrings.swift index a3b10004..238983f4 100644 --- a/Sources/PDFArchiverWebsite/Localization/SiteStrings.swift +++ b/Sources/PDFArchiverWebsite/Localization/SiteStrings.swift @@ -36,6 +36,14 @@ struct SiteStrings { let body: String } + /// One capture in the spotlight's device row. + struct Screenshot { + /// Names the `.device-` class the stylesheet sizes and rounds the shot by. + let device: String + let path: String + let alt: String + } + struct Testimonial { let initials: String let source: String @@ -72,8 +80,8 @@ struct SiteStrings { let spotlightTitle: String let spotlightBody: [String] - let spotlightImagePath: String - let spotlightImageAlt: String + /// Mac and iPhone, in the order the row puts them in. + let spotlightShots: [Screenshot] let keepTitle: String let keepLead: String diff --git a/Sources/PDFArchiverWebsite/Theme/HomeContent.swift b/Sources/PDFArchiverWebsite/Theme/HomeContent.swift index 119b6d4a..c9051f8e 100644 --- a/Sources/PDFArchiverWebsite/Theme/HomeContent.swift +++ b/Sources/PDFArchiverWebsite/Theme/HomeContent.swift @@ -136,19 +136,21 @@ private extension Node where Context == HTML.BodyContext { .div( .class("spotlight"), .div( + .class("spotlight-copy"), .h3(.class("spotlight-title"), .text(strings.spotlightTitle)), .forEach(strings.spotlightBody) { .p(.text($0)) } ), - .img( - .class("spotlight-shot"), - .src(strings.spotlightImagePath), - .alt(strings.spotlightImageAlt), - // The intrinsic size of the screenshot: it reserves the box before the - // image arrives, so the section below it does not jump. - .attribute(named: "width", value: "1320"), - .attribute(named: "height", value: "2868"), - .attribute(named: "loading", value: "lazy"), - .attribute(named: "decoding", value: "async") + .div( + .class("device-row"), + .forEach(strings.spotlightShots) { shot in + .img( + .class("device-shot device-\(shot.device)"), + .src(shot.path), + .alt(shot.alt), + .attribute(named: "loading", value: "lazy"), + .attribute(named: "decoding", value: "async") + ) + } ) ) )