diff --git a/src/assets/fonts/archivo/Archivo-Italic.eot b/src/assets/fonts/archivo/Archivo-Italic.eot deleted file mode 100644 index 7507117..0000000 Binary files a/src/assets/fonts/archivo/Archivo-Italic.eot and /dev/null differ diff --git a/src/assets/fonts/archivo/Archivo-Italic.ttf b/src/assets/fonts/archivo/Archivo-Italic.ttf deleted file mode 100644 index cbf2f97..0000000 Binary files a/src/assets/fonts/archivo/Archivo-Italic.ttf and /dev/null differ diff --git a/src/assets/fonts/archivo/Archivo-Italic.woff b/src/assets/fonts/archivo/Archivo-Italic.woff deleted file mode 100644 index 96a9dce..0000000 Binary files a/src/assets/fonts/archivo/Archivo-Italic.woff and /dev/null differ diff --git a/src/assets/fonts/archivo/Archivo-Italic.woff2 b/src/assets/fonts/archivo/Archivo-Italic.woff2 deleted file mode 100644 index e2bacee..0000000 Binary files a/src/assets/fonts/archivo/Archivo-Italic.woff2 and /dev/null differ diff --git a/src/assets/fonts/archivo/Archivo-Light.eot b/src/assets/fonts/archivo/Archivo-Light.eot deleted file mode 100644 index fefd8bf..0000000 Binary files a/src/assets/fonts/archivo/Archivo-Light.eot and /dev/null differ diff --git a/src/assets/fonts/archivo/Archivo-Light.ttf b/src/assets/fonts/archivo/Archivo-Light.ttf deleted file mode 100644 index ad04070..0000000 Binary files a/src/assets/fonts/archivo/Archivo-Light.ttf and /dev/null differ diff --git a/src/assets/fonts/archivo/Archivo-Light.woff b/src/assets/fonts/archivo/Archivo-Light.woff deleted file mode 100644 index 7a3e180..0000000 Binary files a/src/assets/fonts/archivo/Archivo-Light.woff and /dev/null differ diff --git a/src/assets/fonts/archivo/Archivo-Light.woff2 b/src/assets/fonts/archivo/Archivo-Light.woff2 deleted file mode 100644 index fe42d3a..0000000 Binary files a/src/assets/fonts/archivo/Archivo-Light.woff2 and /dev/null differ diff --git a/src/assets/fonts/archivo/Archivo-Regular.eot b/src/assets/fonts/archivo/Archivo-Regular.eot deleted file mode 100644 index ac6b53b..0000000 Binary files a/src/assets/fonts/archivo/Archivo-Regular.eot and /dev/null differ diff --git a/src/assets/fonts/archivo/Archivo-Regular.ttf b/src/assets/fonts/archivo/Archivo-Regular.ttf deleted file mode 100644 index 727f6d3..0000000 Binary files a/src/assets/fonts/archivo/Archivo-Regular.ttf and /dev/null differ diff --git a/src/assets/fonts/archivo/Archivo-Regular.woff b/src/assets/fonts/archivo/Archivo-Regular.woff deleted file mode 100644 index 84d2f42..0000000 Binary files a/src/assets/fonts/archivo/Archivo-Regular.woff and /dev/null differ diff --git a/src/assets/fonts/archivo/Archivo-Regular.woff2 b/src/assets/fonts/archivo/Archivo-Regular.woff2 deleted file mode 100644 index 7938308..0000000 Binary files a/src/assets/fonts/archivo/Archivo-Regular.woff2 and /dev/null differ diff --git a/src/assets/fonts/archivo/Archivo-SemiBold.eot b/src/assets/fonts/archivo/Archivo-SemiBold.eot deleted file mode 100644 index ca67fde..0000000 Binary files a/src/assets/fonts/archivo/Archivo-SemiBold.eot and /dev/null differ diff --git a/src/assets/fonts/archivo/Archivo-SemiBold.ttf b/src/assets/fonts/archivo/Archivo-SemiBold.ttf deleted file mode 100644 index 4874376..0000000 Binary files a/src/assets/fonts/archivo/Archivo-SemiBold.ttf and /dev/null differ diff --git a/src/assets/fonts/archivo/Archivo-SemiBold.woff b/src/assets/fonts/archivo/Archivo-SemiBold.woff deleted file mode 100644 index 7a5a887..0000000 Binary files a/src/assets/fonts/archivo/Archivo-SemiBold.woff and /dev/null differ diff --git a/src/assets/fonts/archivo/Archivo-SemiBold.woff2 b/src/assets/fonts/archivo/Archivo-SemiBold.woff2 deleted file mode 100644 index ef38578..0000000 Binary files a/src/assets/fonts/archivo/Archivo-SemiBold.woff2 and /dev/null differ diff --git a/src/assets/fonts/clash/ClashDisplay-Bold.eot b/src/assets/fonts/clash/ClashDisplay-Bold.eot deleted file mode 100644 index ade9e62..0000000 Binary files a/src/assets/fonts/clash/ClashDisplay-Bold.eot and /dev/null differ diff --git a/src/assets/fonts/clash/ClashDisplay-Bold.ttf b/src/assets/fonts/clash/ClashDisplay-Bold.ttf deleted file mode 100644 index d6b2a34..0000000 Binary files a/src/assets/fonts/clash/ClashDisplay-Bold.ttf and /dev/null differ diff --git a/src/assets/fonts/clash/ClashDisplay-Bold.woff b/src/assets/fonts/clash/ClashDisplay-Bold.woff deleted file mode 100644 index 0bfbe7c..0000000 Binary files a/src/assets/fonts/clash/ClashDisplay-Bold.woff and /dev/null differ diff --git a/src/assets/fonts/clash/ClashDisplay-Bold.woff2 b/src/assets/fonts/clash/ClashDisplay-Bold.woff2 deleted file mode 100644 index 87f15ca..0000000 Binary files a/src/assets/fonts/clash/ClashDisplay-Bold.woff2 and /dev/null differ diff --git a/src/assets/fonts/clash/ClashDisplay-Regular.eot b/src/assets/fonts/clash/ClashDisplay-Regular.eot deleted file mode 100644 index 00732ea..0000000 Binary files a/src/assets/fonts/clash/ClashDisplay-Regular.eot and /dev/null differ diff --git a/src/assets/fonts/clash/ClashDisplay-Regular.ttf b/src/assets/fonts/clash/ClashDisplay-Regular.ttf deleted file mode 100644 index 4237664..0000000 Binary files a/src/assets/fonts/clash/ClashDisplay-Regular.ttf and /dev/null differ diff --git a/src/assets/fonts/clash/ClashDisplay-Regular.woff b/src/assets/fonts/clash/ClashDisplay-Regular.woff deleted file mode 100644 index fb84ab8..0000000 Binary files a/src/assets/fonts/clash/ClashDisplay-Regular.woff and /dev/null differ diff --git a/src/assets/fonts/clash/ClashDisplay-Regular.woff2 b/src/assets/fonts/clash/ClashDisplay-Regular.woff2 deleted file mode 100644 index 496b089..0000000 Binary files a/src/assets/fonts/clash/ClashDisplay-Regular.woff2 and /dev/null differ diff --git a/src/assets/fonts/clash/ClashDisplay-Semibold.eot b/src/assets/fonts/clash/ClashDisplay-Semibold.eot deleted file mode 100644 index 6ae3364..0000000 Binary files a/src/assets/fonts/clash/ClashDisplay-Semibold.eot and /dev/null differ diff --git a/src/assets/fonts/clash/ClashDisplay-Semibold.ttf b/src/assets/fonts/clash/ClashDisplay-Semibold.ttf deleted file mode 100644 index 6715249..0000000 Binary files a/src/assets/fonts/clash/ClashDisplay-Semibold.ttf and /dev/null differ diff --git a/src/assets/fonts/clash/ClashDisplay-Semibold.woff b/src/assets/fonts/clash/ClashDisplay-Semibold.woff deleted file mode 100644 index 3b2f19f..0000000 Binary files a/src/assets/fonts/clash/ClashDisplay-Semibold.woff and /dev/null differ diff --git a/src/assets/fonts/clash/ClashDisplay-Semibold.woff2 b/src/assets/fonts/clash/ClashDisplay-Semibold.woff2 deleted file mode 100644 index 217e88e..0000000 Binary files a/src/assets/fonts/clash/ClashDisplay-Semibold.woff2 and /dev/null differ diff --git a/src/components/Footer.astro b/src/components/Footer.astro index dcabf63..385e368 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -72,7 +72,7 @@ function getCurrentYear() { max-width: var(--max-content-width); margin-inline: auto; padding-block: 8rem 5.5rem; - padding-inline: 5rem; + padding-inline: var(--padding-x); } nav, @@ -154,7 +154,7 @@ function getCurrentYear() { gsap.from(footer, { scrollTrigger: { trigger: footer, - start: "top bottom", + // start: "top bottom", }, duration: 2, opacity: 0, diff --git a/src/components/GlobalStyles.astro b/src/components/GlobalStyles.astro index 5b6a12d..cadfc3c 100644 --- a/src/components/GlobalStyles.astro +++ b/src/components/GlobalStyles.astro @@ -2,16 +2,38 @@ @import url("../styles/poppins.css"); :root { + --clr-light-400: oklch(100% 0.00011 271.152); + --clr-light-500: oklch(from var(--clr-light-400) calc(l - 0.1) c h); + --clr-light-600: oklch(from var(--clr-light-400) calc(l - 0.3) c h); + --clr-dark-400: oklch(13.306% 0.006 17.794); + --clr-ts-red-400: oklch(65.135% 0.21964 28.111); + + --gradient-heading: linear-gradient( + to bottom, + oklch(from var(--clr-light-400) calc(l - 0.05) c h), + oklch(from var(--clr-light-400) calc(l - 0.1) c h) 30%, + oklch(from var(--clr-light-400) calc(l - 0.1) c h) 70%, + /* oklch(from var(--clr-light-400) calc(l - 0.5) c h) 95%, */ + oklch(from var(--clr-light-400) calc(l - 0.7) c h) 100% + ); + + --gradient-overlay: linear-gradient( + to bottom, + oklch(0% 0 0 / 0.3) 0%, + oklch(0% 0 0 / 0) 40%, + oklch(0% 0 0 / 0.3) 100% + ); + --font-sans: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; - /* --fs-md: clamp(1.25rem, 0.25vw + 1rem, 2.5rem); */ - --fs-md: 1.25rem; + --fs-page-title: clamp(3rem, 5vw + 1rem, 5.625rem); - /* --fs-page-title: 5.625rem; */ - --fs-page-title: clamp(3rem, 5.5vw + 1rem, 8rem); + --fs-md: clamp(1.125rem, 2vw, 1.25rem); + --fs-lg: clamp(1.25rem, 2vw, 1.5rem); + --fs-xl: clamp(2.5rem, 2.5vw + 2.5rem, 4.75rem); --leading-title: 1.1; --leading-subtitle: 1.2; @@ -22,39 +44,15 @@ --base-grid: repeat(12, 1fr); --max-content-width: 1920px; + --padding-x: 1.5rem; - --clr-light-400: oklch(100% 0.00011 271.152); - --clr-light-500: oklch(from var(--clr-light-400) calc(l - 0.1) c h); - --clr-light-600: oklch(from var(--clr-light-400) calc(l - 0.3) c h); - --clr-dark-400: oklch(13.306% 0.006 17.794); - --clr-ts-red-400: oklch(65.135% 0.21964 28.111); + @media screen and (min-width: 50rem) { + --padding-x: 3rem; + } - --gradient-page-title: linear-gradient( - to bottom, - oklch(from var(--clr-light-400) l c h), - oklch(from var(--clr-light-400) calc(l - 0.05) c h), - oklch(from var(--clr-light-400) calc(l - 0.15) c h), - oklch(from var(--clr-light-400) calc(l - 0.15) c h), - oklch(from var(--clr-light-400) calc(l - 0.15) c h), - oklch(from var(--clr-light-400) calc(l - 0.35) c h), - oklch(from var(--clr-light-400) calc(l - 0.75) c h) - ); - - --gradient-heading: linear-gradient( - to bottom, - oklch(from var(--clr-light-400) calc(l - 0.05) c h), - oklch(from var(--clr-light-400) calc(l - 0.1) c h) 30%, - oklch(from var(--clr-light-400) calc(l - 0.1) c h) 70%, - /* oklch(from var(--clr-light-400) calc(l - 0.5) c h) 80%, */ - oklch(from var(--clr-light-400) calc(l - 0.7) c h) 100% - ); - - --gradient-overlay: linear-gradient( - to bottom, - oklch(0% 0 0 / 0.3) 0%, - oklch(0% 0 0 / 0) 40%, - oklch(0% 0 0 / 0.3) 100% - ); + @media screen and (min-width:64rem) { + --padding-x: 5rem; + } } body { diff --git a/src/components/Header.astro b/src/components/Header.astro index 944f81c..eb53cce 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -27,7 +27,7 @@ import SkipNavLink from "./SkipNavLink.astro"; display: grid; grid-template-columns: var(--base-grid); align-items: center; - padding-inline: 5rem; + padding-inline: var(--padding-x); padding-block: 1rem; max-width: var(--max-content-width); margin-inline: auto; @@ -53,7 +53,7 @@ import SkipNavLink from "./SkipNavLink.astro"; grid-column: -1 / -3; justify-self: end; - font-size: 1.25rem; + font-size: var(--fs-md); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-tight); diff --git a/src/components/Menu.astro b/src/components/Menu.astro index d96fbca..33fb174 100644 --- a/src/components/Menu.astro +++ b/src/components/Menu.astro @@ -106,7 +106,7 @@ const { class: classname, ...rest } = Astro.props; .menu-content { display: grid; grid-template-rows: max-content 1fr max-content; - padding-inline: 5rem; + padding-inline: var(--padding-x); padding-block: 1rem 2rem; height: 100%; } @@ -129,7 +129,7 @@ const { class: classname, ...rest } = Astro.props; gap: 0.5rem; grid-column: -2 / -4; justify-self: end; - font-size: 1.25rem; + font-size: var(--fs-md); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-tight); diff --git a/src/components/SkipNavLink.astro b/src/components/SkipNavLink.astro index 13d75a4..d01c010 100644 --- a/src/components/SkipNavLink.astro +++ b/src/components/SkipNavLink.astro @@ -31,7 +31,7 @@ const { contentId } = Astro.props; } a:focus-visible { - left: 5rem; + left: var(--padding-x); width: auto; height: auto; opacity: 1; diff --git a/src/components/landing/AboutSection.astro b/src/components/landing/AboutSection.astro index 9bfc9b6..6957c27 100644 --- a/src/components/landing/AboutSection.astro +++ b/src/components/landing/AboutSection.astro @@ -52,7 +52,7 @@ import { Picture } from "astro:assets"; max-width: var(--max-content-width); margin-inline: auto; padding-block: 8rem 5.5rem; - padding-inline: 5rem; + padding-inline: var(--padding-x); & h2 { grid-column: 1 / 6; @@ -73,7 +73,7 @@ import { Picture } from "astro:assets"; line-height: var(--leading-paragraph); > p { - margin-top: 1.25rem; + margin-top: var(--fs-md); } } } diff --git a/src/components/landing/ContactSection.astro b/src/components/landing/ContactSection.astro index 962c64a..8b1348f 100644 --- a/src/components/landing/ContactSection.astro +++ b/src/components/landing/ContactSection.astro @@ -34,16 +34,20 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro"; max-width: var(--max-content-width); margin-inline: auto; padding-block: 8rem 10rem; - padding-inline: 5rem; + padding-inline: var(--padding-x); } picture { display: block; - width: calc(100% + 5rem); - grid-column: 1 / 5; - /* TODO substitute horizontal spacing with var */ - transform: translate3d(-5rem, 0, 0); + width: calc(100% + var(--padding-x)); + grid-column: 1 / 8; + grid-row: 1; + transform: translate3d(calc(-1 * var(--padding-x)), 0, 0); z-index: -1; + + @media screen and (min-width: 50rem) { + grid-column: 1 / 5; + } } .image { @@ -53,8 +57,13 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro"; } .content { - grid-column: 6 / -1; + grid-column: 3 / 12; + grid-row: 1; align-content: center; + + @media screen and (min-width: 50rem) { + grid-column: 6 / -1; + } } h2 { @@ -82,7 +91,7 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro"; margin-top: 15rem; - font-size: 6.25rem; + font-size: clamp(3rem, 3vw + 3rem, 6.25rem); font-weight: 600; text-transform: uppercase; diff --git a/src/components/landing/HeroSection.astro b/src/components/landing/HeroSection.astro index 5a0a423..0eb57b0 100644 --- a/src/components/landing/HeroSection.astro +++ b/src/components/landing/HeroSection.astro @@ -37,9 +37,13 @@ import ArrowDown from "../icons/ArrowDown.astro"; display: grid; grid-template-columns: var(--base-grid); height: 100svh; - padding-inline: 5rem; + padding-inline: var(--padding-x); max-width: var(--max-content-width); margin-inline: auto; + + @media screen (min-width: 21rem) { + + } } .image-wrapper { diff --git a/src/components/landing/ServicesCard.astro b/src/components/landing/ServicesCard.astro index f2e57e8..39f5ff6 100644 --- a/src/components/landing/ServicesCard.astro +++ b/src/components/landing/ServicesCard.astro @@ -33,12 +33,15 @@ const { title, image, items } = Astro.props; .card { display: grid; grid-template-rows: auto 1fr auto; - /* padding: 2.5rem; */ - min-height: 36rem; + min-height: 12rem; & > * { grid-column: 1; } + + @media screen and (min-width: 64rem) { + min-height: 36rem; + } } @media (prefers-reduced-motion: no-preference) and (hover: hover) { diff --git a/src/components/landing/ServicesSection.astro b/src/components/landing/ServicesSection.astro index 4bbfadd..eff8817 100644 --- a/src/components/landing/ServicesSection.astro +++ b/src/components/landing/ServicesSection.astro @@ -59,19 +59,21 @@ const services: Array> = [ max-width: var(--max-content-width); margin-inline: auto; padding-block: 8rem; - padding-inline: 5rem; + padding-inline: var(--padding-x); } .heading { - display: grid; - grid-template-columns: subgrid; - grid-column: 1 / -1; + @media (min-width: 50rem) { + display: grid; + grid-template-columns: subgrid; + grid-column: 1 / -1; + } & h2 { grid-column: 1 / 6; height: max-content; - font-size: 4.75rem; + font-size: var(--fs-xl); line-height: var(--leading-title); letter-spacing: var(--tracking-narrow); } @@ -80,22 +82,26 @@ const services: Array> = [ grid-column: -1 / -6; justify-self: end; - max-width: 32ch; - font-size: 1.5rem; + font-size: var(--fs-lg); line-height: var(--leading-paragraph); + + @media (min-width: 50rem) { + max-width: 32ch; + } } } .cards { display: grid; - grid-template-columns: repeat(3, 1fr); gap: 2rem; grid-column: 1 / -1; - list-style: none; - margin-top: 7rem; + + @media (min-width: 50rem) { + grid-template-columns: repeat(3, 1fr); + } } diff --git a/src/components/landing/ValuesSection.astro b/src/components/landing/ValuesSection.astro index b508a5b..7af1552 100644 --- a/src/components/landing/ValuesSection.astro +++ b/src/components/landing/ValuesSection.astro @@ -49,7 +49,7 @@ function formatIndex(index: number) { max-width: var(--max-content-width); margin-inline: auto; padding-block: 8rem 5.5rem; - padding-inline: 5rem; + padding-inline: var(--padding-x); } h2 { diff --git a/src/pages/imprint.astro b/src/pages/imprint.astro index 8bcf781..1eaf711 100644 --- a/src/pages/imprint.astro +++ b/src/pages/imprint.astro @@ -32,7 +32,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";