web_programming/fridge_bites
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: web_programming:f588e5f608b4ca9682b09be44ac83e3944dc52cc
Branches Tags
web_programming:master
web_programming:develop
..
compare: web_programming:c35cf57eab5ff52d57ebb08efe7f1989625f9811
Branches Tags
web_programming:master
web_programming:develop

No commits in common. "f588e5f608b4ca9682b09be44ac83e3944dc52cc" and "c35cf57eab5ff52d57ebb08efe7f1989625f9811" have entirely different histories.
f588e5f608 ... c35cf57eab

2 changed files with 30 additions and 38 deletions
Show Stats Expand all files Collapse all files

36
apps/Index/Templates/index.php
View File

@ -88,81 +88,81 @@
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide"> <div class="swiper-slide">
<a href="#" class="category hover-anim"> <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"> <img src="media/category1.png" alt="Category 1" class="category-img__img">
</div> --> </div>
<p class="category-title">Mexican</p> <p class="category-title">Mexican</p>
</a> </a>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<a href="#" class="category hover-anim"> <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"> <img src="media/category1.png" alt="Category 1" class="category-img__img">
</div> --> </div>
<p class="category-title">Mexican</p> <p class="category-title">Mexican</p>
</a> </a>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<a href="#" class="category hover-anim"> <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"> <img src="media/category1.png" alt="Category 1" class="category-img__img">
</div> --> </div>
<p class="category-title">Mexican</p> <p class="category-title">Mexican</p>
</a> </a>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<a href="#" class="category hover-anim"> <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"> <img src="media/category1.png" alt="Category 1" class="category-img__img">
</div> --> </div>
<p class="category-title">Mexican</p> <p class="category-title">Mexican</p>
</a> </a>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<a href="#" class="category hover-anim"> <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"> <img src="media/category1.png" alt="Category 1" class="category-img__img">
</div> --> </div>
<p class="category-title">Mexican</p> <p class="category-title">Mexican</p>
</a> </a>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<a href="#" class="category hover-anim"> <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"> <img src="media/category1.png" alt="Category 1" class="category-img__img">
</div> --> </div>
<p class="category-title">Mexican</p> <p class="category-title">Mexican</p>
</a> </a>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<a href="#" class="category hover-anim"> <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"> <img src="media/category1.png" alt="Category 1" class="category-img__img">
</div> --> </div>
<p class="category-title">Mexican</p> <p class="category-title">Mexican</p>
</a> </a>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<a href="#" class="category hover-anim"> <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"> <img src="media/category1.png" alt="Category 1" class="category-img__img">
</div> --> </div>
<p class="category-title">Mexican</p> <p class="category-title">Mexican</p>
</a> </a>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<a href="#" class="category hover-anim"> <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"> <img src="media/category1.png" alt="Category 1" class="category-img__img">
</div> --> </div>
<p class="category-title">Mexican</p> <p class="category-title">Mexican</p>
</a> </a>

32
assets/css/style.css
View File

@ -260,30 +260,27 @@ body {
} }
.categories .swiper-slide { .categories .swiper-slide {
width: 100px; height: 120px;
width: 120px;
} }
.categories-swiper { .categories-swiper {
padding: 0 20px; height: 120px;
padding: 0 15px;
} }
.category { .category {
margin-left: 20px;
width: 100px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
padding: 10px 0; padding: 10px 0;
text-decoration: none;
filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1)); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
background-color: var(--panel-background);
border-radius: 10px;
} }
.category-title { .category-title {
@ -725,14 +722,6 @@ label span {
display: flex; display: flex;
} }
input[type="checkbox"]{
accent-color: #0DBB99;
}
.catalog a{
text-decoration: none;
}
.catalog-recipe { .catalog-recipe {
display: block; display: block;
width: 200px; width: 200px;
@ -780,7 +769,7 @@ input[type="checkbox"]{
.filters { .filters {
position: fixed; position: fixed;
max-height: 454px; height: 454px;
width: 230px; width: 230px;
padding: 15px; padding: 15px;
background-color: var(--panel-background); background-color: var(--panel-background);
@ -807,7 +796,10 @@ input[type="checkbox"]{
.filters-checkboxes ul { .filters-checkboxes ul {
list-style: none; list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
row-gap: 3px;
column-gap: 8px;
padding: 0; padding: 0;
max-height: 100px; max-height: 100px;
overflow-y: auto; overflow-y: auto;