diff --git a/public/assets/flame-to-dark.lottie b/public/assets/flame-to-dark.lottie
index 36e8f98..d600c56 100644
Binary files a/public/assets/flame-to-dark.lottie and b/public/assets/flame-to-dark.lottie differ
diff --git a/public/assets/flame-to-light.lottie b/public/assets/flame-to-light.lottie
index 51cf995..d8080c1 100644
Binary files a/public/assets/flame-to-light.lottie and b/public/assets/flame-to-light.lottie differ
diff --git a/public/assets/roze_barcode_outlined_SVG.svg b/public/assets/roze_barcode_outlined_SVG.svg
new file mode 100644
index 0000000..4519fce
--- /dev/null
+++ b/public/assets/roze_barcode_outlined_SVG.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/assets/zwart_barcode_outlined_SVG.svg b/public/assets/zwart_barcode_outlined_SVG.svg
new file mode 100644
index 0000000..26f330b
--- /dev/null
+++ b/public/assets/zwart_barcode_outlined_SVG.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 4e4a00e..3a1c437 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -15,20 +15,11 @@ import { AboutComponent } from "./about/about.component";
styleUrl: './app.component.scss'
})
export class AppComponent {
- title = 'ontvlambaar';
- theme = "light"
+ title = 'Ontvlambaar';
+ theme = "dark"
private detectColorScheme(): void {
- //local storage is used to override OS theme settings
- if(localStorage.getItem("theme")){
- if(localStorage.getItem("theme") == "dark"){
- this.theme = "dark";
- }
- } else if(window.matchMedia("(prefers-color-scheme: dark)").matches) {
- //OS theme setting detected as dark
- this.theme = "dark";
- }
-
+ this.theme = localStorage.getItem("theme") ?? 'dark';
document.documentElement.setAttribute("data-theme", this.theme);
}
diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
index 8db3f11..d7264d3 100644
--- a/src/app/footer/footer.component.html
+++ b/src/app/footer/footer.component.html
@@ -5,6 +5,5 @@
BTW BE0673 769 126
-
- lotte@ontvlambaar.be
-
+
+
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss
index a006f4f..8243406 100644
--- a/src/app/footer/footer.component.scss
+++ b/src/app/footer/footer.component.scss
@@ -30,9 +30,8 @@
}
}
-.barcode {
- font-family: 'Libre Barcode 128 Text';
- font-size: 5rem;
+img {
+ max-width: 60%;
}
@media only screen and (max-width: $small-screen) {
@@ -44,9 +43,7 @@
margin-bottom: 2rem;
}
- .barcode {
- font-size: 3rem;
- overflow: hidden;
- text-overflow: ellipsis;
+ img {
+ max-width: 100%;;
}
}
diff --git a/src/app/toggle/toggle.component.ts b/src/app/toggle/toggle.component.ts
index daa705b..19cef4b 100644
--- a/src/app/toggle/toggle.component.ts
+++ b/src/app/toggle/toggle.component.ts
@@ -1,4 +1,4 @@
-import { Component, input, output, signal } from '@angular/core';
+import { Component, input, output, signal, WritableSignal } from '@angular/core';
import { DotLottie } from '@lottiefiles/dotlottie-web';
@Component({
@@ -14,6 +14,7 @@ export class ToggleComponent {
toggleOn = output();
toggleValue = input();
+ private isChanging: WritableSignal = signal(false);
isDarkMode: any = signal(this.toggleValue());
@@ -36,7 +37,10 @@ export class ToggleComponent {
}
public themeChange(): void {
- this.playForward();
+ if (!this.isChanging()) {
+ this.isChanging.set(true);
+ this.playForward();
+ }
}
public playForward(): void {
@@ -49,11 +53,19 @@ export class ToggleComponent {
this.darkLottie.setFrame(0);
}
+ const newValue = !this.isDarkMode();
+ setTimeout(() => {
+ this.toggleOn.emit(newValue);
+ }, this.isDarkMode() ? 600 : 350);
+
setTimeout(() => {
this.isDarkMode.set(!this.isDarkMode());
- this.toggleOn.emit(this.isDarkMode());
+
this.darkLottie.pause();
this.lightLottie.pause();
+
+ this.isChanging.set(false);
+
}, this.isDarkMode() ? 600 : 400);
}
}
diff --git a/src/index.html b/src/index.html
index 711cb9f..65624ae 100644
--- a/src/index.html
+++ b/src/index.html
@@ -12,8 +12,6 @@
-
-