updated favorite projects

src/components/SelectedProjects.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
     <slot />
-    <div class="grid items-start grid-cols-2 gap-x-6 gap-y-5">
+    <div class="grid items-start grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-5">
       <div
         v-for="project in projects"
         :key="project.title.slug"
-        class="grid grid-project relative bg-neutral-100"
+        class="flex flex-col lg:grid grid-project relative bg-neutral-100 border border-gray-200 rounded-md"
       >
         <img
           v-if="project.images.small"
-          class="project-image w-[12.5rem] h-[12.5rem] object-cover"
+          class="project-image w-full h-[16rem] lg:w-[12.5rem] lg:h-[12.5rem] object-cover object-top rounded-t-md lg:rounded-bl-md lg:rounded-tr-none"
           :src="project.images.small"
           :alt="project.title"
         >
@@ -19,7 +19,7 @@
           :src="project.images.large"
           :alt="project.title"
         >
-        <div class="p-3 h-[12.5rem] overflow-y-hidden after:absolute after:left-0 after:bottom-0 after:w-full after:h-full">
+        <div class="project-content relative p-3 h-[12.5rem] overflow-y-hidden after:absolute after:left-0 after:top-0 after:w-full after:h-full">
           <header class="pb-2">
             <h3 class="text-lg font-bold">
               {{ project.title }}
@@ -33,12 +33,15 @@
             v-html="markdownToText(project)"
           />
         </div>
-        <div class="more-button">
+        <div
+          class="project-button lg:flex lg:absolute lg:justify-center lg:items-center lg:left-0 lg:top-0 lg:w-full lg:h-full"
+        >
           <BaseButton
             has-icon
             icon="eye"
             is-reverse
-            class="btn"
+            class="w-full lg:w-80 rounded-t-none lg:rounded-t-md"
+            title="Pokaż więcej"
             @click="router.push({ name: 'Project', params: { id: project.id } })"
           >
             O projekcie
@@ -89,11 +92,9 @@ function markdownToText (project) {
 @import "scss/media";
 
 .grid-project {
-  grid-template-areas: 'image content';
-  grid-template-columns: 200px 1fr;
   animation: load-project 2s forwards;
 
-  .project-image , .project-content {
+  .project-image, .project-content {
     object-position: top center;
   }
 
@@ -103,134 +104,28 @@ function markdownToText (project) {
 
   .project-content {
     grid-area: content;
+
+    &::after {
+      background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 60%, #fafafa);
+    }
   }
 }
 
-.projects {
+@screen lg {
-  padding-top: 45px;
+  .grid-project {
-  padding-bottom: 45px;
+    grid-template-areas: 'image content';
+    grid-template-columns: 200px 1fr;
 
-  .container {
+    .project-button {
-    display: grid;
+      .btn {
-    align-items: flex-start;
+        display: none;
-    grid-template-columns: 1fr 1fr;
-    grid-auto-rows: minmax(80px, auto);
-    column-gap: 25px;
-    row-gap: 20px;
-
-    .project {
-      display: grid;
-      position: relative;
-      grid-template-areas: 'image content';
-      grid-template-columns: 200px 1fr;
-      background-color: #fafafa;
-      border: 1px solid rgba(0, 0, 0, .025);
-      border-radius: 5px;
-      animation: load-project 2s forwards;
-
-      .project_image {
-        grid-area: image;
-        width: 200px;
-        height: 200px;
-        object-fit: cover;
-        object-position: top center;
       }
+      &:hover {
+        background: rgba(0, 0, 0, .3);
+        border-radius: 5px;
 
-      .project_content {
+        .btn {
-        grid-area: content;
-        padding: 10px 15px;
-        height: 200px;
-        overflow-y: hidden;
-        position: relative;
-
-        .project_title {
-          font-size: 1.3em;
-          font-weight: normal;
-          line-height: 1.5em;
-        }
-
-        .project_release {
-          font-size: .9em;
-          font-weight: bold;
-          padding: 5px 0;
-        }
-
-        &::after {
-          content: "";
-          position: absolute;
-          left: 0;
-          top: 0;
-          width: 100%;
-          height: 100%;
-          background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, #fafafa 100%);
-        }
-      }
-
-      p {
-        font-size: .9em;
-      }
-    }
-
-    @include media-tablet(true) {
-      .project {
-        .more-button {
           display: flex;
-          justify-content: center;
-          align-items: center;
-          position: absolute;
-          left: 0;
-          top: 0;
-          width: 100%;
-          height: 100%;
-
-          .btn {
-            display: none;
-          }
-
-          &:hover {
-            background: rgba(0, 0, 0, .3);
-            border-radius: 5px;
-
-            .btn {
-              display: flex;
-              color: white;
-              border-style: none;
-              &:hover {
-                background-color: #385c8a;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    @include media-small {
-      .project {
-        display: block;
-
-        .project_image {
-          width: 100%;
-          height: 250px;
-        }
-
-        .project_content {
-          height: 125px;
-        }
-
-        .more-button {
-          display: block;
-          position: unset;
-          margin-top: 8px;
-          height: auto;
-          left: unset;
-          top: unset;
-
-          .btn {
-            display: flex;
-            width: 100%;
-            border-radius: 0;
-            border-style: solid;
-          }
         }
       }
     }
@@ -247,13 +142,4 @@ function markdownToText (project) {
     opacity: 1;
   }
 }
-
-@include media-tablet {
-  .projects .container {
-    grid-template-columns: 1fr;
-    padding: 25px;
-    column-gap: 0;
-    row-gap: 20px;
-  }
-}
 </style>

src/components/sections/FavoriteProjects.vue

@@ -1,17 +1,20 @@
 <template>
   <section class="bg-neutral-50">
     <projects :projects="select_projects">
-      <div>
+      <header>
         <h2 class="text-[2rem] mb-2">
           Wybrane projekty
         </h2>
         <p class="mb-5">
           Poniżej przedstawiam Państwu, wybraną przeze mnie, listę projektów.
         </p>
-      </div>
+      </header>
     </projects>
-    <div class="more-button">
+    <div class="w-full -translate-y-5 pb-5 more-button">
-      <GhostButton @click="router.push('projects')">
+      <GhostButton
+        class="mx-auto"
+        @click="router.push('projects')"
+      >
         ZOBACZ WIĘCEJ
       </GhostButton>
     </div>