feat: adjust logos and header effect

Author: pixelass

src/components/footer.tsx

@@ -8,7 +8,7 @@ import ReactMarkdown from "react-markdown";
 import {toPhone} from "../utils/number";
 import {DE} from "./flags/de";
 import {US} from "./flags/us";
-import {KellerkindLogo} from "./logo";
+import {KellerkindLogo, PngLogo} from "./logo";
 import Kellerkind from "./kellerkind";
 
 const Nav = styled.nav`
@@ -184,14 +184,16 @@ const Footer: React.FC<WithIntl> = ({intl}) => {
 							<h3>
 								{intl.messages.address} & {intl.messages.more}
 							</h3>
+							<Kellerkind />
+							<ReactMarkdown
+								source={location.address.childMarkdownRemark.rawMarkdownBody}
+							/>
 							<div>
 								<a href={`tel:${toPhone(location.telephone)}`}>
 									{location.telephone}
 								</a>
 							</div>
-							<ReactMarkdown
-								source={location.address.childMarkdownRemark.rawMarkdownBody}
-							/>
+							<Spacing size="xs" />
 							<div>
 								<Social
 									href="https://www.facebook.com/Fatih-Sahanoglucom-234829333300330"
@@ -215,7 +217,7 @@ const Footer: React.FC<WithIntl> = ({intl}) => {
 							<h3>
 								<Language intl={intl} />
 							</h3>
-							<KellerkindLogo style={{fontSize: "10em"}} />
+							<PngLogo style={{fontSize: "7em"}} />
 						</Column>
 					</Row>
 				</Grid>

src/components/logo.tsx

@@ -14,6 +14,18 @@ export const Logo = props => (
 		<path fill="currentColor" d={tree} />
 	</Svg>
 );
+export const PngLogoWrapper = styled.div`
+	width: 1em;
+	img {
+		width: 100%;
+	}
+`;
+export const PngLogo = props => (
+	<PngLogoWrapper {...props}>
+		<img src="/images/logo_light.png" alt="logo" />
+	</PngLogoWrapper>
+);
+
 export const LogoWrapper = styled.div`
 	position: relative;
 	display: inline-flex;

src/components/navigation.tsx

@@ -8,9 +8,7 @@ import {minMax} from "../utils/number";
 import {useTheme} from "../theme/theme";
 import {injectIntl} from "gatsby-plugin-intl";
 
-const Nav = styled.nav`
-	background: linear-gradient(to top, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0.9));
-	color: black;
+const Nav = styled.nav<{sticky?: boolean}>`
 	position: sticky;
 	width: 100%;
 	top: 0;
@@ -20,6 +18,14 @@ const Nav = styled.nav`
 	align-content: center;
 	align-items: center;
 	overflow: hidden;
+	background: linear-gradient(to top, rgba(255, 255, 255, 0.8) 20%, rgba(255, 255, 255, 0.5));
+	color: black;
+	${({sticky}) =>
+		sticky &&
+		css`
+			box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.01), 0 0 10px 0 rgba(0, 0, 0, 0.03);
+			backdrop-filter: saturate(400%) blur(10px);
+		`};
 `;
 
 const Stretch = styled.div<{justify?: string}>`
@@ -109,7 +115,7 @@ export const MobileNavigation: React.FC<WithClassName & WithIntl> = ({className,
 						style={{
 							fontSize: "2em"
 						}}>
-						<KellerkindLogo />
+						<Logo />
 					</HomeLink>
 					<Stretch>
 						<Link to={`/${intl.locale}/products`}>{intl.messages.products}</Link>
@@ -128,15 +134,19 @@ export const MainNavigation: React.FC<WithClassName & WithIntl> = ({className, i
 	const scrollY = useScrollY();
 	const minSizeDiff = header.height - header.minHeight;
 	const offset = header.height - minMax(0, minSizeDiff, scrollY);
+	const sizeDiff = header.height - offset;
 	const scale = offset / header.height;
+	const sticky = offset === header.minHeight;
+	const rotation = (sizeDiff / minSizeDiff) * 180 + 180;
 	return (
 		<Stage className={className}>
 			<Header>
 				<Nav
 					role="navigation"
 					style={{
 						height: offset
-					}}>
+					}}
+					sticky={sticky}>
 					<Stretch justify="flex-end">
 						<Link to={`/${intl.locale}/services`}>{intl.messages.services}</Link>
 						<Link to={`/${intl.locale}/location`}>{intl.messages.location}</Link>
@@ -145,9 +155,9 @@ export const MainNavigation: React.FC<WithClassName & WithIntl> = ({className, i
 						to="/"
 						style={{
 							fontSize: logo.size,
-							transform: `scale3d(${scale}, ${scale}, 1)`
+							transform: `scale3d(${scale}, ${scale}, 1) rotate3d(0,0,1,${rotation}deg)`
 						}}>
-						<KellerkindLogo />
+						<Logo />
 					</HomeLink>
 					<Stretch>
 						<Link to={`/${intl.locale}/products`}>{intl.messages.products}</Link>