From d644c34d8c30ad6369495afb7d7c521b4feef7a6 Mon Sep 17 00:00:00 2001 From: Paul Mucur Date: Thu, 7 Nov 2024 16:19:43 +0000 Subject: [PATCH] Add new site-wide cookie banner In order to ensure we don't accidentally opt users into Google Analytics cookies before they have responded to our new cookie banner, set the consent mode defaults to deny everything. Once the user accepts the cookie banner, this will send an update to Google Analytics and set the relevant _ga cookies. See https://developers.google.com/tag-platform/security/guides/consent?sjid=13978649501343282593-EU&consentmode=advanced#default-consent --- jekyll-assets/_includes/head.html | 6 ++ jekyll-assets/_includes/header.html | 144 +++++++++++++++++++++++++++- 2 files changed, 147 insertions(+), 3 deletions(-) diff --git a/jekyll-assets/_includes/head.html b/jekyll-assets/_includes/head.html index 86950500b6..d428ab9093 100644 --- a/jekyll-assets/_includes/head.html +++ b/jekyll-assets/_includes/head.html @@ -24,6 +24,12 @@ diff --git a/jekyll-assets/_includes/header.html b/jekyll-assets/_includes/header.html index 6b1743c004..76d60f53bc 100644 --- a/jekyll-assets/_includes/header.html +++ b/jekyll-assets/_includes/header.html @@ -3,14 +3,15 @@ margin: 0; padding: 0; border: 0; - line-height: 1; font-family: "Roboto", sans-serif; font-size: medium; font-weight: 400; + line-height: 1; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; + letter-spacing: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; @@ -250,13 +251,125 @@ padding: 16px; } } + +#__rptl-cookiebanner { + margin: 0; + padding: 0; + border: 0; + font-family: "Roboto", sans-serif; + font-size: medium; + font-weight: 400; + line-height: 1; + text-rendering: optimizeLegibility; + -webkit-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + text-size-adjust: 100%; + letter-spacing: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + position: relative; + z-index: 101; + background: #333; + color: #fff; +} +#__rptl-cookiebanner.__rptl-cookiebanner-hidden { + display: none; +} +#__rptl-cookiebanner .__rptl-cookiebanner-wrapper { + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + max-width: 1300px; + margin-left: auto; + margin-right: auto; + padding: 16px; +} +@media (min-width: 800px) { + #__rptl-cookiebanner .__rptl-cookiebanner-wrapper { + padding: 16px 76px; + } +} +@media (min-width: 1200px) { + #__rptl-cookiebanner .__rptl-cookiebanner-wrapper { + padding: 16px 84px; + } +} +#__rptl-cookiebanner .__rptl-cookiebanner-text { + margin: 0; + padding: 0; + border: 0; + font: inherit; + font-size: 100%; + display: block; + line-height: 1.5; + margin-bottom: 10px; +} +#__rptl-cookiebanner .__rptl-cookiebanner-link { + text-decoration: none; + color: inherit; + font-weight: bold; +} +#__rptl-cookiebanner .__rptl-cookiebanner-link:hover { + text-decoration: underline; +} +#__rptl-cookiebanner .__rptl-cookiebanner-buttons { + display: flex; + gap: 10px; +} +#__rptl-cookiebanner .__rptl-cookiebanner-accept, #__rptl-cookiebanner .__rptl-cookiebanner-reject { + margin: 0; + padding: 0; + border: 0; + font: inherit; + font-size: 100%; + cursor: pointer; + border-radius: 9999px; + line-height: 1.5; + font-weight: bold; + padding: 5px 15px; +} +#__rptl-cookiebanner .__rptl-cookiebanner-accept:hover, #__rptl-cookiebanner .__rptl-cookiebanner-reject:hover { + text-decoration: underline; +} +#__rptl-cookiebanner .__rptl-cookiebanner-accept:focus, #__rptl-cookiebanner .__rptl-cookiebanner-reject:focus { + box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgb(121, 167, 236) 0px 0px 0px 3px, rgba(0, 0, 0, 0) 0px 0px 0px 0px; +} +#__rptl-cookiebanner .__rptl-cookiebanner-accept { + color: #333; + background: #fff; +} +#__rptl-cookiebanner .__rptl-cookiebanner-reject { + color: #fff; + background: #333; +} +
+
+

+ We use some essential cookies to make our website work. +

+

+ We use optional cookies, as detailed in our cookie policy, to remember your + settings and understand how you use our website. +

+
+ + +
+
+
- + @@ -291,7 +404,32 @@