Setup Astro project and start working on placeholder page

2025-09-11 15:59:12 +02:00
parent e11df7efb2
commit b5e812da0f
43 changed files with 1675 additions and 181 deletions
@@ -0,0 +1,45 @@
+<style is:global>
+@import url('../styles/archivo.css');
+@import url('../styles/clash-display.css');
+
+:root {
+    --clr-ts-warm-red: hsl(3, 94%, 60%);
+    --clr-ts-dark: hsl(7, 18%, 10%);
+    --clr-ts-dark-logo: hsl(7, 18%, 13%);
+    --clr-ts-light: hsl(349, 57%, 91%);
+
+    --ff-heading: "Clash Display", sans-serif;
+    --ff-body: "Archivo", sans-serif;
+
+    --fs-xl: clamp(3.75rem, 5vw + 1rem, 6rem);
+    --fs-600: 1.5rem;
+    --fs-500: 1.25rem;
+    --fs-400: 1rem;
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html,
+body {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+}
+
+body {
+    background-color: var(--clr-ts-dark);
+    color: var(--clr-ts-light);
+    font-family: var(--ff-body);
+    font-size: var(--fs-400);
+    padding: clamp(2rem, 5vw + 1rem, 3.75rem);
+}
+
+h1 { 
+    font-family: var(--ff-heading);
+    font-size: var(--fs-xl);
+}
+</style>
@@ -0,0 +1,65 @@
+---
+import { Image } from "astro:assets";
+import { getRelativeLocaleUrl } from "astro:i18n";
+import logo from "../assets/ci/icon-only.svg";
+
+const isEnglish = Astro.currentLocale === "en";
+---
+
+<header>
+    <div>
+        <Image
+            class="icon"
+            src={logo}
+            loading="eager"
+            alt="Tideshift Digital logo mark"
+        />
+    </div>
+
+    <nav>
+        <ul>
+            <li>
+                <a
+                    class:list={[{ active: isEnglish }]}
+                    href={getRelativeLocaleUrl("en", "")}>EN</a
+                >
+            </li>
+            <li>
+                <a
+                    class:list={[{ active: !isEnglish }]}
+                    href={getRelativeLocaleUrl("de", "")}>DE</a
+                >
+            </li>
+        </ul>
+    </nav>
+</header>
+
+<style>
+    header {
+        display: flex;
+        justify-content: space-between;
+        border: 1px solid var(--clr-ts-warm-red);
+    }
+
+    .icon {
+        width: 60px;
+        height: auto;
+    }
+
+    ul {
+        display: flex;
+        list-style: none;
+        gap: 1em;
+    }
+
+    ul {
+        a {
+            color: var(--clr-ts-light);
+            text-decoration: none;
+
+            &.active {
+                text-decoration: underline;
+            }
+        }
+    }
+</style>
@@ -0,0 +1,38 @@
+---
+import { Image } from "astro:assets";
+import Logo from "../assets/ci/icon-only.svg";
+---
+
+<div>
+    <div>
+        <h1 class="title">Smart websites for bold ideas.</h1>
+
+        <p>
+            From concept to launch — websites, apps, and digital solutions that
+            work hard, so you can play hard. Whether it's a personal site, an
+            e-commerce platform, or a custom web app, I bring your ideas to
+            life.
+        </p>
+    </div>
+
+    <Logo class="logo" />
+</div>
+
+<style>
+    h1 {
+        max-width: 16ch;
+        font-weight: 700;
+        text-transform: uppercase;
+        line-height: 1.1;
+        letter-spacing: 0.0333em;
+    }
+
+    p {
+        max-width: 50ch;
+        line-height: 1.4;
+    }
+
+    .logo {
+        fill: var(--clr-ts-dark-logo) !important;
+    }
+</style>
@@ -40,6 +40,8 @@ import background from '../assets/background.svg';
 			improvements in Astro 5.0
 		</p>
 	</a>
+
+	
 </div>

 <style>