Mobile fixes

src/components/Header.astro

@@ -32,6 +32,14 @@ const currentPath = pathname.slice(1); // remove the first "/"
 		text-decoration: underline;;
 	}
 
+	@media only screen and (max-width: 1000px)  {
+		nav {
+			width: 100%;
+			border-radius: 0;
+			text-align: center;
+		}
+	}
+
 	@media only screen and (max-width: 500px)  {
 		a {
 			padding: 0 12px;

src/components/HeaderImage.astro

@@ -18,14 +18,17 @@ const { images, fox, foxReferences } = Astro.props;
 				<clipPath id="headerImageClipPath" clipPathUnits="objectBoundingBox">
 					<path d="M 1 0 L 0 0 C 0.05 0.4 0.05 0.6 0 1 L 1 1 L 1 0"></path>
 				</clipPath>
+				<clipPath id="headerImageClipPathTop" clipPathUnits="objectBoundingBox">
+					<path d="M 1 0.2 C 0.6667 -0.05 0.3333 -0.05 0 0.2 L 0 0.8 C 0.3333 1.05 0.6667 1.05 1 0.8 L 1 0.2"></path>
+				</clipPath>
 			</defs>
 		</svg>
-		<div class="image">
-			<ImageShow images={images} client:load />
-		</div>
 		<div class="text">
 			<slot />
 		</div>
+		<div class="image">
+			<ImageShow images={images} client:load />
+		</div>
 	</div>
 	{ !fox ? '' : (<img class="fox" src={imageFox.src} width={imageFox.width} height={imageFox.height} alt="Ein Fuchs" />)}
 	{ !foxReferences ? '' : (<img class="fox-references" src={imageFoxReferences.src} width={imageFoxReferences.width} height={imageFoxReferences.height} alt="Ein Fuchs" />)}
@@ -91,13 +94,35 @@ const { images, fox, foxReferences } = Astro.props;
 	}
 
 	@media only screen and (max-width: 750px)  {
-		.text {
+		.text,
+		.image {
 			width: 100%;
+			height: calc(min(50vh, 40vw));
+			position: relative;
 		}
 
 		.image {
-			display: none;
+			margin-top: calc(min(-2vh, -2vw));
+			clip-path: url(#headerImageClipPathTop);
+			height: calc(min(70vh, 70vw));
+			z-index:10;
+		}
+
+		.outerWrap {
+			height: auto;
 		}
+
+		.outerWrap::after {
+			content:'';
+			display: block;
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			width:100%;
+			background: #fff;
+			height: calc(min(20vh, 20vw));
+		}
+
 	}
 
 	@media only screen and (max-width: 1750px)  {

src/components/ImageShow.tsx

@@ -1,15 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import css from './ImageShow.module.css';
 import type { ImageMetadata } from 'astro';
-import useWindowSize from './useWindowSize';
 
 interface ImageShowProps {
 	images: ImageMetadata[];
 }
 
 export const ImageShow: React.FC<ImageShowProps> = ({images}) => {
 	const [index, setIndex] = useState(0);
-	const size = useWindowSize();  
 
 	useEffect(() => {
 		const interval = setInterval(() => {
@@ -23,10 +21,6 @@ export const ImageShow: React.FC<ImageShowProps> = ({images}) => {
 		setIndex((prevCounter) => (prevCounter + 1) % images.length);
 	}, []);
 
-	if(size.width && size.width < 750) {
-		return <></>;
-	}
-
 	return (<div className={css.show}>
 		{images.map((image, i) => (<img key={i} className={i === index  ? `${css.img} ${css.active}` : css.img} src={image.src} width={image.width} height={image.height} />))}
 	</div>);

src/components/Reference.module.css

@@ -131,6 +131,10 @@
 		float:none;	
 	}
 
+	.wrap.odd .textInner {
+		text-align: left;
+	}
+
 	.wrap .image img {
 		width: 100%;
 		position: relative;

src/components/TeamSlider.module.css

@@ -21,6 +21,8 @@
 
 .tabs {
 	padding-bottom: 8px;
+	position: relative;
+	z-index:10;
 }
 
 .slides {
@@ -40,7 +42,7 @@
 	text-align: center;
 	font-size: 2rem;
 	margin-top: 0;
-	margin-bottom: 0.25rem;
+	margin-bottom: 3rem;
 }
 
 @media only screen and (max-width: 1100px)  { 
@@ -50,4 +52,17 @@
 		position: relative;
 		z-index:2;
 	}
+}
+
+.mobile {
+	display: none;
+}
+
+@media only screen and (max-width: 1100px)  { 
+	.desktop {
+		display: none;
+	}
+	.mobile {
+		display: block;
+	}
 }

src/components/TeamSlider.tsx

@@ -19,8 +19,9 @@ const TeamSlider: React.FC<TeamSliderProps> = props => {
 
 	return <div className={css.wrap}>
 		<div className={css.headerWrap}><h3>{headline}</h3></div>
+		<div className={css.tabs + " " + css.mobile}>{slideTabs}</div>
 		<div className={css.slides}>{slideNodes}</div>
-		<div className={css.tabs}>{slideTabs}</div>
+		<div className={css.tabs + " " + css.desktop}>{slideTabs}</div>
 	</div>;
 };
 

src/components/TeamSliderSlide.module.css

@@ -58,7 +58,7 @@
 
 .nameWrap {
 	display: block;
-	width: 24rem;
+	width: 20rem;
 	max-width: 100%;
 	box-sizing: border-box;
 	margin: 0 auto;
@@ -89,6 +89,20 @@
 }
 
 @media only screen and (max-width: 1100px)  {
+
+	.left p {
+		font-size: 1.2rem;
+	}
+
+	.left,
+	.nameWrap {
+		padding:0 var(--content-padding);
+	}
+
+	.nameWrap {
+		padding-top: 1rem;
+	}
+
 	.right,
 	.left {
 		width: 100%;
@@ -98,8 +112,13 @@
 		margin: 0px auto;
 	}
 
+	.right,
+	.slide {
+		padding: 0;
+	}
+
 	.left {
-		padding: 0 0 2rem;
+		padding: 0 2rem 2rem;
 	}
 
 	.right {
@@ -138,3 +157,4 @@
 		text-align: center;
 	}
 }
+