Zayden-Jung/probably-rendering-one-more-pixel-tonight
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Keep mobile navigation close button clear of the logo
PROMPT Docker CI and deployment / verify-and-deploy (push) Successful in 2m18s
Details

Browse Source
This commit is contained in:
Codex Bot
2026-10-24 00:04:16 +08:00
parent f3a470260d
commit c898e41672
2 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Shell.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ const groups=[
export function Shell({children}:{children:ReactNode}){
const router=useRouter();const [open,setOpen]=useState(false);const [query,setQuery]=useState(String(router.query.q||''));
useEffect(()=>setQuery(String(router.query.q||'')),[router.query.q]);
return <div className="app-shell"><button className="mobile-menu icon-button" aria-label="展开导航" onClick={()=>setOpen(!open)}>{open?<X size={22}/>:<Menu size={22}/>}</button>
return <div className="app-shell"><button className="mobile-menu icon-button" aria-label={open?"关闭导航":"展开导航"} aria-expanded={open} onClick={()=>setOpen(!open)}>{open?<X size={22}/>:<Menu size={22}/>}</button>
<aside className={`sidebar ${open?'is-open':''}`}><Link href="/" className="brand" aria-label="PROMPT 首页" onClick={()=>setOpen(false)}><img className="brand-mark" src="/brand-mark.svg" width={40} height={40} alt=""/><strong>PROMPT</strong></Link>
<nav>{groups.map((g,i)=><div className="nav-group" key={i}>{g.label&&<p>{g.label}</p>}{g.items.map(item=>{const active=item.href==='/'?router.asPath.split('?')[0]==='/':router.asPath.split('?')[0].startsWith(item.href);return <Link key={item.href} href={item.href} title={item.label} className={`nav-item ${active?'active':''}`} onClick={()=>setOpen(false)}><item.icon size={24} strokeWidth={active?2.2:1.8}/><span>{item.label}</span></Link>;})}</div>)}</nav>
<div className="sidebar-bottom"><Link href="/library/import" className="import-link"><Upload size={22}/><span>导入素材</span><ArrowUpRight size={17}/></Link></div>
src/styles/globals.css
+1 -1
View File
@@ -4,7 +4,7 @@
@media(min-width:1800px){.main-content{padding-left:35px;padding-right:35px}.doodle-catalog{grid-template-columns:repeat(4,minmax(0,1fr))}.asset-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1200px){.sidebar{width:180px;padding:26px 12px}.main-content{margin-left:180px;padding:0 24px 25px}.brand{gap:7px}.brand strong{font-size:20px}.brand-mark{height:35px;width:35px}.nav-item{font-size:16px;padding:13px 17px;gap:13px}.asset-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.doodle-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-layout{grid-template-columns:minmax(0,1fr) minmax(285px,.8fr)}.detail-info{padding:25px}}
@media(max-width:950px){.sidebar{width:88px;padding:26px 14px}.brand{padding:0;margin:0 auto 30px}.brand strong,.nav-item span,.nav-group>p,.import-link span,.import-link svg:last-child{display:none}.nav-item{justify-content:center;padding:16px 10px;min-height:56px;gap:0}.nav-group{margin-bottom:10px}.import-link{justify-content:center;padding:15px 10px}.main-content{margin-left:88px;padding:0 22px 25px}.detail-layout,.management-grid{grid-template-columns:1fr}.media-stage{height:65vh;min-height:400px}.doodle-layout{grid-template-columns:1fr 260px;gap:20px}.doodle-catalog{gap:16px}.asset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.page-header p{font-size:13px}.sort-label{display:none}.feed-tabs{gap:3px}.feed-tabs a{font-size:14px;padding:11px 14px}}
@media(max-width:650px){.sidebar{transform:translateX(-100%);width:210px;padding:25px 15px;transition:transform .2s}.sidebar.is-open{transform:translateX(0)}.sidebar .brand{margin:0 10px 25px}.sidebar .brand strong,.sidebar .nav-item span,.sidebar .nav-group>p,.sidebar .import-link span{display:block}.sidebar .nav-item,.sidebar .import-link{justify-content:flex-start;gap:15px;padding:13px 18px}.main-content{margin-left:0;padding:0 16px 25px}.global-topbar{height:83px;padding-left:45px;gap:12px;margin-bottom:18px}.global-search{height:46px;padding:0 13px;gap:8px}.global-search>svg{width:20px;flex-shrink:0}.global-search input{font-size:14px}.mobile-menu{display:flex;position:fixed;top:22px;left:12px;z-index:40;border:0;background:white}.nav-scrim{position:fixed;inset:0;background:#0005;z-index:25}.page-header{margin:0 0 24px;align-items:flex-start;flex-direction:column;gap:16px}.page-header h1{font-size:25px}.page-header p{font-size:13px}.feed-tabs a{font-size:14px;padding:10px 14px}.feed-toolbar{margin-bottom:19px}.post-cover{border-radius:14px}.masonry{gap:14px}.post-card h3{font-size:14px;margin:9px 4px 7px}.post-meta{font-size:11px;padding:0 4px}.empty-state p{font-size:13px}.empty-state>small{font-size:11px}.detail-top{margin-top:0;font-size:13px}.detail-layout{border-radius:18px}.media-stage{height:58vh;min-height:300px}.detail-info{padding:23px}.detail-info h1{font-size:21px}.editor-panel{padding:20px;border-radius:20px}.drop-zone{min-height:210px}.drop-zone strong{font-size:15px}.drop-zone>span:last-child{font-size:11px}.form-actions{align-items:flex-start;flex-direction:column}.form-actions button{width:100%}.kind-picker button{padding:11px 18px;font-size:14px}.asset-grid{gap:16px}.asset-preview{height:200px}.asset-tile-info{padding:11px 3px}.asset-tile-info>span{font-size:11px}.asset-tile h3{font-size:13px}.management-grid .surface{padding:23px 18px}.taxonomy-row code{font-size:11px;max-width:45%}.doodle-layout{grid-template-columns:1fr}.doodle-catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.doodle-inspector{position:static}.doodle-card strong{font-size:15px}.doodle-card small{font-size:11px}}
@media(max-width:650px){.sidebar{transform:translateX(-100%);width:210px;padding:25px 15px;transition:transform .2s}.sidebar.is-open{transform:translateX(0)}.sidebar .brand{margin:0 10px 25px}.sidebar .brand strong,.sidebar .nav-item span,.sidebar .nav-group>p,.sidebar .import-link span{display:block}.sidebar .nav-item,.sidebar .import-link{justify-content:flex-start;gap:15px;padding:13px 18px}.main-content{margin-left:0;padding:0 16px 25px}.global-topbar{height:83px;padding-left:45px;gap:12px;margin-bottom:18px}.global-search{height:46px;padding:0 13px;gap:8px}.global-search>svg{width:20px;flex-shrink:0}.global-search input{font-size:14px}.mobile-menu{display:flex;position:fixed;top:22px;left:12px;z-index:40;border:0;background:white}.mobile-menu[aria-expanded="true"]{top:28px;left:169px;padding:4px}.nav-scrim{position:fixed;inset:0;background:#0005;z-index:25}.page-header{margin:0 0 24px;align-items:flex-start;flex-direction:column;gap:16px}.page-header h1{font-size:25px}.page-header p{font-size:13px}.feed-tabs a{font-size:14px;padding:10px 14px}.feed-toolbar{margin-bottom:19px}.post-cover{border-radius:14px}.masonry{gap:14px}.post-card h3{font-size:14px;margin:9px 4px 7px}.post-meta{font-size:11px;padding:0 4px}.empty-state p{font-size:13px}.empty-state>small{font-size:11px}.detail-top{margin-top:0;font-size:13px}.detail-layout{border-radius:18px}.media-stage{height:58vh;min-height:300px}.detail-info{padding:23px}.detail-info h1{font-size:21px}.editor-panel{padding:20px;border-radius:20px}.drop-zone{min-height:210px}.drop-zone strong{font-size:15px}.drop-zone>span:last-child{font-size:11px}.form-actions{align-items:flex-start;flex-direction:column}.form-actions button{width:100%}.kind-picker button{padding:11px 18px;font-size:14px}.asset-grid{gap:16px}.asset-preview{height:200px}.asset-tile-info{padding:11px 3px}.asset-tile-info>span{font-size:11px}.asset-tile h3{font-size:13px}.management-grid .surface{padding:23px 18px}.taxonomy-row code{font-size:11px;max-width:45%}.doodle-layout{grid-template-columns:1fr}.doodle-catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.doodle-inspector{position:static}.doodle-card strong{font-size:15px}.doodle-card small{font-size:11px}}
.media-stage{max-height:760px}
.skill-card{display:grid;grid-template-columns:minmax(220px,380px) 1fr;max-width:1000px;border:1px solid #e9e5df;border-radius:24px;overflow:hidden}.skill-card>div:last-child{padding:42px}.skill-card h2{display:flex;align-items:center;gap:20px;font-size:30px;margin:22px 0 16px}.skill-card p,.skill-doc p,.skill-doc li{color:#736c63;line-height:1.9}.skill-card span:last-child{font-size:14px}.skill-art{background-color:#ede8df;background-image:linear-gradient(45deg,#e3ddd3 25%,transparent 25%),linear-gradient(-45deg,#e3ddd3 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e3ddd3 75%),linear-gradient(-45deg,transparent 75%,#e3ddd3 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;display:grid;place-items:center;padding:28px}.skill-art img{height:340px;object-fit:contain}.skill-doc{max-width:1200px;margin:auto}.skill-hero{display:grid;grid-template-columns:1.5fr 1fr;background:#f7f3eb;border-radius:26px;overflow:hidden}.skill-hero>div:first-child{padding:45px}.skill-hero h1{font-size:clamp(28px,3vw,44px);line-height:1.4;letter-spacing:-1px;margin:24px 0}.skill-hero p{margin-bottom:25px}.skill-doc-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:45px;margin:40px 0}.skill-doc h2{font-size:21px;margin:32px 0 16px}.skill-doc pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#f6f5f2;border:1px solid #e9e5dd;padding:24px;border-radius:16px;line-height:1.8;font-size:13px;color:#51483e}.skill-doc li{padding-left:8px;margin:12px 0}.skill-sidebar{align-self:start;position:sticky;top:112px}.skill-sidebar h2{margin-top:0}.skill-sidebar p{font-size:13px}.skill-sidebar code{display:block;font-size:12px;overflow-wrap:anywhere;margin:16px 0}.skill-sidebar .secondary-button{display:flex;margin:12px 0;padding:12px;font-size:13px}@media(max-width:800px){.skill-doc-grid{grid-template-columns:1fr;gap:10px}.skill-sidebar{position:static}.skill-hero{grid-template-columns:1fr}.skill-hero>div:first-child{padding:28px}.skill-hero .skill-art img{height:260px}.skill-card{grid-template-columns:1fr}.skill-card>div:last-child{padding:26px}}