diff --git a/package-lock.json b/package-lock.json index 67f65188c..6982ad8eb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7858,9 +7858,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001551", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001551.tgz", - "integrity": "sha512-vtBAez47BoGMMzlbYhfXrMV1kvRF2WP/lqiMuDu1Sb4EE4LKEgjopFDSRtZfdVnslNRpOqV/woE+Xgrwj6VQlg==", + "version": "1.0.30001615", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001615.tgz", + "integrity": "sha512-1IpazM5G3r38meiae0bHRnPhz+CBQ3ZLqbQMtrg+AsTPKAXgW38JNsXkyZ+v8waCsDmPq87lmfun5Q2AGysNEQ==", "funding": [ { "type": "opencollective", diff --git a/src/components/ButtonPanel.module.css b/src/components/ButtonPanel.module.css index a7c1a4086..c63363619 100644 --- a/src/components/ButtonPanel.module.css +++ b/src/components/ButtonPanel.module.css @@ -15,7 +15,7 @@ overflow: hidden; margin: 0 var(--spacing-normal) 0 0; text-transform: uppercase; - color: var(--gray-dark); + color: var(--text-color); } } diff --git a/src/components/ChallengesPanel.module.css b/src/components/ChallengesPanel.module.css index 36b3a98de..7b8b31912 100644 --- a/src/components/ChallengesPanel.module.css +++ b/src/components/ChallengesPanel.module.css @@ -9,7 +9,7 @@ flex-wrap: wrap; border-left: var(--border-cyan); border-bottom: var(--border-cyan); - color: var(--gray-dark); + color: var(--text-color); text-transform: uppercase; background-color: var(--cyan-light); @@ -60,7 +60,7 @@ justify-content: space-between; align-items: center; margin: 0; - color: var(--gray-dark); + color: var(--text-color); } } @@ -92,7 +92,7 @@ padding: 0 calc(var(--box-padding) / 2); border-bottom: var(--border); border-color: var(--cyan); - color: var(--gray-dark); + color: var(--text-color); font-weight: normal; font-size: var(--maru-normal); text-overflow: ellipsis; @@ -112,7 +112,7 @@ height: var(--baseline-4x); border-bottom: var(--border-cyan); border-left: var(--border-cyan); - background-color: white; + background-color: var(--background-color); overflow-x: hidden; overflow-y: auto; @@ -122,7 +122,7 @@ } .date { - color: var(--gray-dark); + color: var(--text-color); background-color: var(--cyan-light); border-bottom: var(--border-cyan); border-left: var(--border-cyan); diff --git a/src/components/CodeExampleList.module.css b/src/components/CodeExampleList.module.css index fee06a528..93f4a717f 100644 --- a/src/components/CodeExampleList.module.css +++ b/src/components/CodeExampleList.module.css @@ -44,6 +44,7 @@ flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; + color: var(--text-color); } .description { @@ -52,6 +53,7 @@ overflow: hidden; text-overflow: ellipsis; padding-right: var(--space); + color: var(--text-color); } .icon { @@ -73,13 +75,13 @@ text-decoration: underline; text-transform: lowercase; white-space: nowrap; - color: var(--gray-dark); + color: var(--text-color); } & .linkIcon { font-family: var(--maru-emoji); font-size: var(--maru-emoji-normal); text-decoration: none; - color: var(--gray-dark); + color: var(--text-color); } } @@ -87,20 +89,23 @@ height: var(--baseline-1of2); width: var(--baseline-1of2); & path { - fill: var(--gray-dark); + fill: var(--text-color); } } .node { height: var(--baseline-1of2); width: var(--baseline-1of2); + & path { + fill: var(--text-color); + } } .processing { height: var(--baseline-1of3); width: var(--baseline-1of3); & path { - stroke: var(--gray-dark); + stroke: var(--text-color); } } @@ -123,7 +128,7 @@ @media (--reduced) { .red .example, .cyan .example { - background-color: white; + background-color: var(--background-color); } .description { diff --git a/src/components/CreditList.module.css b/src/components/CreditList.module.css index 7112a77de..7def3b8c6 100644 --- a/src/components/CreditList.module.css +++ b/src/components/CreditList.module.css @@ -8,7 +8,7 @@ align-items: center; padding-left: var(--box-padding); border-left: var(--border); - color: var(--gray-dark); + color: var(--text-color); &:first-child { margin-top: -2px; @@ -57,7 +57,7 @@ @media (--reduced) { .red .credit, .cyan .credit { - background-color: white; + background-color: var(--background-color); } } diff --git a/src/components/Footer.js b/src/components/Footer.js index 083083baa..0af8b6fe1 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -6,13 +6,16 @@ import cn from 'classnames'; import * as css from './Footer.module.css'; import Logo from '../images/logo.svg'; -import Github from '../images/github.svg'; -import Twitch from '../images/twitch.svg'; -import Nebula from '../images/nebula.svg'; -import Twitter from '../images/twitter.svg'; -import Discord from '../images/discord.svg'; -import Youtube from '../images/youtube.svg'; -import Instagram from '../images/instagram.svg'; + +import { + FaGithub, + FaTwitch, + FaTwitter, + FaDiscord, + FaYoutube, + FaInstagram +} from 'react-icons/fa6'; +import { IoStarSharp } from 'react-icons/io5'; import { cols } from '../styles/styles.module.css'; @@ -83,7 +86,7 @@ const Footer = () => { - + Youtube @@ -91,20 +94,20 @@ const Footer = () => { - + Twitch
  • - + Nebula
  • - + Twitter
    • @@ -113,19 +116,19 @@ const Footer = () => { - + Instagram
  • - + Discord
  • - + GitHub
    • diff --git a/src/components/Footer.module.css b/src/components/Footer.module.css index 2b2bc30e5..70faaf6a1 100644 --- a/src/components/Footer.module.css +++ b/src/components/Footer.module.css @@ -1,12 +1,12 @@ .root { - color: var(--gray-dark); background-color: var(--gray-light); + color: var(--text-color); flex-wrap: wrap; & a { padding-left: 0; text-decoration: none; - color: var(--gray-dark); + color: var(--text-color); } } diff --git a/src/components/GuideCard.js b/src/components/GuideCard.js index 0649ca5f5..6a86ebd1f 100644 --- a/src/components/GuideCard.js +++ b/src/components/GuideCard.js @@ -1,26 +1,19 @@ import React, { memo } from 'react'; import { Link } from 'gatsby'; -import cn from 'classnames'; import ButtonPanel from './ButtonPanel'; import Image from './Image'; import * as css from './GuideCard.module.css'; -const GuideCard = ({ - title, - slug, - meta, - icon = '📒', - description, - image, - variant -}) => { +const GuideCard = ({ title, slug, meta, icon = '📒', description, image }) => { + // TODO refactor this to use a single ButtonPanel instance? + return ( -
    +
    {icon}
    -

    +

    {title}

    @@ -32,7 +25,7 @@ const GuideCard = ({ text={meta} buttonLink={slug} buttonText="Read" - variant={variant} + variant="purple" rainbow /> @@ -45,7 +38,7 @@ const GuideCard = ({ text={meta} buttonLink={slug} buttonText="Read" - variant={variant} + variant="purple" rainbow /> diff --git a/src/components/GuideCard.module.css b/src/components/GuideCard.module.css index 693b9e3c7..fe3c4816f 100644 --- a/src/components/GuideCard.module.css +++ b/src/components/GuideCard.module.css @@ -5,7 +5,8 @@ display: flex; flex-direction: column; - --color: var(--gray-dark); + --color: var(--purple); + --border: var(--border-purple); @media (--medium) { width: 100%; @@ -13,35 +14,8 @@ } } -/* variants */ -.root.purple { - --color: var(--purple); - --border: var(--border-purple); - --background-color: var(--purple-light); -} - -.root.red { - --color: var(--red); - --border: var(--border-red); - --background-color: var(--red-light); -} - -.root.orange { - --color: var(--orange); - --border: var(--border-orange); - --background-color: var(--orange-light); -} - -.root.cyan { - --color: var(--cyan); - --border: var(--border-cyan); - --background-color: var(--cyan-light); -} - -.icon { - border-right: var(--border); - border-bottom: var(--border); - border-left: var(--border); +.title { + color: var(--text-color); } .top { @@ -60,6 +34,10 @@ display: flex; justify-content: center; align-items: center; + + border-right: var(--border); + border-bottom: var(--border); + border-left: var(--border); } .top h2 { @@ -96,7 +74,8 @@ text-overflow: ellipsis; border-bottom: var(--border); border-left: var(--border); - background-color: white; + background-color: var(--background-color); + color: var(--text-color); } .left .meta { diff --git a/src/components/Head.js b/src/components/Head.js index d8f5be516..d1cfa869e 100644 --- a/src/components/Head.js +++ b/src/components/Head.js @@ -93,6 +93,15 @@ const Head = ({ title, description, image }) => { content={description ?? defaultDescription} /> + + {/* Theme toggle bootstrap */} + ); }; diff --git a/src/components/HomepageScene.module.css b/src/components/HomepageScene.module.css index ada86bd87..11497d0c9 100644 --- a/src/components/HomepageScene.module.css +++ b/src/components/HomepageScene.module.css @@ -37,6 +37,7 @@ margin: 0; max-width: 600px; padding: 0 var(--box-padding); + color: var(--text-color); } .train { diff --git a/src/components/ItemsPage.module.css b/src/components/ItemsPage.module.css index 7e3578c5d..f99661ab2 100644 --- a/src/components/ItemsPage.module.css +++ b/src/components/ItemsPage.module.css @@ -62,10 +62,11 @@ border-bottom: var(--border); border-left: var(--border); height: var(--baseline-6x); - background-color: white; + background-color: var(--background-color); & p { margin: 0 0 var(--baseline) 0; + color: var(--text-color); } & svg { @@ -90,6 +91,7 @@ justify-content: center; height: var(--baseline-3x); background: white; + background-color: var(--background-color); color: var(--gray-dark); border-bottom: var(--border); border-left: var(--border); @@ -97,6 +99,7 @@ display: inline-flex; justify-content: center; width: 100px; + color: var(--text-color); height: var(--baseline); line-height: var(--baseline); } diff --git a/src/components/LinkList.module.css b/src/components/LinkList.module.css index f63059102..824ce319e 100644 --- a/src/components/LinkList.module.css +++ b/src/components/LinkList.module.css @@ -9,7 +9,7 @@ border-top: var(--border); border-bottom: var(--border); border-left: var(--border); - color: var(--gray-dark); + color: var(--text-color); } .icon, @@ -36,7 +36,7 @@ text-decoration: underline; white-space: nowrap; text-overflow: ellipsis; - color: var(--gray-dark); + color: var(--text-color); font-size: var(--maru-large); } @@ -89,7 +89,7 @@ .red .link, .cyan .link { - background-color: white; + background-color: var(--background-color); } } diff --git a/src/components/Menu.js b/src/components/Menu.js index fc433c334..d4cfb0bdd 100644 --- a/src/components/Menu.js +++ b/src/components/Menu.js @@ -5,6 +5,7 @@ import cn from 'classnames'; import * as css from './Menu.module.css'; import { AiOutlineMenu, AiOutlineClose } from 'react-icons/ai'; +import { MdOutlineDarkMode, MdOutlineLightMode } from 'react-icons/md'; const items = [ { @@ -47,6 +48,13 @@ const items = [ const Menu = () => { const [expanded, setExpanded] = useState(false); + function setTheme(theme) { + setExpanded(false); + + localStorage.theme = theme; + document.documentElement.classList.toggle('dark', theme === 'dark'); + } + return (