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 (
@@ -170,6 +183,16 @@ export const LogoIcon = ({ face }: { face?: "left" | "right" }) => { fill="currentColor" /> + {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) {