diff --git a/src/_includes/cookie-notice.html b/src/_includes/cookie-notice.html index f1460e6375..addece4e83 100644 --- a/src/_includes/cookie-notice.html +++ b/src/_includes/cookie-notice.html @@ -1,9 +1,10 @@ diff --git a/src/_includes/head.html b/src/_includes/head.html index 054d78a145..2ba2b55c7d 100644 --- a/src/_includes/head.html +++ b/src/_includes/head.html @@ -1,4 +1,4 @@ -{% assign cache_bust = site.time|date:'?v=%s' %} +{% assign cache_bust = '?v=2' %} @@ -74,11 +74,6 @@ {% endfor -%} {% endif -%} - - diff --git a/src/_sass/components/_cookie-notice.scss b/src/_sass/components/_cookie-notice.scss index 3da1e0877b..96af482183 100644 --- a/src/_sass/components/_cookie-notice.scss +++ b/src/_sass/components/_cookie-notice.scss @@ -1,14 +1,15 @@ @use '../core/variables' as *; #cookie-notice { - background-color: white; - padding: 2rem; + display: none; + justify-content: center; + background-color: $site-color-white; + padding: 1.5rem; position: fixed; bottom: 0; width: 100%; - box-shadow: -1px 1px 4px rgba(0, 0, 0, 0.3); + box-shadow: -1px 1px 4px rgba(0, 0, 0, 0.25); opacity: 0; - display: none; z-index: 9999; @keyframes fadein { @@ -20,18 +21,9 @@ } } - button.filled-button { - font-size: 1rem; - } - &.show { - display: block; - animation-duration: 500ms; - animation-delay: 200ms; - animation-name: fadein; - animation-iteration-count: 1; - animation-timing-function: ease; - animation-fill-mode: forwards; + display: flex; + animation: fadein 500ms ease 200ms 1 forwards; } .container { @@ -39,34 +31,28 @@ justify-content: space-between; align-items: center; max-width: 1080px; - min-width: 0 !important; + min-width: 0; width: auto; gap: 1.5rem; p { - font-size: 1rem; line-height: 1.6; margin: 0; } + + p, button, a { + font-size: 1rem; + } } } body.homepage, body.error { #cookie-notice { + --site-interaction-base-values: var(--site-interaction-base-values-inverse); background-color: $site-color-dark-background; - .container { - p { - color: white; - - a { - color: $site-color-card-link; - - &:hover, &:focus, &:active { - color: darken($site-color-card-link, 20%); - } - } - } + .container p { + color: $site-color-white; } } } diff --git a/src/_sass/core/_base.scss b/src/_sass/core/_base.scss index d8d66d8a7e..dd81271f83 100644 --- a/src/_sass/core/_base.scss +++ b/src/_sass/core/_base.scss @@ -3,6 +3,7 @@ :root { --site-interaction-base-values: 0 0 0; + --site-interaction-base-values-inverse: 255 255 255; --focus-outline-color: #1967D2; } @@ -72,38 +73,65 @@ a, button { color: $brand-primary; } - &.filled-button { + &.filled-button, &.text-button { display: flex; align-items: center; padding: 0.5rem 1rem; gap: 0.5rem; width: fit-content; - background-color: $site-color-primary; - color: $site-color-white; - text-decoration: none; - border-radius: 0.25rem; cursor: pointer; - font-family: $site-font-family-alt; font-size: 1.25rem; white-space: nowrap; + + font-family: $site-font-family-alt; + + &:focus-visible { + outline: 2px solid var(--focus-outline-color); + } + } + + &.filled-button { + background-color: $site-color-primary; + border-radius: 0.25rem; outline-offset: 2px; - &:hover { - @include interaction-style(4%); + &, &:hover, &:focus, &:active { color: $site-color-white; text-decoration: none; } - &:focus { - color: $site-color-white; - outline: 2px solid var(--focus-outline-color); + &:hover { + @include interaction-style(4%); } &:active { @include interaction-style(8%); - color: $site-color-white; } } + + &.text-button { + border-radius: 1.5rem; + + &, &:hover, &:focus, &:active { + color: $site-color-primary; + background: none; + text-decoration: none; + } + + &:hover { + @include interaction-style(4%); + } + + &:active { + @include interaction-style(7%); + } + } +} + +.button-group { + display: flex; + flex-direction: row; + gap: 0.75rem; } button { diff --git a/src/content/assets/js/main.js b/src/content/assets/js/main.js index 2cfd66d116..16ee669c91 100644 --- a/src/content/assets/js/main.js +++ b/src/content/assets/js/main.js @@ -78,23 +78,33 @@ function createGallery() { } function initCookieNotice() { - const notice = document.getElementById('cookie-notice'); - const agreeBtn = document.getElementById('cookie-consent'); - const cookieKey = 'dart-site-cookie-consent'; - const cookieConsentValue = 'true' - const activeClass = 'show'; - - if (Cookies.get(cookieKey) === cookieConsentValue) { - return; + const currentDate = Date.now(); + const cookieKey = 'cookie-consent'; + + // Check if they have already recently agreed. + const existingDateString = window.localStorage.getItem(cookieKey); + if (existingDateString) { + const existingDate = parseInt(existingDateString); + if (Number.isInteger(existingDate)) { + const halfYearMs = 1000 * 60 * 60 * 24 * 180; + // If the last consent is less than 180 days old, don't show the notice. + if (currentDate - existingDate < halfYearMs) { + return; + } + } } - notice.classList.add(activeClass); + const activeClass = 'show'; - agreeBtn.addEventListener('click', (e) => { + // Set up the "OK" button to update storage and hide the banner. + document.getElementById('cookie-consent') + ?.addEventListener('click', (e) => { e.preventDefault(); - Cookies.set(cookieKey, cookieConsentValue, { sameSite: 'strict', expires: 30}); - notice.classList.remove(activeClass); - }); + window.localStorage.setItem(cookieKey, currentDate.toString()); + document.getElementById('cookie-notice')?.classList.remove(activeClass); + }, { once: true }); + + document.getElementById('cookie-notice').classList.add(activeClass); } // A pattern to remove terminal command markers when copying code blocks.