diff --git a/web/public/assets/graphics/nisselue-liten.svg b/web/public/assets/graphics/nisselue-liten.svg
new file mode 100644
index 0000000..565ca27
--- /dev/null
+++ b/web/public/assets/graphics/nisselue-liten.svg
@@ -0,0 +1,8 @@
+
diff --git a/web/public/assets/graphics/nisselue-stor.svg b/web/public/assets/graphics/nisselue-stor.svg
new file mode 100644
index 0000000..5c84e50
--- /dev/null
+++ b/web/public/assets/graphics/nisselue-stor.svg
@@ -0,0 +1,8 @@
+
diff --git a/web/src/components/general/Logo.tsx b/web/src/components/general/Logo.tsx
index f6c4c62..faa62a6 100644
--- a/web/src/components/general/Logo.tsx
+++ b/web/src/components/general/Logo.tsx
@@ -5,6 +5,7 @@ import { usePathname } from "next/navigation";
export const Logo = () => {
// Check if the current page is the index page
const isIndexPage = usePathname() === "/";
+ const christmas = false;
return (
{
fill="currentColor"
/>
+ {christmas && (
+
+ )}
);
};
@@ -150,6 +161,8 @@ export const LogoText = () => {
};
export const LogoIcon = ({ face }: { face?: "left" | "right" }) => {
+ const christmas = false;
+
return (
+ {christmas && (
+
+ )}
);
};
diff --git a/web/src/components/general/logo.module.scss b/web/src/components/general/logo.module.scss
index 37e79c3..1def8e4 100644
--- a/web/src/components/general/logo.module.scss
+++ b/web/src/components/general/logo.module.scss
@@ -2,6 +2,7 @@
color: currentColor;
width: 12rem;
transition: width .3s ease;
+ position: relative;
&.index {
width: 16rem;
@@ -9,24 +10,40 @@
svg {
width: 100%;
+ display: block;
}
&.main {
margin: calc(var(--spacing-sitepadding-block)*-.6) 0 0 calc(var(--spacing-sitepadding-inline)*-.6);
}
+
+ .christmas {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ }
}
.logoIcon {
color: currentColor;
width: 3rem;
+ position: relative;
svg {
width: 100%;
+ display: block;
}
&.right {
transform: scaleX(-1);
}
+
+ .christmas {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 136.206897%;
+ }
}
@media (min-width: 1920px) {