diff --git a/_includes/head.html b/_includes/head.html index f699da5..7df4359 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -3,11 +3,12 @@ {% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %} + @@ -15,4 +16,12 @@ {% seo %} + diff --git a/_includes/header.html b/_includes/header.html index 66777a3..8ad4ff8 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,9 +1,26 @@ diff --git a/_includes/links.html b/_includes/links.html index 7977975..687852f 100644 --- a/_includes/links.html +++ b/_includes/links.html @@ -56,7 +56,7 @@ - diff --git a/_includes/logo.svg b/_includes/logo.svg new file mode 100644 index 0000000..864d100 --- /dev/null +++ b/_includes/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/_includes/main.scss b/_includes/main.scss index 7fc673e..79f8a9d 100644 --- a/_includes/main.scss +++ b/_includes/main.scss @@ -18,17 +18,80 @@ @import "util/helper"; @import "util/layout"; +/** + * + */ +@font-face { + font-family: 'League Spartan Bold'; + src: url('/assets/fonts/league/LeagueSpartan-Bold.woff2') format('woff2'); + font-weight: 700; +} + +@font-face { + font-family: 'League Spartan Bold'; + src: url('/assets/fonts/league/LeagueSpartan-SemiBold.woff2') format('woff2'); + font-weight: 600; +} + + +@font-face { + font-family: 'Open Sans'; + src: url('/assets/fonts/open-sans/open-sans-latin-400-normal.woff2') format('woff2'); + font-weight: 400; +} + +@font-face { + font-family: 'Open Sans'; + src: url('/assets/fonts/open-sans/open-sans-latin-700-normal.woff2') format('woff2'); + font-weight: 700; +} + + +/** + * https://www.aleksandrhovhannisyan.com/blog/the-perfect-theme-switch/ + */ +html, +html[data-theme="light"] { + color-scheme: light; + --token-background: #{$white}; + --token-text: #{$black}; + --token-text-subtle: #3817C2; + --token-shadow: rgba(0, 0, 0, 0.2); +} + +@mixin darkTheme { + color-scheme: dark; + --token-background: #{$black}; + --token-text: #{$white}; + --token-text-subtle: rgba(250, 250, 250, .8); + --token-shadow: rgba(255, 255, 255, 0.1); +} + +html[data-theme="dark"] { + @include darkTheme() +} + +/* Dark theme (system preference) */ +@media (prefers-color-scheme: dark) { + html:not([data-theme]) { + @include darkTheme() + } +} + /* layout */ body { - background-color: $white; - color: $black; - font-family: "Avenir", sans-serif; - font-size: 102.5%; + background-color: var(--token-background); + color: var(--token-text); + font-family: $fontstack-body; letter-spacing: normal; margin: 0; padding: 0; } +*:focus { + outline: 3px dashed $red; +} + .columns { display: flex; flex-wrap: wrap; @@ -56,7 +119,7 @@ input { text-align: center; &:invalid { - border: 2px solid red; + border: 2px solid #FFCCCB; } &:invalid:required { @@ -64,7 +127,8 @@ input { } &:focus { - outline: none; + outline: .25em dashed $red; + outline-offset: .1rem; } } @@ -81,10 +145,10 @@ input.input-text { input[type="submit"] { margin-top: 20px; font-weight: 500; - background-color: #212121; + background-color: $btn-primary-background; color: white; padding: 10px 20px; - border-radius: 100px; + border-radius: $btn-radius; border: none; text-transform: uppercase; @@ -184,22 +248,30 @@ img { } -.subscribe-button { - border-color: transparent; - background-color: #212121; - color: white; - padding: 8px 25px; - border-radius: 8px; - border-width: 1px; - display: block; - margin-left: auto; - margin-right: auto; - margin-top: 12px; - width: 90%; +.btn, +a.btn { + display: block; + background-color: var(--token-text); + color: var(--token-background) !important; + padding: 8px 25px; + font-size: 1rem; + border: none; + border-radius: $btn-radius; + text-transform: uppercase; + + &:hover { + background-color: $red; + } - &:hover { - background-color: #e6141b; - } + &:focus { + background-color: $red; + outline-offset: .25em; + } +} + +.join-form .btn { + margin: 20px auto; + width: 90%; } .post-header { diff --git a/_layouts/default.html b/_layouts/default.html index 90d42cb..729533b 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -9,5 +9,6 @@ {{ content }} + diff --git a/_sass/_header.scss b/_sass/_header.scss index a3f8128..fa40fa3 100644 --- a/_sass/_header.scss +++ b/_sass/_header.scss @@ -10,44 +10,41 @@ header { .header { position: fixed; - box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2); + box-shadow: 2px 0 10px var(--token-shadow); width: 100%; - background-color: $white; + background-color: var(--token-background); z-index: 9; + padding: 1vmin 4vmin; + + @include mobile { + padding-left: 1vmin; + } display: flex; justify-content: space-between; .logo { - background-color: none; - background-image: url("/assets/css/images/logo.svg"); - background-size: contain; - float: left; - font-size: 1.75em; - line-height: 1em; - height: 58px; - margin: 0; - padding: 0; - position: relative; - text-indent: -99999px; - width: 58px; - margin-top: 0.25em; - margin-left: 1em; + margin-bottom: 0; + + .logo-link { + display: flex; + justify-content: center; + align-items: center; + } - @include mobile { - background-size: cover; - margin-left: 0.25em; + figure { + margin: 0; + line-height: 0; } a { text-decoration: none; - padding-top: 1.25em; - padding-left: 0.1em; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + } + + svg { + width: 58px; + height: 58px; + fill: var(--token-text); } } @@ -63,10 +60,8 @@ header { @include mobile { font-size: 1em; - li { - &:not(:last-child(-n+2)) { - display: none; - } + .btn { + display: none; } } @@ -88,16 +83,6 @@ header { margin: auto; padding-left: 1em; padding-right: 1em; - - &:last-child a { - background-color: $black; - color: $white; - padding: 8px 25px; - border-radius: 100px; - &:hover { - background-color: $red; - } - } } } @@ -108,15 +93,15 @@ header { text-transform: uppercase; text-decoration: none; font-size: 24px; - color: #E6141B; + color: $red; @media screen and (max-width: 915px) { display: none; } - span { + .em { font-weight: 600; - color: $black; + color: var(--token-text); } } } @@ -127,7 +112,7 @@ header { font-size: 1.6rem; } -.dropdown__categories:hover { +.dropdown__categories li:hover { color: $red; } @@ -144,9 +129,9 @@ header { } .dropdown__menu li { - background: $black; - color: $white; - border: 1px solid $white; + background: var(--token-text); + color: var(--token-background); + border: 1px solid var(--token-background); &:hover { background: $red; @@ -171,7 +156,43 @@ header { & a { display: block; - color: $white; + color: var(--token-background); padding: 10px; } } + +.display-mode { + padding: 0 !important; + + @include mobile { + visibility: hidden; + display: none; + } + + button { + background: none; + border: 1px solid transparent; + color: var(--token-text-subtle); + line-height: 0; + opacity: .5; + border-radius: 50%; + width: 40px; + height: 40px; + + &:focus { + opacity: 1; + } + + &.active-display-mode:focus { + border-color: transparent; + } + + &.active-display-mode, + &:hover { + color: var(--token-text); + opacity: 1; + border: 1px solid var(--token-text-subtle); + box-shadow: 0 0 2px 1px var(--token-shadow); + } + } +} \ No newline at end of file diff --git a/_sass/_variables.scss b/_sass/_variables.scss index 98eda60..e1924aa 100644 --- a/_sass/_variables.scss +++ b/_sass/_variables.scss @@ -1,11 +1,23 @@ -$red: rgb(232, 68, 46); -$black: rgb(33, 33, 33); -$white: rgb(255, 255, 255); -$grey: rgb(115, 115, 115); -$black: rgb(2, 14, 15); +$red: rgb(246, 9, 51); // #F60933 +/** + * In the styleguide the white is defined as + * #BABABA, but when using the MacOS Digital Colour Picker app + * the background tile returns #FAFAFA which looks + * better as the background colour + */ +$white: rgb(250, 250, 250); // #FAFAFA +$grey: rgb(34,13,130); // 10% lighter tint of $black +$black: rgb(22, 8, 82); // #14084F + $tablet-width: 760px; $mobile-width: 420px; +$btn-primary-background: $black; +$btn-radius: 100px; + +$fontstack-title: 'League Spartan Bold', sans-serif; +$fontstack-body: 'Open Sans', sans-serif; + @mixin tablet { @media screen and (max-width: #{$tablet-width}) { @content; diff --git a/_sass/elements/_a.scss b/_sass/elements/_a.scss index 8f47613..eb9838c 100644 --- a/_sass/elements/_a.scss +++ b/_sass/elements/_a.scss @@ -1,15 +1,17 @@ +$link-focus: $black; + a { &:link, &:visited, &:active { - color: #e6141b; + color: $red; } &:hover { - color: #212121; + color: var(--token-text); } &:focus { - color: #212121; + color: var(--token-text); } } diff --git a/_sass/elements/_typography.scss b/_sass/elements/_typography.scss index 512317e..ae15149 100644 --- a/_sass/elements/_typography.scss +++ b/_sass/elements/_typography.scss @@ -1,7 +1,9 @@ h1 { /* 16x2.25=36 */ font-size: 3em; - + font-family: $fontstack-title; + color: $red; + @include mobile { /* 2.25 * .875 */ font-size: 1.96875em; @@ -10,6 +12,7 @@ h1 { h2 { font-size: 1.5em; + font-family: $fontstack-body; /* 16x1.5=24 */ @include mobile { font-size: 1em; @@ -19,6 +22,7 @@ h2 { h3 { font-size: 1.125em; + font-family: $fontstack-body; /* 16x1.125=18 */ @include mobile { font-size: 1.09375em; @@ -28,6 +32,7 @@ h3 { h4 { font-size: 0.875em; + font-family: $fontstack-body; font-style: italic; /* 16x0.875=14 */ @include mobile { @@ -44,7 +49,11 @@ h4 { margin-bottom: 0.5em; } +p { + line-height: 1.5; +} + .aside { - color: $grey; + color: var(--token-text-subtle); font-size: 95%; } diff --git a/_sass/structures/_event.scss b/_sass/structures/_event.scss index c067e4b..04bb204 100644 --- a/_sass/structures/_event.scss +++ b/_sass/structures/_event.scss @@ -14,7 +14,7 @@ } .event-card__icon { - fill: $grey; + fill: var(--token-text-subtle); font-size: 0.55em; font-weight: bold; grid-column: 1; diff --git a/assets/css/images/logo.svg b/assets/css/images/logo.svg index c00ee9f..864d100 100644 --- a/assets/css/images/logo.svg +++ b/assets/css/images/logo.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/fonts/league/LeagueSpartan-Bold.woff2 b/assets/fonts/league/LeagueSpartan-Bold.woff2 new file mode 100644 index 0000000..ee35170 Binary files /dev/null and b/assets/fonts/league/LeagueSpartan-Bold.woff2 differ diff --git a/assets/fonts/league/LeagueSpartan-SemiBold.woff2 b/assets/fonts/league/LeagueSpartan-SemiBold.woff2 new file mode 100644 index 0000000..05a61aa Binary files /dev/null and b/assets/fonts/league/LeagueSpartan-SemiBold.woff2 differ diff --git a/assets/fonts/lil-grotesk/lilgrotesk-bold-webfont.eot b/assets/fonts/lil-grotesk/lilgrotesk-bold-webfont.eot deleted file mode 100644 index bffb014..0000000 Binary files a/assets/fonts/lil-grotesk/lilgrotesk-bold-webfont.eot and /dev/null differ diff --git a/assets/fonts/lil-grotesk/lilgrotesk-bold-webfont.svg b/assets/fonts/lil-grotesk/lilgrotesk-bold-webfont.svg deleted file mode 100644 index 4f8f1cf..0000000 --- a/assets/fonts/lil-grotesk/lilgrotesk-bold-webfont.svg +++ /dev/null @@ -1,1304 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/assets/fonts/lil-grotesk/lilgrotesk-bold-webfont.woff b/assets/fonts/lil-grotesk/lilgrotesk-bold-webfont.woff deleted file mode 100644 index e368aa4..0000000 Binary files a/assets/fonts/lil-grotesk/lilgrotesk-bold-webfont.woff and /dev/null differ diff --git a/assets/fonts/lil-grotesk/lilgrotesk-bold-webfont.woff2 b/assets/fonts/lil-grotesk/lilgrotesk-bold-webfont.woff2 deleted file mode 100644 index 63be383..0000000 Binary files a/assets/fonts/lil-grotesk/lilgrotesk-bold-webfont.woff2 and /dev/null differ diff --git a/assets/fonts/lil-grotesk/lilgrotesk-regular-webfont.eot b/assets/fonts/lil-grotesk/lilgrotesk-regular-webfont.eot deleted file mode 100644 index 2959ac8..0000000 Binary files a/assets/fonts/lil-grotesk/lilgrotesk-regular-webfont.eot and /dev/null differ diff --git a/assets/fonts/lil-grotesk/lilgrotesk-regular-webfont.svg b/assets/fonts/lil-grotesk/lilgrotesk-regular-webfont.svg deleted file mode 100644 index 44dccc1..0000000 --- a/assets/fonts/lil-grotesk/lilgrotesk-regular-webfont.svg +++ /dev/null @@ -1,1262 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/assets/fonts/lil-grotesk/lilgrotesk-regular-webfont.ttf b/assets/fonts/lil-grotesk/lilgrotesk-regular-webfont.ttf deleted file mode 100644 index 9b2afea..0000000 Binary files a/assets/fonts/lil-grotesk/lilgrotesk-regular-webfont.ttf and /dev/null differ diff --git a/assets/fonts/lil-grotesk/lilgrotesk-regular-webfont.woff b/assets/fonts/lil-grotesk/lilgrotesk-regular-webfont.woff deleted file mode 100644 index 689cf23..0000000 Binary files a/assets/fonts/lil-grotesk/lilgrotesk-regular-webfont.woff and /dev/null differ diff --git a/assets/fonts/lil-grotesk/lilgrotesk-regular-webfont.woff2 b/assets/fonts/lil-grotesk/lilgrotesk-regular-webfont.woff2 deleted file mode 100644 index 0119b59..0000000 Binary files a/assets/fonts/lil-grotesk/lilgrotesk-regular-webfont.woff2 and /dev/null differ diff --git a/assets/fonts/open-sans/open-sans-latin-300-normal.woff2 b/assets/fonts/open-sans/open-sans-latin-300-normal.woff2 new file mode 100644 index 0000000..e000fcb Binary files /dev/null and b/assets/fonts/open-sans/open-sans-latin-300-normal.woff2 differ diff --git a/assets/fonts/open-sans/open-sans-latin-400-normal.woff2 b/assets/fonts/open-sans/open-sans-latin-400-normal.woff2 new file mode 100644 index 0000000..eaae942 Binary files /dev/null and b/assets/fonts/open-sans/open-sans-latin-400-normal.woff2 differ diff --git a/assets/fonts/open-sans/open-sans-latin-700-normal.woff2 b/assets/fonts/open-sans/open-sans-latin-700-normal.woff2 new file mode 100644 index 0000000..7e3b8b0 Binary files /dev/null and b/assets/fonts/open-sans/open-sans-latin-700-normal.woff2 differ diff --git a/assets/js/display-mode.js b/assets/js/display-mode.js new file mode 100644 index 0000000..78e2b1b --- /dev/null +++ b/assets/js/display-mode.js @@ -0,0 +1,79 @@ +// https://whitep4nth3r.com/blog/best-light-dark-mode-theme-toggle-javascript/ + +const htmlDoc = document.querySelector("html") + +/** +* Utility function to calculate the current theme setting. +* Look for a local storage value. +* Fall back to system setting. +* Fall back to light mode. +*/ +function calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }) { + if (localStorageTheme !== null) { + return localStorageTheme; + } + + if (systemSettingDark.matches) { + return "dark"; + } + + return "light"; + } + + + /** + * Utility function to update the theme setting on the html tag + */ + function updateThemeOnHtmlEl(theme) { + if (theme === "system") { + htmlDoc.removeAttribute("data-theme"); + return + } + + htmlDoc.setAttribute("data-theme", theme); + } + + + /** + * On page load: + */ + + /** + * 1. Grab what we need from the DOM and system settings on page load + */ + const buttons = document.querySelectorAll("[data-theme-toggle]"); + const localStorageTheme = localStorage.getItem("theme"); + const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)"); + + /** + * 2. Work out the current site settings + */ + let currentThemeSetting = calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }); + + /** + * 3. Update the theme setting and button text according to current settings + */ + updateThemeOnHtmlEl(currentThemeSetting); + + console.log({currentThemeSetting}) + + /** + * 4. Add an event listener to toggle the theme + */ + buttons.forEach(el => { + if (el.dataset.themeToggle === currentThemeSetting) { + el.classList.add("active-display-mode") + } + + el.addEventListener("click", (event) => { + const newTheme = event.currentTarget.dataset.themeToggle; + + localStorage.setItem("theme", newTheme); + buttons.forEach(el => el.classList.remove("active-display-mode")); + + updateThemeOnHtmlEl(newTheme); + el.classList.add("active-display-mode"); + + currentThemeSetting = newTheme; + }); + }) \ No newline at end of file diff --git a/index.md b/index.md index 404f4eb..8a9ab55 100644 --- a/index.md +++ b/index.md @@ -28,10 +28,10 @@ permalink: /

{% t global.accessibility.title %}

- {% t global.accessibility.summary %} +

{% t global.accessibility.summary %}

{% t global.code_of_conduct.title %}

- {% t global.code_of_conduct.summary %} +

{% t global.code_of_conduct.summary %}