mirror of
https://github.com/phantomptr/ps5upload.git
synced 2026-10-19 02:20:02 -05:00
phantomptrandClaude Opus 5.5
76baa41e16
site/ is a static page in the app's own look (light and dark, the app's screenshots): features, downloads for every platform with the visitor's system first, the Docker command, news from the release notes, community links. It reads the releases from GitHub's API live, falling back on site/releases.json (scripts/site-releases.mjs), which the pages workflow rewrites on every deploy: after each publish run, on release edits (promoting a pre-release), on changes to site/, and daily. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Ub1mez9eaVtTF8pMEFXvA9
538 lines
11 KiB
CSS
538 lines
11 KiB
CSS
/* PS5Upload website. The app's look (client/src/index.css): a calm neutral page, white or
|
|
* graphite cards a step off it, one blue accent, the system typeface. Light and dark follow
|
|
* the visitor's system; the header button overrides it (data-theme on <html>). */
|
|
|
|
:root {
|
|
color-scheme: light;
|
|
--bg: #f5f5f7;
|
|
--card: #ffffff;
|
|
--card-2: rgb(0 0 0 / 0.03);
|
|
--line: rgb(0 0 0 / 0.1);
|
|
--line-strong: rgb(0 0 0 / 0.18);
|
|
--text: #1d1d1f;
|
|
--muted: #5f5f66;
|
|
--accent: #0064d2;
|
|
--accent-fill: #0071e3;
|
|
--accent-soft: rgb(0 113 227 / 0.1);
|
|
--good: #1a7f43;
|
|
--warn: #8a5200;
|
|
--shadow: 0 1px 2px rgb(0 0 0 / 0.05);
|
|
--shadow-big: 0 30px 80px -30px rgb(0 0 0 / 0.35), 0 0 0 0.5px rgb(0 0 0 / 0.1);
|
|
--radius: 14px;
|
|
--radius-big: 20px;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme="light"]) {
|
|
color-scheme: dark;
|
|
--bg: #1e1e20;
|
|
--card: #2a2a2c;
|
|
--card-2: rgb(255 255 255 / 0.04);
|
|
--line: rgb(255 255 255 / 0.1);
|
|
--line-strong: rgb(255 255 255 / 0.2);
|
|
--text: #f5f5f7;
|
|
--muted: #a1a1a8;
|
|
--accent: #4da3ff;
|
|
--accent-fill: #0a72e8;
|
|
--accent-soft: rgb(10 132 255 / 0.16);
|
|
--good: #32d074;
|
|
--warn: #ffb340;
|
|
--shadow: 0 1px 2px rgb(0 0 0 / 0.25);
|
|
--shadow-big: 0 30px 80px -30px rgb(0 0 0 / 0.8), 0 0 0 0.5px rgb(255 255 255 / 0.08);
|
|
}
|
|
}
|
|
:root[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
--bg: #1e1e20;
|
|
--card: #2a2a2c;
|
|
--card-2: rgb(255 255 255 / 0.04);
|
|
--line: rgb(255 255 255 / 0.1);
|
|
--line-strong: rgb(255 255 255 / 0.2);
|
|
--text: #f5f5f7;
|
|
--muted: #a1a1a8;
|
|
--accent: #4da3ff;
|
|
--accent-fill: #0a72e8;
|
|
--accent-soft: rgb(10 132 255 / 0.16);
|
|
--good: #32d074;
|
|
--warn: #ffb340;
|
|
--shadow: 0 1px 2px rgb(0 0 0 / 0.25);
|
|
--shadow-big: 0 30px 80px -30px rgb(0 0 0 / 0.8), 0 0 0 0.5px rgb(255 255 255 / 0.08);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
html {
|
|
scroll-behavior: smooth;
|
|
scroll-padding-top: 80px;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font: 16px/1.55 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans",
|
|
Helvetica, Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
a {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
border-radius: 6px;
|
|
}
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.1;
|
|
margin: 0;
|
|
}
|
|
code {
|
|
font: 0.85em ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
|
|
background: var(--card-2);
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
padding: 0.1em 0.4em;
|
|
}
|
|
.muted {
|
|
color: var(--muted);
|
|
}
|
|
.skip {
|
|
position: absolute;
|
|
left: -999px;
|
|
}
|
|
.skip:focus {
|
|
left: 16px;
|
|
top: 12px;
|
|
z-index: 10;
|
|
background: var(--card);
|
|
padding: 8px 12px;
|
|
border-radius: 10px;
|
|
}
|
|
.wrap {
|
|
width: min(1180px, 100% - 32px);
|
|
margin-inline: auto;
|
|
}
|
|
|
|
/* ── Header ─────────────────────────────────────────────────────────────── */
|
|
.top {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 5;
|
|
background: color-mix(in srgb, var(--bg) 82%, transparent);
|
|
-webkit-backdrop-filter: blur(20px) saturate(1.4);
|
|
backdrop-filter: blur(20px) saturate(1.4);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.top-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
height: 60px;
|
|
}
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
color: var(--text);
|
|
font-weight: 650;
|
|
font-size: 18px;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.brand:hover {
|
|
text-decoration: none;
|
|
}
|
|
.brand img {
|
|
border-radius: 9px;
|
|
}
|
|
.nav {
|
|
display: flex;
|
|
gap: 4px;
|
|
margin-inline-start: auto;
|
|
}
|
|
.nav a {
|
|
color: var(--text);
|
|
padding: 6px 12px;
|
|
border-radius: 999px;
|
|
font-size: 15px;
|
|
}
|
|
.nav a:hover {
|
|
background: var(--card-2);
|
|
text-decoration: none;
|
|
}
|
|
.top-actions {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
.icon-btn {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--line);
|
|
background: var(--card);
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
}
|
|
.icon-btn svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
/* ── Buttons ────────────────────────────────────────────────────────────── */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: 44px;
|
|
padding: 0 20px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--line-strong);
|
|
background: var(--card);
|
|
color: var(--text);
|
|
font: inherit;
|
|
font-weight: 550;
|
|
cursor: pointer;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.btn:hover {
|
|
text-decoration: none;
|
|
background: var(--card-2);
|
|
}
|
|
.btn svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
.btn.primary {
|
|
background: var(--accent-fill);
|
|
border-color: transparent;
|
|
color: #fff;
|
|
}
|
|
.btn.primary:hover {
|
|
filter: brightness(1.08);
|
|
}
|
|
.btn.small {
|
|
min-height: 34px;
|
|
padding: 0 14px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* ── Hero ───────────────────────────────────────────────────────────────── */
|
|
.hero {
|
|
display: grid;
|
|
gap: 40px;
|
|
padding: 72px 0 32px;
|
|
text-align: center;
|
|
}
|
|
.eyebrow {
|
|
display: inline-block;
|
|
margin: 0 0 16px;
|
|
padding: 4px 12px;
|
|
border-radius: 999px;
|
|
background: var(--accent-soft);
|
|
color: var(--accent);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
.hero h1 {
|
|
font-size: clamp(40px, 7vw, 76px);
|
|
font-weight: 750;
|
|
letter-spacing: -0.04em;
|
|
}
|
|
.lead {
|
|
max-width: 680px;
|
|
margin: 20px auto 0;
|
|
font-size: clamp(17px, 2vw, 21px);
|
|
color: var(--muted);
|
|
}
|
|
.hero-cta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
margin-top: 28px;
|
|
}
|
|
.fine {
|
|
margin: 14px 0 0;
|
|
font-size: 14px;
|
|
color: var(--muted);
|
|
}
|
|
.shot {
|
|
margin: 0;
|
|
}
|
|
.shot img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: var(--radius-big);
|
|
box-shadow: var(--shadow-big);
|
|
}
|
|
.shot figcaption {
|
|
margin-top: 14px;
|
|
color: var(--muted);
|
|
font-size: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* ── Sections ───────────────────────────────────────────────────────────── */
|
|
.section {
|
|
padding: 64px 0 8px;
|
|
}
|
|
.section h2 {
|
|
font-size: clamp(28px, 4vw, 40px);
|
|
font-weight: 700;
|
|
}
|
|
.section-lead {
|
|
margin: 10px 0 0;
|
|
color: var(--muted);
|
|
font-size: 18px;
|
|
}
|
|
.section-head {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
.grid {
|
|
display: grid;
|
|
gap: 16px;
|
|
margin-top: 28px;
|
|
}
|
|
.features {
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
}
|
|
.screens {
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
gap: 32px;
|
|
margin-top: 0;
|
|
}
|
|
.card {
|
|
background: var(--card);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
padding: 22px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.card h3 {
|
|
font-size: 18px;
|
|
font-weight: 650;
|
|
}
|
|
.card p {
|
|
margin: 8px 0 0;
|
|
color: var(--muted);
|
|
font-size: 15px;
|
|
}
|
|
.ico {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 42px;
|
|
height: 42px;
|
|
margin-bottom: 14px;
|
|
border-radius: 12px;
|
|
background: var(--accent-soft);
|
|
color: var(--accent);
|
|
}
|
|
.ico svg {
|
|
width: 21px;
|
|
height: 21px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
/* ── Downloads ──────────────────────────────────────────────────────────── */
|
|
.downloads {
|
|
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
|
}
|
|
.dl {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
.dl.mine {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 3px var(--accent-soft);
|
|
}
|
|
.dl-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.dl-head .tag {
|
|
margin-inline-start: auto;
|
|
}
|
|
.dl-files {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
.dl-file {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 10px 12px;
|
|
border-radius: 10px;
|
|
background: var(--card-2);
|
|
border: 1px solid var(--line);
|
|
color: var(--text);
|
|
font-size: 15px;
|
|
}
|
|
.dl-file:hover {
|
|
border-color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
.dl-file small {
|
|
color: var(--muted);
|
|
white-space: nowrap;
|
|
}
|
|
.tag {
|
|
display: inline-block;
|
|
padding: 2px 10px;
|
|
border-radius: 999px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
background: var(--accent-soft);
|
|
color: var(--accent);
|
|
white-space: nowrap;
|
|
}
|
|
.tag.pre {
|
|
background: color-mix(in srgb, var(--warn) 16%, transparent);
|
|
color: var(--warn);
|
|
}
|
|
.docker {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
margin-top: 16px;
|
|
}
|
|
.copy {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
.copy code {
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
padding: 8px 12px;
|
|
max-width: 640px;
|
|
}
|
|
.more {
|
|
margin-top: 16px;
|
|
color: var(--muted);
|
|
}
|
|
.more summary {
|
|
cursor: pointer;
|
|
}
|
|
.extras {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
/* ── News ───────────────────────────────────────────────────────────────── */
|
|
.news {
|
|
display: grid;
|
|
gap: 16px;
|
|
margin-top: 28px;
|
|
}
|
|
.post-head {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.post-head h3 {
|
|
font-size: 22px;
|
|
}
|
|
.post-head time {
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
}
|
|
.post-body {
|
|
margin-top: 10px;
|
|
color: var(--text);
|
|
font-size: 15px;
|
|
}
|
|
.post-body p {
|
|
color: var(--text);
|
|
}
|
|
.post-body ul {
|
|
margin: 10px 0 0;
|
|
padding-inline-start: 20px;
|
|
}
|
|
.post-body li {
|
|
margin: 4px 0;
|
|
color: var(--muted);
|
|
}
|
|
.post-body li strong {
|
|
color: var(--text);
|
|
}
|
|
.post-more {
|
|
display: inline-block;
|
|
margin-top: 10px;
|
|
font-size: 15px;
|
|
}
|
|
.older {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* ── Community, footer ──────────────────────────────────────────────────── */
|
|
.community {
|
|
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
|
}
|
|
.link-card {
|
|
color: var(--text);
|
|
}
|
|
.link-card:hover {
|
|
text-decoration: none;
|
|
border-color: var(--accent);
|
|
}
|
|
.foot {
|
|
margin-top: 72px;
|
|
padding: 28px 0 40px;
|
|
border-top: 1px solid var(--line);
|
|
font-size: 14px;
|
|
}
|
|
.foot-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.nav {
|
|
display: none;
|
|
}
|
|
.top-actions {
|
|
margin-inline-start: auto;
|
|
}
|
|
.hero {
|
|
padding-top: 40px;
|
|
}
|
|
.docker {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
.copy code {
|
|
flex: 1;
|
|
}
|
|
}
|