updated footer style

scss/_btn.scss

@@ -20,8 +20,7 @@ $btn-colors: (
   min-width: 270px;
   padding: 8px 10px;
 
-  border-radius: 3px;
-  border-width: 3px;
+  @apply border-4 rounded-md;
   border-style: solid;
   border-color: $default-color;
 

src/components/FooterComponent.vue

@@ -21,7 +21,7 @@
               :icon="['fab', link.icon]"
             />
             <span class="hidden md:inline-block">{{ link.title }}</span>
-            <span class="md:hidden">{{ link.shortcut }}</span>
+            <span class="hidden sm:inline-block md:hidden">{{ link.shortcut }}</span>
           </a>
         </li>
       </ul>

src/components/SelectedProjects.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
+  <div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-10">
     <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 {
-  padding-top: 45px;
-  padding-bottom: 45px;
+@screen lg {
+  .grid-project {
+    grid-template-areas: 'image content';
+    grid-template-columns: 200px 1fr;
 
-  .container {
-    display: grid;
-    align-items: flex-start;
-    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;
+    .project-button {
+      .btn {
+        display: none;
       }
+      &:hover {
+        background: rgba(0, 0, 0, .3);
+        border-radius: 5px;
 
-      .project_content {
-        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 {
+        .btn {
           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/buttons/BaseButton.vue

@@ -32,7 +32,7 @@ defineProps({
 })
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import "../../../scss/btn";
 
 .btn {

src/components/sections/ExperiencesSection.vue

@@ -9,7 +9,7 @@
         proste i najczęściej na użytek własny. Jednakże, doświadczenie zebrane przez lata pomogło mi wyselekcjonować
         technologie, które wspomagają pisanie i rozwijanie oprogramowania.
       </p>
-      <div class="grid grid-cols-4 gap-5">
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
         <div
           v-for="(skill, skillKey) in list"
           :key="skillKey"

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">
-      <GhostButton @click="router.push('projects')">
+    <div class="w-full -translate-y-5 pb-5 more-button">
+      <GhostButton
+        class="mx-auto"
+        @click="router.push('projects')"
+      >
         ZOBACZ WIĘCEJ
       </GhostButton>
     </div>

src/views/ProjectsView.vue

@@ -1,38 +1,38 @@
 <template>
-  <div>
-    <div class="project_categories">
-      <ul class="categories">
+  <SelectedProjects :projects="projects">
+    <div class="pb-9">
+      <ul class="flex justify-center list-none">
         <li
           v-for="category in getCategories"
           :key="category.slug"
-          class="categories_element"
-          :class="{ 'categories_element-active': categories.active === category.slug }"
+          class="relative cursor-pointer mr-3 md:mr-5 last:mr-0 after:translate-y-2"
+          :class="{ 'category-active': selectedCategory(category.slug) }"
           @click="changeCategory(category.slug)"
         >
-          <a :title="`Kategoria ${category.name}`">{{ category.name }}</a>
+          <a
+            class="text-gray-500 hover:text-black"
+            :title="`Kategoria ${category.name}`"
+          >{{ category.name }}</a>
         </li>
       </ul>
     </div>
-    <SelectedProjects :projects="projects" />
-    <div
-      v-if="projects.length === 0"
-      class="loading"
-    >
-      <div class="loading_animation" />
-    </div>
+  </SelectedProjects>
+  <div
+    v-if="projects.length === 0"
+    class="loading"
+  >
+    <div class="loading_animation" />
   </div>
 </template>
 
 <script setup>
-import { reactive, computed, onMounted, onUnmounted } from 'vue'
+import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
 import { useStore } from 'vuex'
 import SelectedProjects from '../components/SelectedProjects'
 
 const store = useStore()
 
-const categories = reactive({
-  active: 'all'
-})
+const activeCategory = ref('all')
 const projects = reactive([])
 
 const getCategories = computed(() => store.getters.getCategories)
@@ -72,64 +72,22 @@ function loadListWhereCategory(category) {
 }
 
 function changeCategory(category) {
-  categories.active = category
+  activeCategory.value = category
   loadListWhereCategory(category)
 }
+
+function selectedCategory(categorySlug) {
+  return activeCategory.value === categorySlug
+}
 </script>
 
 <style lang="scss">
 @import "scss/media";
 
-.project_categories {
-  padding-top: 45px;
-
-  .categories {
-    display: flex;
-    justify-content: center;
-    list-style: none;
-
-    .categories_element {
-      position: relative;
-      cursor: pointer;
-      margin-right: 25px;
-
-      a {
-        color: var(--text-color);
-        &:hover {
-          color: black;
-        }
-      }
-
-      &:last-child {
-        margin-right: 0;
-      }
-
-      &-active {
-        &::after {
-          content: '';
-          position: absolute;
-          margin: 0 auto;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          width: 0;
-          height: 2px;
-          background-color: #A2CF00;
-          transform: translateY(8px);
-          animation: load-underline 300ms forwards;
-        }
-      }
-
-      @include media-mobile {
-        margin-right: 15px;
-      }
-    }
-  }
-}
-
-.projects {
-  padding-top: 25px;
-  padding-bottom: 25px;
+.category-active::after {
+  @apply absolute mx-auto left-0 right-0 bottom-0 h-0.5;
+  background-color: #A2CF00;
+  animation: load-underline 300ms forwards;
 }
 
 @keyframes loading-animation {