add stylelint

components/CodeBlock/CodeBlock.module.css

@@ -36,6 +36,7 @@
 .codeBlock.highlight :global(.token.cdata) {
   color: var(--colors-codeComment);
 }
+
 .codeBlock.highlight :global(.token.delimiter),
 .codeBlock.highlight :global(.token.boolean),
 .codeBlock.highlight :global(.token.keyword),
@@ -46,11 +47,13 @@
 .codeBlock.highlight :global(.token.url) {
   color: var(--colors-codeKeyword);
 }
+
 .codeBlock.highlight :global(.token.tag),
 .codeBlock.highlight :global(.token.builtin),
 .codeBlock.highlight :global(.token.regex) {
   color: var(--colors-codeNamespace);
 }
+
 .codeBlock.highlight :global(.token.property),
 .codeBlock.highlight :global(.token.constant),
 .codeBlock.highlight :global(.token.variable),
@@ -60,29 +63,37 @@
 .codeBlock.highlight :global(.token.char) {
   color: var(--colors-codeVariable);
 }
+
 .codeBlock.highlight :global(.token.literal-property),
 .codeBlock.highlight :global(.token.attr-name) {
   color: var(--colors-codeAttribute);
 }
+
 .codeBlock.highlight :global(.token.function) {
   color: var(--colors-codeLiteral);
 }
+
 .codeBlock.highlight :global(.token.tag .punctuation),
 .codeBlock.highlight :global(.token.attr-value .punctuation) {
   color: var(--colors-codePunctuation);
 }
+
 .codeBlock.highlight :global(.token.inserted) {
   color: var(--colors-codeAddition);
 }
+
 .codeBlock.highlight :global(.token.deleted) {
   color: var(--colors-codeDeletion);
 }
+
 .codeBlock.highlight :global(.token.url) {
   text-decoration: underline;
 }
+
 .codeBlock.highlight :global(.token.bold) {
   font-weight: bold;
 }
+
 .codeBlock.highlight :global(.token.italic) {
   font-style: italic;
 }
@@ -91,9 +102,21 @@
   position: absolute;
   top: 0;
   right: 0;
-  padding: 0.65em;
-  background-color: var(--colors-backgroundInner);
+  height: 3em;
+  width: 3em;
+  color: var(--colors-mediumDark);
   border: 1px solid var(--colors-kindaLight);
   border-top-right-radius: var(--radii-corner);
   border-bottom-left-radius: var(--radii-corner);
+  background-color: var(--colors-backgroundHeader);
+  backdrop-filter: saturate(180%) blur(5px);
+}
+
+.cornerCopyButton > svg {
+  vertical-align: middle;
+}
+
+.cornerCopyButton:hover,
+.cornerCopyButton:focus-visible {
+  color: var(--colors-link);
 }

components/CopyButton/CopyButton.module.css

@@ -1,20 +0,0 @@
-.button {
-  color: var(--colors-mediumDark);
-  line-height: 1px;
-  cursor: pointer;
-}
-
-.button:hover,
-.button:focus-visible {
-  color: var(--colors-link);
-}
-
-.button.copied {
-  color: var(--colors-success) !important;
-}
-
-.icon {
-  width: 1.25em;
-  height: 1.25em;
-  vertical-align: -0.3em;
-}

components/CopyButton/CopyButton.tsx

@@ -3,24 +3,18 @@
 import { forwardRef, useState, useEffect } from "react";
 import innerText from "react-innertext";
 import copy from "copy-to-clipboard";
-import clsx from "clsx";
 import { ClipboardIcon, CheckIcon } from "lucide-react";
-import type { ReactNode, Ref, ComponentPropsWithoutRef, ElementRef, MouseEventHandler } from "react";
-
-import styles from "./CopyButton.module.css";
+import type { ReactNode, Ref, ComponentPropsWithoutRef, ComponentRef, MouseEventHandler } from "react";
 
 export type CopyButtonProps = ComponentPropsWithoutRef<"button"> & {
   source: string | ReactNode;
   timeout?: number;
 };
 
-const CopyButton = (
-  { source, timeout = 2000, className, ...rest }: CopyButtonProps,
-  ref: Ref<ElementRef<"button">>
-) => {
+const CopyButton = ({ source, timeout = 2000, style, ...rest }: CopyButtonProps, ref: Ref<ComponentRef<"button">>) => {
   const [copied, setCopied] = useState(false);
 
-  const handleCopy: MouseEventHandler<ElementRef<"button">> = (e) => {
+  const handleCopy: MouseEventHandler<ComponentRef<"button">> = (e) => {
     // prevent unintentional double-clicks by unfocusing button
     e.currentTarget.blur();
 
@@ -54,13 +48,13 @@ const CopyButton = (
       aria-label="Copy to clipboard"
       onClick={handleCopy}
       disabled={copied}
-      className={clsx(styles.button, copied && styles.copied, className)}
+      style={{ cursor: copied ? "default" : "pointer", ...style }}
       {...rest}
     >
       {copied ? (
-        <CheckIcon size="1.25em" className={styles.icon} />
+        <CheckIcon size="1.25em" style={{ stroke: "var(--colors-success)" }} />
       ) : (
-        <ClipboardIcon size="1.25em" className={styles.icon} />
+        <ClipboardIcon size="1.25em" />
       )}
     </button>
   );

components/Footer/Footer.module.css

@@ -66,6 +66,7 @@
   8% {
     transform: scale(1);
   }
+
   /* pause for ~9 out of 10 seconds */
   100% {
     transform: scale(1);

components/Menu/Menu.tsx

@@ -6,7 +6,6 @@ import MenuItem from "../MenuItem";
 import ThemeToggle from "../ThemeToggle";
 import { menuItems } from "../../lib/config/menu";
 import type { ComponentPropsWithoutRef } from "react";
-import type { LucideIcon } from "lucide-react";
 
 import styles from "./Menu.module.css";
 
@@ -29,7 +28,10 @@ const Menu = ({ className, ...rest }: MenuProps) => {
       })}
 
       <li className={styles.menuItem}>
-        <MenuItem icon={ThemeToggle as LucideIcon} />
+        <MenuItem
+          // @ts-expect-error
+          icon={ThemeToggle}
+        />
       </li>
     </ul>
   );

components/YouTube/YouTube.module.css

@@ -1,3 +1,4 @@
+/* stylelint-disable-next-line selector-type-no-unknown */
 .wrapper lite-youtube {
   margin: 0 auto;
 }