diff --git a/web/app/themes/badegg/package.json b/web/app/themes/badegg/package.json index 24cd3f0..4df5c71 100644 --- a/web/app/themes/badegg/package.json +++ b/web/app/themes/badegg/package.json @@ -23,6 +23,7 @@ "@roots/sage": "6.20.0" }, "dependencies": { + "@fortawesome/fontawesome-free": "^7.0.1", "@roots/bud-sass": "^6.24.0" } } diff --git a/web/app/themes/badegg/resources/fonts/fa-brands-400.ttf b/web/app/themes/badegg/resources/fonts/fa-brands-400.ttf new file mode 100644 index 0000000..0f82a83 Binary files /dev/null and b/web/app/themes/badegg/resources/fonts/fa-brands-400.ttf differ diff --git a/web/app/themes/badegg/resources/fonts/fa-brands-400.woff2 b/web/app/themes/badegg/resources/fonts/fa-brands-400.woff2 new file mode 100644 index 0000000..3c5cf97 Binary files /dev/null and b/web/app/themes/badegg/resources/fonts/fa-brands-400.woff2 differ diff --git a/web/app/themes/badegg/resources/fonts/fa-regular-400.ttf b/web/app/themes/badegg/resources/fonts/fa-regular-400.ttf new file mode 100644 index 0000000..9ee1919 Binary files /dev/null and b/web/app/themes/badegg/resources/fonts/fa-regular-400.ttf differ diff --git a/web/app/themes/badegg/resources/fonts/fa-regular-400.woff2 b/web/app/themes/badegg/resources/fonts/fa-regular-400.woff2 new file mode 100644 index 0000000..57d9179 Binary files /dev/null and b/web/app/themes/badegg/resources/fonts/fa-regular-400.woff2 differ diff --git a/web/app/themes/badegg/resources/fonts/fa-solid-900.ttf b/web/app/themes/badegg/resources/fonts/fa-solid-900.ttf new file mode 100644 index 0000000..1c10972 Binary files /dev/null and b/web/app/themes/badegg/resources/fonts/fa-solid-900.ttf differ diff --git a/web/app/themes/badegg/resources/fonts/fa-solid-900.woff2 b/web/app/themes/badegg/resources/fonts/fa-solid-900.woff2 new file mode 100644 index 0000000..1672102 Binary files /dev/null and b/web/app/themes/badegg/resources/fonts/fa-solid-900.woff2 differ diff --git a/web/app/themes/badegg/resources/scripts/app.js b/web/app/themes/badegg/resources/scripts/app.js index 6711ed1..1b53dc2 100644 --- a/web/app/themes/badegg/resources/scripts/app.js +++ b/web/app/themes/badegg/resources/scripts/app.js @@ -1,10 +1,19 @@ import domReady from '@roots/sage/client/dom-ready'; +import Header from '../views/sections/header/header'; +import Footer from '../views/sections/footer/footer'; +import blocks from './blocks.js'; +import LazyLoad from './lib/Lazy.js'; +import Accordion from './lib/Accordion.js'; /** * Application entrypoint */ domReady(async () => { - // ... + LazyLoad(); + Accordion(); + Header(); + Footer(); + blocks(); }); /** diff --git a/web/app/themes/badegg/resources/scripts/blocks.js b/web/app/themes/badegg/resources/scripts/blocks.js new file mode 100644 index 0000000..592fac9 --- /dev/null +++ b/web/app/themes/badegg/resources/scripts/blocks.js @@ -0,0 +1,6 @@ +import WYSIWYG from '../views/blocks/WYSIWYG/WYSIWYG'; + +export default function() +{ + WYSIWYG(); +} diff --git a/web/app/themes/badegg/resources/scripts/lib/Accordion.js b/web/app/themes/badegg/resources/scripts/lib/Accordion.js new file mode 100644 index 0000000..0b3a8dd --- /dev/null +++ b/web/app/themes/badegg/resources/scripts/lib/Accordion.js @@ -0,0 +1,15 @@ +export default function Accordion() +{ + const accordions = document.querySelectorAll(".js-accordion"); + + if(!accordions) return; + + accordions.forEach(accordion => { + const question = accordion.querySelector(".js-accordion-toggle"); + + question.addEventListener("click", function(e) { + e.preventDefault(); + accordion.classList.toggle("open"); + }); + }); +} diff --git a/web/app/themes/badegg/resources/scripts/lib/Lazy.js b/web/app/themes/badegg/resources/scripts/lib/Lazy.js new file mode 100644 index 0000000..89249d5 --- /dev/null +++ b/web/app/themes/badegg/resources/scripts/lib/Lazy.js @@ -0,0 +1,33 @@ +export default function LazyLoadInit() +{ + document.addEventListener('DOMContentLoaded', LazyLoad()); +} + +function LazyLoad() { + + var lazyImages = [].slice.call(document.querySelectorAll('img.lazy')); + + if ('IntersectionObserver' in window) { + let lazyImageObserver = new IntersectionObserver(function(entries, observer) { + entries.forEach(function(entry) { + if (entry.isIntersecting) { + let lazyImage = entry.target; + lazyImage.src = lazyImage.dataset.src; + + if(lazyImage.dataset.srcset) { + lazyImage.srcset = lazyImage.dataset.srcset; + } + + lazyImage.classList.remove('lazy'); + lazyImageObserver.unobserve(lazyImage); + } + }); + }); + + lazyImages.forEach(function(lazyImage) { + lazyImageObserver.observe(lazyImage); + }); + } else { + // Possibly fall back to a more compatible method here + } +} diff --git a/web/app/themes/badegg/resources/scripts/lib/VideoSrcset.js b/web/app/themes/badegg/resources/scripts/lib/VideoSrcset.js new file mode 100644 index 0000000..7703fbe --- /dev/null +++ b/web/app/themes/badegg/resources/scripts/lib/VideoSrcset.js @@ -0,0 +1,24 @@ +export default function VideoSrcset( element ) +{ + const sizes = JSON.parse(element.dataset.sizes); + + Object.keys(sizes).forEach((key) => { + const size = key; + const source = element.querySelector('.bgvid-' + size); + + if(source) { + const sourceWidth = source.dataset.width; + const poster = source.dataset.poster; + + if(window.innerWidth >= sourceWidth) { + console.log('screen width is greater than or equal to the source width'); + console.log('screen width: ' + window.innerWidth); + console.log('source width: ' + sourceWidth); + + element.src = source.src; + element.poster = poster; + element.load; + } + } + }); +} diff --git a/web/app/themes/badegg/resources/styles/app.scss b/web/app/themes/badegg/resources/styles/app.scss index e69de29..2ff178c 100644 --- a/web/app/themes/badegg/resources/styles/app.scss +++ b/web/app/themes/badegg/resources/styles/app.scss @@ -0,0 +1,28 @@ +$fa-font-path: "~/fonts"; + +@import "@fortawesome/fontawesome-free/scss/fontawesome"; +// @import "@fortawesome/fontawesome-free/scss/solid"; +// @import "@fortawesome/fontawesome-free/scss/brands"; + +// Global Variables, Mixins, and Framework +@import "global/variables"; +@import "global/mixins"; +@import "global/fonts"; +@import "global/typography"; +@import "global/framework"; + +// Components +@import "components/forms"; +@import "components/button"; +@import "components/card"; + +// Third Party Plugins +@import "plugins/contact-form-7"; +@import "plugins/mce"; + +// Sections +@import "../views/sections/header/header"; +@import "../views/sections/footer/footer"; + +// Blocks +@import "../views/blocks/WYSIWYG/WYSIWYG"; diff --git a/web/app/themes/badegg/resources/styles/components/_button.scss b/web/app/themes/badegg/resources/styles/components/_button.scss new file mode 100644 index 0000000..c838008 --- /dev/null +++ b/web/app/themes/badegg/resources/styles/components/_button.scss @@ -0,0 +1,111 @@ +button { + &%block, + &.block { + background-color: transparent; + border: none; + font-size: 1em; + padding: 0; + } +} + +button, +input[type="submit"] { + &.btn { + appearance: none; + } +} + +%btn, +.btn { + display: inline-block; + padding: 0.75em 1.5em; + border: 0.125em solid $black; + border-radius: 2em; + background-color: $black; + color: $white; + font-family: $font; + font-weight: 700; + font-size: 1em; + text-transform: lowercase; + text-decoration: none; + white-space: normal; + cursor: pointer; + transition: 300ms ease all; + + .knockout & { + background-color: $white; + border-color: $white; + color: currentcolor; + } + + &:hover, + &:focus { + color: $white; + text-decoration: none; + background-color: rgba($black, 0.5); + border-color: rgba($black, 0.5); + + .knockout & { + background-color: rgba($white, 0.5); + border-color: rgba($white, 0.5); + color: currentcolor; + } + } + + &.outline { + border-color: $black; + background-color: transparent; + color: $black; + + &:hover, + &:focus { + background-color: $black; + color: $white; + } + + .knockout & { + @media screen { + border-color: $white; + color: $white; + + &:hover, + &:focus { + background-color: $white; + color: $black; + } + } + } + } + + &.wide { + padding-right: 3em; + padding-left: 3em; + } + + &.thin { + padding-top: 0.5em; + padding-bottom: 0.5em; + } + + &.full { + display: block; + width: 100%; + padding-right: 0.625em; + padding-left: 0.625em; + text-align: center; + } + + &.small { font-size: 1em; } + &.smaller { font-size: 0.875em; } + &.big { font-size: 1.25em; } + &.bigger { font-size: 1.5em; } +} + +.btn-wrap { + margin: 1.5em -0.25em -0.25em; + + input[type=submit], + .btn { + margin: 0.25em; + } +} diff --git a/web/app/themes/badegg/resources/styles/components/_card.scss b/web/app/themes/badegg/resources/styles/components/_card.scss new file mode 100644 index 0000000..f84d64a --- /dev/null +++ b/web/app/themes/badegg/resources/styles/components/_card.scss @@ -0,0 +1,13 @@ +.card { + position: relative; + margin: 0.5em; + flex: 0 0 calc(100% - 1em); + + &-wrap { + display: flex; + flex-wrap: wrap; + margin: -0.5em; + } +} + + diff --git a/web/app/themes/badegg/resources/styles/components/_forms.scss b/web/app/themes/badegg/resources/styles/components/_forms.scss new file mode 100644 index 0000000..a9b1381 --- /dev/null +++ b/web/app/themes/badegg/resources/styles/components/_forms.scss @@ -0,0 +1,331 @@ +select, +input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), +textarea { + color: $grey-dark; + background: white; + font-weight: 400; + font-size: 1em; + font-family: $font; + width: 100%; + padding: 0.5em 1em; + margin: 0; + border-radius: 0; + border: 1px solid $grey; + transition: all 300ms ease; + outline-color: $primary-lighter; + + &::placeholder { + color: $grey-lighter; + } + + &:focus { + border-color: $primary-light; + color: $primary-lighter; + } + + .hfont & { + font-weight: bold; + font-family: $hfont; + color: $primary; + + &:focus { + color: $primary-lighter; + } + } +} + +input[type="radio"], +input[type="checkbox"] { + padding: 0; + margin: 0; + width: auto; + + &:focus { + box-shadow: none; + } +} + +select { + width: 100%; + appearance: none; +} + +.field-wrap { + flex: 1 1 calc(100% - 1em); + margin: 0.5em; + transition: all 300ms ease; + + span.label { + display: block; + font-size: 0.75em; + margin: 0 0 0.25em; + } + + label { + flex: 0 0 100%; + max-width: 100%; + width: 100%; + order: -1; + margin: 0; + } + + textarea, + input { + flex: 1 1 100%; + margin: 0; + } + + .has-icon { + position: relative; + + i { + position: absolute; + top: 0.45em; + left: 0.5em; + z-index: 1; + color: $quaternary-lighter; + font-size: 1.25em; + } + + input, + select { + padding-left: 2.5em !important; + } + } + + /* stylelint-disable selector-class-pattern */ + .mce_inline_error { + flex: 0 0 100%; + max-width: 100%; + width: 100%; + margin: 0; + font-family: $font; + } + /* stylelint-enable selector-class-pattern */ + + @media (min-width: $screen-sm) { + &.half { + flex: 0 0 calc(50% - 1em); + max-width: calc(50% - 1em); + width: calc(50% - 1em); + } + } +} + +.select-wrap { + .has-icon { + select { + padding-right: 1.5em; + } + + &::after { + content: '\f0d7'; + font-family: 'Font Awesome 6 Free', serif; + font-weight: 900; + display: block; + position: absolute; + top: 0.375em; + right: 0.75em; + color: $grey-light; + } + } +} + +.section-form { + container-name: SectionForm; + container-type: inline-size; + + form { + display: flex; + flex-wrap: wrap; + margin: -0.5em; + position: relative; + + div[class^="eacf7-form-"] { + flex: auto; + display: flex; + flex-wrap: wrap; + } + + .wpcf7 { + .screen-reader-response { + display: none; + } + + &-spinner { + position: absolute; + z-index: 1; + top: calc(50% - 12px); + left: calc(50% - 12px); + } + + &-form-control-wrap { + display: block; + } + + &-not-valid-tip { + position: absolute; + right: -0.5em; + top: -3.125em; + background: $error; + color: $white; + padding: 0.5em 1em; + border-radius: 0.5em; + font-weight: 700; + font-size: 0.75em; + transition: all 300ms ease; + + &::before { + content: ''; + position: absolute; + right: 1em; + bottom: -0.25em; + display: block; + width: 1em; + height: 1em; + background: $error; + transform: rotate(45deg); + } + + &:hover { + opacity: 0.1; + } + } + + &-response-output { + display: block; + margin: 2em auto 0; + flex: 1 1 100%; + width: 100%; + text-align: left; + font-family: $font; + font-weight: 700; + font-size: 0.875em; + padding: 0.5em 1em; + border-radius: 0.5em; + border-width: 0; + + @extend .white; + @extend .bg-black; + @extend .knockout; + } + + &-display-none { + display: none; + } + + &-checkbox { + label { + display: block; + padding: 0 0 0 1.75em; + margin: 0; + font-weight: 700; + } + + input[type="checkbox"] { + position: absolute; + z-index: 1; + top: 0; + left: 0; + appearance: none; + display: block; + width: 1.25em; + height: 1.25em; + border: 0.125em solid $black; + background: transparent; + color: currentcolor; + + &::before { + content: "\f00c"; + position: absolute; + z-index: 1; + top: 0; + left: 0.125em; + font-family: "Font Awesome 6 Free", serif; + font-weight: 900; + opacity: 0; + transition: all 300ms ease; + } + + &:checked { + &::before { + opacity: 1; + } + } + } + } + } + + .form-footer { + @container SectionForm (min-width: #{$screen-sm}) { + display: flex; + align-items: center; + justify-content: space-between; + + &-text { + flex: 1; + } + } + + button, + .btn, + input[type="submit"] { + margin: 0; + } + + .wpcf7-list-item { + margin: 0; + user-select: none; + } + } + + &.submitting { + .field-wrap:not(.form-footer) { + opacity: 0.1; + } + + .form-footer { + .form-footer-text { + opacity: 0.1; + } + + .form-footer-button input { + opacity: 0.1; + } + } + } + + &.sent { + .wpcf7-response-output { + @extend .bg-success; + } + } + + &.invalid { + .wpcf7-response-output { + @extend .bg-error; + } + } + + .ajax-loader { + position: absolute; + z-index: 1; + top: calc(50% - 12px); + right: calc(50% - 12px); + display: block; + margin: 0; + } + } + + &.knockout { + form { + .wpcf7 { + &-checkbox { + input[type="checkbox"] { + border-color: $white; + } + } + } + } + } +} diff --git a/web/app/themes/badegg/resources/styles/editor.scss b/web/app/themes/badegg/resources/styles/editor.scss index e69de29..2bf32e9 100644 --- a/web/app/themes/badegg/resources/styles/editor.scss +++ b/web/app/themes/badegg/resources/styles/editor.scss @@ -0,0 +1,65 @@ +@import "app"; + +body { + &.template-plain-document { + .editor-styles-wrapper { + max-width: $containerMedium; + margin: auto; + } + } + + .editor-visual-editor { + background: $white; + } + + .editor-styles-wrapper { + padding: 2rem !important; + } + + &:not(.template-plain-document) { + .editor-styles-wrapper { + background: transparent; + } + + .editor-visual-editor { + background-image: url('~images/pattern-fabric-of-squares-gray.png'); + background-size: 200px; + background-attachment: fixed; + + &__post-title-wrapper { + padding: 1rem; + margin: 0 0 3rem !important; + background: $white; + box-shadow: 0 0.5rem 1rem rgba($black, 0.15); + } + } + + .wp-block-post-title { + position: relative; + padding: 0.5rem; + border: $borderThin solid $grey-lighter; + margin: 0; + + &::before { + content: 'Page Title'; + position: absolute; + top: -0.5rem; + left: 0.5rem; + color: $grey-lighter; + font-family: $font; + font-size: 0.8rem; + display: block; + padding: 0 0.5rem; + margin: 0; + background: $white; + line-height: 1; + font-weight: 400; + } + } + + .wp-block-post-content { + background: $white; + box-shadow: 0 0.5rem 1rem rgba($black, 0.15); + } + } +} diff --git a/web/app/themes/badegg/resources/styles/global/_fonts.scss b/web/app/themes/badegg/resources/styles/global/_fonts.scss new file mode 100644 index 0000000..579f11b --- /dev/null +++ b/web/app/themes/badegg/resources/styles/global/_fonts.scss @@ -0,0 +1,18 @@ +$hfont: Times, 'Times New Roman', serif; +$font: Helvetica, Arial, sans-serif; + +/* + * Roots Fonts Setup + * https://roots.io/sage/docs/fonts-setup/ + * + * Self-Hosted Google Fonts (Ubuntu Demo) + * https://gwfh.mranftl.com/fonts/ubuntu?subsets=latin + * + * Add the font to your Tailwind config + * tailwind.config.cjs + * + * Configure theme.json to use the font with Bud + */ + +/* stylelint-disable */ + diff --git a/web/app/themes/badegg/resources/styles/global/_framework.scss b/web/app/themes/badegg/resources/styles/global/_framework.scss new file mode 100644 index 0000000..41aff92 --- /dev/null +++ b/web/app/themes/badegg/resources/styles/global/_framework.scss @@ -0,0 +1,17 @@ +@import "framework/breakpoints"; +@import "framework/normalise"; +@import "framework/colours"; +@import "framework/spacing"; + +.socials { + font-size: 1.5em; + + li { + display: inline-block; + } + + a { + display: block; + padding: 0.125em; + } +} diff --git a/web/app/themes/badegg/resources/styles/global/_mixins.scss b/web/app/themes/badegg/resources/styles/global/_mixins.scss new file mode 100644 index 0000000..7bd4a3a --- /dev/null +++ b/web/app/themes/badegg/resources/styles/global/_mixins.scss @@ -0,0 +1,4 @@ +@import "mixins/linear-gradient"; +@import "mixins/text-contrast"; +@import "mixins/generate-colour-classes"; +@import "mixins/generate-button-classes"; diff --git a/web/app/themes/badegg/resources/styles/global/_typography.scss b/web/app/themes/badegg/resources/styles/global/_typography.scss new file mode 100644 index 0000000..90caf08 --- /dev/null +++ b/web/app/themes/badegg/resources/styles/global/_typography.scss @@ -0,0 +1,211 @@ +h1, +h2, +h3, +h4, +h5, +h6 { + color: $primary; + font-weight: 700; + font-family: $hfont; + line-height: 1.1em; + margin: 1.5em 0 0.5em; + padding: 0; + + &.section-title { + margin-top: 0; + } + + &.has-flourish { + position: relative; + + &::before { + position: absolute; + top: 0; + left: 0; + content: ''; + display: block; + width: 1em; + height: 1em; + mask-image: url("~/images/flourish-flipped.svg"); + mask-repeat: no-repeat; + mask-size: contain; + background: $secondary; + transform: translate(-55%, -40%) rotate(270deg); + pointer-events: none; + font-size: 2em; + } + } + + @media screen { + .knockout & { + color: $white; + } + } +} + +h1 { + font-size: 1.75em; + margin-top: 0; +} + +h2 { font-size: 1.5em; } +h3 { font-size: 1.25em; } + +h4, +h5 { font-size: 1.15em; } + +@container (min-width: #{$screen-sm}) { + h1 { font-size: 2.5em; } + h2 { font-size: 2em; } + h3 { font-size: 1.5em; } + + h4, + h5 { + font-size: 1.25em; + } +} + +p, +li, +td, +label { + color: $grey-darker; + font-family: $font; + font-weight: 400; + line-height: 1.5em; + margin: 0 0 0.8em; + padding: 0; + + @media screen { + .knockout & { + color: $white; + } + } +} + +.overline { + margin: 0 0 0.125em; + + @container (min-width: #{$screen-md}) { + font-size: 1.25em; + } +} + +a { + color: $primary; + text-decoration: none; + outline: none; + transition: all 300ms ease; + font-weight: bold; + + &:hover, + &:focus { + color: $primary-dark; + text-decoration: none; + } + + @media screen { + .knockout & { + color: $white; + + &:hover, + &:focus { + color: $tertiary; + } + } + } +} + +strong { font-weight: 700; } +small { font-size: 0.8em; } + +li { + margin: 0.125em 0; + line-height: 1.5em; +} + +ul, +ol { + margin: 0 0 0.7em; + padding: 0 0 0 1.2em; + text-align: left; +} + +.nolist { + margin: 0; + padding: 0; + text-align: inherit; + list-style: none; + + li { + margin: 0; + padding: 0; + } +} + +hr { + margin: 1.5em auto 2em; + height: 0; + border: 0 solid $grey-light; + border-width: $borderThin 0 0; + + @media screen { + .knockout & { + border-color: $white; + } + } +} + +.align { + &-centre { + text-align: center; + } + + &-right { + text-align: right; + } +} + +.wysiwyg { + >*:first-child { + margin-top: 0; + } + + >*:last-child { + margin-bottom: 0; + } + + a:not(.btn) { + text-decoration: underline; + font-weight: bold; + } +} + +blockquote { + p { + font-family: $hfont; + font-weight: bold; + line-height: 1.2; + } + + >*:first-child::before, + >*:last-child::after { + color: $secondary; + line-height: 1; + display: inline-block; + vertical-align: top; + transform: scale(1.5); + } + + >*:first-child::before { + content: '\201C'; + margin-right: 0.125em; + transform-origin: top right; + } + + >*:last-child::after { + content: '\201D'; + margin-left: 0.125em; + transform-origin: top left; + } +} diff --git a/web/app/themes/badegg/resources/styles/global/_variables.scss b/web/app/themes/badegg/resources/styles/global/_variables.scss new file mode 100644 index 0000000..1d60147 --- /dev/null +++ b/web/app/themes/badegg/resources/styles/global/_variables.scss @@ -0,0 +1,3 @@ +@import "variables/colours"; +@import "variables/breakpoints"; +@import "variables/spacing"; diff --git a/web/app/themes/badegg/resources/styles/global/framework/_breakpoints.scss b/web/app/themes/badegg/resources/styles/global/framework/_breakpoints.scss new file mode 100644 index 0000000..234335e --- /dev/null +++ b/web/app/themes/badegg/resources/styles/global/framework/_breakpoints.scss @@ -0,0 +1,13 @@ +@each $label, $value in $breakpoints { + .min-#{$label} { + @media (min-width: $value) { + display: none; + } + } + + .max-#{$label} { + @media (max-width: ($value - 0.0625)) { + display: none; + } + } +} diff --git a/web/app/themes/badegg/resources/styles/global/framework/_colours.scss b/web/app/themes/badegg/resources/styles/global/framework/_colours.scss new file mode 100644 index 0000000..c2a819b --- /dev/null +++ b/web/app/themes/badegg/resources/styles/global/framework/_colours.scss @@ -0,0 +1,11 @@ +@use 'sass:color'; + +::selection { + color: $white; + background: $primary; +} + +@each $color, $hex in $colors { + @include generate_colour_classes($color, $hex); + @include generate_button_colors($color, $hex); +} diff --git a/web/app/themes/badegg/resources/styles/global/framework/_normalise.scss b/web/app/themes/badegg/resources/styles/global/framework/_normalise.scss new file mode 100644 index 0000000..21abd2a --- /dev/null +++ b/web/app/themes/badegg/resources/styles/global/framework/_normalise.scss @@ -0,0 +1,41 @@ +* { + box-sizing: border-box; + backface-visibility: hidden; // removes jagged edges on rotated elements +} + +html { + font-size: 16px; + scroll-behavior: smooth; +} + +body, +html { + margin: 0; + padding: 0; + background: $white; +} + +.visually-hidden { + clip: rect(0, 0, 0, 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +img { + max-width: 100%; + height: auto; + transition: all 300ms ease; + + &.lazy { + filter: blur(0.25em); + opacity: 0; + } +} + +svg { + fill: currentColor; +} diff --git a/web/app/themes/badegg/resources/styles/global/framework/_spacing.scss b/web/app/themes/badegg/resources/styles/global/framework/_spacing.scss new file mode 100644 index 0000000..6f03096 --- /dev/null +++ b/web/app/themes/badegg/resources/styles/global/framework/_spacing.scss @@ -0,0 +1,152 @@ +#app { + container-type: inline-size; +} + +.wrapper, +.wrapper.section-has-angle { + padding: 0; +} + +.badegg-blocks { + .badegg-block { + &:last-of-type { + @extend .section-has-angle; + @extend .section-has-angle-bottom; + } + } +} + +.brand { + display: block; + width: $brandWidth; + // height: $brandHeight; + + svg, + img { + display: block; + width: 100%; + height: auto; + // height: $brandHeight; + } + + .knockout & { + @media screen { + .fill-primary { + fill: $white; + } + + .fill-grey { + fill: rgba($white, 0.8); + } + } + } +} + +.container { + width: 90%; + margin: auto; + + &-large { max-width: $containerLarge; } + &-medium { max-width: $containerMedium; } + &-small { max-width: $containerSmall; } + &-narrow { max-width: $containerNarrow; } +} + +.section { + padding: $sectionMedium 0; + + &-small { padding: $sectionSmall 0; } + &-medium { padding: $sectionMedium 0; } + &-large { padding: $sectionLarge 0; } + + &-zero-top { padding-top: 0; } + &-zero-bottom { padding-bottom: 0; } + + @container (min-width: #{$screen-lg}) { + padding: $sectionLarge 0; + } + + &-intro { + &-inner { + max-width: $containerSmall; + } + + &.align-right { + justify-content: flex-end; + display: flex; + } + + &.align-centre { + max-width: $containerNarrow; + + .section-intro-inner { + margin: auto; + } + } + } +} + +.inner { + padding: $innerMedium; + + &-small { padding: $innerSmall; } + &-large { padding: $innerLarge; } + + &-zero-x { + padding-left: 0; + padding-right: 0; + } + + &-zero-y { + padding-top: 0; + padding-top: 0; + } +} + +.rounded { + border-radius: $borderRadius; + + &-top { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } + + &-bottom { + border-top-right-radius: 0; + border-top-left-radius: 0; + } +} + +.border { + border-style: solid; + border-width: $borderWidth; + + &-thin { border-width: 0.0625em; } + &-regular { border-width: $borderWidth; } + &-thick { border-width: $borderThick; } + &-thicker { border-width: $borderThicker; } + + &-top { + border-right-width: 0; + border-bottom-width: 0; + border-left-width: 0; + } + + &-right { + border-top-width: 0; + border-bottom-width: 0; + border-left-width: 0; + } + + &-bottom { + border-top-width: 0; + border-right-width: 0; + border-left-width: 0; + } + + &-left { + border-top-width: 0; + border-right-width: 0; + border-bottom-width: 0; + } +} diff --git a/web/app/themes/badegg/resources/styles/global/mixins/_generate-button-classes.scss b/web/app/themes/badegg/resources/styles/global/mixins/_generate-button-classes.scss new file mode 100644 index 0000000..104c5ac --- /dev/null +++ b/web/app/themes/badegg/resources/styles/global/mixins/_generate-button-classes.scss @@ -0,0 +1,66 @@ +@use "sass:color"; + +@mixin generate_button_colors($name, $hex) { + + $buttons: ( + ".btn", + "button", + "input[type=submit]", + ); + + @each $button in $buttons { + #{$button}.#{$name} { + @include text-contrast($hex); + background: $hex; + border-color: $hex; + + &:hover, + &:focus { + @include text-contrast($hex); + background: color.adjust($hex, $lightness: 10%); + border-color: color.adjust($hex, $lightness: 10%); + } + } + + #{$button}.#{$name}.inverted { + @include text-contrast($hex); + background: transparent; + border-color: $hex; + + &:hover, + &:focus { + @include text-contrast($hex); + background: #{$hex}; + border-color: #{$hex}; + } + } + + @media screen { + *:not(.bg-#{$name}) #{$button}.#{$name} { + @include text-contrast($hex); + background-color: $hex; + border-color: $hex; + + &:hover, + &:focus { + @include text-contrast($hex); + background-color: color.adjust($hex, $lightness: 10%); + border-color: color.adjust($hex, $lightness: 10%); + } + } + + .bg-#{$name} #{$button}.#{$name} { + @include text-contrast($hex); + background: white; + border-color: white; + + &:hover, + &:focus { + @include text-contrast($hex); + background: transparent; + border-color: white; + } + } + } + } +} diff --git a/web/app/themes/badegg/resources/styles/global/mixins/_generate-colour-classes.scss b/web/app/themes/badegg/resources/styles/global/mixins/_generate-colour-classes.scss new file mode 100644 index 0000000..87bdfa8 --- /dev/null +++ b/web/app/themes/badegg/resources/styles/global/mixins/_generate-colour-classes.scss @@ -0,0 +1,28 @@ +@use "sass:color"; + +@mixin generate_colour_classes($name, $hex) { + + .knockout .#{$name}, + .#{$name} { + color: $hex; + } + + .fill-#{$name} { + fill: $hex; + } + + .border-#{$name} { + border-color: $hex; + } + + @media screen { + .bg-#{$name} { + background-color: $hex; + + ::selection { + @include text_contrast(color.invert($hex)); + background: color.invert($hex); + } + } + } +} diff --git a/web/app/themes/badegg/resources/styles/global/mixins/_linear-gradient.scss b/web/app/themes/badegg/resources/styles/global/mixins/_linear-gradient.scss new file mode 100644 index 0000000..738b7c2 --- /dev/null +++ b/web/app/themes/badegg/resources/styles/global/mixins/_linear-gradient.scss @@ -0,0 +1,7 @@ +@use "sass:list"; + +// define as many $color-stops as needed +@mixin linear-gradient($direction, $color-stops...) { + background: list.nth(list.nth($color-stops, 1), 1); + background: linear-gradient($direction, $color-stops); +} diff --git a/web/app/themes/badegg/resources/styles/global/mixins/_text-contrast.scss b/web/app/themes/badegg/resources/styles/global/mixins/_text-contrast.scss new file mode 100644 index 0000000..0233c13 --- /dev/null +++ b/web/app/themes/badegg/resources/styles/global/mixins/_text-contrast.scss @@ -0,0 +1,15 @@ +@use "sass:color"; +@use "sass:math"; + +@mixin text-contrast($n, $dark: $black, $light: $white, $cutoff: 1.8) { + $brightness: math.round((color.red($n) * 299) + (color.green($n) * 587) + math.div((color.blue($n) * 114), 1000)); + $light-color: math.round((color.red($white) * 299) + (color.green($white) * 587) + math.div((color.blue($white) * 114), 1000)); + + @if abs($brightness) < (math.div($light-color, $cutoff)) { + color: $light; + } + + @else { + color: $dark; + } +} diff --git a/web/app/themes/badegg/resources/styles/global/variables/_breakpoints.scss b/web/app/themes/badegg/resources/styles/global/variables/_breakpoints.scss new file mode 100644 index 0000000..ad39bae --- /dev/null +++ b/web/app/themes/badegg/resources/styles/global/variables/_breakpoints.scss @@ -0,0 +1,33 @@ +@use "sass:math"; + +$px: math.div(1, 16); + +$screen-xxs: 22.5em !default; +$screen-xs: 30.0em !default; +$screen-sm: 48.0em !default; +$screen-md: 62.0em !default; +$screen-lg: 75.0em !default; +$screen-xl: 87.5em !default; +$screen-xxl: 100.0em !default; +$screen-xxxl: 120.0em !default; + +// So media queries don"t overlap when required +$screen-xxs-max: ($screen-xs - $px) !default; +$screen-xs-max: ($screen-sm - $px) !default; +$screen-sm-max: ($screen-md - $px) !default; +$screen-md-max: ($screen-lg - $px) !default; +$screen-lg-max: ($screen-xl - $px) !default; +$screen-xl-max: ($screen-xxl - $px) !default; +$screen-xxl-max: ($screen-xxxl - $px) !default; + +// Breakpoints +$breakpoints: ( + "screen-xxs": $screen-xxs, + "screen-xs": $screen-xs, + "screen-sm": $screen-sm, + "screen-md": $screen-md, + "screen-lg": $screen-lg, + "screen-xl": $screen-xl, + "screen-xxl": $screen-xxl, + "screen-xxxl": $screen-xxxl, +); diff --git a/web/app/themes/badegg/resources/styles/global/variables/_colours.scss b/web/app/themes/badegg/resources/styles/global/variables/_colours.scss new file mode 100644 index 0000000..9c0653c --- /dev/null +++ b/web/app/themes/badegg/resources/styles/global/variables/_colours.scss @@ -0,0 +1,122 @@ +@use "sass:color"; + +//== Status +$success: #39b54a; +$error: #be1e2d; +$alert: #eed202; + +//== Brand Colours +$primary: #2f4976; +$secondary: #a094b1; +$tertiary: #f58762; +$quaternary: invert($primary); +$quinary: invert($secondary); + +//== Primary Tints +$primary-darkest: #001427; +$primary-darker: #001930; +$primary-dark: #001E3B; +$primary-light: #324F6C; +$primary-lighter: #5A7289; +$primary-lightest: #7A8EA0; + +//== Secondary Tints +$secondary-darkest: #8B2E22; +$secondary-darker: #A9382A; +$secondary-dark: #CE4433; +$secondary-light: #FC7564; +$secondary-lighter: #FD9082; +$secondary-lightest: #FEA69B; + +//== Tertiary Tints +$tertiary-darkest: #8B7401; +$tertiary-darker: #AA8E01; +$tertiary-dark: #CFAD01; +$tertiary-light: #FEDC33; +$tertiary-lighter: #FEE35B; +$tertiary-lightest: #FEED95; + +//== quaternary Tints +$quaternary-darkest: #454B73; +$quaternary-darker: #545C8C; +$quaternary-dark: #6670AB; +$quaternary-light: #99A7FF; +$quaternary-lighter: #C2CEFF; +$quaternary-lightest: #E0E6FF; + +//== quaternary Tints +$quinary-darkest: #FF702A; +$quinary-darker: #FFA968; +$quinary-dark: #FFC693; +$quinary-light: #FFE8CF; +$quinary-lighter: #FFF7EE; // empathetic white +$quinary-lightest: #FFFBF6; + +//== Shades +$white: white; +$grey-lightest: #EBEBE4; +$grey-lighter: #D3D3CC; +$grey-light: #B1B1A7; +$grey: #919087; +$grey-dark: #69665B; +$grey-darker: #414039; +$grey-darkest: #212019; +$black: black; + +//## Colour Array (used in generating colour classes). +$colors: ( + // shades + "black": $black, + "grey-darkest": $grey-darkest, + "grey-darker": $grey-darker, + "grey-dark": $grey-dark, + "grey-light": $grey-light, + "grey-lighter": $grey-lighter, + "grey-lightest": $grey-lightest, + "white": $white, + // status + "error": $error, + "success": $success, + "alert": $alert, + // brand + "primary": $primary, + "secondary": $secondary, + "tertiary": $tertiary, + "quaternary": $quaternary, + "quinary": $quinary, + // primary tints + "primary-darkest": $primary-darkest, + "primary-darker": $primary-darker, + "primary-dark": $primary-dark, + "primary-light": $primary-light, + "primary-lighter": $primary-lighter, + "primary-lightest": $primary-lightest, + // secondary tints + "secondary-darkest": $secondary-darkest, + "secondary-darker": $secondary-darker, + "secondary-dark": $secondary-dark, + "secondary-light": $secondary-light, + "secondary-lighter": $secondary-lighter, + "secondary-lightest": $secondary-lightest, + // tertiary tints + "tertiary-darkest": $tertiary-darkest, + "tertiary-darker": $tertiary-darker, + "tertiary-dark": $tertiary-dark, + "tertiary-light": $tertiary-light, + "tertiary-lighter": $tertiary-lighter, + "tertiary-lightest": $tertiary-lightest, + // tertiary tints + "quaternary-darkest": $quaternary-darkest, + "quaternary-darker": $quaternary-darker, + "quaternary-dark": $quaternary-dark, + "quaternary-light": $quaternary-light, + "quaternary-lighter": $quaternary-lighter, + "quaternary-lightest": $quaternary-lightest, + // quinary tints + "quinary-darkest": $quinary-darkest, + "quinary-darker": $quinary-darker, + "quinary-dark": $quinary-dark, + "quinary-light": $quinary-light, + "quinary-lighter": $quinary-lighter, + "quinary-lightest": $quinary-lightest, +); diff --git a/web/app/themes/badegg/resources/styles/global/variables/_spacing.scss b/web/app/themes/badegg/resources/styles/global/variables/_spacing.scss new file mode 100644 index 0000000..de2a001 --- /dev/null +++ b/web/app/themes/badegg/resources/styles/global/variables/_spacing.scss @@ -0,0 +1,46 @@ +@use "sass:math"; + +$offCanvasWidth: 17.5em; + +$brandWidth: 7.46875em !default; +// $brandHeight: 1.835em !default; + +$tileAspectRatio: math.div(400, 640) * 100%; +$heroAspectRatio: math.div(593, 1920) * 100vw; +$slideAspectRatio: math.div(733, 1920) * 100vw; + +$sectionSmallest: 0.500em; +$sectionSmaller: 1.000em; +$sectionSmall: 1.500em; +$sectionMedium: 3.000em; +$sectionLarge: 5.000em; +$sectionLarger: 7.500em; +$sectionLargest: 10.000em; + +$containerLarge: 73.125em; +$containerMedium: 60.000em; +$containerSmall: 50.000em; +$containerNarrow: 34.000em; + +$innerLarger: 5.000em; +$innerLarger: 3.000em; +$innerLarge: 2.000em; +$innerMedium: 1.500em; +$innerSmall: 1.000em; +$innerSmaller: 0.750em; +$innerSmallest: 0.500em; + +$borderRadiusLargeer: 1.500em; +$borderRadiusLarge: 1.000em; +$borderRadius: 1.000em; +$borderRadiusSmall: 0.500em; +$borderRadiusSmaller: 0.250em; + +$borderThin: 0.0625em; +$borderWidth: 0.1250em; +$borderThick: 0.2500em; +$borderThicker: 0.5000em; +$borderThickest: 1.0000em; + +$angleHeight: 6.667cqw; +$angleHeightSmall: 3.472cqw; diff --git a/web/app/themes/badegg/resources/styles/plugins/_contact-form-7.scss b/web/app/themes/badegg/resources/styles/plugins/_contact-form-7.scss new file mode 100644 index 0000000..eb8d9ec --- /dev/null +++ b/web/app/themes/badegg/resources/styles/plugins/_contact-form-7.scss @@ -0,0 +1,22 @@ +.wpcf7 .screen-reader-response { + display: none; +} + +.wpcf7-response-output { + @extend p; + @extend .container; + @extend .container-narrow; + + padding: 1em 0 0; + margin-top: 2em; + border: 1px solid $grey-light; + border-width: 1px 0 0; + + .knockout & { + border-color: rgba($white, 0.3); + } +} + +.wpcf7-display-none { + display: none; +} diff --git a/web/app/themes/badegg/resources/styles/plugins/_mce.scss b/web/app/themes/badegg/resources/styles/plugins/_mce.scss new file mode 100644 index 0000000..5f64b30 --- /dev/null +++ b/web/app/themes/badegg/resources/styles/plugins/_mce.scss @@ -0,0 +1,12 @@ +#mce-responses { + .response { + padding: 0 0 1em; + margin: 0 0 1em; + font-size: 0.875em; + border-bottom: 1px solid $grey-lighter; + } +} + +.knockout #mce-responses .response { + border-bottom-color: rgba($white, 0.3); +} diff --git a/web/app/themes/badegg/resources/views/layouts/app.blade.php b/web/app/themes/badegg/resources/views/layouts/app.blade.php index 57345e8..c62450a 100644 --- a/web/app/themes/badegg/resources/views/layouts/app.blade.php +++ b/web/app/themes/badegg/resources/views/layouts/app.blade.php @@ -11,23 +11,30 @@ @php(wp_body_open())
- - {{ __('Skip to content') }} + - @include('sections.header') +
-
- @yield('content') -
+ @include('sections.header.header') - @hasSection('sidebar') - - @endif +
+ @yield('content') +
- @include('sections.footer') + @hasSection('sidebar') + + @endif + +
+
+
+
+ + @include('sections.footer.footer')
@php(do_action('get_footer')) diff --git a/web/app/themes/badegg/resources/views/sections/footer.blade.php b/web/app/themes/badegg/resources/views/sections/footer/footer.blade.php similarity index 100% rename from web/app/themes/badegg/resources/views/sections/footer.blade.php rename to web/app/themes/badegg/resources/views/sections/footer/footer.blade.php diff --git a/web/app/themes/badegg/resources/views/sections/footer/footer.js b/web/app/themes/badegg/resources/views/sections/footer/footer.js new file mode 100644 index 0000000..513116a --- /dev/null +++ b/web/app/themes/badegg/resources/views/sections/footer/footer.js @@ -0,0 +1,17 @@ +export default function Footer() { + const body = document.querySelector("body"); + const footer = document.querySelector(".js-footer"); + const links = footer.querySelectorAll("a"); + const currentURL = location.protocol + '//' + location.host + location.pathname; + + links.forEach(link => { + const hash = link.hash; + const href = link.href; + + link.addEventListener("click", () => { + if(href.includes(currentURL)) { + body.classList.remove("menu-open"); + } + }); + }); +} diff --git a/web/app/themes/badegg/resources/views/sections/footer/footer.scss b/web/app/themes/badegg/resources/views/sections/footer/footer.scss new file mode 100644 index 0000000..e69de29 diff --git a/web/app/themes/badegg/resources/views/sections/header.blade.php b/web/app/themes/badegg/resources/views/sections/header/header.blade.php similarity index 100% rename from web/app/themes/badegg/resources/views/sections/header.blade.php rename to web/app/themes/badegg/resources/views/sections/header/header.blade.php diff --git a/web/app/themes/badegg/resources/views/sections/header/header.js b/web/app/themes/badegg/resources/views/sections/header/header.js new file mode 100644 index 0000000..5127e25 --- /dev/null +++ b/web/app/themes/badegg/resources/views/sections/header/header.js @@ -0,0 +1,55 @@ +export default function Header() { + const body = document.querySelector("body"); + const wrapper = document.querySelector(".wrapper"); + const menuToggle = document.querySelector(".js-menu-toggle"); + const menuClose = document.querySelector(".js-menu-close"); + + menuToggle.addEventListener("click", (e) => { + e.preventDefault(); + body.classList.toggle("menu-open"); + + if(menuToggle.ariaExpanded == 'true') { + menuToggle.ariaExpanded = 'false'; + } else { + menuToggle.ariaExpanded = 'true'; + } + + console.log(menuToggle.ariaExpanded); + + }); + + menuClose.addEventListener("click", (e) => { + e.preventDefault(); + body.classList.remove("menu-open"); + menuToggle.ariaExpanded = 'false'; + + console.log(menuToggle.ariaExpanded); + }); + + document.addEventListener("keyup", function (event) { + if (event.key === "Escape") { + body.classList.remove("menu-open"); + menuToggle.ariaExpanded = 'false'; + } + }); + + document.addEventListener("scroll", () => { + const scrolled = document.scrollingElement.scrollTop; + const position = body.offsetTop; + const header = document.querySelector(".site-header"); + + if (scrolled > position + header.offsetHeight) { + body.classList.add("scrolled"); + } else { + body.classList.remove("scrolled"); + } + }); + + wrapper.addEventListener("click", (e) => { + const target = e.target; + + if(!menuToggle.contains(target) && body.classList.contains("menu-open")) { + body.classList.remove("menu-open"); + } + }); +} diff --git a/web/app/themes/badegg/resources/views/sections/header/header.scss b/web/app/themes/badegg/resources/views/sections/header/header.scss new file mode 100644 index 0000000..e69de29 diff --git a/web/app/themes/badegg/yarn.lock b/web/app/themes/badegg/yarn.lock index c68836b..5f32677 100644 --- a/web/app/themes/badegg/yarn.lock +++ b/web/app/themes/badegg/yarn.lock @@ -1452,6 +1452,11 @@ resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-3.0.1.tgz#d84597fbc0f897240c12fc0a31e492b036c70e40" integrity sha512-NPljRHkq4a14YzZ3YD406uaxh7s0g6eAq3L9aLOWywoqe8PkYamAvtsh7KNX6c++ihDrJ0RiU+/z7rGnhlZ5ww== +"@fortawesome/fontawesome-free@^7.0.1": + version "7.0.1" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-7.0.1.tgz#c1ac7f07ba2df47d1de7b7236fad25c4e6ca5076" + integrity sha512-RLmb9U6H2rJDnGxEqXxzy7ANPrQz7WK2/eTjdZqyU9uRU5W+FkAec9uU5gTYzFBH7aoXIw2WTJSCJR4KPlReQw== + "@jest/schemas@^29.6.3": version "29.6.3" resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.6.3.tgz#430b5ce8a4e0044a7e3819663305a7b3091c8e03"