diff --git a/actions/WooCommerceAfterContent.php b/actions/WooCommerceAfterContent.php
new file mode 100644
index 0000000..774727e
--- /dev/null
+++ b/actions/WooCommerceAfterContent.php
@@ -0,0 +1,20 @@
+render('woocommerce-after-content');
+ }
+}
diff --git a/actions/WooCommerceAfterProductSummary.php b/actions/WooCommerceAfterProductSummary.php
new file mode 100644
index 0000000..e27ecb9
--- /dev/null
+++ b/actions/WooCommerceAfterProductSummary.php
@@ -0,0 +1,16 @@
+render('woocommerce-before-content');
+ }
+}
diff --git a/actions/WooCommerceBeforeProductSummary.php b/actions/WooCommerceBeforeProductSummary.php
new file mode 100644
index 0000000..9e3af66
--- /dev/null
+++ b/actions/WooCommerceBeforeProductSummary.php
@@ -0,0 +1,18 @@
+render('woocommerce-before-content', [
+ "additionalTopLevelClass" => "single-product-top",
+ ]);
+ }
+}
diff --git a/actions/WooCommerceCategoryLayout.php b/actions/WooCommerceCategoryLayout.php
new file mode 100644
index 0000000..57ffbf6
--- /dev/null
+++ b/actions/WooCommerceCategoryLayout.php
@@ -0,0 +1,45 @@
+render("shop-category-slice", site()->getQueriedObject(null, [
+ "title",
+ "description",
+ "thumbnail",
+ "url",
+ "acf.intro_headline",
+ "acf.intro_content",
+ ]));
+
+ $type = site()->getQueriedObject(null, ['display_type']);
+ if ($type === "") {
+ $type = "products";
+ } else {
+ $type = $type["display_type"];
+ }
+
+ if ($type === "both" || $type === "subcategories") {
+ $childCats = site()->getQueriedObject(null, ["children.url,thumbnail,title,count"]);
+
+ echo site()->render("shop-sub-categories", $childCats);
+ }
+
+ if ($type === "both" || $type === "products") {
+ // die("why?");
+ }
+ echo site()->render('woocommerce-before-content');
+ }
+}
diff --git a/actions/WooCommerceCategoryLayoutHideProducts.php b/actions/WooCommerceCategoryLayoutHideProducts.php
new file mode 100644
index 0000000..f92060a
--- /dev/null
+++ b/actions/WooCommerceCategoryLayoutHideProducts.php
@@ -0,0 +1,30 @@
+getQueriedObject(null, ['display_type']);
+ if ($type === "") {
+ $type = "products";
+ } else {
+ $type = $type["display_type"];
+ }
+
+ if ($type != "subcategories") {
+ return;
+ }
+
+ echo site()->render("hideProducts");
+ }
+}
diff --git a/actions/WooCommerceCleanup.php b/actions/WooCommerceCleanup.php
new file mode 100644
index 0000000..3d9ac0b
--- /dev/null
+++ b/actions/WooCommerceCleanup.php
@@ -0,0 +1,20 @@
+render('woocommerce-after-content');
+ }
+}
diff --git a/actions/WooCommerceProductTile.php b/actions/WooCommerceProductTile.php
new file mode 100644
index 0000000..d9a0321
--- /dev/null
+++ b/actions/WooCommerceProductTile.php
@@ -0,0 +1,32 @@
+getPost($product->id, [
+ "url",
+ "id",
+ "title",
+ "thumbnail",
+ "woocommerce.price",
+ "woocommerce.attribute.msrp",
+ "woocommerce.cartUrl",
+ "woocommerce.sku",
+ ]);
+
+ $data["savings"] = McCansHelpers::calcDifference($data["price"], $data["msrp"]);
+
+ echo site()->render("product-tile", $data);
+ }
+}
diff --git a/actions/WooCommerceShopLayout.php b/actions/WooCommerceShopLayout.php
new file mode 100644
index 0000000..813eb22
--- /dev/null
+++ b/actions/WooCommerceShopLayout.php
@@ -0,0 +1,26 @@
+render("shop-top", site()->getPost(wc_get_page_id('shop'), [
+ "headline",
+ "intro_text",
+ "thumbnail",
+ ]));
+ echo site()->render('woocommerce-before-content');
+ }
+}
diff --git a/config.php b/config.php
index df0f7dd..2dbc63c 100644
--- a/config.php
+++ b/config.php
@@ -80,6 +80,7 @@ return [
"renderCallout" => \Helpers\McCansHelpers::renderCallout(),
"productBox" => \Helpers\McCansHelpers::searchResultBox('product'),
"pageBox" => \Helpers\McCansHelpers::searchResultBox('page'),
+ "categoryBox" => \Helpers\McCansHelpers::categoryBox(),
"usd" => \Helpers\McCansHelpers::usd(),
"fourColContent" => \Helpers\McCansHelpers::fourColContent(),
],
@@ -121,21 +122,6 @@ return [
],
"actions" => [
- "woocommerce_before_single_product_summary" => [function () {
- echo site()->render('woocommerce-before-content', [
- "additionalTopLevelClass" => "single-product-top",
- ]);
- }, 0],
- "woocommerce_single_product_summary" => function () {
- echo site()->render('woocommerce-after-content');
- },
- [
- "hook" => "woocommerce_after_single_product_summary",
- "priority" => 0,
- "callback" => function () {
- echo site()->render('woocommerce-before-content');
- },
- ],
"woocommerce_after_single_product" => function () {
echo site()->render('woocommerce-after-content');
},
@@ -159,75 +145,5 @@ return [
]);
}
],
-
- "woocommerce_before_main_content" => [function () {
- // skip this for individual products
- if (is_product()) {
- return;
- }
-
- // shop page
- if (is_shop()) {
- echo site()->render("shop-top", site()->getPost(wc_get_page_id('shop'), [
- "headline",
- "intro_text",
- "thumbnail",
- ]));
- echo site()->render('woocommerce-before-content');
- return;
- }
-
- if (is_product_category()) {
- echo site()->render("shop-category-slice", site()->getQueriedObject(null, [
- "title",
- "description",
- "thumbnail",
- "url",
- "acf.intro_headline",
- "acf.intro_content",
- ]));
- echo site()->render('woocommerce-before-content');
- return;
- }
-
- echo site()->render('woocommerce-before-content');
- }, 5],
- [
- "hook" => "woocommerce_after_main_content",
- "callback" => function () {
- // skip this for individual products
- if (is_product()) {
- return;
- }
-
- echo site()->render('woocommerce-after-content');
- },
- "priority" => 50,
- ],
- "init" => function () {
- remove_all_actions('woocommerce_before_shop_loop_item');
- remove_all_actions('woocommerce_before_shop_loop_item_title');
- remove_all_actions('woocommerce_shop_loop_item_title');
- remove_all_actions('woocommerce_after_shop_loop_item_title');
- remove_all_actions('woocommerce_after_shop_loop_item');
- add_action('woocommerce_shop_loop_item_title', function () {
- global $product;
-
- $data = site()->getPost($product->id, [
- "url",
- "id",
- "title",
- "thumbnail",
- "woocommerce.price",
- "woocommerce.attribute.msrp",
- "woocommerce.cartUrl",
- "woocommerce.sku",
- ]);
-
- $data["savings"] = McCansHelpers::calcDifference($data["price"], $data["msrp"]);
-
- echo site()->render("product-tile", $data);
- });
- }
],
];
diff --git a/dist/app.css b/dist/app.css
index 59bfe6e..d36760e 100644
--- a/dist/app.css
+++ b/dist/app.css
@@ -12327,7 +12327,7 @@ input, label, textarea {
.top-bar a.account-button {
border: 0;
text-transform: uppercase;
- color: #ae1716;
+ color: #c80000;
font-weight: bold;
background: transparent;
text-decoration: none;
@@ -12342,16 +12342,31 @@ input, label, textarea {
}
.main-nav {
+ z-index: 3;
padding: 2rem 0;
- position: relative;
- z-index: 2;
}
-.main-nav .logo-wrapper {
+
+.shop-nav {
+ z-index: 2;
+ padding: 1rem 0;
+}
+.shop-nav #menu-shop-navigation {
+ justify-content: center;
+ width: 100%;
+}
+.shop-nav .menu-shop-navigation-container {
+ width: 100%;
+}
+
+.main-nav, .shop-nav {
+ position: relative;
+}
+.main-nav .logo-wrapper, .shop-nav .logo-wrapper {
max-width: 400px;
width: 20%;
}
@media (max-width: 991.98px) {
- .main-nav .logo-wrapper {
+ .main-nav .logo-wrapper, .shop-nav .logo-wrapper {
width: 100%;
display: flex;
justify-content: space-between;
@@ -12359,69 +12374,69 @@ input, label, textarea {
gap: 3rem;
align-items: center;
}
- .main-nav .logo-wrapper img {
+ .main-nav .logo-wrapper img, .shop-nav .logo-wrapper img {
max-width: 250px;
}
- .main-nav .logo-wrapper a {
+ .main-nav .logo-wrapper a, .shop-nav .logo-wrapper a {
color: #000;
}
- .main-nav .logo-wrapper svg {
+ .main-nav .logo-wrapper svg, .shop-nav .logo-wrapper svg {
width: 50px;
height: 50px;
}
}
@media (max-width: 575.98px) {
- .main-nav .logo-wrapper {
+ .main-nav .logo-wrapper, .shop-nav .logo-wrapper {
gap: 1rem !important;
}
}
@media (min-width: 992px) {
- .main-nav .logo-wrapper #mobile-nav-toggle {
+ .main-nav .logo-wrapper #mobile-nav-toggle, .shop-nav .logo-wrapper #mobile-nav-toggle {
display: none;
}
}
-.main-nav .logo-wrapper #mobile-nav-toggle svg:first-of-type {
+.main-nav .logo-wrapper #mobile-nav-toggle svg:first-of-type, .shop-nav .logo-wrapper #mobile-nav-toggle svg:first-of-type {
display: block;
}
-.main-nav .logo-wrapper #mobile-nav-toggle svg:last-of-type {
+.main-nav .logo-wrapper #mobile-nav-toggle svg:last-of-type, .shop-nav .logo-wrapper #mobile-nav-toggle svg:last-of-type {
display: none;
}
-.mobile-nav-open .main-nav .logo-wrapper #mobile-nav-toggle svg:first-of-type {
+.mobile-nav-open .main-nav .logo-wrapper #mobile-nav-toggle svg:first-of-type, .mobile-nav-open .shop-nav .logo-wrapper #mobile-nav-toggle svg:first-of-type {
display: none;
}
-.mobile-nav-open .main-nav .logo-wrapper #mobile-nav-toggle svg:last-of-type {
+.mobile-nav-open .main-nav .logo-wrapper #mobile-nav-toggle svg:last-of-type, .mobile-nav-open .shop-nav .logo-wrapper #mobile-nav-toggle svg:last-of-type {
display: block;
}
-.main-nav .logo-wrapper img {
+.main-nav .logo-wrapper img, .shop-nav .logo-wrapper img {
width: 100%;
}
-.main-nav nav.main-nav {
+.main-nav nav.main-nav, .main-nav nav.shop-nav, .shop-nav nav.main-nav, .shop-nav nav.shop-nav {
display: none;
width: 100%;
}
-.mobile-nav-open .main-nav nav.main-nav {
+.mobile-nav-open .main-nav nav.main-nav, .mobile-nav-open .main-nav nav.shop-nav, .mobile-nav-open .shop-nav nav.main-nav, .mobile-nav-open .shop-nav nav.shop-nav {
display: flex;
flex-direction: column;
}
@media (min-width: 992px) {
- .main-nav nav.main-nav {
+ .main-nav nav.main-nav, .main-nav nav.shop-nav, .shop-nav nav.main-nav, .shop-nav nav.shop-nav {
display: flex;
width: auto;
}
}
-.main-nav .menu-main-menu-container {
+.main-nav .menu-main-menu-container, .main-nav .menu-shop-navigation-container, .shop-nav .menu-main-menu-container, .shop-nav .menu-shop-navigation-container {
display: flex;
align-items: center;
}
@media (max-width: 991.98px) {
- .main-nav .menu-main-menu-container {
+ .main-nav .menu-main-menu-container, .main-nav .menu-shop-navigation-container, .shop-nav .menu-main-menu-container, .shop-nav .menu-shop-navigation-container {
width: 100%;
}
- .main-nav .menu-main-menu-container > ul {
+ .main-nav .menu-main-menu-container > ul, .main-nav .menu-shop-navigation-container > ul, .shop-nav .menu-main-menu-container > ul, .shop-nav .menu-shop-navigation-container > ul {
width: 100%;
}
}
-.main-nav #menu-main-menu {
+.main-nav #menu-main-menu, .main-nav #menu-shop-navigation, .shop-nav #menu-main-menu, .shop-nav #menu-shop-navigation {
display: flex;
margin: 0;
padding: 0;
@@ -12429,20 +12444,20 @@ input, label, textarea {
gap: 1rem;
}
@media (max-width: 991.98px) {
- .main-nav #menu-main-menu {
+ .main-nav #menu-main-menu, .main-nav #menu-shop-navigation, .shop-nav #menu-main-menu, .shop-nav #menu-shop-navigation {
flex-direction: column;
}
}
-.main-nav #menu-main-menu a {
+.main-nav #menu-main-menu a, .main-nav #menu-shop-navigation a, .shop-nav #menu-main-menu a, .shop-nav #menu-shop-navigation a {
text-transform: uppercase;
color: #000;
text-decoration: none;
}
-.main-nav #menu-main-menu > li {
+.main-nav #menu-main-menu > li, .main-nav #menu-shop-navigation > li, .shop-nav #menu-main-menu > li, .shop-nav #menu-shop-navigation > li {
position: relative;
}
@media (min-width: 1200px) {
- .main-nav #menu-main-menu > li:hover > ul {
+ .main-nav #menu-main-menu > li:hover > ul, .main-nav #menu-shop-navigation > li:hover > ul, .shop-nav #menu-main-menu > li:hover > ul, .shop-nav #menu-shop-navigation > li:hover > ul {
display: block;
position: absolute;
top: 100%;
@@ -12453,7 +12468,7 @@ input, label, textarea {
padding: 10px 15px;
transform: translate(-5px, -5px);
}
- .main-nav #menu-main-menu > li:hover > ul li a {
+ .main-nav #menu-main-menu > li:hover > ul li a, .main-nav #menu-shop-navigation > li:hover > ul li a, .shop-nav #menu-main-menu > li:hover > ul li a, .shop-nav #menu-shop-navigation > li:hover > ul li a {
padding-top: 5px;
padding-bottom: 5px;
display: inline-block;
@@ -12461,25 +12476,25 @@ input, label, textarea {
}
}
@media (max-width: 991.98px) {
- .main-nav #menu-main-menu > li.children-showing ul {
+ .main-nav #menu-main-menu > li.children-showing ul, .main-nav #menu-shop-navigation > li.children-showing ul, .shop-nav #menu-main-menu > li.children-showing ul, .shop-nav #menu-shop-navigation > li.children-showing ul {
display: flex;
flex-direction: column;
list-style-type: none;
}
- .main-nav #menu-main-menu > li.children-showing ul li {
+ .main-nav #menu-main-menu > li.children-showing ul li, .main-nav #menu-shop-navigation > li.children-showing ul li, .shop-nav #menu-main-menu > li.children-showing ul li, .shop-nav #menu-shop-navigation > li.children-showing ul li {
position: relative;
}
- .main-nav #menu-main-menu > li.children-showing ul a {
+ .main-nav #menu-main-menu > li.children-showing ul a, .main-nav #menu-shop-navigation > li.children-showing ul a, .shop-nav #menu-main-menu > li.children-showing ul a, .shop-nav #menu-shop-navigation > li.children-showing ul a {
width: 100%;
}
- .main-nav #menu-main-menu > li.children-showing .toggle-sub-nav {
+ .main-nav #menu-main-menu > li.children-showing .toggle-sub-nav, .main-nav #menu-shop-navigation > li.children-showing .toggle-sub-nav, .shop-nav #menu-main-menu > li.children-showing .toggle-sub-nav, .shop-nav #menu-shop-navigation > li.children-showing .toggle-sub-nav {
transform: rotate(180deg);
}
}
-.main-nav #menu-main-menu ul {
+.main-nav #menu-main-menu ul, .main-nav #menu-shop-navigation ul, .shop-nav #menu-main-menu ul, .shop-nav #menu-shop-navigation ul {
display: none;
}
-.main-nav .toggle-sub-nav {
+.main-nav .toggle-sub-nav, .shop-nav .toggle-sub-nav {
width: 16px;
height: 16px;
background-image: url("/wp-content/themes/mccans-theme/assets/chevron-down.svg");
@@ -12490,7 +12505,7 @@ input, label, textarea {
background-color: transparent;
}
@media (max-width: 991.98px) {
- .main-nav .toggle-sub-nav {
+ .main-nav .toggle-sub-nav, .shop-nav .toggle-sub-nav {
width: 30px;
height: 30px;
position: absolute;
@@ -12539,7 +12554,7 @@ footer.site-footer nav#social-nav ul a {
}
footer.site-footer nav#social-nav ul a:hover {
background-color: #fff;
- color: #ae1716;
+ color: #c80000;
}
footer.site-footer .logo-col {
max-width: 336px;
@@ -12695,7 +12710,7 @@ footer.sub-footer {
font-size: 20px;
}
.testimonials-section .testimonials .slick-dots li.slick-active button:before {
- color: #ae1716;
+ color: #c80000;
}
.testimonials-section .testimonials .testimonial {
background: #fff;
@@ -13062,11 +13077,17 @@ div.product-tile a.learn-more, div.page-tile a.learn-more {
.page-tile h2, .page-tile .h2 {
text-align: left !important;
- font-size: 32px !important;
- line-height: 37px !important;
+ font-size: 24px !important;
+ line-height: 30px !important;
text-transform: uppercase;
margin: 1rem 0;
}
+@media (min-width: 1200px) {
+ .page-tile h2, .page-tile .h2 {
+ font-size: 32px !important;
+ line-height: 37px !important;
+ }
+}
.category-slice-top {
background-color: #f2f2f2;
@@ -13158,7 +13179,7 @@ div.product-tile a.learn-more, div.page-tile a.learn-more {
height: 500px;
}
.post-type-archive-location .location-tile h2, .post-type-archive-location .location-tile .h2 {
- color: #ae1716;
+ color: #c80000;
text-transform: uppercase;
margin-bottom: 0;
}
@@ -13206,3 +13227,21 @@ div.product-tile a.learn-more, div.page-tile a.learn-more {
.search-results .tile-wrapper {
margin-bottom: 1.5rem;
}
+
+.category-sub-cats-wrapper .sub-cats {
+ flex-wrap: wrap;
+ margin-top: 2rem;
+}
+.category-sub-cats-wrapper .sub-cats .page-tile {
+ width: 100%;
+}
+@media (min-width: 768px) {
+ .category-sub-cats-wrapper .sub-cats .page-tile {
+ width: calc(50% - 0.5rem);
+ }
+}
+@media (min-width: 992px) {
+ .category-sub-cats-wrapper .sub-cats .page-tile {
+ width: calc(25% - 0.75rem);
+ }
+}
diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json
index 45b874e..be5f33e 100644
--- a/dist/mix-manifest.json
+++ b/dist/mix-manifest.json
@@ -1,4 +1,4 @@
{
"/app.js": "/app.js?id=8af0c9c0d989b79afe124f8138dc1a63",
- "/app.css": "/app.css?id=830df460c7c9284d57346827424337f9"
+ "/app.css": "/app.css?id=a881c23833f0893c65814ff00ee9ff6e"
}
diff --git a/header.php b/header.php
index ba77ef9..5c8d54e 100644
--- a/header.php
+++ b/header.php
@@ -8,5 +8,6 @@
echo site()->render("header", [
"accountHref" => get_permalink(73),
"menu" => site()->renderMenu("main-nav"),
+ "shopMenu" => site()->renderMenu("shop-nav"),
"searchTerm" => $_GET["s"] ?? "",
]);
diff --git a/helpers/McCansHelpers.php b/helpers/McCansHelpers.php
index 6784058..ac86281 100644
--- a/helpers/McCansHelpers.php
+++ b/helpers/McCansHelpers.php
@@ -81,6 +81,15 @@ class McCansHelpers
};
}
+ public static function categoryBox()
+ {
+ return function ($template, $context, $args, $source) {
+ $stuff = $context->get($args);
+
+ return site()->render("page-tile", $stuff);
+ };
+ }
+
public static function renderBlock()
{
return function ($template, $context, $args, $source) {
diff --git a/src/scss/app.scss b/src/scss/app.scss
index f058d0e..f723204 100644
--- a/src/scss/app.scss
+++ b/src/scss/app.scss
@@ -31,3 +31,5 @@
@import "locations";
@import "location";
@import "search";
+
+@import "woocommerce-changes";
diff --git a/src/scss/flex-testimonials.scss b/src/scss/flex-testimonials.scss
index 03b1b9a..d35fd38 100644
--- a/src/scss/flex-testimonials.scss
+++ b/src/scss/flex-testimonials.scss
@@ -65,7 +65,7 @@
&.slick-active {
button {
&:before {
- color: $c-red;
+ color: $c-brightRed;
}
}
}
diff --git a/src/scss/footer.scss b/src/scss/footer.scss
index 570cbc4..7cd2022 100644
--- a/src/scss/footer.scss
+++ b/src/scss/footer.scss
@@ -45,7 +45,7 @@ footer.site-footer {
&:hover {
background-color: $c-white;
- color: $c-red;
+ color: $c-brightRed;
}
}
}
diff --git a/src/scss/header.scss b/src/scss/header.scss
index a07dd15..016a40d 100644
--- a/src/scss/header.scss
+++ b/src/scss/header.scss
@@ -15,7 +15,7 @@
a.account-button {
border: 0;
text-transform: uppercase;
- color: $c-red;
+ color: $c-brightRed;
font-weight: bold;
background: transparent;
text-decoration: none;
@@ -30,9 +30,26 @@
}
.main-nav {
+ z-index: 3;
padding: 2rem 0;
- position: relative;
+}
+
+.shop-nav {
z-index: 2;
+ padding: 1rem 0;
+
+ #menu-shop-navigation {
+ justify-content: center;
+ width: 100%;
+ }
+
+ .menu-shop-navigation-container {
+ width: 100%;
+ }
+}
+
+.main-nav, .shop-nav {
+ position: relative;
.logo-wrapper {
max-width: 400px;
@@ -91,7 +108,7 @@
}
}
- nav.main-nav {
+ nav.main-nav, nav.shop-nav {
display: none;
width: 100%;
@@ -106,7 +123,7 @@
}
}
- .menu-main-menu-container {
+ .menu-main-menu-container, .menu-shop-navigation-container {
display: flex;
align-items: center;
@@ -119,7 +136,7 @@
}
}
- #menu-main-menu {
+ #menu-main-menu, #menu-shop-navigation {
display: flex;
margin: 0;
padding: 0;
diff --git a/src/scss/locations.scss b/src/scss/locations.scss
index 65064a8..da0f218 100644
--- a/src/scss/locations.scss
+++ b/src/scss/locations.scss
@@ -32,7 +32,7 @@
}
h2 {
- color: $c-red;
+ color: $c-brightRed;
text-transform: uppercase;
margin-bottom: 0;
}
diff --git a/src/scss/shop.scss b/src/scss/shop.scss
index 966bb32..9eca85a 100644
--- a/src/scss/shop.scss
+++ b/src/scss/shop.scss
@@ -134,9 +134,14 @@ div.product-tile, div.page-tile {
h2 {
@extend .montserrat;
text-align: left !important;
- font-size: 32px !important;
- line-height: 37px !important;
+ font-size: 24px !important;
+ line-height: 30px !important;
text-transform: uppercase;
margin: 1rem 0;
+
+ @include media-breakpoint-up(xl) {
+ font-size: 32px !important;
+ line-height: 37px !important;
+ }
}
}
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index e4c0e01..8664407 100644
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -6,7 +6,6 @@ $c-grey: #cbcbcb;
$c-midGrey: #acacac;
$c-textAlt: #505050;
$c-brightRed: #c80000;
-$c-red: #ae1716;
$transition-time: 0.3s;
diff --git a/src/scss/woocommerce-changes.scss b/src/scss/woocommerce-changes.scss
new file mode 100644
index 0000000..ce5887a
--- /dev/null
+++ b/src/scss/woocommerce-changes.scss
@@ -0,0 +1,18 @@
+.category-sub-cats-wrapper {
+ .sub-cats {
+ flex-wrap: wrap;
+ margin-top: 2rem;
+
+ .page-tile {
+ width: 100%;
+
+ @include media-breakpoint-up(md) {
+ width: calc(50% - 0.5rem);
+ }
+
+ @include media-breakpoint-up(lg) {
+ width: calc(25% - 0.75rem);
+ }
+ }
+ }
+}
diff --git a/tpl/header.tpl b/tpl/header.tpl
index 79a43ca..e76d8b8 100644
--- a/tpl/header.tpl
+++ b/tpl/header.tpl
@@ -61,3 +61,16 @@
+
+
+