Skip to content

Commit 9d82c5b

Browse files
ReKyleeReKylee
committed
New theme switch i'm tired
1 parent f8ec391 commit 9d82c5b

4 files changed

Lines changed: 139 additions & 43 deletions

File tree

‎src/lib/components/Journal.svelte‎

Lines changed: 35 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<script>
22
import { t } from "$lib/stores/language.js";
3-
import { theme } from "$lib/stores/theme.js";
4-
import ToggleButtons from "./ToggleButtons.svelte";
3+
import ThemeSwitch from "./ThemeSwitch.svelte";
54
65
export let quests = [
76
{ href: "#about", text: "nav.about" },
@@ -13,29 +12,53 @@
1312
1413
let selectedQuest = quests[0].href;
1514
15+
/**
16+
* @param {string} href
17+
*/
1618
function selectQuest(href) {
1719
selectedQuest = href;
1820
}
1921
</script>
2022

21-
<aside class="bg-ctp-latte border-2 border-ctp-mocha rounded-lg p-6 shadow-xl m-5 w-96 flex-shrink-0 overflow-y-auto max-h-[calc(100vh-40px)] sticky top-5 font-serif text-ctp-text dark:bg-ctp-crust dark:border-ctp-mocha dark:text-ctp-text md:w-auto md:m-2.5">
23+
<aside
24+
class="bg-ctp-latte border-2 border-ctp-mocha rounded-lg p-6 shadow-xl m-5 w-96 flex-shrink-0 overflow-y-auto max-h-[calc(100vh-40px)] sticky top-5 font-serif text-ctp-text dark:bg-ctp-crust dark:border-ctp-mocha dark:text-ctp-text md:w-auto md:m-2.5"
25+
>
2226
<div class="flex justify-between items-center mb-4">
23-
<h1 class="text-3xl font-bold text-ctp-text drop-shadow-md">{$t("name")}</h1>
24-
<ToggleButtons />
27+
<h1 class="text-3xl font-bold text-ctp-text drop-shadow-md">
28+
{$t("name")}
29+
</h1>
30+
<ThemeSwitch />
2531
</div>
2632
<div class="text-center mb-6 border-b border-dashed border-ctp-mocha pb-3">
27-
<h2 class="text-2xl font-bold text-ctp-text drop-shadow-md">{$t("journal.title")}</h2>
33+
<h2 class="text-2xl font-bold text-ctp-text drop-shadow-md">
34+
{$t("journal.title")}
35+
</h2>
2836
</div>
2937
<ul class="list-none p-0 m-0">
3038
{#each quests as quest, i}
31-
<li class="mb-3 p-3 bg-ctp-base/30 rounded-md transition-colors hover:bg-ctp-base/50" class:completed={selectedQuest === quest.href}>
32-
<a href={quest.href} on:click={() => selectQuest(quest.href)} class="flex items-center no-underline text-ctp-text text-xl">
33-
<span class="w-5 h-5 border-2 rounded-full mr-3 bg-transparent transition-all" class:border-ctp-green={selectedQuest === quest.href} class:bg-ctp-green={selectedQuest === quest.href} class:border-ctp-mocha={selectedQuest !== quest.href}></span>
34-
<span class="flex-grow" class:line-through={selectedQuest === quest.href} class:text-ctp-subtext0={selectedQuest === quest.href}>{$t(quest.text)}</span>
39+
<li
40+
class="mb-3 p-3 bg-ctp-base/30 rounded-md transition-colors hover:bg-ctp-base/50"
41+
class:completed={selectedQuest === quest.href}
42+
>
43+
<a
44+
href={quest.href}
45+
on:click={() => selectQuest(quest.href)}
46+
class="flex items-center no-underline text-ctp-text text-xl"
47+
>
48+
<span
49+
class="w-5 h-5 border-2 rounded-full mr-3 bg-transparent transition-all"
50+
class:border-ctp-green={selectedQuest === quest.href}
51+
class:bg-ctp-green={selectedQuest === quest.href}
52+
class:border-ctp-mocha={selectedQuest !== quest.href}
53+
></span>
54+
<span
55+
class="flex-grow"
56+
class:line-through={selectedQuest === quest.href}
57+
class:text-ctp-subtext0={selectedQuest === quest.href}
58+
>{$t(quest.text)}</span
59+
>
3560
</a>
3661
</li>
3762
{/each}
3863
</ul>
3964
</aside>
40-
41-

‎src/lib/components/LangToggle.svelte‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script>
2+
import { language } from "$lib/stores/language.js";
3+
function toggleLanguage() {
4+
language.setLang($language === "en" ? "he" : "en");
5+
}
6+
</script>
7+
8+
<div class="absolute top-4 right-4 flex items-center gap-4" dir="ltr">
9+
<button
10+
on:click={toggleLanguage}
11+
class="text-sm font-bold text-ctp-subtext0 transform transition-transform duration-200 hover:scale-110 active:scale-95"
12+
>
13+
{$language === "en" ? "HE" : "EN"}
14+
</button>
15+
</div>

‎src/lib/components/ThemeSwitch.svelte‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<script>
2+
import { theme } from "$lib/stores/theme.js";
3+
4+
function toggleTheme() {
5+
theme.setTheme($theme === "light" ? "dark" : "light");
6+
}
7+
</script>
8+
9+
<div dir="ltr">
10+
<button on:click={toggleTheme} aria-label="Toggle theme"
11+
><div class="tdnn" class:day={$theme === "light"}>
12+
<div class="moon" class:sun={$theme === "dark"}></div>
13+
</div>
14+
</button>
15+
</div>
16+
17+
<style>
18+
.tdnn {
19+
--darkbg: #251d29;
20+
--darkt: #ffd1f7;
21+
--lightbg: #fff;
22+
--lightt: #d43370;
23+
24+
--toggleHeight: 16em;
25+
--toggleWidth: 30em;
26+
--toggleBtnRadius: 10em;
27+
28+
--bgColor--night: #423966;
29+
--toggleBtn-bgColor--night: var(--bgColor--night);
30+
--mooncolor: #d9fbff;
31+
--bgColor--day: #9ee3fb;
32+
--toggleBtn-bgColor--day: var(--bgColor--day);
33+
}
34+
35+
.tdnn {
36+
margin: 0 auto;
37+
/*change size of toggle with font-size*/
38+
font-size: 30%;
39+
margin-top: 10em;
40+
position: relative;
41+
height: var(--toggleHeight);
42+
width: var(--toggleWidth);
43+
border-radius: var(--toggleHeight);
44+
transition: all 500ms ease-in-out;
45+
background: var(--bgColor--night);
46+
}
47+
48+
.moon {
49+
position: absolute;
50+
display: block;
51+
border-radius: 50%;
52+
transition: all 400ms ease-in-out;
53+
54+
top: 3em;
55+
left: 3em;
56+
transform: rotate(-75deg);
57+
width: var(--toggleBtnRadius);
58+
height: var(--toggleBtnRadius);
59+
background: var(--bgColor--night);
60+
box-shadow:
61+
3em 2.5em 0 0em var(--mooncolor) inset,
62+
rgba(255, 255, 255, 0.1) 0em -7em 0 -4.5em,
63+
rgba(255, 255, 255, 0.1) 3em 7em 0 -4.5em,
64+
rgba(255, 255, 255, 0.1) 2em 13em 0 -4em,
65+
rgba(255, 255, 255, 0.1) 6em 2em 0 -4.1em,
66+
rgba(255, 255, 255, 0.1) 8em 8em 0 -4.5em,
67+
rgba(255, 255, 255, 0.1) 6em 13em 0 -4.5em,
68+
rgba(255, 255, 255, 0.1) -4em 7em 0 -4.5em,
69+
rgba(255, 255, 255, 0.1) -1em 10em 0 -4.5em;
70+
}
71+
.sun {
72+
top: 4.5em;
73+
left: 18em;
74+
transform: rotate(0deg);
75+
width: 7em;
76+
height: 7em;
77+
background: #fff;
78+
box-shadow:
79+
3em 3em 0 5em #fff inset,
80+
0 -5em 0 -2.7em #fff,
81+
3.5em -3.5em 0 -3em #fff,
82+
5em 0 0 -2.7em #fff,
83+
3.5em 3.5em 0 -3em #fff,
84+
0 5em 0 -2.7em #fff,
85+
-3.5em 3.5em 0 -3em #fff,
86+
-5em 0 0 -2.7em #fff,
87+
-3.5em -3.5em 0 -3em #fff;
88+
}
89+
</style>

‎src/lib/components/ToggleButtons.svelte‎

Lines changed: 0 additions & 31 deletions
This file was deleted.

0 commit comments

Comments
 (0)