ALL CODE, ALL SITES

3 May

Include ALL the codes in one go - this will be a forever growing list so come back regularly!

Remember this changes the following:

Panning left and right (no more thumb wobble on mobile)
Smooth scrolling
Colour variables
Updating the cooke Banner - code will need updating

//Colour Variables

:root {
--white: ~'hsla(var(--white-hsl), 1)';
--light: ~'hsla(var(--lightAccent-hsl), 1)';
--bright: ~'hsla(var(--accent-hsl), 1)';
--dark: ~'hsla(var(--darkAccent-hsl), 1)';
--black: ~'hsla(var(--black-hsl), 1)';
}

//vertical pan only (no wobble)
html, body {
touch-action: pan-y;
scroll-behavior: smooth;
}

//hide background play pause button
.background-pause-button.visible {
display:none;
}

// Cookie Banner
.sqs-cookie-banner-v2:before {
width: 350px;
height: 50px;
margin: 0px 0px;
background: url(URL-HERE) center center no-repeat;
background-size: contain;
display: inline-block;
content: "";
}
.sqs-cookie-banner-v2.DARK, .sqs-cookie-banner-v2.LIGHT {
border-radius: 10px;
background: -webkit-linear-gradient(to top, #109B02, #77B93D);
background: linear-gradient(to top, #109B02, #77B93D);
}

//Hide Embed Block Info Bar

.sqs-block .sqs-blockStatus, .sqs-block .removed-script {
display: none!important;
}

// Text wrap - Balance
h1, h2, h3, h4, p3, p2, p1 {
text-wrap: balance;
}

A script for the full, Dynamic year in footer from Collette Smith (Add code block)

<!-- Dynamic Year in Footer - Courtesy of Colette Smith -->
<style>
  footer a[href="#[yearDynamic]"] {
    background: transparent !important;
    text-decoration: none;
    pointer-events: none !important;
    color: inherit !important;
  }
</style>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    var dynamicYear = document.querySelector('footer a[href="#[yearDynamic]"]');
    if (dynamicYear) {
      dynamicYear.textContent = new Date().getFullYear();
    }
  });
</script>
<!-- End of Dynamic Year in Footer -->