add Ukraine banner 🇺🇦

components/Header/Header.tsx

@@ -1,6 +1,7 @@
 import { memo } from "react";
 import Selfie from "../Selfie";
 import Menu from "../Menu";
+import Ukraine from "../Ukraine";
 import { styled } from "../../lib/styles/stitches.config";
 import type { ComponentProps } from "react";
 
@@ -57,12 +58,15 @@ export type HeaderProps = ComponentProps<typeof Wrapper> & {
 };
 
 const Header = ({ sticky, ...rest }: HeaderProps) => (
-  <Wrapper sticky={sticky} {...rest}>
-    <Nav>
-      <Selfie />
-      <ResponsiveMenu />
-    </Nav>
-  </Wrapper>
+  <>
+    <Ukraine />
+    <Wrapper sticky={sticky} {...rest}>
+      <Nav>
+        <Selfie />
+        <ResponsiveMenu />
+      </Nav>
+    </Wrapper>
+  </>
 );
 
 export default memo(Header);

components/Ukraine/Ukraine.tsx

@@ -0,0 +1,59 @@
+import { styled } from "../../lib/styles/stitches.config";
+import type { ComponentProps } from "react";
+
+const Banner = styled("div", {
+  backgroundColor: "$backgroundInner",
+  borderBottom: "1px solid $kindaLight",
+
+  // light-dark theme switch fading
+  transition: "background 0.25s ease, border 0.25s ease",
+
+  "@medium": {
+    fontSize: "0.9em",
+  },
+});
+
+const Text = styled("span", {});
+
+const Link = styled("a", {
+  display: "block",
+  width: "100%",
+  padding: "0.5em 0",
+  color: "$text",
+  fontWeight: 500,
+  letterSpacing: "0.025em",
+  textAlign: "center",
+  textDecoration: "none",
+
+  "&:hover": {
+    [`& ${Text}`]: {
+      color: "transparent",
+      // blue to yellow gradient:
+      // https://www.joshwcomeau.com/gradient-generator?colors=465ea2|facc15&angle=90&colorMode=lrgb&precision=1&easingCurve=0.34871381110583766|1.05|0.4604935927859516|0.8607688656858092
+      backgroundImage:
+        "linear-gradient(90deg, hsl(224deg 40% 45%) 18%, hsl(38deg 32% 59%) 68%, hsl(48deg 96% 53%) 100%)",
+      backgroundClip: "text",
+    },
+  },
+});
+
+const Flag = styled("span", {
+  marginRight: "0.4em",
+  fontSize: "1.75em",
+  verticalAlign: "-0.15em",
+});
+
+export type HeadingProps = ComponentProps<typeof Banner>;
+
+const Ukraine = ({ ...rest }) => {
+  return (
+    <Banner {...rest}>
+      <Link href="https://helpukrainewin.org/" target="_blank" rel="noopener noreferrer">
+        <Flag>🇺🇦</Flag>
+        <Text>#StandWithUkraine</Text>
+      </Link>
+    </Banner>
+  );
+};
+
+export default Ukraine;

components/Ukraine/index.ts

@@ -0,0 +1,2 @@
+export * from "./Ukraine";
+export { default } from "./Ukraine";

package.json

@@ -90,7 +90,7 @@
     "eslint-config-prettier": "~8.5.0",
     "eslint-plugin-mdx": "~1.16.0",
     "eslint-plugin-prettier": "~4.0.0",
-    "lint-staged": "^12.3.6",
+    "lint-staged": "^12.3.7",
     "prettier": "^2.6.0",
     "simple-git-hooks": "^2.7.0",
     "terser": "^5.12.1",

yarn.lock

@@ -2408,9 +2408,9 @@ date-fns@^2.28.0:
   integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
 
 debug@4, debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.3:
-  version "4.3.3"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664"
-  integrity sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
   dependencies:
     ms "2.1.2"
 
@@ -2544,9 +2544,9 @@ eastasianwidth@^0.2.0:
   integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
 
 electron-to-chromium@^1.4.84:
-  version "1.4.85"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.85.tgz#a3666ba42147026b9f34d4d8d4caf0740e80f751"
-  integrity sha512-K9AsQ41WS2bjZUFpRWfvaS4RjEcRCamEkBJN1Z1TQILBfP1H8QnJ9ti0wiLiMv0sRjX3EHKzgs9jDnmGFx2jXg==
+  version "1.4.86"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.86.tgz#90fe4a9787f48d6522957213408e08a8126b2ebc"
+  integrity sha512-EVTZ+igi8x63pK4bPuA95PXIs2b2Cowi3WQwI9f9qManLiZJOD1Lash1J3W4TvvcUCcIR4o/rgi9o8UicXSO+w==
 
 emoji-regex@^8.0.0:
   version "8.0.0"
@@ -3794,10 +3794,10 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
-lint-staged@^12.3.6:
-  version "12.3.6"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-12.3.6.tgz#7b999ebe041c07f241537a17c49969027b4d26f0"
-  integrity sha512-tVNyl/HsAnplKh4oaoRNzyZLm0PE/6VaBUXvd/gA9zhYCC/+ivZwiwpoT6jOxcLzuIOjP19wW+mfOi7/Bw4c1A==
+lint-staged@^12.3.7:
+  version "12.3.7"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-12.3.7.tgz#ad0e2014302f704f9cf2c0ebdb97ac63d0f17be0"
+  integrity sha512-/S4D726e2GIsDVWIk1XGvheCaDm1SJRQp8efamZFWJxQMVEbOwSysp7xb49Oo73KYCdy97mIWinhlxcoNqIfIQ==
   dependencies:
     cli-truncate "^3.1.0"
     colorette "^2.0.16"