ofco/mccans-theme
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Kurtis Holsapple
2025-05-20 14:15:03 -07:00
parent c074a5ef18
commit edcad561a5
179 changed files with 52733 additions and 4704 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/js/app.js
View File

@@ -0,0 +1,93 @@
import $ from 'jquery';
import 'slick-carousel';
// slick sliders
$('.logo-slider .logos').slick({
infinite: true,
slidesToShow: 5,
pauseOnHover: false,
arrows: false,
autoplay: true,
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 4,
}
},
{
breakpoint: 992,
settings: {
slidesToShow: 3,
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 576,
settings: {
slidesToShow: 1,
}
},
]
});
$('.testimonials').slick({
infinite: true,
slidesToShow: 1,
arrows: true,
autoplay: true,
autoplaySpeed: 7000,
adaptiveHeight: true,
dots: true,
prevArrow: '<button type="button" class="slick-prev"><img src="/wp-content/themes/mccans-theme/assets/chevron-left.svg" alt="" /></button>',
nextArrow: '<button type="button" class="slick-next"><img src="/wp-content/themes/mccans-theme/assets/chevron-right.svg" alt="" /></button>',
});
// dynamic maps
const customIcon = L.icon({
iconUrl: '/wp-content/themes/mccans-theme/assets/map-marker.png',
iconSize: [33, 50], // width and height of the icon
iconAnchor: [16, 50], // point of the icon which will correspond to marker's location
popupAnchor: [0, -50] // point from which the popup should open relative to the iconAnchor
});
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll(".leaflet-map").forEach((el) => {
const lat = parseFloat(el.dataset.lat);
const lng = parseFloat(el.dataset.lng);
const title = el.dataset.title;
if (isNaN(lat) || isNaN(lng)) return;
const map = L.map(el).setView([lat, lng], 13);
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
attribution: '&copy; <a href="https://carto.com/">CARTO</a> | © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: 'abcd',
maxZoom: 19,
}).addTo(map);
L.marker([lat, lng], {icon: customIcon})
.addTo(map)
.bindPopup(`${title} Location`);
});
});
// top nav expand items
$(".menu-item-has-children").append("<button class='toggle-sub-nav'></button>");
$("body").on("click", ".toggle-sub-nav", (e) => {
$(e.target).parent("li").toggleClass("children-showing");
});
// mobile nav toggle
document.getElementById("mobile-nav-toggle").addEventListener("click", (e) => {
e.preventDefault();
document.getElementsByTagName("body")[0].classList.toggle("mobile-nav-open");
});

22
src/scss/app.scss
View File

@@ -1,2 +1,22 @@
// dependancies - bootstrap
@import "variables";
// dependancies
@import "../../node_modules/bootstrap/scss/bootstrap";
@import "../../node_modules/slick-carousel/slick/slick";
@import "../../node_modules/slick-carousel/slick/slick-theme";
@import "global";
@import "header";
@import "footer";
@import "flex-background-image-cta";
@import "flex-plain-text";
@import "flex-logo-slider";
@import "flex-testimonials";
@import "top-image";
@import "intro-slide";
@import "shop";
@import "locations";
@import "location";

32
src/scss/flex-background-image-cta.scss Normal file
View File

@@ -0,0 +1,32 @@
.background-image-cta {
padding: 5rem 0;
background-size: cover;
background-position: center;
position: relative;
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0.8), transparent);
z-index: 1;
}
.container {
position: relative;
z-index: 2;
}
h1, h2, h3 {
@extend .headline-xl;
text-transform: uppercase;
}
p {
font-size: 27px;
margin-bottom: 2rem;
}
}

9
src/scss/flex-logo-slider.scss Normal file
View File

@@ -0,0 +1,9 @@
.logo-slider {
.logo {
filter: grayscale(100%);
&:hover {
filter: grayscale(0%);
}
}
}

16
src/scss/flex-plain-text.scss Normal file
View File

@@ -0,0 +1,16 @@
.plain-text {
padding: 6rem 0;
h1, h2, h3 {
@extend .headline-lg;
text-transform: uppercase;
text-align: center;
margin-bottom: 2rem;
}
p {
text-align: center;
max-width: 950px;
margin: 0 auto;
}
}

133
src/scss/flex-testimonials.scss Normal file
View File

@@ -0,0 +1,133 @@
.testimonials-section {
overflow: hidden;
h1, h2, h3 {
@extend .headline-lg;
text-transform: uppercase;
text-align: center;
margin-bottom: 2rem;
}
.testimonials {
padding: 0 2rem;
position: relative;
.slick-arrow {
width: 60px;
height: 55px;
z-index: 99;
img {
@extend .change-black-to-red;
width: 60px;
height: 55px;
}
&.slick-next {
right: 4rem;
&:before {
content: ""
}
}
&.slick-prev {
left: 4rem;
&:before {
content: ""
}
}
}
.slick-dots {
bottom: 3rem;
li {
button {
&:before {
font-size: 20px;
}
}
&.slick-active {
button {
&:before {
color: $c-red;
}
}
}
}
}
.testimonial {
background: $c-white;
border-radius: 15px;
box-shadow: 0 0 30px rgba($c-black, 0.1);
margin: 1rem 3rem;
width: calc(100% - 3rem) !important;
transform: translateX(-1.5rem);
.stars {
background-image: url(/wp-content/themes/mccans-theme/assets/stars.svg);
display: block;
height: 40px;
width: 0;
margin: 2rem auto;
&.stars-5 {
width: 213px;
}
&.stars-4 {
width: 170px;
}
&.stars-3 {
width: 130px;
}
&.stars-2 {
width: 90px;
}
&.stars-1 {
width: 50px;
}
}
.quote {
text-align: center;
font-size: 25px;
line-height: 45px;
padding: 0 4rem;
margin-bottom: 3rem;
}
.person-details {
display: flex;
gap: 1rem;
justify-content: center;
align-items: center;
padding-bottom: 8rem;
font-size: 26px;
line-height: 35px;
.image-wrapper {
width: 105px;
height: 105px;
border-radius: 50%;
overflow: hidden;
img {
width: 100%;
}
}
p {
margin-bottom: 0;
&.name {
font-weight: bold;
}
}
}
}
}
}

82
src/scss/footer.scss Normal file
View File

@@ -0,0 +1,82 @@
footer.site-footer {
background-color: $c-offWhite;
padding: 2rem 0;
h2 {
@extend .montserrat;
font-weight: 600;
font-size: 25px;
text-transform: uppercase;
margin-bottom: 1rem;
}
ul {
padding: 0;
margin: 0;
list-style-type: none;
li {
a {
font-size: 20px;
color: $c-black;
text-decoration: none;
}
}
}
nav#social-nav {
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
gap: 1rem;
a {
display: flex;
color: $c-black;
background-color: $c-lightGrey;
width: 36px;
height: 36px;
border-radius: 18px;
justify-content: center;
align-items: center;
transition: all $transition-time ease;
&:hover {
background-color: $c-white;
color: $c-red;
}
}
}
}
.logo-col {
max-width: 336px;
text-align: center;
@extend .montserrat;
text-transform: uppercase;
font-size: 20px;
line-height: 27px;
letter-spacing: -2%;
font-weight: 600;
img {
display: block;
margin-bottom: 1rem;
max-width: 336px;
margin: 0 auto;
}
@include media-breakpoint-down(lg) {
max-width: 100%;
}
}
}
footer.sub-footer {
@extend .montserrat;
background-color: $c-offWhite;
border-top: 1px solid $c-grey;
padding: 1.5rem 0;
}

80
src/scss/global.scss Normal file
View File

@@ -0,0 +1,80 @@
img {
max-width: 100%;
}
.montserrat {
font-family: 'Montserrat', sans-serif;
}
.change-black-to-red {
filter: invert(10%) sepia(79%) saturate(7388%) hue-rotate(2deg) brightness(86%) contrast(111%);
}
.headline-lg {
@extend .montserrat;
font-weight: 600;
font-size: 60px;
line-height: 60px;
letter-spacing: -3%;
@include media-breakpoint-down(md) {
font-size: 45px;
line-height: 45px;
}
}
.headline-xl {
@extend .montserrat;
font-weight: 600;
font-size: 91px;
line-height: 89px;
letter-spacing: -3%;
@include media-breakpoint-down(md) {
font-size: 65px;
line-height: 65px;
}
}
.cta-button {
margin: 0;
a, input {
@extend .montserrat;
text-transform: uppercase;
background-color: $c-red;
color: $c-white !important;
text-decoration: none;
display: inline-block;
min-height: 47px;
line-height: 47px;
border: 1px solid $c-red;
border-radius: 25px;
padding: 0 60px;
transition: all $transition-time ease;
font-size: 20px;
&:hover {
background-color: $c-offWhite;
color: $c-red !important;
}
}
&.small {
a {
padding: 0 25px;
min-height: 32px;
line-height: 32px;
font-size: 1rem;
}
}
}
.leaflet-map {
height: 360px;
margin-bottom: 1rem;
}
input, label, textarea {
max-width: 100%;
}

195
src/scss/header.scss Normal file
View File

@@ -0,0 +1,195 @@
.top-bar {
background-color: $c-offWhite;
padding: 25px 0 25px;
input[type=text] {
border: 0;
border-radius: 25px;
height: 38px;
line-height: 30px;
padding-left: 30px;
background: url("/wp-content/themes/mccans-theme/assets/search.svg") 10px center no-repeat;
background-color: $c-white;
}
a.account-button {
border: 0;
text-transform: uppercase;
color: $c-red;
font-weight: bold;
background: transparent;
text-decoration: none;
display: flex;
align-items: center;
gap: 1rem;
}
}
.main-nav {
padding: 2rem 0;
.logo-wrapper {
max-width: 400px;
width: 20%;
@include media-breakpoint-down(md) {
width: 100%;
display: flex;
justify-content: space-between;
max-width: 100%;
gap: 3rem;
align-items: center;
img {
max-width: 250px;
}
a {
color: $c-black;
}
svg {
width: 50px;
height: 50px;
}
}
@include media-breakpoint-down(sm) {
gap: 1rem !important;
}
#mobile-nav-toggle {
@include media-breakpoint-up(md) {
display: none;
}
svg:first-of-type {
display: block;
}
svg:last-of-type {
display: none;
}
.mobile-nav-open & {
svg:first-of-type {
display: none;
}
svg:last-of-type {
display: block;
}
}
}
img {
width: 100%;
}
}
nav.main-nav {
display: none;
width: 100%;
.mobile-nav-open & {
display: flex;
flex-direction: column;
}
@include media-breakpoint-up(md) {
display: flex;
width: auto;
}
}
.menu-main-menu-container {
display: flex;
align-items: center;
@include media-breakpoint-down(md) {
width: 100%;
& > ul {
width: 100%;
}
}
}
#menu-main-menu {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
gap: 1rem;
@include media-breakpoint-down(md) {
flex-direction: column;
}
a {
text-transform: uppercase;
color: $c-black;
text-decoration: none;
}
& > li {
position: relative;
@include media-breakpoint-up(lg) {
&:hover {
& > ul {
display: block;
position: absolute;
top: 100%;
left: 0;
list-style-type: none;
padding: 0;
}
}
}
@include media-breakpoint-down(md) {
&.children-showing {
ul {
display: flex;
flex-direction: column;
list-style-type: none;
li {
position: relative;
}
a {
width: 100%;
}
}
.toggle-sub-nav {
transform: rotate(180deg);
}
}
}
}
ul {
display: none;
}
}
.toggle-sub-nav {
width: 16px;
height: 16px;
background-image: url("/wp-content/themes/mccans-theme/assets/chevron-down.svg");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
border: 0;
background-color: transparent;
@include media-breakpoint-down(md) {
width: 30px;
height: 30px;
position: absolute;
right: 0;
top: 0;
}
}
}

34
src/scss/intro-slide.scss Normal file
View File

@@ -0,0 +1,34 @@
section.intro-slide {
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
padding: 12rem 0;
&:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: rgba($c-black, 0.3);
}
.container {
position: relative;
z-index: 2;
color: $c-white;
text-align: center;
}
h1 {
@extend .headline-xl;
text-transform: uppercase;
}
p {
font-size: 34px;
}
}

52
src/scss/location.scss Normal file
View File

@@ -0,0 +1,52 @@
.single-location {
.top-image {
margin-bottom: 6rem;
}
h1 {
@extend .headline-lg;
margin-bottom: 2rem;
}
.form-wrapper {
margin-bottom: 8rem;
label {
font-weight: bold;
}
.wpcf7-checkbox {
.wpcf7-list-item {
display: block;
margin: 0 0 0.5rem 0;
&:last-of-type {
margin: 0;
}
label {
font-weight: normal;
}
}
}
p:has(input[type=submit]) {
@extend .cta-button;
}
}
p {
color: $c-textAlt;
strong {
text-transform: uppercase;
}
}
.address {
a {
color: $c-textAlt;
text-decoration: none;
}
}
}

41
src/scss/locations.scss Normal file
View File

@@ -0,0 +1,41 @@
.post-type-archive-location {
.intro {
text-align: center;
padding-top: 6rem;
padding-bottom: 6rem;
h1 {
@extend .headline-lg;
margin-bottom: 2rem;
}
& > * {
max-width: 850px;
margin: 0 auto;
}
}
.location-tile {
width: calc(50% - 2.5rem);
margin-bottom: 3rem;
color: $c-textAlt;
&:first-of-type {
width: 100%;
.leaflet-map {
height: 500px;
}
}
h2 {
color: $c-red;
text-transform: uppercase;
margin-bottom: 0;
}
a {
color: $c-textAlt;
text-decoration: none;
}
}
}

122
src/scss/shop.scss Normal file
View File

@@ -0,0 +1,122 @@
section.woocommerce-wrapper {
margin-top: 4rem;
ul.products {
display: flex;
flex-wrap: wrap;
}
}
div.product-tile {
border-radius: 15px;
box-shadow: 0 0 20px rgba($c-black, 0.1);
padding: 1rem;
position: relative;
height: 100%;
a.add_to_cart_button {
position: absolute;
top: 1rem;
right: 1rem;
width: 35px;
height: 35px;
padding: 0 !important;
display: flex !important;
justify-content: center;
align-items: center;
margin: 0 !important;
// opacity: 0;
transition: all $transition-time ease;
border-radius: 50%;
img {
margin: 0 !important;
width: 20px !important;
}
&::after {
position: absolute;
left: 80%;
margin: 0 !important;
top: -20%;
}
}
a.added_to_cart {
@extend .montserrat;
padding-top: 0;
position: absolute;
display: block;
color: $c-brightRed;
font-size: 0.8rem;
text-transform: uppercase;
font-weight: bold;
&::after {
@extend .change-black-to-red;
content:"";
width: 13px;
height: 14px;
display: block;
background-image: url("/wp-content/themes/mccans-theme/assets/chevron-right.svg");
position: absolute;
left: 103%;
top: 3px;
background-size: contain;
}
&:hover {
&::after {
left: 105%;
}
}
}
&:hover {
.add_to_cart_button {
opacity: 1;
}
}
h2 {
font-weight: bold;
font-size: 20px;
line-height: 26px;
text-align: center;
a {
color: $c-black;
text-decoration: none;
&:hover {
color: $c-brightRed;
}
}
}
p.price {
color: $c-brightRed !important;
font-size: 25px !important;
line-height: 26px;
text-align: center;
margin: 2rem 0 0 !important;
font-weight: bold !important;
}
p.msrp {
color: $c-midGrey !important;
font-size: 15px !important;
line-height: 21px;
text-align: center;
margin: 0;
}
p.savings {
color: $c-brightRed !important;
font-size: 16px !important;
line-height: 16px;
text-align: center;
margin: 0;
}
}

17
src/scss/top-image.scss Normal file
View File

@@ -0,0 +1,17 @@
.top-image {
position: relative;
background-size: cover;
background-position: center;
height: 500px;
&::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: $c-black;
opacity: 0.3;
}
}

20
src/scss/variables.scss Normal file
View File

@@ -0,0 +1,20 @@
$c-black: #000;
$c-white: #fff;
$c-offWhite: #f5f5f5;
$c-lightGrey: #d9d9d9;
$c-grey: #cbcbcb;
$c-midGrey: #acacac;
$c-textAlt: #505050;
$c-brightRed: #c80000;
$c-red: #ae1716;
$transition-time: 0.3s;
// bootstrap overrides
$font-family-sans-serif: 'Inter', sans-serif;
$body-color: $c-black;
// slick overrides
$slick-font-path: "/wp-content/themes/mccans-theme/dist/fonts/vendor/slick-carousel/slick/";
$slick-loader-path: "/wp-content/themes/mccans-theme/dist/images/vendor/slick-carousel/slick/";