refactor: Reduce duplicated code
- move categorical navigation menu HTMLinto category-nav.njk and CSS into category-nav.css
This commit is contained in:
18
src/_includes/category-nav.njk
Normal file
18
src/_includes/category-nav.njk
Normal file
@@ -0,0 +1,18 @@
|
||||
<div id="right-side">
|
||||
<nav id="category-nav">
|
||||
<div id="category-nav-container">
|
||||
<h2>Shop by Category</h2>
|
||||
<div class="categories">
|
||||
<ul>
|
||||
<li><a href="/gallery/?category=trees#" class="cat-btn">Trees</a></li>
|
||||
<li><a href="/gallery/?category=shrubs#" class="cat-btn">Shrubs</a></li>
|
||||
<li><a href="/gallery/?category=indoor#" class="cat-btn">Indoor</a></li>
|
||||
<li><a href="/gallery/?category=patio#" class="cat-btn">Patio</a></li>
|
||||
<li><a href="/gallery/?category=tools#" class="cat-btn">Tools</a></li>
|
||||
<li><a href="/gallery/?category=accessories#" class="cat-btn">Accessories</a></li>
|
||||
<li><a href="/gallery/?category=landscaping#" class="cat-btn">Landscaping</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -8,6 +8,7 @@ stylesheet:
|
||||
- "/styles/base.css"
|
||||
- "/styles/header.css"
|
||||
- "/styles/gallery.css"
|
||||
- "/styles/category-nav.css"
|
||||
- "/styles/footer.css"
|
||||
- "/styles/modals.css"
|
||||
fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
|
||||
@@ -42,22 +43,9 @@ pageScripts:
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<aside id="right-aside">
|
||||
<div id="category-nav-container" aria-label="Available Product Categories">
|
||||
<h2>Shop by Category</h2>
|
||||
<div class="categories">
|
||||
<ul>
|
||||
<li><a href="/gallery/?category=trees#" class="cat-btn">Trees</a></li>
|
||||
<li><a href="/gallery/?category=trees#" class="cat-btn">Shrubs</a></li>
|
||||
<li><a href="/gallery/?category=indoor#" class="cat-btn">Indoor</a></li>
|
||||
<li><a href="/gallery/?category=indoor#" class="cat-btn">Patio</a></li>
|
||||
<li><a href="/gallery/?category=tools#" class="cat-btn">Tools</a></li>
|
||||
<li><a href="/gallery/?category=tools#" class="cat-btn">Accessories</a></li>
|
||||
<li><a href="/gallery/?category=tools#" class="cat-btn">Landscaping</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{% include "category-nav.njk" %}
|
||||
|
||||
</div>
|
||||
<div id="gallery-bottom">
|
||||
<button id="cart-details">View Shopping Cart</button>
|
||||
|
||||
@@ -8,6 +8,7 @@ stylesheet:
|
||||
- "/styles/base.css"
|
||||
- "/styles/header.css"
|
||||
- "/styles/index.css"
|
||||
- "/styles/category-nav.css"
|
||||
- "/styles/footer.css"
|
||||
- "/styles/modal.css"
|
||||
fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
|
||||
@@ -70,22 +71,6 @@ pageScripts:
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id="right-side">
|
||||
<nav id="category-nav">
|
||||
<div id="category-nav-container">
|
||||
<h2>Shop by Category</h2>
|
||||
<div class="categories">
|
||||
<ul>
|
||||
<li><a href="/gallery/?category=trees#" class="cat-btn">Trees</a></li>
|
||||
<li><a href="/gallery/?category=shrubs#" class="cat-btn">Shrubs</a></li>
|
||||
<li><a href="/gallery/?category=indoor#" class="cat-btn">Indoor</a></li>
|
||||
<li><a href="/gallery/?category=patio#" class="cat-btn">Patio</a></li>
|
||||
<li><a href="/gallery/?category=tools#" class="cat-btn">Tools</a></li>
|
||||
<li><a href="/gallery/?category=accessories#" class="cat-btn">Accessories</a></li>
|
||||
<li><a href="/gallery/?category=landscaping#" class="cat-btn">Landscaping</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
{% include "category-nav.njk" %}
|
||||
|
||||
</div>
|
||||
|
||||
81
src/styles/category-nav.css
Normal file
81
src/styles/category-nav.css
Normal file
@@ -0,0 +1,81 @@
|
||||
/* --- CATEGORY NAVIGATION --- */
|
||||
#right-side {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#category-nav {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: var(--color-soft-golden);
|
||||
padding: 5px 10px;
|
||||
margin-top: 10px;
|
||||
box-shadow: var(--shadow-strong);
|
||||
max-width: 325px;
|
||||
border: solid var(--color-destin-sand);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#category-nav-container {
|
||||
background-color: var(--color-destin-sand);
|
||||
color: var(--color-dark-green);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 10px;
|
||||
padding: 5px 10px;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
width: 90%;
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
#category-nav h2 {
|
||||
font-size: 1.675rem;
|
||||
background-color: var(--color-light-teal);
|
||||
color: var(--color-dark-green);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 10px;
|
||||
padding: 0 5px;
|
||||
white-space: nowrap;
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
.categories ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
list-style-type: none;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.categories ul li {
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 10px;
|
||||
background-color: var(--color-mid-green);
|
||||
margin-top: 20px;
|
||||
min-width: 100%;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
.categories a {
|
||||
color: var(--color-dark-green);
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
|
||||
}
|
||||
|
||||
.categories ul li:hover {
|
||||
background-color: var(--color-destin-sand);
|
||||
color: var(--color-dark-green);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
.categories ul li a:hover {
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
color: inherit;
|
||||
}
|
||||
@@ -220,78 +220,4 @@ p.short-description {
|
||||
|
||||
#featured-container a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* --- CATEGORY NAVIGATION --- */
|
||||
#category-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: var(--color-soft-golden);
|
||||
padding: 5px 10px;
|
||||
margin-top: 10px;
|
||||
border: solid var(--color-destin-sand);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#category-nav-container {
|
||||
background-color: var(--color-destin-sand);
|
||||
color: var(--color-dark-green);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 10px;
|
||||
padding: 5px 10px;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
width: 90%;
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
#category-nav h2 {
|
||||
font-size: 1.675rem;
|
||||
background-color: var(--color-light-teal);
|
||||
color: var(--color-dark-green);
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 10px;
|
||||
padding: 0 5px;
|
||||
white-space: nowrap;
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
.categories ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
list-style-type: none;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.categories ul li {
|
||||
border: solid var(--color-dark-green);
|
||||
border-radius: 10px;
|
||||
background-color: var(--color-mid-green);
|
||||
margin-top: 20px;
|
||||
min-width: 100%;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
box-shadow: var(--shadow-strong);
|
||||
}
|
||||
|
||||
.categories a {
|
||||
color: var(--color-dark-green);
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
|
||||
}
|
||||
|
||||
.categories ul li:hover {
|
||||
background-color: var(--color-destin-sand);
|
||||
color: var(--color-dark-green);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
.categories ul li a:hover {
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
color: inherit;
|
||||
}
|
||||
Reference in New Issue
Block a user