gsadmin/KoalaSync
1
0
Fork 0
mirror of https://github.com/Shik3i/KoalaSync.git synced 2026-09-04 15:05:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: guarantee the three hero CTAs stay on one line

Browse Source 
The headline column in the old narrow two-column range (769-1023px) was too
tight to fit the full "Add to X" label plus two more buttons, so GitHub wrapped
to a second row. The hero is now single-column below 1024px (headline gets the
full width, demo stacks under it, matching the demo's own breakpoint) and
two-column at >=1024px where the column is wide enough. GitHub button label
shortened to "GitHub" for extra margin. Verified one row at 769/900/1024/1280
and the mobile stack at 375px.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
KoalaDev
2026-07-06 16:47:37 +02:00
parent 4c519a81e0
commit 2848a4450c
2 changed files with 5 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/style.css
+4 -7
View File
@@ -384,7 +384,10 @@ html.theme-light .compat-logo {
.hero-grid {
display: grid;
grid-template-columns: 1.55fr 0.75fr;
/* Single column until the interactive demo appears (1024px). Below that the
headline gets the full width (the three CTAs always fit one row) and the
demo stacks underneath, matching the demo's own 1024px breakpoint. */
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: 3rem;
text-align: left;
@@ -2462,12 +2465,6 @@ footer a:hover {
}
}
@media (min-width: 769px) and (max-width: 1200px) {
.hero-grid {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}
}
@media (min-width: 769px) and (max-height: 920px) {
.hero {
padding-top: clamp(7.5rem, 10vh, 9rem);