Updated and added pages

components/LinkCard.vue

@@ -1,11 +1,16 @@
 <script setup lang="ts">
-import type { LinkCardProperty } from '~/utils/linkCard';
+import type { LinkCardProperty } from "~/utils/linkCard";
 const property = defineProps<LinkCardProperty>();
+const doesNotHaveImage = ref<boolean>(property.imagePath === undefined);
 </script>
 
 <template>
-    <NuxtLink :to="property.link">
-        <div class="image" v-if="property.imagePath" :style="{ backgroundImage: `url(${property.imagePath})` }"></div>
+    <NuxtLink :to="property.link" :class="{ withoutImage: doesNotHaveImage }">
+        <div
+            class="image"
+            v-if="property.imagePath"
+            :style="{ backgroundImage: `url(${property.imagePath})` }"
+        ></div>
         <h2>{{ property.title }}</h2>
         <p>{{ property.description }}</p>
     </NuxtLink>
@@ -29,7 +34,12 @@ a:hover {
 }
 
 a > * {
-    margin: 2rem;
+    margin: 0 2rem;
+}
+
+.withoutImage {
+    grid: 1fr 1.5fr / 1fr;
+    height: 15rem;
 }
 
 .image {
@@ -38,6 +48,8 @@ a > * {
     background-size: cover;
     width: 18rem;
     height: 12rem;
+    margin-top: 1.75rem;
+    margin-bottom: 0.75rem;
     place-self: center;
 }
 
@@ -54,7 +66,7 @@ h2 {
 
 h2::after {
     display: block;
-    content: '';
+    content: "";
     position: absolute;
     width: 7px;
     height: 2rem;
@@ -68,4 +80,39 @@ p {
     color: var(--deep-space);
     margin: 0 2rem;
 }
-</style>
+
+@media screen and (max-width: 1024px) {
+    a {
+        width: 20rem;
+        height: 25rem;
+    }
+    a > * {
+        margin: 0 1rem;
+    }
+    h2 {
+        font-size: 16pt;
+    }
+    .image {
+        width: 16rem;
+        height: 10rem;
+    }
+}
+
+@media screen and (max-width: 640px) {
+    a {
+        width: 16rem;
+        height: 21rem;
+    }
+    a > * {
+        margin: 0 0.75rem;
+    }
+    h2 {
+        font-size: 16pt;
+    }
+    .image {
+        width: 12rem;
+        height: 8rem;
+        margin-top: 0.75rem;
+    }
+}
+</style>