Compare commits
No commits in common. "5b1d4e60da82fc1f8cd2d14302572e17dc2523c1" and "32c0529a4e13e8c411518677caee533c3c480a0c" have entirely different histories.
5b1d4e60da
...
32c0529a4e
@ -1,288 +1 @@
|
|||||||
<?php
|
Catalog page
|
||||||
the_header(
|
|
||||||
'Recipes',
|
|
||||||
'Explore our delicious recipes and find your next favorite dish.',
|
|
||||||
'recipes-page',
|
|
||||||
[
|
|
||||||
['keywords', 'recipes, cooking, food, cuisine'],
|
|
||||||
|
|
||||||
]
|
|
||||||
);
|
|
||||||
?>
|
|
||||||
<div class="container">
|
|
||||||
<div class="catalog">
|
|
||||||
<div class="catalog-items">
|
|
||||||
<a class="catalog-recipe hover-anim">
|
|
||||||
<div class="catalog-recipe__image">
|
|
||||||
<img src="media/recipe1.png" alt="Recipe 1">
|
|
||||||
</div>
|
|
||||||
<div class="catalog-recipe__info">
|
|
||||||
<div class="catalog-recipe__title">
|
|
||||||
<h3>Pizza</h3>
|
|
||||||
</div>
|
|
||||||
<div class="catalog-recipe__meta meta">
|
|
||||||
<div class="catalog-recipe__category">
|
|
||||||
Lunch
|
|
||||||
</div>
|
|
||||||
<div class="catalog-recipe__ingredients">
|
|
||||||
Tomatoes, Pepperoni
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a class="catalog-recipe hover-anim">
|
|
||||||
<div class="catalog-recipe__image">
|
|
||||||
<img src="media/recipe1.png" alt="Recipe 1">
|
|
||||||
</div>
|
|
||||||
<div class="catalog-recipe__info">
|
|
||||||
<div class="catalog-recipe__title">
|
|
||||||
<h3>Pizza</h3>
|
|
||||||
</div>
|
|
||||||
<div class="catalog-recipe__meta meta">
|
|
||||||
<div class="catalog-recipe__category">
|
|
||||||
Lunch
|
|
||||||
</div>
|
|
||||||
<div class="catalog-recipe__ingredients">
|
|
||||||
Tomatoes, Pepperoni
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a class="catalog-recipe hover-anim">
|
|
||||||
<div class="catalog-recipe__image">
|
|
||||||
<img src="media/recipe1.png" alt="Recipe 1">
|
|
||||||
</div>
|
|
||||||
<div class="catalog-recipe__info">
|
|
||||||
<div class="catalog-recipe__title">
|
|
||||||
<h3>Pizza</h3>
|
|
||||||
</div>
|
|
||||||
<div class="catalog-recipe__meta meta">
|
|
||||||
<div class="catalog-recipe__category">
|
|
||||||
Lunch
|
|
||||||
</div>
|
|
||||||
<div class="catalog-recipe__ingredients">
|
|
||||||
Tomatoes, Pepperoni
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a class="catalog-recipe hover-anim">
|
|
||||||
<div class="catalog-recipe__image">
|
|
||||||
<img src="media/recipe1.png" alt="Recipe 1">
|
|
||||||
</div>
|
|
||||||
<div class="catalog-recipe__info">
|
|
||||||
<div class="catalog-recipe__title">
|
|
||||||
<h3>Pizza</h3>
|
|
||||||
</div>
|
|
||||||
<div class="catalog-recipe__meta meta">
|
|
||||||
<div class="catalog-recipe__category">
|
|
||||||
Lunch
|
|
||||||
</div>
|
|
||||||
<div class="catalog-recipe__ingredients">
|
|
||||||
Tomatoes, Pepperoni
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a class="catalog-recipe hover-anim">
|
|
||||||
<div class="catalog-recipe__image">
|
|
||||||
<img src="media/recipe1.png" alt="Recipe 1">
|
|
||||||
</div>
|
|
||||||
<div class="catalog-recipe__info">
|
|
||||||
<div class="catalog-recipe__title">
|
|
||||||
<h3>Pizza</h3>
|
|
||||||
</div>
|
|
||||||
<div class="catalog-recipe__meta meta">
|
|
||||||
<div class="catalog-recipe__category">
|
|
||||||
Lunch
|
|
||||||
</div>
|
|
||||||
<div class="catalog-recipe__ingredients">
|
|
||||||
Tomatoes, Pepperoni
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a class="catalog-recipe hover-anim">
|
|
||||||
<div class="catalog-recipe__image">
|
|
||||||
<img src="media/recipe1.png" alt="Recipe 1">
|
|
||||||
</div>
|
|
||||||
<div class="catalog-recipe__info">
|
|
||||||
<div class="catalog-recipe__title">
|
|
||||||
<h3>Pizza</h3>
|
|
||||||
</div>
|
|
||||||
<div class="catalog-recipe__meta meta">
|
|
||||||
<div class="catalog-recipe__category">
|
|
||||||
Lunch
|
|
||||||
</div>
|
|
||||||
<div class="catalog-recipe__ingredients">
|
|
||||||
Tomatoes, Pepperoni
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a class="catalog-recipe hover-anim">
|
|
||||||
<div class="catalog-recipe__image">
|
|
||||||
<img src="media/recipe1.png" alt="Recipe 1">
|
|
||||||
</div>
|
|
||||||
<div class="catalog-recipe__info">
|
|
||||||
<div class="catalog-recipe__title">
|
|
||||||
<h3>Pizza</h3>
|
|
||||||
</div>
|
|
||||||
<div class="catalog-recipe__meta meta">
|
|
||||||
<div class="catalog-recipe__category">
|
|
||||||
Lunch
|
|
||||||
</div>
|
|
||||||
<div class="catalog-recipe__ingredients">
|
|
||||||
Tomatoes, Pepperoni
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a class="catalog-recipe hover-anim">
|
|
||||||
<div class="catalog-recipe__image">
|
|
||||||
<img src="media/recipe1.png" alt="Recipe 1">
|
|
||||||
</div>
|
|
||||||
<div class="catalog-recipe__info">
|
|
||||||
<div class="catalog-recipe__title">
|
|
||||||
<h3>Pizza</h3>
|
|
||||||
</div>
|
|
||||||
<div class="catalog-recipe__meta meta">
|
|
||||||
<div class="catalog-recipe__category">
|
|
||||||
Lunch
|
|
||||||
</div>
|
|
||||||
<div class="catalog-recipe__ingredients">
|
|
||||||
Tomatoes, Pepperoni
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a class="catalog-recipe hover-anim">
|
|
||||||
<div class="catalog-recipe__image">
|
|
||||||
<img src="media/recipe1.png" alt="Recipe 1">
|
|
||||||
</div>
|
|
||||||
<div class="catalog-recipe__info">
|
|
||||||
<div class="catalog-recipe__title">
|
|
||||||
<h3>Pizza</h3>
|
|
||||||
</div>
|
|
||||||
<div class="catalog-recipe__meta meta">
|
|
||||||
<div class="catalog-recipe__category">
|
|
||||||
Lunch
|
|
||||||
</div>
|
|
||||||
<div class="catalog-recipe__ingredients">
|
|
||||||
Tomatoes, Pepperoni
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="filters-container">
|
|
||||||
<div class="filters">
|
|
||||||
<div class="filters-inner">
|
|
||||||
<form class="filters-form" action="" method="get">
|
|
||||||
<div class="categories-filter">
|
|
||||||
<h3 class="filters__title">
|
|
||||||
Categories</h3>
|
|
||||||
<div class="filters__search">
|
|
||||||
<i class="fa-solid fa-magnifying-glass search-icon"></i>
|
|
||||||
<input type="text" class="search-input" placeholder="Search categories...">
|
|
||||||
</div>
|
|
||||||
<!-- All labels and ids are the same for template design purposes (all labels point to same checkbox) -->
|
|
||||||
<div class="filters-checkboxes">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
|
|
||||||
<input id="category" type="checkbox" name="category" id="category">
|
|
||||||
<label for="category">Category</label>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
|
|
||||||
<input id="category" type="checkbox" name="category" id="category">
|
|
||||||
<label for="category">Category</label>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
|
|
||||||
<input id="category" type="checkbox" name="category" id="category">
|
|
||||||
<label for="category">Category</label>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
|
|
||||||
<input id="category" type="checkbox" name="category" id="category">
|
|
||||||
<label for="category">Category</label>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
|
|
||||||
<input id="category" type="checkbox" name="category" id="category">
|
|
||||||
<label for="category">Category</label>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
|
|
||||||
<input id="category" type="checkbox" name="category" id="category">
|
|
||||||
<label for="category">Category</label>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
|
|
||||||
<input id="category" type="checkbox" name="category" id="category">
|
|
||||||
<label for="category">Category</label>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ingredients-filter">
|
|
||||||
<h3 class="filters__title">
|
|
||||||
Ingredients</h3>
|
|
||||||
<div class="filters__search">
|
|
||||||
<i class="fa-solid fa-magnifying-glass search-icon"></i>
|
|
||||||
<input type="text" class="search-input" placeholder="Search Ingredients...">
|
|
||||||
</div>
|
|
||||||
<div class="filters-checkboxes">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
|
|
||||||
<input id="category" type="checkbox" name="category" id="category">
|
|
||||||
<label for="category">Category</label>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
|
|
||||||
<input id="category" type="checkbox" name="category" id="category">
|
|
||||||
<label for="category">Category</label>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
|
|
||||||
<input id="category" type="checkbox" name="category" id="category">
|
|
||||||
<label for="category">Category</label>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
|
|
||||||
<input id="category" type="checkbox" name="category" id="category">
|
|
||||||
<label for="category">Category</label>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
|
|
||||||
<input id="category" type="checkbox" name="category" id="category">
|
|
||||||
<label for="category">Category</label>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
|
|
||||||
<input id="category" type="checkbox" name="category" id="category">
|
|
||||||
<label for="category">Category</label>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
|
|
||||||
<input id="category" type="checkbox" name="category" id="category">
|
|
||||||
<label for="category">Category</label>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button class="btn btn-primary hover-anim" type="submit">
|
|
||||||
Apply
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<?php the_footer(); ?>
|
|
||||||
@ -24,11 +24,9 @@
|
|||||||
.hover-anim:hover {
|
.hover-anim:hover {
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
.page{
|
||||||
.page {
|
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 1170px;
|
max-width: 1170px;
|
||||||
@ -103,7 +101,7 @@ body {
|
|||||||
border: #000 solid 1px; */
|
border: #000 solid 1px; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-input {
|
.search-input{
|
||||||
height: 36px;
|
height: 36px;
|
||||||
background-color: #C7E2C9;
|
background-color: #C7E2C9;
|
||||||
border: 1px solid #A8C9AA;
|
border: 1px solid #A8C9AA;
|
||||||
@ -117,7 +115,7 @@ body {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-link {
|
.login-link{
|
||||||
background-color: #C7E2C9;
|
background-color: #C7E2C9;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
width: 36px;
|
width: 36px;
|
||||||
@ -407,15 +405,10 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ingredients-list {
|
.ingredients-list {
|
||||||
/* columns: 2;
|
columns: 2;
|
||||||
-webkit-columns: 2;
|
-webkit-columns: 2;
|
||||||
-moz-columns: 2; */
|
-moz-columns: 2;
|
||||||
margin-left: 15px;
|
margin-left: 15px;
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
row-gap: 3px;
|
|
||||||
column-gap: 8px;
|
|
||||||
padding: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ingredients-list li {
|
.ingredients-list li {
|
||||||
@ -502,28 +495,26 @@ hr {
|
|||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.terms-of-use {
|
.terms-of-use{
|
||||||
margin-top: 46px;
|
margin-top: 46px;
|
||||||
}
|
}
|
||||||
|
.terms-of-use p:first-of-type{
|
||||||
.terms-of-use p:first-of-type {
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* contact.php */
|
/* contact.php */
|
||||||
.contact {
|
.contact{
|
||||||
margin-top: 46px;
|
margin-top: 46px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact p {
|
.contact p{
|
||||||
font-family: var(--common-font);
|
font-family: var(--common-font);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: var(--common-text);
|
color: var(--common-text);
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact a {
|
.contact a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: var(--panel-text);
|
color: var(--panel-text);
|
||||||
@ -532,43 +523,39 @@ hr {
|
|||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
.address{
|
||||||
.address {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
.faq{
|
||||||
.faq {
|
|
||||||
margin-top: 46px;
|
margin-top: 46px;
|
||||||
}
|
}
|
||||||
|
.faq-question{
|
||||||
.faq-question {
|
|
||||||
font-family: var(--title-font);
|
font-family: var(--title-font);
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
color: var(--title-color);
|
color: var(--title-color);
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
.faq-answer{
|
||||||
.faq-answer {
|
|
||||||
font-family: var(--common-font);
|
font-family: var(--common-font);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: var(--common-text);
|
color: var(--common-text);
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.faq-answer a {
|
.faq-answer a{
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: var(--panel-text);
|
color: var(--panel-text);
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login__inner {
|
.login__inner{
|
||||||
margin-top: 46px;
|
margin-top: 46px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input input {
|
.input input{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
@ -581,23 +568,22 @@ hr {
|
|||||||
color: var(--input-text-color);
|
color: var(--input-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form label {
|
.form label{
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.input {
|
.input{
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
.login-choice a{
|
||||||
.login-choice a {
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: var(--panel-text);
|
color: var(--panel-text);
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn{
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-family: var(--common-font);
|
font-family: var(--common-font);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
@ -616,40 +602,38 @@ hr {
|
|||||||
max-width: 225px;
|
max-width: 225px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-text__notice p {
|
.login-text__notice p{
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login__inner .title {
|
.login__inner .title{
|
||||||
text-align: start;
|
text-align: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.terms-checkbox {
|
.terms-checkbox{
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.terms-link {
|
.terms-link{
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: var(--panel-text);
|
color: var(--panel-text);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.recovery-info {
|
.recovery-info{
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
label span {
|
label span {
|
||||||
color: #015847;
|
color: #015847; /* Example: make the asterisk red */
|
||||||
/* Example: make the asterisk red */
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reset-info {
|
.reset-info{
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.account-block .title {
|
.account-block .title{
|
||||||
text-align: start;
|
text-align: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -660,24 +644,24 @@ label span {
|
|||||||
color: var(--common-text);
|
color: var(--common-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.account-block {
|
.account-block{
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.account-block td {
|
.account-block td{
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.account-title {
|
.account-title{
|
||||||
margin-top: 46px;
|
margin-top: 46px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.change-user-btns {
|
.change-user-btns{
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.a-back {
|
.a-back{
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: var(--panel-text);
|
color: var(--panel-text);
|
||||||
|
|
||||||
@ -691,116 +675,6 @@ label span {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: var(--panel-text);
|
color: var(--panel-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.catalog {
|
|
||||||
margin-top: 46px;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.catalog-recipe {
|
|
||||||
display: block;
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.catalog-recipe__image {
|
|
||||||
width: 200px;
|
|
||||||
height: 150px;
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 10px;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.catalog-recipe__image img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.catalog-recipe__title {
|
|
||||||
font-family: var(--title-font);
|
|
||||||
color: var(--title-color);
|
|
||||||
font-size: 14px;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.catalog-recipe__info {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.catalog-items {
|
|
||||||
width: 800px;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
column-gap: 25px;
|
|
||||||
row-gap: 40px;
|
|
||||||
margin-right: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters-container {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters {
|
|
||||||
position: fixed;
|
|
||||||
height: 454px;
|
|
||||||
width: 230px;
|
|
||||||
padding: 15px;
|
|
||||||
background-color: var(--panel-background);
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters__title {
|
|
||||||
font-family: var(--title-font);
|
|
||||||
color: var(--common-text);
|
|
||||||
font-size: 14px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters__search {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters__search .search-input {
|
|
||||||
margin-right: 0;
|
|
||||||
width: 200px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
margin-top: 10px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters-checkboxes ul li{
|
|
||||||
font-family: var(--common-font);
|
|
||||||
font-size: 14px;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters-form .btn{
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
@media (max-width: 768px){
|
|
||||||
|
|
||||||
.catalog-items{
|
|
||||||
width: 100%;
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
|
|
||||||
|
|
||||||
@ -822,10 +696,9 @@ label span {
|
|||||||
border-top: 1px solid #0DBB99;
|
border-top: 1px solid #0DBB99;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-item a {
|
.nav-item a{
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav.nav-open {
|
.nav.nav-open {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
@ -839,11 +712,10 @@ label span {
|
|||||||
margin: 0.5rem 0;
|
margin: 0.5rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer{
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
.footer-links{
|
||||||
.footer-links {
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -852,16 +724,15 @@ label span {
|
|||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-inner {
|
.footer-inner{
|
||||||
/* padding: 10px 0; */
|
/* padding: 10px 0; */
|
||||||
padding: 20px 0;
|
padding: 20px 0;
|
||||||
}
|
}
|
||||||
|
.footer-nav{
|
||||||
.footer-nav {
|
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.daily-meals-grid {
|
.daily-meals-grid{
|
||||||
grid-template-columns: repeat(1, 300px);
|
grid-template-columns: repeat(1, 300px);
|
||||||
grid-template-rows: repeat(6, 100px);
|
grid-template-rows: repeat(6, 100px);
|
||||||
}
|
}
|
||||||
@ -869,7 +740,7 @@ label span {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
@media (max-width: 1024px){
|
||||||
.reviews-grid {
|
.reviews-grid {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
column-gap: 0;
|
column-gap: 0;
|
||||||
@ -879,42 +750,4 @@ label span {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
.catalog{
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 46px;
|
|
||||||
}
|
}
|
||||||
.filters{
|
|
||||||
position: static;
|
|
||||||
margin-bottom: 46px;
|
|
||||||
}
|
|
||||||
.catalog-items{
|
|
||||||
margin-right: 0;
|
|
||||||
justify-items: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
.catalog-recipe{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 465px){
|
|
||||||
.catalog-recipe{
|
|
||||||
width: 150px;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 400px){
|
|
||||||
.catalog-items{
|
|
||||||
width: 100%;
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -54,7 +54,7 @@
|
|||||||
<ul class="nav-list">
|
<ul class="nav-list">
|
||||||
<li class="nav-item"><a href="<?php the_permalink("index:home") ?>" class="nav-link">HOME</a>
|
<li class="nav-item"><a href="<?php the_permalink("index:home") ?>" class="nav-link">HOME</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item"><a href="<?php the_permalink("recipes:catalog") ?>" class="nav-link">RECIPES</a></li>
|
<li class="nav-item"><a href="#" class="nav-link">RECIPES</a></li>
|
||||||
<li class="nav-item"><a href="#" class="nav-link">FAVORITES</a></li>
|
<li class="nav-item"><a href="#" class="nav-link">FAVORITES</a></li>
|
||||||
<li class="nav-item"><a href="#" class="nav-link">MEAL A DAY</a></li>
|
<li class="nav-item"><a href="#" class="nav-link">MEAL A DAY</a></li>
|
||||||
<li class="nav-item"><a href="#" class="nav-link">SUBMIT RECIPE</a></li>
|
<li class="nav-item"><a href="#" class="nav-link">SUBMIT RECIPE</a></li>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user