feat: some shit?

src/components/HeroCard.astro

@@ -32,9 +32,9 @@ const link = translatePath(`/${collection}/${slug.split("/")[0]}`);
 ---
 
 <Card
-  classes={`grid gradient border-1 border-neutral overflow-hidden  ${cover ? "grid-rows-[200px_1fr] sm:grid-rows-none sm:grid-cols-[1fr_200px]" : ""}`}
+  classes={`grid gradient border-1 border-neutral overflow-hidden  ${cover ? "grid-rows-[200px_1fr] xs:grid-rows-none xs:grid-cols-[1fr_200px]" : ""}`}
 >
-  <Card.Content classes="px-8 py-7 order-last sm:order-first">
+  <Card.Content classes="px-8 py-7 order-last xs:order-first">
     <Card.Title classes="text-4xl flex items-center gap-2">
       {icon && <img src={icon} class="h-6" />}
       {title}

src/components/Image.astro

@@ -5,6 +5,7 @@ import { generateThumbHash } from "@helpers/image";
 interface Props {
   src: ImageMetadata;
   alt: string;
+  pictureClass?: string;
   class?: string;
   caption?: string;
   hash?: boolean;
@@ -12,7 +13,14 @@ interface Props {
   maxWidth?: number;
 }
 
-const { src: image, loader = true, hash = true, alt, maxWidth } = Astro.props;
+const {
+  src: image,
+  loader = true,
+  pictureClass = "",
+  hash = true,
+  alt,
+  maxWidth,
+} = Astro.props;
 
 let thumbhash = hash ? await generateThumbHash(image) : "";
 
@@ -40,7 +48,7 @@ const sizes = [
   alt={alt}
   data-thumbhash={thumbhash}
   pictureAttributes={{
-    class: `${hash ? "block h-full relative" : ""} ${loader ? "thumb" : ""}`,
+    class: `${hash ? "block h-full relative" : ""} ${loader ? "thumb" : ""} ${pictureClass}`,
   }}
   class={Astro.props.class}
   widths={sizes.map((size) => size.width)}

src/components/LanguagePicker.astro

@@ -24,10 +24,8 @@ const flags = {
 const t = useTranslations(Astro.url);
 ---
 
-<ul class="flex items-center gap-4">
 {
   Object.entries(locales).map(([lang, label]) => (
-      <li>
     <a
       class="flex gap-2 items-center"
       href={translatePath(lang)}
@@ -36,7 +34,5 @@ const t = useTranslations(Astro.url);
       <span class="text-xs">{flags[label as keyof typeof flags]}</span>
       {t(label as "de")}
     </a>
-      </li>
   ))
 }
-</ul>

src/components/Max.astro

@@ -10,12 +10,15 @@ const t = useTranslations(Astro.url);
 ---
 
 <Card
-  classes="googley-eye-target relative rounded-diag-md border border-neutral gradient grid grid-cols-[250px_1fr] h-[180px] mt-8"
+  classes="googley-eye-target relative rounded-diag-md border border-neutral gradient grid xs:grid-cols-[250px_1fr] min-h-[180px] sm:h-[180px] mt-8"
+>
+  <div
+    class="image relative h-[130%] self-end items-end flex overflow-hidden order-last xs:order-first"
   >
-  <div class="image">
     <Image
       src={MaxImg}
       alt="its mee"
+      class="object-bottom h-full object-cover w-1/2 xs:w-full"
       hash={false}
       maxWidth={700}
       loader={false}
@@ -28,7 +31,7 @@ const t = useTranslations(Astro.url);
     </div>
   </div>
 
-  <div class="content gap-2">
+  <div class="content flex flex-col p-8 pl-4 gap-2 justify-center">
     <h1 class="text-2xl">{t("home.title")}</h1>
     <p>{t("home.subtitle")}</p>
   </div>
@@ -36,13 +39,11 @@ const t = useTranslations(Astro.url);
 
 <style>
   .image {
-    position: relative;
-    height: 130%;
-    align-self: end;
-    overflow: hidden;
     border-bottom-left-radius: var(--border-radius-md);
-    display: flex;
+  }
-    align-items: flex-end;
+
+  .googley-eye-target {
+    height: calc(100% - 30px);
   }
 
   .image::before {
@@ -72,12 +73,4 @@ const t = useTranslations(Astro.url);
     top: 31%;
     right: 12%;
   }
-
-  .content {
-    padding: 30px;
-    padding-left: 15px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-  }
 </style>

src/components/SmallGrid.astro

@@ -0,0 +1,3 @@
+<div class="grid xs:grid-cols-2 gap-4 mt-4">
+  <slot />
+</div>

src/components/arrows/ArrowA.astro

@@ -3,7 +3,7 @@ import { useTranslations } from "@i18n/utils";
 const t = useTranslations(Astro.url);
 ---
 
-<div class="arrow flex items-center gap-2">
+<div class="arrow items-center gap-2 hidden lg:flex">
   <img src="/images/arrow_a.svg" alt="Arrow" />
   <p class="text-xl">{t("latest-projects")}</p>
 </div>

src/components/arrows/ArrowB.astro

@@ -3,7 +3,7 @@ import { useTranslations } from "@i18n/utils";
 const t = useTranslations(Astro.url);
 ---
 
-<div class="arrow flex items-center gap-2">
+<div class="arrow items-center gap-2 hidden lg:flex">
   <p class="text-xl">{t("latest-posts")}</p>
   <img src="/images/arrow_b.svg" alt="Arrow" />
 </div>

src/i18n/ui.ts

@@ -16,6 +16,7 @@ export const ui = {
     "latest-posts": "Latest Posts",
     "latest-projects": "Latest Projects",
     'home.title': 'Hi, I’m Max :)',
+    'website-source': 'source',
     'home.subtitle': 'Trained Media Designer, Blender Nerd, Developer and Hardware Tinkerer.',
     'nav.blog': 'Blog',
     'nav.projects': 'Projects',
@@ -31,6 +32,7 @@ export const ui = {
     "latest-projects": "Neueste Projekte",
     "read-more": "weiterlesen",
     'home.title': 'Hi, ich bin Max :)',
+    'website-source': 'Sourcecode',
     'home.subtitle': 'Ausgebildeter Mediengestalter, Blender Nerd, Entwickler und Hardware Bastler.',
     'nav.blog': 'Blog',
     'nav.projects': 'Projekte',

src/layouts/Layout.astro

@@ -2,10 +2,12 @@
 import LanguagePicker from "../components/LanguagePicker.astro";
 import { AstroFont } from "astro-font";
 import Nav from "../components/Nav.astro";
+import { useTranslations } from "@i18n/utils";
 interface Props {
   title: string;
   width?: "full" | "compact";
 }
+const t = useTranslations(Astro.url);
 
 const { title, width = "compact" } = Astro.props;
 ---
@@ -123,8 +125,14 @@ const { title, width = "compact" } = Astro.props;
     <main id="main-content" class="flex flex-col mt-4xl gap-y-2xl">
       <slot />
     </main>
-    <footer class="px-4">
+    <footer class="px-4 flex gap-8 mb-4">
       <LanguagePicker />
+      <a
+        href="https://git.max-richter.dev/max/website"
+        class="flex gap-2 items-center"
+      >
+        <span class="i-tabler-brand-git"></span>{t("website-source")}
+      </a>
     </footer>
     <style>
       .layout-compact {

src/pages/index.astro

@@ -13,6 +13,7 @@ import SmallCard from "@components/SmallCard.astro";
 import LinkCard from "@components/LinkCard.astro";
 import ArrowA from "@components/arrows/ArrowA.astro";
 import ArrowB from "@components/arrows/ArrowB.astro";
+import SmallGrid from "@components/SmallGrid.astro";
 
 const projects = filterCollection(
   await getCollection("projects"),
@@ -43,7 +44,7 @@ const otherPosts = posts.filter((post) => featuredPost !== post).slice(0, 3);
     <span class="i-tabler-circle-arrow-right-thin"></span>
     <ArrowA />
     {featuredProject && <HeroCard post={featuredProject} />}
-    <div class="grid xs:grid-cols-2 gap-4 mt-4">
+    <SmallGrid>
       {
         otherProjects.length > 0 &&
           otherProjects.map((project) => <SmallCard post={project} />)
@@ -53,19 +54,19 @@ const otherPosts = posts.filter((post) => featuredPost !== post).slice(0, 3);
         title={t("more-projects")}
         icon="circle-arrow-right"
       />
-    </div>
+    </SmallGrid>
   </section>
 
   <section class="relative my-8">
     {featuredPost && <HeroCard post={featuredPost} />}
 
     <ArrowB />
-    <div class="grid grid-cols-2 gap-4 mt-4">
+    <SmallGrid>
       {
         otherPosts.length > 0 &&
           otherPosts.map((post) => <SmallCard post={post} />)
       }
       <LinkCard link={tp("/blog")} title={t("more-posts")} />
-    </div>
+    </SmallGrid>
   </section>
 </Layout>

uno.config.ts

@@ -22,8 +22,8 @@ export default defineConfig({
       "md": "20px",
       "diag-md": "0px var(--border-radius-md) 0px var(--border-radius-md)"
     },
-    screens: {
+    breakpoints: {
-      xs: "375px",
+      xs: "450px",
       sm: "640px",
       md: "768px",
       lg: "1024px",