From fc357f4eb53686c71d4f0b9608a0e8e228439970 Mon Sep 17 00:00:00 2001
From: David Katrinka <davidkatrinka1995@gmail.com>
Date: Sun, 29 Jun 2025 15:43:04 +0200
Subject: [PATCH] TIST-30: fixed catalog anchor textt decorations and removed
 display grid from filters, removed images from categories in index and
 updated design

---
 apps/Index/Templates/index.php | 36 +++++++++++++++++-----------------
 assets/css/style.css           | 32 ++++++++++++++++++------------
 2 files changed, 38 insertions(+), 30 deletions(-)

diff --git a/apps/Index/Templates/index.php b/apps/Index/Templates/index.php
index 18ab535..1a6c246 100644
--- a/apps/Index/Templates/index.php
+++ b/apps/Index/Templates/index.php
@@ -88,81 +88,81 @@
             <div class="swiper-wrapper">
                 <div class="swiper-slide">
                     <a href="#" class="category hover-anim">
-                        <div class="category-img">
+                        <!-- <div class="category-img">
                             <img src="media/category1.png" alt="Category 1" class="category-img__img">
-                        </div>
+                        </div> -->
                         <p class="category-title">Mexican</p>
 
                     </a>
                 </div>
                 <div class="swiper-slide">
                     <a href="#" class="category hover-anim">
-                        <div class="category-img">
+                        <!-- <div class="category-img">
                             <img src="media/category1.png" alt="Category 1" class="category-img__img">
-                        </div>
+                        </div> -->
                         <p class="category-title">Mexican</p>
 
                     </a>
                 </div>
                 <div class="swiper-slide">
                     <a href="#" class="category hover-anim">
-                        <div class="category-img">
+                        <!-- <div class="category-img">
                             <img src="media/category1.png" alt="Category 1" class="category-img__img">
-                        </div>
+                        </div> -->
                         <p class="category-title">Mexican</p>
 
                     </a>
                 </div>
                 <div class="swiper-slide">
                     <a href="#" class="category hover-anim">
-                        <div class="category-img">
+                        <!-- <div class="category-img">
                             <img src="media/category1.png" alt="Category 1" class="category-img__img">
-                        </div>
+                        </div> -->
                         <p class="category-title">Mexican</p>
 
                     </a>
                 </div>
                 <div class="swiper-slide">
                     <a href="#" class="category hover-anim">
-                        <div class="category-img">
+                        <!-- <div class="category-img">
                             <img src="media/category1.png" alt="Category 1" class="category-img__img">
-                        </div>
+                        </div> -->
                         <p class="category-title">Mexican</p>
 
                     </a>
                 </div>
                 <div class="swiper-slide">
                     <a href="#" class="category hover-anim">
-                        <div class="category-img">
+                        <!-- <div class="category-img">
                             <img src="media/category1.png" alt="Category 1" class="category-img__img">
-                        </div>
+                        </div> -->
                         <p class="category-title">Mexican</p>
 
                     </a>
                 </div>
                 <div class="swiper-slide">
                     <a href="#" class="category hover-anim">
-                        <div class="category-img">
+                        <!-- <div class="category-img">
                             <img src="media/category1.png" alt="Category 1" class="category-img__img">
-                        </div>
+                        </div> -->
                         <p class="category-title">Mexican</p>
 
                     </a>
                 </div>
                 <div class="swiper-slide">
                     <a href="#" class="category hover-anim">
-                        <div class="category-img">
+                        <!-- <div class="category-img">
                             <img src="media/category1.png" alt="Category 1" class="category-img__img">
-                        </div>
+                        </div> -->
                         <p class="category-title">Mexican</p>
 
                     </a>
                 </div>
                 <div class="swiper-slide">
                     <a href="#" class="category hover-anim">
-                        <div class="category-img">
+                        <!-- <div class="category-img">
                             <img src="media/category1.png" alt="Category 1" class="category-img__img">
-                        </div>
+                        </div> -->
                         <p class="category-title">Mexican</p>
 
                     </a>
diff --git a/assets/css/style.css b/assets/css/style.css
index 3078f67..908a9e5 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -260,27 +260,30 @@ body {
 }
 
 .categories .swiper-slide {
-    height: 120px;
-    width: 120px;
-
+    width: 100px;
 }
 
-.categories-swiper {
-    height: 120px;
-    padding: 0 15px;
 
 
+
+.categories-swiper {
+    padding: 0 20px;
+
 }
 
 .category {
+    margin-left: 20px;
+    width: 100px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 10px 0;
-
+    text-decoration: none;
     filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
+    background-color: var(--panel-background);
+    border-radius: 10px;
 }
 
 .category-title {
@@ -722,6 +725,14 @@ label span {
     display: flex;
 }
 
+input[type="checkbox"]{
+    accent-color: #0DBB99;
+}
+
+.catalog a{
+    text-decoration: none;
+}
+
 .catalog-recipe {
     display: block;
     width: 200px;
@@ -769,7 +780,7 @@ label span {
 
 .filters {
     position: fixed;
-    height: 454px;
+    max-height: 454px;
     width: 230px;
     padding: 15px;
     background-color: var(--panel-background);
@@ -796,10 +807,7 @@ label span {
 
 .filters-checkboxes ul {
     list-style: none;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    row-gap: 3px;
-    column-gap: 8px;
+
     padding: 0;
     max-height: 100px;
     overflow-y: auto;