Andreas Reinhold / reiniandClaude Opus 5
606cc766f2
website/ is hand-written HTML and CSS, uploaded as it is, like the MailifySMS site: SealShare as software a company installs for its own upload platform, how it works, features, a desktop/phone and light/dark gallery of the generated screenshots, a dated and sourced comparison with hosted transfer services and self-hosted tools, the Docker quick start, FAQ and a privacy page for Plausible. Colours come from the app's scheme, Google Sans Flex is served locally, nothing else loads from other hosts. The README shows three screenshots and no longer calls the encryption end-to-end. WebsiteTest guards missing files, other hosts, the screenshot set and the encryption wording. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
116 lines
2.7 KiB
CSS
116 lines
2.7 KiB
CSS
/*
|
||
* Device frames drawn around SealShare's screenshots: a laptop for the desktop captures
|
||
* (1512 × 982, a MacBook 14 viewport) and a phone for the phone captures (393 × 852, an iPhone 15
|
||
* Pro viewport). The screen keeps the capture's aspect ratio, so the frame holds its shape while an
|
||
* image loads. The screenshots come from `composer screenshots` (tests/Screenshots/).
|
||
*
|
||
* <div class="device device--laptop">
|
||
* <div class="device__screen"><picture>…<img …></picture></div>
|
||
* </div>
|
||
*/
|
||
|
||
.device {
|
||
--bezel: #1b1530;
|
||
--bezel-edge: #3a3355;
|
||
--deck: #c9c2dd;
|
||
--deck-shadow: #8f88a8;
|
||
|
||
position: relative;
|
||
width: 100%;
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
.device {
|
||
--bezel: #05020f;
|
||
--bezel-edge: #2a2244;
|
||
--deck: #4b426a;
|
||
--deck-shadow: #231649;
|
||
}
|
||
}
|
||
|
||
.device__screen {
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: var(--surface-container-high, #e8deff);
|
||
}
|
||
|
||
.device__screen img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
object-position: top center;
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- laptop */
|
||
|
||
.device--laptop {
|
||
padding-bottom: 3.2%;
|
||
margin-inline: 4%;
|
||
width: auto;
|
||
}
|
||
|
||
.device--laptop .device__lid {
|
||
position: relative;
|
||
padding: 2.4% 2.4% 3%;
|
||
border-radius: 3.2% 3.2% 0 0 / 4.8% 4.8% 0 0;
|
||
background: var(--bezel);
|
||
box-shadow: inset 0 0 0 1px var(--bezel-edge), 0 24px 48px -24px rgb(16 6 45 / 0.45);
|
||
}
|
||
|
||
.device--laptop .device__screen {
|
||
aspect-ratio: 1512 / 982;
|
||
border-radius: 0.6%;
|
||
}
|
||
|
||
/* The camera notch at the top of the lid. */
|
||
.device--laptop .device__lid::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0.9%;
|
||
left: 50%;
|
||
width: 1%;
|
||
aspect-ratio: 1;
|
||
border-radius: 50%;
|
||
background: var(--bezel-edge);
|
||
translate: -50% 0;
|
||
}
|
||
|
||
/* The deck: wider than the lid, with a thumb recess in the middle. */
|
||
.device--laptop::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: -4%;
|
||
right: -4%;
|
||
bottom: 0;
|
||
height: 3.2%;
|
||
border-radius: 0 0 40% 40% / 0 0 100% 100%;
|
||
background: linear-gradient(var(--deck), var(--deck-shadow));
|
||
}
|
||
|
||
.device--laptop::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 1.8%;
|
||
z-index: 1;
|
||
width: 14%;
|
||
height: 1.4%;
|
||
border-radius: 0 0 12px 12px;
|
||
background: var(--deck-shadow);
|
||
translate: -50% 0;
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- phone */
|
||
|
||
.device--phone {
|
||
padding: 3.4%;
|
||
border-radius: 15% / 7%;
|
||
background: var(--bezel);
|
||
box-shadow: inset 0 0 0 2px var(--bezel-edge), 0 24px 48px -20px rgb(16 6 45 / 0.5);
|
||
}
|
||
|
||
.device--phone .device__screen {
|
||
aspect-ratio: 393 / 852;
|
||
border-radius: 12.5% / 5.8%;
|
||
}
|