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

style(website): optimize header scroll-shrink and clean up footer styles/hover effects

Browse Source
This commit is contained in:
KoalaDev
2026-07-12 06:50:37 +02:00
parent 4fb8e0f53a
commit 949075b267
3 changed files with 72 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/styles/foundation.css
Vendored
+13 -1
View File
@@ -1061,10 +1061,20 @@ nav {
}
nav.nav-scrolled {
padding: 0.75rem 0;
padding: 0.45rem 0;
background: oklch(0.20 0.025 140 / 0.9);
}
nav.nav-scrolled .logo-area img {
height: 44px;
width: 44px;
margin: 0;
}
nav.nav-scrolled .logo-area {
font-size: 1.25rem;
}
html.theme-light nav.nav-scrolled {
background: oklch(0.95 0.01 100 / 0.92);
}
@@ -1081,6 +1091,7 @@ html.theme-light nav.nav-scrolled {
font-weight: 800;
font-size: 1.5rem;
letter-spacing: -0.5px;
transition: font-size 0.3s ease;
}
/* Logo can be a plain <a>; without this it falls back to the UA link blue,
@@ -1099,6 +1110,7 @@ a.logo-area {
object-fit: contain;
border-radius: 8px;
margin: -4px 0;
transition: height 0.3s ease, width 0.3s ease, margin 0.3s ease;
}
.nav-ext-status {
website/styles/landing-primary.css
+52 -1
View File
@@ -1257,11 +1257,15 @@ html.theme-light .player-badge.active {
/* --- Footer --- */
footer {
padding: 4rem 0;
border-top: 0;
border-top: 1px solid rgba(255, 255, 255, 0.05);
text-align: center;
color: var(--text-muted);
}
html.theme-light footer {
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
footer a {
color: var(--text-muted);
text-decoration: none;
@@ -1272,6 +1276,53 @@ footer a:hover {
color: var(--text);
}
.footer-ram {
font-size: 0.8rem;
margin-top: 0.5rem;
}
.footer-links {
margin-top: 1.5rem;
font-size: 0.8rem;
display: flex;
justify-content: center;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.footer-mastodon-link {
display: inline-flex;
align-items: center;
gap: 4px;
}
.footer-support-btn {
color: #fff !important;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
background: #b94642;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
padding: 3px 9px;
font-size: 0.72rem;
font-weight: 700;
line-height: 1;
transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.footer-support-btn:hover {
background: #d9534f;
border-color: rgba(255, 255, 255, 0.35);
transform: translateY(-1px);
}
.footer-support-btn:active {
transform: translateY(0);
}
/* --- Animations --- */
[data-reveal] {
website/template.html
+7 -7
View File
@@ -1547,17 +1547,17 @@
<footer>
<div class="container">
<p>&copy; 2026 KoalaSync. {{FOOTER_MIT}}</p>
<p style="font-size: 0.8rem; margin-top: 0.5rem;">{{FOOTER_RAM}}</p>
<p class="footer-disclaimer" style="font-size: 0.72rem; margin-top: 1.2rem; max-width: 650px; margin-left: auto; margin-right: auto; line-height: 1.5;">{{FOOTER_DISCLAIMER}}</p>
<div style="margin-top: 1.5rem; font-size: 0.8rem; display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
<a href="{{ASSET_PATH}}{{FOOTER_LEGAL_LINK}}" style="color: var(--text-muted); text-decoration: none;"><span>{{FOOTER_LEGAL}}</span></a>
<a href="{{ASSET_PATH}}{{FOOTER_PRIVACY_LINK}}" style="color: var(--text-muted); text-decoration: none;"><span>{{FOOTER_PRIVACY}}</span></a>
<p class="footer-ram">{{FOOTER_RAM}}</p>
<p class="footer-disclaimer">{{FOOTER_DISCLAIMER}}</p>
<div class="footer-links">
<a href="{{ASSET_PATH}}{{FOOTER_LEGAL_LINK}}"><span>{{FOOTER_LEGAL}}</span></a>
<a href="{{ASSET_PATH}}{{FOOTER_PRIVACY_LINK}}"><span>{{FOOTER_PRIVACY}}</span></a>
<a href="{{ASSET_PATH}}{{LANG_PREFIX}}alternatives"><span><span lang="en">Guides & comparisons</span><span lang="de">Vergleiche & Anleitungen</span></span></a>
<a href="https://support.koalastuff.net" target="_blank" rel="noopener" title="{{FOOTER_SUPPORT}}" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #b94642; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
<a href="https://support.koalastuff.net" target="_blank" rel="noopener" title="{{FOOTER_SUPPORT}}" class="footer-support-btn">
<span aria-hidden="true">♥</span>
<span>{{FOOTER_SUPPORT}}</span>
</a>
<a href="https://mastodon.social/@koalastuff" rel="me noopener" target="_blank" style="color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px;">
<a href="https://mastodon.social/@koalastuff" rel="me noopener" target="_blank" class="footer-mastodon-link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="14" height="14" aria-hidden="true" style="display: block;"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/></svg>
Mastodon
</a>