lapikud/lapikud.github.io
2
0
Fork 1
mirror of https://github.com/Lapikud/lapikud.github.io.git synced 2026-08-08 19:49:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

bigger screen scale changes

Browse Source
This commit is contained in:
Henri
2026-04-03 04:52:41 +03:00
parent 4d0ef801cc
commit f586c406e7
3 changed files with 24 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/app.css
View File

@@ -27,8 +27,13 @@
/* Design tokens & theme variables (light defaults) */
:root {
--page-max-width: 1460px;
--page-padding-inline: clamp(1rem, 2vw, 2rem);
--page-max-width: calc(1460px * var(--ui-scale));
--page-padding-inline: clamp(
calc(1.5rem * var(--ui-scale)),
calc(4vw * var(--ui-scale)),
calc(3rem * var(--ui-scale))
);
--ui-scale: 1;
/* spacing scale */
--spacing-0: 0px;
@@ -60,7 +65,7 @@ html {
Roboto, "Helvetica Neue", Arial;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: var(--fs-base);
font-size: calc(var(--fs-base) * var(--ui-scale));
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
}
@@ -132,6 +137,13 @@ button:focus {
}
}
/* Increase overall UI scale on large 4K-class viewports */
@media (min-width: 2400px), (min-width: 1900px) and (min-resolution: 2dppx) {
:root {
--ui-scale: 1.5;
}
}
/* Accessibility settings */
@media (prefers-reduced-motion: reduce) {
* {

2
src/components/layout/Section.svelte
View File

@@ -24,7 +24,7 @@
class="relative w-full {bg} {className}"
style={background ? `background: ${background};` : undefined}
>
<div class="w-full {fullWidth ? '' : 'max-w-[var(--page-max-width)]'} mx-auto px-[var(--page-padding-inline)] {paddingClasses[padding]} {contentClassName}">
<div class="w-full {fullWidth ? '' : 'max-w-(--page-max-width)'} mx-auto px-(--page-padding-inline) {paddingClasses[padding]} {contentClassName}">
{@render children?.()}
</div>
</section>

16
src/routes/NewHome.svelte
View File

@@ -21,23 +21,23 @@ import { navigate } from "$lib/router/router.js";
>
<Svg
type="mirrorH"
className="absolute right-0 top-[16%] w-[clamp(130px,14vw,230px)] text-[#E18E38]"
className="absolute right-0 top-[16%] w-[clamp(8.125rem,14vw,14.375rem)] text-[#E18E38]"
/>
<Svg
type="branchH"
className="absolute right-0 top-[52%] -translate-y-1/2 w-[clamp(56px,6vw,94px)] text-[#E18E38]"
className="absolute right-0 top-[52%] -translate-y-1/2 w-[clamp(3.5rem,6vw,5.875rem)] text-[#E18E38]"
/>
<Svg
type="mirrorVH"
className="absolute right-0 bottom-[12%] w-[clamp(130px,14vw,230px)] text-[#E18E38]"
className="absolute right-0 bottom-[12%] w-[clamp(8.125rem,14vw,14.375rem)] text-[#E18E38]"
/>
</div>
<div class="pointer-events-none absolute inset-y-0 left-1/2 w-screen -translate-x-1/2 bg-linear-to-r from-black/65 via-black/35 to-transparent" aria-hidden="true"></div>
<div class="relative z-20 flex min-h-screen w-full items-stretch py-8 md:py-12">
<div class="flex w-full max-w-[460px] flex-col justify-between">
<img src="/assets/LapLogo_white_orange.png" alt="MTÜ Lapikud" class="w-full max-w-[220px] md:max-w-[260px] h-auto"/>
<div class="flex w-full max-w-115 flex-col justify-between">
<img src="/assets/LapLogo_white_orange.png" alt="MTÜ Lapikud" class="w-full max-w-55 md:max-w-65 h-auto"/>
<div class="flex flex-col items-start gap-5">
<p class="w-full max-w-[440px] text-left text-lg leading-[165%] text-white drop-shadow-[0_2px_8px_rgba(0,0,0,0.6)] md:max-w-[500px] md:text-xl">
<p class="w-full max-w-110 text-left text-lg leading-[165%] text-white drop-shadow-[0_2px_8px_rgba(0,0,0,0.6)] md:max-w-125 md:text-xl">
MTÜ Lapikud on Tallinna Tehnikaülikooli Tarkvaraarendusklubi, mis ühendab endisi
ja praegusi IT huvilisi tudengeid.
</p>
@@ -58,11 +58,11 @@ import { navigate } from "$lib/router/router.js";
<div class="pointer-events-none absolute inset-x-0 left-1/2 top-15 z-0 w-screen -translate-x-1/2" aria-hidden="true">
<Svg
type="connector"
className="absolute left-0 w-[clamp(130px,14vw,230px)] text-orange-500"
className="absolute left-0 w-[clamp(8.125rem,14vw,14.375rem)] text-orange-500"
/>
<Svg
type="mirrorH"
className="absolute right-0 w-[clamp(130px,14vw,230px)] text-orange-500"
className="absolute right-0 w-[clamp(8.125rem,14vw,14.375rem)] text-orange-500"
/>
</div>