diff --git a/src/components/analytics-banner.webc b/src/components/analytics-banner.webc index bff7950..2c2ea6e 100644 --- a/src/components/analytics-banner.webc +++ b/src/components/analytics-banner.webc @@ -33,8 +33,9 @@

- 📊 Analytics 💡 May I collect some anonymized data about the device you use - to view this site? I won't know who you are. See: Privacy Policy + 📊 Analytics 💡 May I collect anonymized data about your device to help me + improve this site? No personally identifiable data is stored. See: + Privacy Policy

Yeah sure Nope diff --git a/src/components/head/page-head-meta.webc b/src/components/head/page-head-meta.webc index 3d46c3e..1e40d4e 100644 --- a/src/components/head/page-head-meta.webc +++ b/src/components/head/page-head-meta.webc @@ -1,8 +1,7 @@ - + + Home @@ -32,7 +33,11 @@ inset: 0.5em; display: grid; + grid-auto-flow: column; + justify-content: space-between; justify-items: end; + align-items: center; + gap: 1em; background-color: var(--nav-background-color); box-shadow: var(--box-shadow); @@ -44,7 +49,7 @@ z-index: 2; - @media (min-width: 35em) { + @media (min-width: 48em) { --nav-spacing: 1.5em; --nav-background-color: transparent; --nav-border: none; @@ -70,7 +75,7 @@ margin-block: 0.75em; margin-inline: 1em; - @media (min-width: 35em) { + @media (min-width: 48em) { display: none; } } @@ -109,7 +114,7 @@ opacity: 0; transition: opacity 0.4s ease-in-out; - @media (min-width: 35em) { + @media (min-width: 48em) { --nav-items-position: static; --nav-items-orientation: row nowrap; align-items: start; @@ -123,7 +128,7 @@ height: 0; transition: height 0.4s ease-in-out; - @media (min-width: 35em) { + @media (min-width: 48em) { height: 100%; } } @@ -138,10 +143,36 @@ padding-block: calc(var(--nav-spacing) / 2); transition: color 0.4s ease; + + & svg { + width: 1em; + height: 1em; + transition: fill 0.4s ease; + } + } + + :host .home { + display: flex; + align-items: center; + gap: 0.125em; + + padding-inline: 0.75em 1em; + + z-index: 3; + + @media (min-width: 48em) { + background-color: var(--clr-nav-background); + box-shadow: var(--box-shadow); + border-radius: inherit; + } } :host .link:hover { color: var(--clr-nav-link-hover); + + & svg { + fill: var(--clr-nav-link-hover); + } } :host .link-active { diff --git a/src/components/profile.webc b/src/components/profile.webc index 8d1bb0c..85463f0 100644 --- a/src/components/profile.webc +++ b/src/components/profile.webc @@ -1,7 +1,10 @@