From 7cd4ea70c4bc6529735f329f094fc8ff356197cd Mon Sep 17 00:00:00 2001 From: nadiavanleur Date: Thu, 28 Mar 2024 15:54:25 +0100 Subject: [PATCH] update style --- 2023/index.html | 238 +++++++++++++++++++++++++++++++++++++++++++++++- index.html | 4 +- style.css | 15 ++- 3 files changed, 252 insertions(+), 5 deletions(-) diff --git a/2023/index.html b/2023/index.html index dff75a7..1dc7676 100644 --- a/2023/index.html +++ b/2023/index.html @@ -50,7 +50,7 @@ --color-background: var(--backcolor); --color-text: var(--maincolor); - --color-footer-text: var(--cyboxcolor); + --color-footer-text: var(--spotify-background); --color-menu-background: var(--headerfooterbgcolor); --color-hover: var(--yellow); --color-support: var(--supportcolor); @@ -59,6 +59,238 @@ + +

Hoeveel vrouwen spelen er komende editie op Jera on Air @@ -108,6 +340,10 @@

LAST_UPDATED: "Last updated", }; + const toggleMenu = () => { + document.body.classList.toggle("menu-open"); + }; + const getTotals = async () => { const sheetUrl = `https://sheets.googleapis.com/v4/spreadsheets/${SPREADSHEET_ID}/values/${TAB_NAME}?alt=json&key=${API_KEY}`; const sheetData = await fetch(sheetUrl).then((result) => result.json()); diff --git a/index.html b/index.html index 926fa17..1891402 100644 --- a/index.html +++ b/index.html @@ -50,7 +50,7 @@ --color-background: var(--backcolor); --color-text: var(--maincolor); - --color-footer-text: #1d1e1c; + --color-footer-text: var(--spotify-background); --color-menu-background: var(--headerfooterbgcolor); --color-hover: var(--hovercolor); --color-support: var(--backdrop1); @@ -117,7 +117,7 @@ 2023
  • - 2024 + 2024
  • Line up diff --git a/style.css b/style.css index 5b9b692..b3d4027 100644 --- a/style.css +++ b/style.css @@ -19,6 +19,8 @@ --spacer-lg: 24px; --spacer-xl: 32px; --spacer-xxl: 48px; + + --spotify-background: rgb(40, 40, 40); } html { @@ -128,6 +130,7 @@ body.menu-open .c-menu__backdrop { position: fixed; top: 0; left: 0; + z-index: 2; } .c-menu__hamburger-button { @@ -163,7 +166,7 @@ body.menu-open .c-menu__backdrop { } .c-menu__hamburger-button-icon { - color: var(--color-menu-background); + color: var(--color-background); position: absolute; left: 50%; top: 50%; @@ -232,7 +235,8 @@ body:not(.menu-open) .c-menu__list-container { color: inherit; } -.c-menu__list a:hover { +.c-menu__list a:hover, +.c-menu__list a.active { color: var(--color-hover); } @@ -282,6 +286,13 @@ body:not(.menu-open) .c-menu__list-container { margin: 0; } + .c-menu { + position: fixed; + top: 0; + left: 0; + z-index: 1; + } + .c-menu__hamburger-button { height: 70px; width: 70px;