Skip to content

Commit 6d7c707

Browse files
ReKyleeReKylee
committed
Fixed color transitions
1 parent d92298d commit 6d7c707

4 files changed

Lines changed: 83 additions & 39 deletions

File tree

‎src/app.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,4 @@
77

88
body {
99
font-family: "Inter", "Heebo", sans-serif;
10-
}
10+
}

‎src/app.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
%sveltekit.head%
8-
</head>
9-
<body data-sveltekit-preload-data="hover" class="bg-ctp-base text-ctp-text">
10-
<div style="display: contents">%sveltekit.body%</div>
11-
</body>
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
%sveltekit.head%
8+
</head>
9+
<body data-sveltekit-preload-data="hover" class="bg-ctp-base text-ctp-text">
10+
<div style="display: contents">%sveltekit.body%</div>
11+
</body>
1212
</html>

‎src/lib/components/Header.svelte‎

Lines changed: 68 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,80 @@
11
<script>
2-
import { t, language } from '$lib/stores/language.js';
3-
import { theme } from '$lib/stores/theme.js';
4-
import { onMount } from 'svelte';
2+
import { t, language } from "$lib/stores/language.js";
3+
import { theme } from "$lib/stores/theme.js";
4+
import { onMount } from "svelte";
55
6-
function toggleTheme() {
7-
theme.setTheme($theme === 'light' ? 'dark' : 'light');
8-
}
6+
function toggleTheme() {
7+
theme.setTheme($theme === "light" ? "dark" : "light");
8+
}
99
10-
function toggleLanguage() {
11-
language.setLang($language === 'en' ? 'he' : 'en');
12-
}
10+
function toggleLanguage() {
11+
language.setLang($language === "en" ? "he" : "en");
12+
}
1313
</script>
1414

15-
<header class="bg-ctp-base/80 backdrop-blur-lg sticky top-0 z-50 transition-all duration-300">
15+
<header class="bg-ctp-base/80 sticky top-0 z-50 transition-colors duration-300">
1616
<div class="container mx-auto px-4">
17-
<nav class="flex justify-between items-center py-4 border-b border-ctp-surface1">
18-
<a href="#hero" class="text-xl font-bold text-ctp-text">{$t('name')}</a>
17+
<nav
18+
class="flex justify-between items-center py-4 border-b border-ctp-surface1"
19+
>
20+
<a href="#hero" class="text-xl font-bold text-ctp-text"
21+
>{$t("name")}</a
22+
>
1923
<div class="flex items-center gap-4">
20-
<ul class="hidden md:flex items-center space-x-8 text-sm font-medium">
21-
<li><a href="#about" class="text-ctp-subtext0 hover:text-ctp-green transition-colors">{$t('nav.about')}</a></li>
22-
<li><a href="#skills" class="text-ctp-subtext0 hover:text-ctp-green transition-colors">{$t('nav.skills')}</a></li>
23-
<li><a href="#experience" class="text-ctp-subtext0 hover:text-ctp-green transition-colors">{$t('nav.experience')}</a></li>
24-
<li><a href="#projects" class="text-ctp-subtext0 hover:text-ctp-green transition-colors">{$t('nav.projects')}</a></li>
25-
<li><a href="#education" class="text-ctp-subtext0 hover:text-ctp-green transition-colors">{$t('nav.education')}</a></li>
24+
<ul
25+
class="hidden md:flex items-center space-x-8 text-sm font-medium"
26+
>
27+
<li>
28+
<a
29+
href="#about"
30+
class="text-ctp-subtext0 hover:text-ctp-green transition-colors"
31+
>{$t("nav.about")}</a
32+
>
33+
</li>
34+
<li>
35+
<a
36+
href="#skills"
37+
class="text-ctp-subtext0 hover:text-ctp-green transition-colors"
38+
>{$t("nav.skills")}</a
39+
>
40+
</li>
41+
<li>
42+
<a
43+
href="#experience"
44+
class="text-ctp-subtext0 hover:text-ctp-green transition-colors"
45+
>{$t("nav.experience")}</a
46+
>
47+
</li>
48+
<li>
49+
<a
50+
href="#projects"
51+
class="text-ctp-subtext0 hover:text-ctp-green transition-colors"
52+
>{$t("nav.projects")}</a
53+
>
54+
</li>
55+
<li>
56+
<a
57+
href="#education"
58+
class="text-ctp-subtext0 hover:text-ctp-green transition-colors"
59+
>{$t("nav.education")}</a
60+
>
61+
</li>
2662
</ul>
27-
28-
<div class="flex items-center gap-4 border-l border-ctp-surface1 pl-4">
29-
<button on:click={toggleLanguage} class="text-sm font-bold text-ctp-subtext0">
30-
{$language === 'en' ? 'HE' : 'EN'}
63+
64+
<div
65+
class="flex items-center gap-4 border-l border-ctp-surface1 pl-4"
66+
>
67+
<button
68+
on:click={toggleLanguage}
69+
class="text-sm font-bold text-ctp-subtext0"
70+
>
71+
{$language === "en" ? "HE" : "EN"}
3172
</button>
32-
<button on:click={toggleTheme} class="text-ctp-subtext0 text-xl">
33-
{#if $theme === 'light'}
73+
<button
74+
on:click={toggleTheme}
75+
class="text-ctp-subtext0 text-xl"
76+
>
77+
{#if $theme === "light"}
3478
<span>&#9790;</span> <!-- Moon -->
3579
{:else}
3680
<span>&#9728;</span> <!-- Sun -->

‎src/routes/+layout.svelte‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<script>
22
import "../app.css";
3-
import { theme } from '$lib/stores/theme.js';
4-
import { language } from '$lib/stores/language.js';
5-
import Header from '$lib/components/Header.svelte';
6-
import Footer from '$lib/components/Footer.svelte';
3+
import { theme } from "$lib/stores/theme.js";
4+
import { language } from "$lib/stores/language.js";
5+
import Header from "$lib/components/Header.svelte";
6+
import Footer from "$lib/components/Footer.svelte";
77
88
theme.init();
99
language.init();
1010
</script>
1111

12-
<div class="bg-ctp-base text-ctp-text" dir={$language === 'he' ? 'rtl' : 'ltr'}>
12+
<div class="bg-ctp-base text-ctp-text transition-colors duration-300" dir={$language === "he" ? "rtl" : "ltr"}>
1313
<Header />
1414
<main>
1515
<slot />

0 commit comments

Comments
 (0)