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

feat(website): implement custom i18n static compiler & full 6-language expansion

Browse Source 
- Added pure Node.js dynamic i18n static site generator (build.js).
- Structured locales for English, German, French, Spanish, Brazilian Portuguese, and Russian.
- Replaced two-state toggle with premium glassmorphic language select dropdown.
- Integrated robust segment-based locale routing with safe dynamic fallbacks for legal and invite pages.
- Audited Core Web Vitals (LCP preloads, CLS dimensions) and SEO structures (robots, sitemap).
- Added dedicated Localization section to README and created contributor TRANSLATION guide.
This commit is contained in:
Koala
2026-05-31 23:49:36 +02:00
parent b6f7c1ccdb
commit 57b0dd1632
70 changed files with 12255 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/style.css
+145 -25
View File
@@ -6,7 +6,7 @@
--accent: #6366f1;
--accent-glow: rgba(99, 102, 241, 0.3);
--text: #f8fafc;
--text-muted: #94a3b8;
--text-muted: #cbd5e1; /* Increased contrast for WCAG AA (6.28:1 contrast ratio) */
--success: #22c55e;
--glass: rgba(30, 41, 59, 0.4);
--glass-border: rgba(255, 255, 255, 0.05);
@@ -698,20 +698,25 @@ input:checked + .mock-slider:before {
}
/* --- Features --- */
/* Bento Grid Layout Configuration */
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 2rem;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 4rem;
}
.feature-card {
background: var(--card);
background: rgba(30, 41, 59, 0.45);
backdrop-filter: blur(16px) saturate(120%);
-webkit-backdrop-filter: blur(16px) saturate(120%);
padding: 2.5rem;
border-radius: 24px;
border: 1px solid var(--glass-border);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.feature-card::before {
@@ -720,7 +725,7 @@ input:checked + .mock-slider:before {
top: 0; left: 0; right: 0; bottom: 0;
border-radius: 24px;
padding: 1px;
background: linear-gradient(to bottom right, rgba(99, 102, 241, 0.25), transparent);
background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.12), transparent);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
@@ -729,28 +734,80 @@ input:checked + .mock-slider:before {
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(99, 102, 241, 0.15);
border-color: rgba(99, 102, 241, 0.2);
box-shadow: 0 15px 30px rgba(99, 102, 241, 0.2);
border-color: rgba(99, 102, 241, 0.3);
}
.feature-icon {
font-size: 1.6rem;
margin-right: 0.6rem;
display: inline-block;
.feature-card:hover::before {
background: linear-gradient(to bottom right, rgba(99, 102, 241, 0.3), transparent);
}
/* Feature Icon with Inline SVG Wrapper */
.feature-icon-svg {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
background: rgba(99, 102, 241, 0.12);
color: var(--accent);
border-radius: 12px;
margin-right: 12px;
vertical-align: middle;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
transition: all 0.3s ease;
}
.feature-card:hover .feature-icon-svg {
background: var(--accent);
color: white;
box-shadow: 0 0 15px var(--accent-glow);
transform: scale(1.05);
}
.bento-icon {
width: 20px;
height: 20px;
display: block;
}
.feature-card h3 {
margin-bottom: 0.75rem;
margin-bottom: 1rem;
font-size: 1.35rem;
font-weight: 700;
display: flex;
align-items: center;
}
.feature-card p {
color: var(--text-muted);
font-size: 0.95rem;
line-height: 1.5;
line-height: 1.6;
}
/* Bento Asymmetric Spanning */
.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%);
}
@media (max-width: 900px) {
.features-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.feature-card.bento-large {
grid-column: span 2;
}
}
@media (max-width: 600px) {
.features-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.feature-card.bento-large {
grid-column: span 1;
}
}
/* --- How it works --- */
@@ -1709,21 +1766,84 @@ footer {
}
/* --- Language Toggle --- */
html.lang-en [lang="de"],
html.lang-de [lang="en"] {
display: none !important;
}
.lang-toggle {
cursor: pointer;
font-weight: 600;
user-select: none;
color: var(--text-muted);
transition: color 0.3s;
html:not(.lang-de) [lang="de"] {
display: none !important;
}
.lang-toggle:hover {
color: var(--accent);
/* --- Modern Glassmorphic Language Selector --- */
.lang-select-container {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(30, 41, 59, 0.4);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 9999px;
padding: 6px 14px 6px 12px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
color: var(--text-muted);
}
.lang-select-container:hover {
background: rgba(30, 41, 59, 0.6);
border-color: rgba(99, 102, 241, 0.3);
color: var(--text);
box-shadow: 0 0 15px rgba(99, 102, 241, 0.1);
}
.lang-select-container .globe-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
opacity: 0.8;
transition: transform 0.5s ease;
}
.lang-select-container:hover .globe-icon {
transform: rotate(15deg);
opacity: 1;
}
.lang-select-container .chevron-icon {
width: 12px;
height: 12px;
flex-shrink: 0;
pointer-events: none;
opacity: 0.6;
margin-left: -2px;
}
.lang-select-container:hover .chevron-icon {
opacity: 1;
}
.lang-dropdown {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: transparent;
border: none;
outline: none;
font-family: inherit;
font-size: 0.8rem;
font-weight: 600;
color: currentColor;
cursor: pointer;
padding: 0 12px 0 0;
margin: 0;
width: auto;
}
.lang-dropdown option {
background: #0f172a;
color: white;
font-family: inherit;
font-size: 0.9rem;
}
/* --- Hamburger Menu --- */