Skip to content

Commit c75b7ba

Browse files
christofergartnerchristofergartner
authored
Header semantics (#1226)
* Replace divs with semantic elements * Rename Navbar to Header
1 parent 20ffa5a commit c75b7ba

3 files changed

Lines changed: 115 additions & 112 deletions

File tree

‎src/routes/(app)/+layout.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<script lang="ts">
22
import Toast from "../Toast.svelte";
33
import Alert from "$lib/components/Alert.svelte";
4+
import Header from "./Header.svelte";
45
import Footer from "./Footer.svelte";
5-
import Navbar from "./Navbar.svelte";
66
import { getLocale } from "$paraglide/runtime";
77
88
const { data, children } = $props();
99
</script>
1010

1111
<div class="flex min-h-screen flex-col">
12-
<Navbar notificationsPromise={data.notificationsPromise} isApp={data.isApp} />
12+
<Header notificationsPromise={data.notificationsPromise} isApp={data.isApp} />
1313

1414
<main class="flex min-h-0 flex-1 flex-col">
1515
{#each data.alerts as alert (alert.id)}

src/routes/(app)/Navbar.svelte renamed to src/routes/(app)/Header.svelte

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -89,11 +89,11 @@
8989
});
9090
</script>
9191

92-
<div
92+
<header
9393
class:visible
9494
class="nav-mobile bg-muted-background md-nav:top-0 md-nav:bottom-[unset] md-nav:h-[unset]! md-nav:sticky md-nav:z-20 fixed bottom-0 z-100 h-[64px] w-full max-w-screen flex-row justify-center border-t-[1px] border-b-[1px] font-[1.25rem]"
9595
>
96-
<div
96+
<nav
9797
class="md-nav:py-4 container mx-auto flex shrink flex-row items-center justify-between px-8 py-3 xl:px-32"
9898
>
9999
<div class="flex flex-row items-center">
@@ -278,8 +278,8 @@
278278
</Drawer.Content>
279279
</Drawer.Root>
280280
</div>
281-
</div>
282-
</div>
281+
</nav>
282+
</header>
283283

284284
{#snippet desktopLinks()}
285285
{#each visibleRoutes as route (route.title)}

‎src/routes/+page.svelte‎

Lines changed: 109 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script lang="ts">
22
import * as Carousel from "$lib/components/ui/carousel/index.js";
33
import { getFileUrl } from "$lib/files/client";
4+
import Header from "./(app)/Header.svelte";
45
import Footer from "./(app)/Footer.svelte";
5-
import Navbar from "./(app)/Navbar.svelte";
66
import * as m from "$paraglide/messages";
77
import Button from "$lib/components/ui/button/button.svelte";
88
@@ -80,121 +80,124 @@
8080
] as const;
8181
</script>
8282

83-
<nav class="contents">
84-
<Navbar isApp={data.isApp} />
85-
</nav>
86-
<header
87-
class="relative h-screen bg-linear-to-t bg-[linear-gradient(to_right,rgba(0,0,0,0.9),rgba(0,0,0,0.7),rgba(0,0,0,0)),url('https://files.dsek.se/files/public/photos/hero2.jpg')] bg-cover bg-center"
88-
>
89-
<div class="absolute top-1/4 px-10 pl-6 md:top-1/3 md:pl-10 lg:pl-44">
90-
<h1
91-
class="font-sans text-5xl font-bold break-keep text-white uppercase sm:mb-10 sm:text-7xl lg:text-9xl xl:text-[125px]"
92-
>
93-
{m.dsektionen()}
94-
</h1>
95-
<p class="mb-10 max-w-prose font-medium text-white lg:mb-9 lg:text-xl">
96-
{m.landing_intro()}
97-
</p>
83+
<div class="contents">
84+
<Header isApp={data.isApp} />
85+
</div>
9886

99-
<div
100-
class="flex flex-col items-start gap-4 lg:flex-row lg:items-center lg:gap-10"
101-
>
102-
<Button href="/applying" size="lg" class="text-lg">
103-
<GraduationCap class="size-6" />{m.landing_forStudents()}
104-
</Button>
105-
<Button
106-
href="/info/for-foretag"
107-
size="lg"
108-
class="hover:bg-secondary-background/30 text-lg text-white"
109-
variant="outline"
87+
<main>
88+
<header
89+
class="relative h-screen bg-linear-to-t bg-[linear-gradient(to_right,rgba(0,0,0,0.9),rgba(0,0,0,0.7),rgba(0,0,0,0)),url('https://files.dsek.se/files/public/photos/hero2.jpg')] bg-cover bg-center"
90+
>
91+
<div class="absolute top-1/4 px-10 pl-6 md:top-1/3 md:pl-10 lg:pl-44">
92+
<h1
93+
class="font-sans text-5xl font-bold break-keep text-white uppercase sm:mb-10 sm:text-7xl lg:text-9xl xl:text-[125px]"
11094
>
111-
<Building class="size-6" />{m.home_forCompanies()}
112-
</Button>
113-
</div>
114-
</div>
115-
</header>
95+
{m.dsektionen()}
96+
</h1>
97+
<p class="mb-10 max-w-prose font-medium text-white lg:mb-9 lg:text-xl">
98+
{m.landing_intro()}
99+
</p>
116100

117-
<main class="flex flex-col gap-2">
118-
{#each SECTIONS as section, i (section.title)}
119-
<section
120-
class="flex flex-col items-center gap-8 border-b-[1px] px-8 py-8 sm:px-12 md:px-16 lg:h-104 lg:flex-row lg:py-0 xl:px-36"
121-
class:lg:flex-row-reverse={i === 1}
122-
class:bg-muted-background={i === 1}
123-
>
124-
<Carousel.Root
125-
opts={{ loop: true }}
126-
class="shrink-0 rounded-lg shadow-lg md:w-[468px]"
101+
<div
102+
class="flex flex-col items-start gap-4 lg:flex-row lg:items-center lg:gap-10"
127103
>
128-
<Carousel.Content class="ms-0 h-60 w-full rounded-lg md:h-80">
129-
{#each section.images as image, i (i)}
130-
<Carousel.Item class="rounded-lg ps-0">
131-
<img
132-
src={getFileUrl(`minio/files/public/photos/${image}`)}
133-
class="h-full w-full rounded-lg object-cover"
134-
alt="party"
135-
/>
136-
</Carousel.Item>
137-
{/each}
138-
</Carousel.Content>
139-
<Carousel.Previous
140-
class="hover:bg-secondary-background/30 ml-16 size-10 text-white"
141-
/>
142-
<Carousel.Next
143-
class="hover:bg-secondary-background/30 mr-16 size-10 text-white"
144-
/>
145-
</Carousel.Root>
146-
147-
<div class="flex flex-col gap-2">
148-
<h1>
149-
{section.title}
150-
</h1>
151-
<p class="">
152-
{section.description}
153-
</p>
154-
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
155-
<a class="mt-0" href={section.link}
156-
><Button variant={section.variant} class="w-fit"
157-
><section.icon />{section.cta}
158-
<ArrowRight /></Button
159-
></a
104+
<Button href="/applying" size="lg" class="text-lg">
105+
<GraduationCap class="size-6" />{m.landing_forStudents()}
106+
</Button>
107+
<Button
108+
href="/info/for-foretag"
109+
size="lg"
110+
class="hover:bg-secondary-background/30 text-lg text-white"
111+
variant="outline"
160112
>
113+
<Building class="size-6" />{m.home_forCompanies()}
114+
</Button>
161115
</div>
162-
</section>
163-
{/each}
116+
</div>
117+
</header>
164118

165-
<section class="bg-muted-background flex flex-col items-center px-10 py-6">
166-
<div class="flex flex-col gap-8 lg:grid lg:grid-cols-3 lg:gap-16">
167-
{#each ARTICLES as article, i (i)}
168-
<article
169-
class="bg-background flex h-full w-[332px] flex-col rounded-md text-center"
119+
<div class="flex flex-col gap-2">
120+
{#each SECTIONS as section, i (section.title)}
121+
<section
122+
class="flex flex-col items-center gap-8 border-b-[1px] px-8 py-8 sm:px-12 md:px-16 lg:h-104 lg:flex-row lg:py-0 xl:px-36"
123+
class:lg:flex-row-reverse={i === 1}
124+
class:bg-muted-background={i === 1}
125+
>
126+
<Carousel.Root
127+
opts={{ loop: true }}
128+
class="shrink-0 rounded-lg shadow-lg md:w-[468px]"
170129
>
171-
<div
172-
class="w-full self-end rounded-t-md bg-[var(--url)] bg-no-repeat px-8 pt-[200px] pb-4 text-4xl font-bold uppercase"
173-
style:background-size={article.imageSize}
174-
style:background-position={article.imagePosition}
175-
style:background-image="url({getFileUrl(
176-
`minio/files/public/photos/${article.image}`,
177-
)})"
178-
></div>
179-
<div
180-
class="flex h-full flex-col items-center rounded-b-md border-[1px] border-t-0 p-8 pt-4"
130+
<Carousel.Content class="ms-0 h-60 w-full rounded-lg md:h-80">
131+
{#each section.images as image, i (i)}
132+
<Carousel.Item class="rounded-lg ps-0">
133+
<img
134+
src={getFileUrl(`minio/files/public/photos/${image}`)}
135+
class="h-full w-full rounded-lg object-cover"
136+
alt="party"
137+
/>
138+
</Carousel.Item>
139+
{/each}
140+
</Carousel.Content>
141+
<Carousel.Previous
142+
class="hover:bg-secondary-background/30 ml-16 size-10 text-white"
143+
/>
144+
<Carousel.Next
145+
class="hover:bg-secondary-background/30 mr-16 size-10 text-white"
146+
/>
147+
</Carousel.Root>
148+
149+
<div class="flex flex-col gap-2">
150+
<h1>
151+
{section.title}
152+
</h1>
153+
<p class="">
154+
{section.description}
155+
</p>
156+
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
157+
<a class="mt-0" href={section.link}
158+
><Button variant={section.variant} class="w-fit"
159+
><section.icon />{section.cta}
160+
<ArrowRight /></Button
161+
></a
181162
>
182-
<h2>{article.title}</h2>
183-
<p class="mt-2 mb-3 text-left">
184-
{article.description}
185-
</p>
186-
<a href={article.link} class="mt-auto">
187-
<Button class="mt-auto w-fit"
188-
><article.icon />
189-
{article.cta}
190-
<ArrowRight /></Button
191-
></a
163+
</div>
164+
</section>
165+
{/each}
166+
167+
<section class="bg-muted-background flex flex-col items-center px-10 py-6">
168+
<div class="flex flex-col gap-8 lg:grid lg:grid-cols-3 lg:gap-16">
169+
{#each ARTICLES as article, i (i)}
170+
<article
171+
class="bg-background flex h-full w-[332px] flex-col rounded-md text-center"
172+
>
173+
<div
174+
class="w-full self-end rounded-t-md bg-[var(--url)] bg-no-repeat px-8 pt-[200px] pb-4 text-4xl font-bold uppercase"
175+
style:background-size={article.imageSize}
176+
style:background-position={article.imagePosition}
177+
style:background-image="url({getFileUrl(
178+
`minio/files/public/photos/${article.image}`,
179+
)})"
180+
></div>
181+
<div
182+
class="flex h-full flex-col items-center rounded-b-md border-[1px] border-t-0 p-8 pt-4"
192183
>
193-
</div>
194-
</article>
195-
{/each}
196-
</div>
197-
</section>
184+
<h2>{article.title}</h2>
185+
<p class="mt-2 mb-3 text-left">
186+
{article.description}
187+
</p>
188+
<a href={article.link} class="mt-auto">
189+
<Button class="mt-auto w-fit"
190+
><article.icon />
191+
{article.cta}
192+
<ArrowRight /></Button
193+
></a
194+
>
195+
</div>
196+
</article>
197+
{/each}
198+
</div>
199+
</section>
200+
</div>
198201
</main>
199202

200203
<Footer />

0 commit comments

Comments
 (0)