diff --git a/components/ContactForm/ContactForm.tsx b/components/ContactForm/ContactForm.tsx index 7ce04540..b8cabae3 100644 --- a/components/ContactForm/ContactForm.tsx +++ b/components/ContactForm/ContactForm.tsx @@ -250,7 +250,7 @@ const ContactForm = ({ className }: ContactFormProps) => { Basic{" "} - + Markdown syntax {" "} is allowed here, e.g.: **bold**, _italics_, [ diff --git a/components/IFrame/IFrame.tsx b/components/IFrame/IFrame.tsx index a494f284..df379ad0 100644 --- a/components/IFrame/IFrame.tsx +++ b/components/IFrame/IFrame.tsx @@ -1,5 +1,6 @@ import { styled } from "../../lib/styles/stitches.config"; import type { ComponentProps } from "react"; +import type * as Stitches from "@stitches/react"; const RoundedIFrame = styled("iframe", { width: "100%", @@ -15,9 +16,10 @@ export type IFrameProps = ComponentProps & { width?: number; // defaults to 100% allowScripts?: boolean; noScroll?: boolean; + css?: Stitches.CSS; }; -const IFrame = ({ src, title, height, width, allowScripts, noScroll, ...rest }: IFrameProps) => ( +const IFrame = ({ src, title, height, width, allowScripts, noScroll, css, ...rest }: IFrameProps) => ( diff --git a/components/Loading/Loading.tsx b/components/Loading/Loading.tsx index 8e8dc9e1..078fd97e 100644 --- a/components/Loading/Loading.tsx +++ b/components/Loading/Loading.tsx @@ -1,5 +1,6 @@ import { memo } from "react"; import { styled, keyframes } from "../../lib/styles/stitches.config"; +import type * as Stitches from "@stitches/react"; const pulse = keyframes({ "0%, 80%, 100%": { @@ -26,10 +27,11 @@ export type LoadingProps = { width: number; // of entire container, in pixels boxes?: number; // total number of boxes (default: 3) timing?: number; // staggered timing between each box's pulse, in seconds (default: 0.1s) + css?: Stitches.CSS; className?: string; }; -const Loading = ({ width, boxes = 3, timing = 0.1, className }: LoadingProps) => { +const Loading = ({ width, boxes = 3, timing = 0.1, css, className }: LoadingProps) => { // each box is just an empty div const divs = []; @@ -51,9 +53,10 @@ const Loading = ({ width, boxes = 3, timing = 0.1, className }: LoadingProps) => return ( {divs} diff --git a/pages/hillary.tsx b/pages/hillary.tsx index 81bc633d..46a4a271 100644 --- a/pages/hillary.tsx +++ b/pages/hillary.tsx @@ -38,15 +38,15 @@ const Hillary = () => ( Video is property of{" "} - + Hillary for America , the{" "} - + Democratic National Committee , and{" "} - + CNN / WarnerMedia . © 2016. diff --git a/pages/index.tsx b/pages/index.tsx index 4d23ec20..81ba731b 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,6 +1,7 @@ import Content from "../components/Content/Content"; import Link, { CustomLinkProps } from "../components/Link/Link"; import { styled, keyframes, darkTheme } from "../lib/styles/stitches.config"; +import type * as Stitches from "@stitches/react"; const Wrapper = styled(Content, { fontSize: "1em", @@ -10,26 +11,28 @@ const Wrapper = styled(Content, { const ColorfulLink = ({ lightColor, darkColor, + css, ...rest }: CustomLinkProps & { lightColor: string; darkColor: string; + css?: Stitches.CSS; }) => { return ( - <> - - + [`.${darkTheme} &`]: { + color: darkColor, + backgroundGradientHack: { color: darkColor }, + }, + + ...css, + }} + {...rest} + /> ); }; @@ -330,7 +333,7 @@ const Index = () => ( title="My Public Key" lightColor="#757575" darkColor="#959595" - style={{ background: "none" }} + css={{ background: "none !important" }} forceNewWindow > 🔐 2B0C 9CF2 51E6 9A39 diff --git a/pages/leo.tsx b/pages/leo.tsx index 85e843bd..efb3f11d 100644 --- a/pages/leo.tsx +++ b/pages/leo.tsx @@ -39,11 +39,11 @@ const Leo = () => ( Video is property of{" "} - + G4techTV Canada {" "} &{" "} - + Leo Laporte . © 2007 G4 Media, Inc.