diff --git a/src/content/posts/generating-full-length-songs-with-yue2-comfyui.md b/src/content/posts/generating-full-length-songs-with-yue2-comfyui.md index aac2dd3..d7d1b13 100644 --- a/src/content/posts/generating-full-length-songs-with-yue2-comfyui.md +++ b/src/content/posts/generating-full-length-songs-with-yue2-comfyui.md @@ -44,25 +44,27 @@ individual 1024×1024 cover art and synchronized scrolling lyrics). .track-grid-pills{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:.35rem;max-height:160px;overflow-y:auto;padding:.4rem;background:rgba(0,0,0,.2);border-radius:8px;border:1px solid var(--border,#3a3f47)} .pill-btn{font-size:.78em;font-weight:600;padding:.3rem .1rem;text-align:center;border-radius:6px;border:1px solid var(--border,#3a3f47);background:var(--surface,#242831);color:var(--muted-foreground,#9ca3af);cursor:pointer;transition:all .12s} .pill-btn:hover{background:rgba(34,197,94,.2);color:var(--accent,#22c55e);border-color:var(--accent,#22c55e)} -.subs-track{margin:2.4rem 0;display:flex;gap:1.5rem;align-items:flex-start;padding:1.2rem;border-radius:12px;background:var(--card,#1e2025);border:1px solid var(--border,#3a3f47);box-shadow:0 4px 16px rgba(0,0,0,.1);transition:border-color .3s,box-shadow .3s,transform .3s} +.subs-track{margin:2.4rem 0;display:flex;gap:1.6rem;align-items:flex-start;padding:1.25rem;border-radius:12px;background:var(--card,#1e2025);border:1px solid var(--border,#3a3f47);box-shadow:0 4px 16px rgba(0,0,0,.1);box-sizing:border-box;width:100%;max-width:100%;overflow:hidden;transition:border-color .3s,box-shadow .3s,transform .3s} .subs-track.is-hidden{display:none!important} .subs-track.track-pulse{border-color:var(--accent,#22c55e);box-shadow:0 0 0 3px rgba(34,197,94,.35),0 8px 30px rgba(34,197,94,.2);transform:scale(1.01)} -.subs-cover{flex:0 0 33.333%;width:33.333%;max-width:280px;min-width:200px;aspect-ratio:1/1;border-radius:10px;overflow:hidden;border:1px solid var(--border,#3a3f47);background:#000} +.subs-cover{flex:0 0 38%;width:38%;max-width:325px;min-width:220px;aspect-ratio:1/1;border-radius:10px;overflow:hidden;border:1px solid var(--border,#3a3f47);background:#000;box-sizing:border-box} .subs-cover img{width:100%;height:100%;object-fit:cover;display:block} -.subs-content{flex:1 1 0;min-width:0} -.subs-content figcaption{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;font-weight:600;margin-bottom:.45rem} -.subs-title{flex:1 1 auto;min-width:0;font-size:1.05em;color:var(--foreground,#f3f4f6)} -.subs-meta{font-weight:400;opacity:.7;font-size:.85em;white-space:nowrap} -.subs-dl{margin-left:auto;flex:0 0 auto;font-size:.8em;font-weight:600;text-decoration:none;border:1px solid var(--accent,#22c55e);border-radius:6px;padding:.16rem .55rem;color:var(--accent,#22c55e);background:transparent;white-space:nowrap} +.subs-content{flex:1 1 0;min-width:0;width:100%;max-width:100%;box-sizing:border-box} +.subs-content figcaption{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.35rem .6rem;margin-bottom:.55rem;width:100%;box-sizing:border-box} +.subs-title{order:1;flex:1 1 auto;min-width:0;font-size:1.08em;font-weight:700;color:var(--foreground,#f3f4f6);line-height:1.35;word-break:break-word;overflow-wrap:break-word} +.subs-dl{order:2;flex:0 0 auto;margin-left:auto;font-size:.8em;font-weight:600;text-decoration:none;border:1px solid var(--accent,#22c55e);border-radius:6px;padding:.18rem .55rem;color:var(--accent,#22c55e);background:transparent;white-space:nowrap;transition:all .15s} .subs-dl:hover{background:rgba(34,197,94,.14)} .subs-dl::before{content:"↓ "} -.subs-content audio{width:100%;margin-top:.2rem} -.subs-box{position:relative;max-height:220px;overflow-y:auto;border:1px solid var(--border,#3a3f47);border-radius:8px;padding:.7rem 1rem;margin-top:.6rem;font-size:.95em;line-height:1.6;background:rgba(0,0,0,.25)} +.subs-meta{order:3;flex:0 0 100%;width:100%;display:block;font-weight:400;opacity:.75;font-size:.85em;line-height:1.45;margin-top:.2rem;white-space:normal;word-break:break-word;overflow-wrap:break-word} +.subs-content audio{width:100%;margin-top:.35rem;box-sizing:border-box} +.subs-box{position:relative;max-height:220px;overflow-y:auto;border:1px solid var(--border,#3a3f47);border-radius:8px;padding:.7rem 1rem;margin-top:.6rem;font-size:.95em;line-height:1.6;background:rgba(0,0,0,.25);box-sizing:border-box} .subs-box p{margin:.18rem 0;opacity:.55;transition:opacity .15s,color .15s} .subs-box p.on{opacity:1;font-weight:600;color:var(--accent,#22c55e)} @media(max-width:680px){ - .subs-track{flex-direction:column;align-items:stretch;gap:1.2rem;padding:1rem} - .subs-cover{flex:none;width:100%;max-width:none;min-width:0;aspect-ratio:1/1;margin:0} + .subs-track{flex-direction:column;align-items:stretch;gap:1.2rem;padding:1rem;margin:1.8rem 0} + .subs-cover{flex:none;width:100%;max-width:100%;min-width:0;aspect-ratio:1/1;margin:0;border-radius:8px} + .subs-content{width:100%;min-width:0} + .subs-title{font-size:1.02em} } @@ -281,13 +283,13 @@ WebP), and hosted on CDN with HTTP 206 range-seeking support.
- The Thimble Under the Moss cover art + The Thimble Under the Moss cover art
01. The Thimble Under the Moss - 3分11秒 (191.1s) · Celtic Folk · 清脆稚气女童声(类似 Cécile Corbel《Arrietty's Song》)|中速轻快(约 105 BPM) MP3 + 3分11秒 (191.1s) · Celtic Folk · 清脆稚气女童声(类似 Cécile Corbel《Arrietty's Song》)|中速轻快(约 105 BPM)