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

updated Grid and pages using grid, changed logo image to an svg, updated favicon logic

Browse Source
This commit is contained in:
Henri
2026-04-09 09:16:22 +03:00
parent adfe82280a
commit dde5aac7d2
13 changed files with 572 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/layout/Grid.svelte
View File

@@ -2,6 +2,7 @@
let {
min = "220px", // min column width (used when columns not set)
columns = null, // fixed number of columns for desktop
tabletColumns = null, // fixed number of columns for tablet / mid screens
largeColumns = null, // fixed number of columns for large desktop
mobileColumns = null, // fixed number of columns for mobile
gap = "gap-3",
@@ -9,6 +10,10 @@
children,
} = $props();
const hasTabletColumns = $derived(tabletColumns !== null);
const tabletCols = $derived(
tabletColumns ? `repeat(${tabletColumns}, 1fr)` : "1fr"
);
const desktopColumns = $derived(columns ? `repeat(${columns}, 1fr)` : "1fr");
const largeDesktopColumns = $derived(
largeColumns ? `repeat(${largeColumns}, 1fr)` : desktopColumns
@@ -18,8 +23,10 @@
<div
class="grid {className} {gap}"
data-has-tablet={hasTabletColumns ? "true" : "false"}
style="
--min: {min};
--tablet-columns: {tabletCols};
--desktop-columns: {desktopColumns};
--large-desktop-columns: {largeDesktopColumns};
--mobile-columns: {mobileCols};
@@ -35,20 +42,44 @@
grid-template-columns: var(--mobile-columns);
}
/* Desktop / tablet screens */
/* Legacy mode (no tabletColumns): desktop starts at 768px */
@media (min-width: 768px) {
.grid {
.grid[data-has-tablet="false"] {
grid-template-columns: var(--desktop-columns) !important;
}
/* fallback for when columns are not set, use minmax */
.grid:not([style*="--desktop-columns: repeat"]) {
.grid[data-has-tablet="false"]:not([style*="--desktop-columns: repeat"]) {
grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr)) !important;
}
/* Tablet mode (when tabletColumns is provided) */
.grid[data-has-tablet="true"] {
grid-template-columns: var(--tablet-columns) !important;
}
}
/* Legacy large desktop */
@media (min-width: 1024px) {
.grid[data-has-tablet="false"] {
grid-template-columns: var(--large-desktop-columns) !important;
}
}
/* Tablet mode desktop breakpoint */
@media (min-width: 1200px) {
.grid[data-has-tablet="true"] {
grid-template-columns: var(--desktop-columns) !important;
}
.grid[data-has-tablet="true"]:not([style*="--desktop-columns: repeat"]) {
grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr)) !important;
}
}
@media (min-width: 1024px) {
.grid {
/* Tablet mode large desktop breakpoint */
@media (min-width: 1536px) {
.grid[data-has-tablet="true"] {
grid-template-columns: var(--large-desktop-columns) !important;
}
}

4
src/layout/Navbar.svelte
View File

@@ -226,7 +226,7 @@
onClick={() => handleNavigation("/")}
class="nav-logo-button border-transparent bg-transparent px-0 py-3"
>
<img src="/assets/LapLogo_white_orange.png" alt="Lapikud logo" class="h-12 md:h-14 w-auto" />
<img src="/assets/logo.svg" alt="Lapikud logo" class="h-12 md:h-14 w-auto" />
</Button>
{/if}
@@ -357,7 +357,7 @@
onClick={() => handleNavigation("/")}
class="mb-3 border-transparent bg-transparent px-0 py-0 text-left text-white hover:text-white"
>
<img src="/assets/LapLogo_white_orange.png" alt="Lapikud Logo" class="h-12 w-auto" />
<img src="/assets/logo.svg" alt="Lapikud Logo" class="h-12 w-auto" />
</Button>
<!-- About Section -->

6
src/routes/Contact.svelte
View File

@@ -119,7 +119,7 @@
<p class="text-xl text-gray-600">{$text["methods"]?.subtitle || "Vali endale sobiv viis"}</p>
</div>
<Grid columns={2} gap="var(--space-5)">
<Grid columns={2} gap="gap-5">
{#each contactMethods as method}
<Card variant="glass">
<div class="flex items-start gap-4">
@@ -222,7 +222,7 @@
<!-- Office Hours & Location -->
<Section>
<Grid gap="var(--space-5)">
<Grid gap="gap-5">
<Card variant="glass">
<div class="flex items-start gap-4 mb-4">
<div class="feature-icon" style="color: var(--orange)">
@@ -270,7 +270,7 @@
<!-- Social Media & Legal Info -->
<Section background="neutral">
<Grid gap="var(--space-5)">
<Grid gap="gap-5">
<Card variant="glass">
<h2 class="text-3xl font-bold mb-6 text-center">{$text["social"]?.title || "Jälgi meid sotsiaalmeedias"}</h2>
<div class="flex flex-wrap justify-center gap-4">

14
src/routes/Helpdesk.svelte
View File

@@ -63,7 +63,7 @@
<!-- Main Content -->
<Section>
<Grid min="480px" gap="var(--space-5)">
<Grid columns={2} tabletColumns={1} mobileColumns={1} gap="gap-6">
<!-- What is HELPDESK? -->
<div class="flex flex-col">
<h2 class="text-4xl font-light pb-4">{$text["whatIs"]?.title || ""}</h2>
@@ -89,13 +89,13 @@
<table class="w-full text-lg">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-4 text-left font-semibold text-gray-900 border-b border-gray-200">
<th class="px-3 py-4 text-left font-semibold text-gray-900 border-b border-gray-200">
{$text["pricing"]?.tableHeaders?.service || ""}
</th>
<th class="px-6 py-4 text-left font-semibold text-gray-900 border-b border-gray-200">
<th class="px-3 py-4 text-left font-semibold text-gray-900 border-b border-gray-200">
{$text["pricing"]?.tableHeaders?.quantity || ""}
</th>
<th class="px-6 py-4 text-left font-semibold text-gray-900 border-b border-gray-200">
<th class="px-3 py-4 text-left font-semibold text-gray-900 border-b border-gray-200">
{$text["pricing"]?.tableHeaders?.price || ""}
</th>
</tr>
@@ -103,9 +103,9 @@
<tbody class="bg-white divide-y divide-gray-200">
{#each pricingData.services as service}
<tr class="hover:bg-gray-50 transition-colors duration-200">
<td class="px-6 py-4 text-gray-900">{service.name}</td>
<td class="px-6 py-4 text-gray-600">{service.quantity}</td>
<td class="px-6 py-4 font-medium" class:text-green-600={service.price === "Tasuta"} class:text-gray-900={service.price !== "Tasuta"}>
<td class="px-3 py-4 text-gray-900">{service.name}</td>
<td class="px-3 py-4 text-gray-600">{service.quantity}</td>
<td class="px-3 py-4 font-medium" class:text-green-600={service.price === "Tasuta"} class:text-gray-900={service.price !== "Tasuta"}>
{service.price}
</td>
</tr>

2
src/routes/Home.svelte
View File

@@ -56,7 +56,7 @@
<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-115 flex-col justify-between">
<Image
src="/assets/LapLogo_white_orange.png"
src="/assets/logo.svg"
alt={$text["hero"]?.logoAlt || "MTÜ Lapikud"}
class="w-full max-w-65 md:max-w-80 h-auto pt-5 md:pt-10"
/>

8
src/routes/OurWork.svelte
View File

@@ -94,7 +94,7 @@
<p class="text-xl text-gray-600">{$text["services"]?.subtitle || "Laia valik IT-teenuseid teie ärivajaduste täitmiseks"}</p>
</div>
<Grid columns={2} gap="var(--space-5)">
<Grid columns={2} gap="gap-5">
{#each services as service}
<Card variant="glass">
<div class="feature-icon mb-4" style="color: var(--orange)">
@@ -113,7 +113,7 @@
<h2 class="text-4xl font-bold mb-4">{$text["whyUs"]?.title || "Miks meiega koostööd teha?"}</h2>
</div>
<Grid columns={3} gap="var(--space-5)">
<Grid columns={3} gap="gap-5">
{#each whyUs as item}
<Card variant="glass">
<div class="feature-icon mb-4" style="color: var(--orange)">
@@ -128,7 +128,7 @@
<!-- Process Section -->
<Section>
<Grid gap="var(--space-5)">
<Grid gap="gap-5">
<Card variant="glass">
<h2 class="text-4xl font-bold mb-6">{$text["process"]?.title || "Kuidas töötame?"}</h2>
<div class="space-y-6">
@@ -164,7 +164,7 @@
<p class="text-xl text-gray-600">{$text["portfolio"]?.subtitle || "Vaata, mida oleme varem loonud"}</p>
</div>
<Grid columns={3} gap="var(--space-5)">
<Grid columns={3} gap="gap-5">
{#each projects as project}
<Card variant="animated-neutral">
{#if project.photo}

4
src/routes/Student.svelte
View File

@@ -59,7 +59,7 @@
<p class="text-xl text-gray-600">{$text["benefits"]?.subtitle || "Siin on mõned põhjused, miks meie kogukond on suurepärane koht arenguks"}</p>
</div>
<Grid columns={3} gap="var(--space-5)">
<Grid columns={3} gap="gap-5">
{#each benefits as benefit}
<Card variant="glass">
<div class="feature-icon mb-4" style="color: var(--orange)">
@@ -74,7 +74,7 @@
<!-- What You'll Do Section -->
<Section background="neutral">
<Grid gap="var(--space-5)">
<Grid gap="gap-5">
<Card variant="glass">
<h2 class="text-4xl font-bold mb-4">{$text["activities"]?.title || "Mida saad teha?"}</h2>
<div class="space-y-4 text-lg">