1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-16 23:55:32 -04:00

remove per-page getLayout option (maybe temporarily?)

This commit is contained in:
2022-04-19 17:38:20 -04:00
parent d5690d2972
commit d50ae0f85a
10 changed files with 228 additions and 314 deletions

View File

@@ -11,6 +11,14 @@ const Wrapper = styled("header", {
borderBottom: "1px solid $kindaLight",
backgroundColor: "$backgroundHeader",
// stick to the top of the page when scrolling
position: "sticky",
top: 0,
// blurry glass-like background effect (except on firefox...?)
backdropFilter: "saturate(180%) blur(5px)",
zIndex: 9999,
// light-dark theme switch fading
transition: "background 0.25s ease, border 0.25s ease",
@@ -18,19 +26,6 @@ const Wrapper = styled("header", {
padding: "0.75em 1.25em",
height: "5.9em",
},
variants: {
sticky: {
true: {
position: "sticky",
top: 0,
// blurry glass-like background effect (except on firefox)
backdropFilter: "saturate(180%) blur(5px)",
zIndex: 9999,
},
},
},
});
const Nav = styled("nav", {
@@ -52,12 +47,10 @@ const ResponsiveMenu = styled(Menu, {
},
});
export type HeaderProps = ComponentProps<typeof Wrapper> & {
sticky?: boolean;
};
export type HeaderProps = ComponentProps<typeof Wrapper>;
const Header = ({ sticky, ...rest }: HeaderProps) => (
<Wrapper sticky={sticky} {...rest}>
const Header = ({ ...rest }: HeaderProps) => (
<Wrapper {...rest}>
<Nav>
<Selfie />
<ResponsiveMenu />