Fix lots of things

.astro/types.d.ts

@@ -43,6 +43,7 @@ declare module 'astro:content' {
 				import('astro/zod').ZodLiteral<'webp'>,
 				import('astro/zod').ZodLiteral<'gif'>,
 				import('astro/zod').ZodLiteral<'svg'>,
+				import('astro/zod').ZodLiteral<'avif'>,
 			]
 		>;
 	}>;

src/components/header/header.module.scss

@@ -32,12 +32,14 @@
 }
 
 .page_title {
-  font-size: 3rem;
+  font-size: 2rem;
   margin-left: 20px;
+  font-weight: normal;
 
   @media (max-width: variables.$mobile-cutoff) {
     margin: 0 0 0 10px;
     font-size: 1.4rem;
+    font-weight: bold;
   }
 }
 

src/components/page/page.astro

@@ -23,10 +23,11 @@ const { title, children } = Astro.props;
     margin-top: 100px;
     height: 100%;
     width: 100%;
-    color: white;
+    color: #c8c8c8;
 
     @media (max-width: 1200px) {
       margin-top: 70px;
+      padding: 0px 30px;
     }
   }
 
@@ -36,8 +37,4 @@ const { title, children } = Astro.props;
     align-items: center;
     height: 100vh;
   }
-
-  .title {
-    font-size: 50px;
-  }
 </style>

src/components/project/project.astro

@@ -12,11 +12,11 @@ const { title, link, picture, description } = Astro.props;
 ---
 
 <a href={link} class="container">
-  <img class="picture" src={`/assets/project-icons/${picture}`} alt="hello" />
-  <div class="content">
+  <div class="grid">
+    <img class="picture" src={`/assets/project-icons/${picture}`} alt="hello" />
     <h3 class="title">{title}</h3>
     <p class="description">{description}</p>
-  </div>
+  <div>
 </a>
 
 <style lang="scss">
@@ -28,10 +28,9 @@ const { title, link, picture, description } = Astro.props;
       width: 100%;
       box-sizing: border-box;
     }
-
+    display: flex;
     width: 100%;
     height: 200px;
-    display: flex;
     margin-top: 50px;
     transition: 0.3s ease-in-out;
     padding: 10px;
@@ -52,6 +51,10 @@ const { title, link, picture, description } = Astro.props;
     padding: 0;
   }
 
+  .grid {
+    display: grid;
+  }
+
   .content {
     flex: 1;
     display: flex;
@@ -64,12 +67,34 @@ const { title, link, picture, description } = Astro.props;
     aspect-ratio: 1;
     margin-right: 20px;
     border-radius: 10px;
+
+    grid-column-start: 1;
+    grid-column-end: 1;
+
+    grid-row-start: 1;
+    grid-row-end: 2;
+
+    @media (max-width: 1200px) {
+      height: 80px;
+
+      grid-column-start: 1;
+      grid-column-end: 1;
+
+      grid-row-start: 1;
+      grid-row-end: 1;
+    }
   }
 
   .title {
     font-size: 30px;
     text-align: left;
     text-overflow: ellipsis ellipsis;
+
+    grid-column-start: 2;
+    grid-column-end: 2;
+
+    grid-row-start: 1;
+    grid-row-end: 1;
 
     @media (max-width: 1200px) {
       font-size: 20px;
@@ -79,8 +104,23 @@ const { title, link, picture, description } = Astro.props;
 
   .description {
     display: block;
-    margin: 5px 0 0 0;
     overflow: hidden;
     flex: 1;
+
+
+    grid-column-start: 2;
+    grid-column-end: 2;
+
+    grid-row-start: 2;
+    grid-row-end: 2;
+
+    @media (max-width: 1200px) {
+
+      grid-column-start: 1;
+      grid-column-end: 2;
+
+      grid-row-start: 2;
+      grid-row-end: 2;
+    }
 }
 </style>

src/components/title/title.astro

@@ -0,0 +1,32 @@
+---
+interface Props {
+  children: any;
+}
+
+const { children } = Astro.props;
+---
+<div class="container">
+  <h2 class="title">{children}</h2>
+</div>
+
+<style lang="scss">
+.container {
+  position: relative;
+  width: 100%;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  @media (max-width: variables.$mobile-cutoff) {
+    margin-bottom: 150px;
+  }
+}
+
+.title {
+  color: white;
+  font-weight: 800;
+  z-index: 3;
+  font-size: 3rem;
+}
+</style>

src/content/projects/alles-met-boeken.md

@@ -1,6 +1,6 @@
 ---
 title: Alles met boeken - Logo
-tags: [Logo, Design]
+tags: [Logo, Design, More, Even More, Another one, Yes another one, Even morrrre]
 slug: alles-met-boeken
 description: Tungstun designed the logo for Alles met boeken. They give book advise to local schools and book stores.
 image:

src/layouts/ProjectLayout.astro

@@ -29,19 +29,29 @@ const { frontmatter } = Astro.props;
 <style>
   .tags {
     display: flex;
+    overflow-x: scroll;
+    width: 100%;
+    max-height: 30px;
+    cursor: pointer;
   }
 
   .content {
     font-size: 20px;
   }
 
   .tag {
+    display: inline-block;
+    text-align: left;
+    white-space: nowrap;
     font-size: 20px;
     margin-right: 15px;
     background-color: #82CAC2;
+    color: black;
     padding: 5px 10px;
     border-radius: 100px;
     font-family: 'Courier New', Courier, monospace;
     font-weight: bold;
+    width: max-content;
+
   }
 </style>

src/pages/projects/index.astro

@@ -24,7 +24,7 @@ const allProjects = await getCollection("projects");
         allProjects.map((project) => (
           <Project
             title={project.data.title}
-            link={`${project.slug}`}
+            link={`projects/${project.slug}`}
             description={project.data.description}
             picture={project.data.image.url}
           />