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

feat(website): redesign bento tiles in 'Why KoalaSync' section

Browse Source 
- Swap last two tiles: Invitation becomes 2nd-last (bento-large),
  Self-Hosting becomes last small tile
- bento-large layout: icon centered above heading, 33/67 grid split
- Fix icon consistency on small tiles (uniform 44x44 rounded squares)
- Improve responsive breakpoints for all viewports
- Delete legacy website/index.html (obsoleted by template + build.js)
This commit is contained in:
Koala
2026-06-01 01:42:42 +02:00
parent b08e8ba06b
commit e29c6666b6
10 changed files with 304 additions and 1136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/style.css
+110 -8
View File
@@ -744,16 +744,16 @@ input:checked + .mock-slider:before {
/* Feature Icon with Inline SVG Wrapper */
.feature-icon-svg {
display: inline-flex;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
width: 44px;
height: 44px;
background: rgba(99, 102, 241, 0.12);
color: var(--accent);
border-radius: 12px;
margin-right: 12px;
vertical-align: middle;
margin-right: 14px;
transition: all 0.3s ease;
}
@@ -765,14 +765,15 @@ input:checked + .mock-slider:before {
}
.bento-icon {
width: 20px;
height: 20px;
width: 22px;
height: 22px;
display: block;
flex-shrink: 0;
}
.feature-card h3 {
margin-bottom: 1rem;
font-size: 1.35rem;
font-size: 1.25rem;
font-weight: 700;
display: flex;
align-items: center;
@@ -788,6 +789,56 @@ input:checked + .mock-slider:before {
.feature-card.bento-large {
grid-column: span 2;
background: linear-gradient(135deg, rgba(30, 41, 59, 0.45) 0%, rgba(99, 102, 241, 0.08) 100%);
padding: 3rem 3.5rem;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 3rem;
align-items: center;
}
.feature-card.bento-large h3 {
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
margin-bottom: 0;
font-size: 1.25rem;
}
.feature-card.bento-large .feature-icon,
.feature-card.bento-large .feature-icon-svg {
width: 52px;
height: 52px;
border-radius: 14px;
margin-right: 0;
flex-shrink: 0;
}
.feature-card.bento-large .bento-icon {
width: 24px;
height: 24px;
}
.feature-card.bento-large p {
font-size: 1rem;
line-height: 1.7;
margin: 0;
}
.feature-card.bento-large::after {
content: '';
position: absolute;
top: 0;
left: 2.5rem;
right: 2.5rem;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.4), transparent);
opacity: 0;
transition: opacity 0.3s ease;
}
.feature-card.bento-large:hover::after {
opacity: 1;
}
@media (max-width: 900px) {
@@ -797,6 +848,11 @@ input:checked + .mock-slider:before {
}
.feature-card.bento-large {
grid-column: span 2;
padding: 2.5rem;
gap: 2rem;
}
.feature-card.bento-large h3 {
font-size: 1.15rem;
}
}
@@ -807,6 +863,52 @@ input:checked + .mock-slider:before {
}
.feature-card.bento-large {
grid-column: span 1;
display: flex;
flex-direction: column;
padding: 1.75rem;
gap: 1rem;
}
.feature-card.bento-large h3 {
flex-direction: row;
align-items: center;
text-align: left;
gap: 0.75rem;
margin-bottom: 0;
font-size: 1.15rem;
}
.feature-card.bento-large .feature-icon,
.feature-card.bento-large .feature-icon-svg {
width: 40px;
height: 40px;
border-radius: 10px;
margin-right: 0;
}
.feature-card.bento-large .bento-icon {
width: 18px;
height: 18px;
}
.feature-card.bento-large p {
font-size: 0.9rem;
line-height: 1.6;
}
.feature-card.bento-large::after {
display: none;
}
.feature-card {
padding: 1.75rem;
}
.feature-card h3 {
font-size: 1.1rem;
}
.feature-icon-svg {
width: 40px;
height: 40px;
border-radius: 10px;
margin-right: 12px;
}
.bento-icon {
width: 18px;
height: 18px;
}
}