lfg2025/kaiser-natron
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(navbar): mobile search + menu use cream-wash pill with accent icon

Browse Source 
Match the overlay menu's close button: subtle translucent fill on brand
green with a yellow icon. Drops the flat brand-on-brand buttons whose
shadows didn't read on a green page.
This commit is contained in:
Dorian
2026-04-21 13:49:21 +01:00
parent 3f9163edf4
commit ea6c1ef906
7 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/assets/HeroPreview-7ldm9vem.js → dist/assets/HeroPreview-C-malqfh.js vendored
View File

@@ -1 +1 @@
import{$ as e,L as t,k as n,m as r,o as i,p as a,s as o,tt as s,u as c,x as l}from"./runtime-core.esm-bundler-CjdnoyKJ.js";import{a as u}from"./vue-router-BrNWkU63.js";import{t as d}from"./i18n-DuB4OiH1.js";import{t as f}from"./Navbar-CeYJISHV.js";import{t as p}from"./Hero-CLAu1aAp.js";var m={class:`italic font-light text-brand-soft`},h=`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview.png`,g={__name:`HeroPreview`,setup(g){let _=u(),{t:v}=d(),y=i(()=>[`split`,`centered`].includes(_.query.variant)?_.query.variant:`split`),b=i(()=>[`cream`,`paper`,`brand`].includes(_.query.tone)?_.query.tone:`cream`),x=i(()=>b.value===`brand`?`brand`:b.value);return(i,u)=>(l(),c(`div`,{class:e([`min-h-screen`,b.value===`brand`?`bg-brand`:`bg-surface`])},[r(f,{variant:x.value,"cart-count":0},null,8,[`variant`]),r(p,{variant:y.value,tone:b.value,eyebrow:t(v)(`ds.hero.eyebrow`),subheadline:t(v)(`ds.hero.sub`),image:h,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,badge:t(v)(`ds.badges.featured`),"cta-label":t(v)(`ds.buttons.addToCart`),"secondary-label":t(v)(`ds.buttons.learnMore`)},{headline:n(()=>[a(s(t(v)(`ds.hero.headline.a`))+` `,1),o(`em`,m,s(t(v)(`ds.hero.headline.em`)),1),a(` `+s(t(v)(`ds.hero.headline.b`)),1)]),_:1},8,[`variant`,`tone`,`eyebrow`,`subheadline`,`badge`,`cta-label`,`secondary-label`])],2))}};export{g as default};
import{$ as e,L as t,k as n,m as r,o as i,p as a,s as o,tt as s,u as c,x as l}from"./runtime-core.esm-bundler-CjdnoyKJ.js";import{a as u}from"./vue-router-BrNWkU63.js";import{t as d}from"./i18n-DuB4OiH1.js";import{t as f}from"./Navbar-y1ThyB85.js";import{t as p}from"./Hero-CLAu1aAp.js";var m={class:`italic font-light text-brand-soft`},h=`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview.png`,g={__name:`HeroPreview`,setup(g){let _=u(),{t:v}=d(),y=i(()=>[`split`,`centered`].includes(_.query.variant)?_.query.variant:`split`),b=i(()=>[`cream`,`paper`,`brand`].includes(_.query.tone)?_.query.tone:`cream`),x=i(()=>b.value===`brand`?`brand`:b.value);return(i,u)=>(l(),c(`div`,{class:e([`min-h-screen`,b.value===`brand`?`bg-brand`:`bg-surface`])},[r(f,{variant:x.value,"cart-count":0},null,8,[`variant`]),r(p,{variant:y.value,tone:b.value,eyebrow:t(v)(`ds.hero.eyebrow`),subheadline:t(v)(`ds.hero.sub`),image:h,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,badge:t(v)(`ds.badges.featured`),"cta-label":t(v)(`ds.buttons.addToCart`),"secondary-label":t(v)(`ds.buttons.learnMore`)},{headline:n(()=>[a(s(t(v)(`ds.hero.headline.a`))+` `,1),o(`em`,m,s(t(v)(`ds.hero.headline.em`)),1),a(` `+s(t(v)(`ds.hero.headline.b`)),1)]),_:1},8,[`variant`,`tone`,`eyebrow`,`subheadline`,`badge`,`cta-label`,`secondary-label`])],2))}};export{g as default};

2
dist/assets/HomePage-aoY4NWnm.js → dist/assets/HomePage-C69nR5aC.js vendored
View File

@@ -1 +1 @@
import{L as e,k as t,m as n,p as r,s as i,tt as a,u as o,x as s}from"./runtime-core.esm-bundler-CjdnoyKJ.js";import{t as c}from"./i18n-DuB4OiH1.js";import{t as l}from"./products-wp4PtA61.js";import{t as u}from"./Navbar-CeYJISHV.js";import{t as d}from"./Hero-CLAu1aAp.js";var f={class:`h-svh flex flex-col bg-brand overflow-hidden`},p={class:`flex-1 flex items-center`},m={class:`italic font-light text-accent-soft`},h=`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview.png`,g={__name:`HomePage`,setup(g){let{t:_}=c();return(c,g)=>(s(),o(`div`,f,[n(u,{variant:`brand`,layout:`standard`,"cart-count":0,products:e(l)},null,8,[`products`]),i(`div`,p,[n(d,{class:`w-full`,variant:`split`,tone:`brand`,eyebrow:e(_)(`ds.hero.eyebrow`),subheadline:e(_)(`ds.hero.sub`),image:h,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,"cta-label":e(_)(`ds.buttons.addToCart`),"secondary-label":e(_)(`ds.buttons.learnMore`),"cta-href":`/shop`,"secondary-href":`/anwendungen`},{headline:t(()=>[r(a(e(_)(`ds.hero.headline.a`))+` `,1),i(`em`,m,a(e(_)(`ds.hero.headline.em`)),1),r(` `+a(e(_)(`ds.hero.headline.b`)),1)]),_:1},8,[`eyebrow`,`subheadline`,`cta-label`,`secondary-label`])])]))}};export{g as default};
import{L as e,k as t,m as n,p as r,s as i,tt as a,u as o,x as s}from"./runtime-core.esm-bundler-CjdnoyKJ.js";import{t as c}from"./i18n-DuB4OiH1.js";import{t as l}from"./products-wp4PtA61.js";import{t as u}from"./Navbar-y1ThyB85.js";import{t as d}from"./Hero-CLAu1aAp.js";var f={class:`h-svh flex flex-col bg-brand overflow-hidden`},p={class:`flex-1 flex items-center`},m={class:`italic font-light text-accent-soft`},h=`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview.png`,g={__name:`HomePage`,setup(g){let{t:_}=c();return(c,g)=>(s(),o(`div`,f,[n(u,{variant:`brand`,layout:`standard`,"cart-count":0,products:e(l)},null,8,[`products`]),i(`div`,p,[n(d,{class:`w-full`,variant:`split`,tone:`brand`,eyebrow:e(_)(`ds.hero.eyebrow`),subheadline:e(_)(`ds.hero.sub`),image:h,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,"cta-label":e(_)(`ds.buttons.addToCart`),"secondary-label":e(_)(`ds.buttons.learnMore`),"cta-href":`/shop`,"secondary-href":`/anwendungen`},{headline:t(()=>[r(a(e(_)(`ds.hero.headline.a`))+` `,1),i(`em`,m,a(e(_)(`ds.hero.headline.em`)),1),r(` `+a(e(_)(`ds.hero.headline.b`)),1)]),_:1},8,[`eyebrow`,`subheadline`,`cta-label`,`secondary-label`])])]))}};export{g as default};

2
dist/assets/Navbar-CeYJISHV.js → dist/assets/Navbar-y1ThyB85.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/assets/NavbarPreview-ebIV-y16.js → dist/assets/NavbarPreview-BXCSq88K.js vendored
View File

@@ -1 +1 @@
import{C as e,et as t,m as n,o as r,r as i,s as a,u as o,x as s}from"./runtime-core.esm-bundler-CjdnoyKJ.js";import{a as c}from"./vue-router-BrNWkU63.js";import{t as l}from"./Navbar-CeYJISHV.js";var u={class:`min-h-screen bg-surface`},d={class:`max-w-5xl mx-auto px-6 py-16 space-y-6`},f={__name:`NavbarPreview`,setup(f){let p=c(),m=r(()=>{let e=p.query.variant;return[`paper`,`cream`,`brand`].includes(e)?e:`paper`}),h=r(()=>p.query.layout===`floating`?`floating`:`standard`);return(r,c)=>(s(),o(`div`,u,[n(l,{variant:m.value,layout:h.value,"cart-count":2},null,8,[`variant`,`layout`]),a(`div`,d,[(s(),o(i,null,e([40,28,40,32,40,28,36,40],e=>a(`div`,{key:e,class:`rounded-md border border-line bg-paper`,style:t({height:e*4+`px`})},null,4)),64))])]))}};export{f as default};
import{C as e,et as t,m as n,o as r,r as i,s as a,u as o,x as s}from"./runtime-core.esm-bundler-CjdnoyKJ.js";import{a as c}from"./vue-router-BrNWkU63.js";import{t as l}from"./Navbar-y1ThyB85.js";var u={class:`min-h-screen bg-surface`},d={class:`max-w-5xl mx-auto px-6 py-16 space-y-6`},f={__name:`NavbarPreview`,setup(f){let p=c(),m=r(()=>{let e=p.query.variant;return[`paper`,`cream`,`brand`].includes(e)?e:`paper`}),h=r(()=>p.query.layout===`floating`?`floating`:`standard`);return(r,c)=>(s(),o(`div`,u,[n(l,{variant:m.value,layout:h.value,"cart-count":2},null,8,[`variant`,`layout`]),a(`div`,d,[(s(),o(i,null,e([40,28,40,32,40,28,36,40],e=>a(`div`,{key:e,class:`rounded-md border border-line bg-paper`,style:t({height:e*4+`px`})},null,4)),64))])]))}};export{f as default};

4
dist/assets/index-DnYgINTf.js → dist/assets/index-Dlr5iu8z.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/index.html vendored
View File

@@ -12,7 +12,7 @@
href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,200;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,200;1,9..144,400;1,9..144,600&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap"
rel="stylesheet"
/>
<script type="module" crossorigin src="/assets/index-DnYgINTf.js"></script>
<script type="module" crossorigin src="/assets/index-Dlr5iu8z.js"></script>
<link rel="modulepreload" crossorigin href="/assets/_plugin-vue_export-helper-CXTkFu_Z.js">
<link rel="modulepreload" crossorigin href="/assets/runtime-core.esm-bundler-CjdnoyKJ.js">
<link rel="modulepreload" crossorigin href="/assets/runtime-dom.esm-bundler-CDZvOKZN.js">

4
src/design-system/components/Navbar.vue
View File

@@ -175,7 +175,7 @@ onBeforeUnmount(() => {
>
<button
type="button"
class="w-14 h-14 rounded-full bg-brand text-accent shadow-sm flex items-center justify-center transition-transform duration-base ease-out hover:-translate-y-0.5 active:translate-y-0"
class="w-14 h-14 rounded-full bg-cream-wash text-accent hover:bg-cream-wash-strong flex items-center justify-center transition-all duration-base ease-out hover:-translate-y-0.5 active:translate-y-0"
:aria-label="t('search.open')"
@click="searchOpen = true"
>
@@ -203,7 +203,7 @@ onBeforeUnmount(() => {
</button>
<button
type="button"
class="w-14 h-14 rounded-full bg-brand text-accent shadow-lg flex items-center justify-center transition-transform duration-base ease-out hover:-translate-y-0.5 active:translate-y-0"
class="w-14 h-14 rounded-full bg-cream-wash text-accent hover:bg-cream-wash-strong flex items-center justify-center transition-all duration-base ease-out hover:-translate-y-0.5 active:translate-y-0"
:aria-label="t('menu.open')"
@click="menuOpen = true"
>