feat: some shit?

2024-04-07 00:29:52 +02:00 · 2024-04-07 00:29:52 +02:00 · f76477db98
parent 96c053d5ff
commit f76477db98
11 changed files with 57 additions and 46 deletions
--- a/src/components/HeroCard.astro
+++ b/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}
--- a/src/components/Image.astro
+++ b/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)}
--- a/src/components/LanguagePicker.astro
+++ b/src/components/LanguagePicker.astro
@ -24,19 +24,15 @@ 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)}
-          data-astro-prefetch
-        >
-          <span class="text-xs">{flags[label as keyof typeof flags]}</span>
-          {t(label as "de")}
-        </a>
-      </li>
-    ))
-  }
-</ul>
+{
+  Object.entries(locales).map(([lang, label]) => (
+    <a
+      class="flex gap-2 items-center"
+      href={translatePath(lang)}
+      data-astro-prefetch
+    >
+      <span class="text-xs">{flags[label as keyof typeof flags]}</span>
+      {t(label as "de")}
+    </a>
+  ))
+}
--- a/src/components/Max.astro
+++ b/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">
+  <div
+    class="image relative h-[130%] self-end items-end flex overflow-hidden order-last xs:order-first"
+  >
    <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>
--- a/src/components/SmallGrid.astro
+++ b/src/components/SmallGrid.astro
@ -0,0 +1,3 @@
+<div class="grid xs:grid-cols-2 gap-4 mt-4">
+  <slot />
+</div>
--- a/src/components/arrows/ArrowA.astro
+++ b/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>
--- a/src/components/arrows/ArrowB.astro
+++ b/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>
--- a/src/i18n/ui.ts
+++ b/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',
--- a/src/layouts/Layout.astro
+++ b/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 {
--- a/src/pages/index.astro
+++ b/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>
--- a/uno.config.ts
+++ b/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: {
-      xs: "375px",
+    breakpoints: {
+      xs: "450px",
      sm: "640px",
      md: "768px",
      lg: "1024px",