gsadmin/KoalaSync
1
0
Fork 0
mirror of https://github.com/Shik3i/KoalaSync.git synced 2026-07-26 12:08:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(website): keep hero demo hint readable

Browse Source
This commit is contained in:
Timo
2026-07-08 20:22:20 +02:00
parent 7718885511
commit 5b7ee654e4
2 changed files with 29 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/style.css
+19 -11
View File
@@ -3840,9 +3840,8 @@ header[id] {
}
/* Fixed height that already fits the open popup, so toggling it never changes
layout (the vertically centered hero never jumps). The caption is absolutely
positioned right under the cards instead of after the tall scene, and the
empty lower area is the invisible room the popup drops into.
layout (the vertically centered hero never jumps). The empty lower area is
the invisible room the popup drops into.
Do not move .hero-mockup-wrapper down to align the headline and demo tops:
the extension popup is bottom-anchored inside this scene, so moving the whole
@@ -3854,6 +3853,12 @@ header[id] {
height: max(calc(59cqw + 100px), 548px);
}
.demo-tab-stack {
position: relative;
width: 100%;
height: calc(59cqw + 100px + var(--demo-content-y));
}
@media (min-width: 1025px) {
.hero-demo-scene {
/* Balance the demo inside the visible hero area below the fixed navbar.
@@ -4392,17 +4397,12 @@ header[id] {
}
/* Caption below the scene */
/* Caption sits absolutely right below the card cascade (matching the cards'
bottom edge, which scales with the container width), so the tall scene that
reserves popup room does not push it far away. */
.demo-hint {
position: absolute;
left: 0;
right: 0;
top: calc(59cqw + 82px);
margin: 0;
margin: 0.75rem auto 0;
max-width: min(100%, 34rem);
text-align: center;
font-size: 0.82rem;
line-height: 1.45;
color: var(--text-muted);
opacity: 0;
transition: opacity 0.6s;
@@ -4420,6 +4420,7 @@ header[id] {
}
.demo-tab-card,
.demo-tab-stack,
.demo-sync-chip,
.demo-cursor,
.demo-hint {
@@ -5134,6 +5135,7 @@ html.theme-light .mobile-demo-close:hover {
.mobile-demo-stage .hero-mockup-wrapper {
display: flex !important;
position: relative;
width: min(100%, 560px);
margin: 0 auto;
will-change: transform;
@@ -5175,6 +5177,12 @@ html.theme-light .mobile-demo-close:hover {
margin: 0 auto;
}
.mobile-demo-stage .demo-tab-stack {
display: block !important;
position: static !important;
height: auto !important;
}
.mobile-demo-stage .demo-tab-card {
display: block !important;
}
website/template.html
+10 -8
View File
@@ -325,13 +325,14 @@
<!-- Interactive Live Demo: two synced video tabs + the extension popup -->
<div class="hero-mockup-wrapper">
<div class="hero-demo-scene popup-open connected" id="hero-demo">
<button class="demo-sync-chip" id="demo-sync-chip" type="button" title="Live sync status of the two demo tabs">
<span class="demo-chip-dot" aria-hidden="true"></span>
<span class="demo-chip-label-sync">{{DEMO_SYNC}}</span>
<span class="demo-chip-event"></span>
</button>
<div class="demo-tab-stack">
<button class="demo-sync-chip" id="demo-sync-chip" type="button" title="Live sync status of the two demo tabs">
<span class="demo-chip-dot" aria-hidden="true"></span>
<span class="demo-chip-label-sync">{{DEMO_SYNC}}</span>
<span class="demo-chip-event"></span>
</button>
<div class="demo-tab-card demo-tab-a" id="demo-tab-a" role="button" tabindex="0" aria-pressed="false" aria-label="Press play or pause as 🐱 ChillCat. KoalaSync mirrors it to the other tab" title="Press play/pause here. KoalaSync mirrors it to the other tab">
<div class="demo-tab-card demo-tab-a" id="demo-tab-a" role="button" tabindex="0" aria-pressed="false" aria-label="Press play or pause as 🐱 ChillCat. KoalaSync mirrors it to the other tab" title="Press play/pause here. KoalaSync mirrors it to the other tab">
<div class="demo-tab-titlebar">
<span class="demo-tab-dots" aria-hidden="true"><i></i><i></i><i></i></span>
<span class="demo-tab-title"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="11" height="11" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg> <span class="demo-title-text-ep1">Stranger Things - S4E1</span></span>
@@ -388,7 +389,7 @@
</div>
</div>
<div class="demo-tab-card demo-tab-b" id="demo-tab-b" role="button" tabindex="0" aria-pressed="false" aria-label="Press play or pause as 🐶 HappyDog. KoalaSync mirrors it to the other tab" title="Press play/pause here. KoalaSync mirrors it to the other tab">
<div class="demo-tab-card demo-tab-b" id="demo-tab-b" role="button" tabindex="0" aria-pressed="false" aria-label="Press play or pause as 🐶 HappyDog. KoalaSync mirrors it to the other tab" title="Press play/pause here. KoalaSync mirrors it to the other tab">
<div class="demo-tab-titlebar">
<span class="demo-tab-dots" aria-hidden="true"><i></i><i></i><i></i></span>
<span class="demo-tab-title"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="11" height="11" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg> <span class="demo-title-text-ep1">Stranger Things - S4E1</span></span>
@@ -444,7 +445,9 @@
</div>
</div>
<div class="demo-tab-toast" id="demo-toast-b" data-joined="{{DEMO_JOINED}}" data-selected="{{DEMO_TAB_SELECTED}}" aria-hidden="true"></div>
</div>
</div>
<p class="demo-hint" id="demo-hint">{{DEMO_HINT}}</p>
<div class="extension-mockup">
<div class="mock-header-row">
@@ -722,7 +725,6 @@
<div class="demo-cursor" id="demo-cursor" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 2l13 11.5-6 .7 3.4 6.3-2.6 1.4-3.4-6.4L5 19.5z" fill="#f8fafc" stroke="#0f172a" stroke-width="1.4" stroke-linejoin="round"/></svg>
</div>
<p class="demo-hint" id="demo-hint">{{DEMO_HINT}}</p>
</div>
</div>
</div>