Arlind/sulej.ch
1
0
Fork 0
mirror of https://github.com/Arlind-dev/sulej.ch.git synced 2025-12-01 09:35:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): top-align layout and restyle footer version link (#20)

Browse Source 
* fix(footer): improve version hyperlink design

* fix(layout): avoid vertical centering; top-align with responsive offset
This commit is contained in:
Arlind
2025-10-17 12:49:50 +02:00
committed by GitHub
parent 9c3aad5205
commit 6a71380297
2 changed files with 31 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/lib/Footer.svelte
View File

@@ -7,9 +7,37 @@
<div style="display: inline-flex; align-items: baseline; gap: 1rem; margin: 1rem 0 0;">
<small>© 2025 sulej.ch</small>
<small>
<a href="https://github.com/Arlind-dev/sulej.ch">
{versionInfo.version} ({versionInfo.commit})
<a class="version-link" href="https://github.com/Arlind-dev/sulej.ch">
{versionInfo.version} <span class="commit">({versionInfo.commit})</span>
</a>
</small>
</div>
</footer>
<style>
.version-link {
color: inherit;
text-decoration: none;
border-bottom: 1px solid transparent;
opacity: 0.85;
transition: border-color 120ms ease, opacity 120ms ease, color 120ms ease;
}
.version-link:hover {
border-color: currentColor;
opacity: 1;
}
.version-link:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
border-color: transparent;
}
.commit {
opacity: 0.7;
letter-spacing: 0.02em;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
</style>

2
src/routes/+layout.svelte
View File

@@ -8,7 +8,7 @@
<title>sulej.ch</title>
</svelte:head>
<div style="height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: clamp(1rem, 1.5vw, 1.5rem); padding: clamp(0.5rem, 2vw, 1.5rem); font-size: clamp(1rem, 1rem + 1vw, 1.5rem);">
<div style="min-height: 100vh; padding-top: clamp(1rem, 8vh, 6rem); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: clamp(1rem, 1.5vw, 1.5rem); padding-left: clamp(0.5rem, 2vw, 1.5rem); padding-right: clamp(0.5rem, 2vw, 1.5rem); padding-bottom: clamp(0.5rem, 2vw, 1.5rem); font-size: clamp(1rem, 1rem + 1vw, 1.5rem);">
<slot />
</div>