diff --git a/components/Content/Content.module.css b/components/Content/Content.module.css index 3528a9aa..43eb1574 100644 --- a/components/Content/Content.module.css +++ b/components/Content/Content.module.css @@ -3,6 +3,28 @@ line-height: 1.7; } +.content a { + color: var(--link); + background-image: linear-gradient(var(--link-underline), var(--link-underline)); + background-position: 0% 100%; + background-repeat: no-repeat; + background-size: 0% var(--link-underline-size); + padding-bottom: var(--link-underline-size); + /* background-size is for hover animation, color & border are for theme fading: */ + transition: background-size 0.25s ease-in-out, color 0.25s ease, border 0.25s ease; +} + +.content a:hover { + background-size: 100% var(--link-underline-size); +} + +/* set an anchor's class to `no-underline` to disable all of the above */ +.content :global(a.no-underline) { + background: none; + padding-bottom: 0; + transition: none; +} + @media screen and (max-width: 768px) { .content { font-size: 0.925em; diff --git a/components/Content/Content.tsx b/components/Content/Content.tsx index 989fa80a..4ff46923 100644 --- a/components/Content/Content.tsx +++ b/components/Content/Content.tsx @@ -1,11 +1,13 @@ +import classNames from "classnames"; import type { ReactNode } from "react"; import styles from "./Content.module.css"; type Props = { children: ReactNode; + className?: string; }; -const Content = (props: Props) =>
; +const Content = ({ className, ...rest }: Props) =>
; export default Content; diff --git a/components/Footer/Footer.module.css b/components/Footer/Footer.module.css index 6ebd84eb..75b3dda8 100644 --- a/components/Footer/Footer.module.css +++ b/components/Footer/Footer.module.css @@ -8,9 +8,7 @@ } .footer a { - color: var(--medium-dark); - background: none; - padding-bottom: 0; + color: inherit; } .row { @@ -24,7 +22,7 @@ } .view_source { - padding-bottom: 2px !important; + padding-bottom: 2px; border-bottom: 1px solid; border-color: var(--light); } diff --git a/components/Heading/Heading.module.css b/components/Heading/Heading.module.css index fd930a1e..e335b7e6 100644 --- a/components/Heading/Heading.module.css +++ b/components/Heading/Heading.module.css @@ -22,17 +22,15 @@ .anchor { margin: 0 0.25em; padding: 0 0.25em; - color: var(--medium-light); + color: var(--medium-light) !important; font-weight: 300; - background: none; - transition: none; opacity: 0; /* overridden on hover */ } .anchor::before { content: "\0023"; /* pound sign `#`, done here to keep content DOM cleaner */ } .anchor:hover { - color: var(--link); + color: var(--link) !important; } /* make anchor `#` link show up on hover over the corresponding heading */ .heading:hover .anchor { diff --git a/components/Heading/Heading.tsx b/components/Heading/Heading.tsx index e3cb02ec..8c5f17b4 100644 --- a/components/Heading/Heading.tsx +++ b/components/Heading/Heading.tsx @@ -16,7 +16,7 @@ const Heading = ({ as: Component, id, className, children, ...rest }: Props) => {/* add anchor link to H2s and H3s. ID is already generated by rehype-slug. `#` character inserted via CSS. */} {id && (Component === "h2" || Component === "h3") && ( - + ); diff --git a/components/PageTitle/PageTitle.module.css b/components/PageTitle/PageTitle.module.css index aec78bfc..8bd43009 100644 --- a/components/PageTitle/PageTitle.module.css +++ b/components/PageTitle/PageTitle.module.css @@ -6,9 +6,7 @@ } .title a { - background: none; - padding-bottom: 0; - color: var(--text); + color: inherit; } @media screen and (max-width: 768px) { diff --git a/components/RepositoryCard/RepositoryCard.module.css b/components/RepositoryCard/RepositoryCard.module.css index 4f9c26fe..ae35cf40 100644 --- a/components/RepositoryCard/RepositoryCard.module.css +++ b/components/RepositoryCard/RepositoryCard.module.css @@ -34,13 +34,11 @@ } .meta_item a { - background: none; - padding-bottom: 0; - color: var(--medium); + color: inherit !important; } .meta_item a:hover { - color: var(--link); + color: var(--link) !important; } .octicon, diff --git a/components/RepositoryCard/RepositoryCard.tsx b/components/RepositoryCard/RepositoryCard.tsx index d379092a..3caeff67 100644 --- a/components/RepositoryCard/RepositoryCard.tsx +++ b/components/RepositoryCard/RepositoryCard.tsx @@ -28,6 +28,7 @@ const RepositoryCard = ({ name, url, description, language, stars, forks, update {stars > 0 && (
0 && (
( <> -

- Hi there! I'm Jake.{" "} - - - -

+ +
+

+ Hi there! I'm Jake.{" "} + + + +

-

- I'm a frontend web developer based in{" "} - - Boston - - . -

+

+ I'm a frontend web developer based in{" "} + + Boston + + . +

-

- I specialize in{" "} - - modern JS frameworks - {" "} - and{" "} - - vanilla JavaScript - {" "} - to make nifty{" "} - - JAMstack sites - {" "} - with dynamic{" "} - - Node.js - {" "} - services. But I'm fluent in non-buzzwords like{" "} - - PHP - - ,{" "} - - Ruby - - , and{" "} - - Go - {" "} - too. -

+

+ I specialize in{" "} + + modern JS frameworks + {" "} + and{" "} + + vanilla JavaScript + {" "} + to make nifty{" "} + + JAMstack sites + {" "} + with dynamic{" "} + + Node.js + {" "} + services. But I'm fluent in non-buzzwords like{" "} + + PHP + + ,{" "} + + Ruby + + , and{" "} + + Go + {" "} + too. +

-

- Whenever possible, I also apply my experience in{" "} - - application security - - ,{" "} - - serverless stacks - - , and{" "} - - DevOps automation - - . -

+

+ Whenever possible, I also apply my experience in{" "} + + application security + + ,{" "} + + serverless stacks + + , and{" "} + + DevOps automation + + . +

-

- I fell in love with{" "} - - frontend web design - {" "} - and{" "} - - backend programming - {" "} - back when my only source of income was{" "} - - - the Tooth Fairy - - - . I've improved a bit since then, I think... -

+

+ I fell in love with{" "} + + frontend web design + {" "} + and{" "} + + backend programming + {" "} + back when my only source of income was{" "} + + + the Tooth Fairy + + + . I've improved a bit since then, I think... +

-

- Over the years, some of my side projects{" "} - - have - {" "} - - been - {" "} - - featured - {" "} - - by - {" "} - - various - {" "} - - media - {" "} - - outlets - - . -

+

+ Over the years, some of my side projects{" "} + + have + {" "} + + been + {" "} + + featured + {" "} + + by + {" "} + + various + {" "} + + media + {" "} + + outlets + + . +

-

- You can find more of my work on{" "} - - GitHub - {" "} - and{" "} - - LinkedIn - - . I'm always available to connect over{" "} - - email - {" "} - - - 2B0C 9CF2 51E6 9A39 - - - ,{" "} - - Twitter - - , or{" "} - - SMS - {" "} - as well! -

+

+ You can find more of my work on{" "} + + GitHub + {" "} + and{" "} + + LinkedIn + + . I'm always available to connect over{" "} + + email + {" "} + + + 2B0C 9CF2 51E6 9A39 + + + ,{" "} + + Twitter + + , or{" "} + + SMS + {" "} + as well! +

+
+