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/Menu/Menu.module.css b/components/Menu/Menu.module.css index 5911ae64..5e8d0bb7 100644 --- a/components/Menu/Menu.module.css +++ b/components/Menu/Menu.module.css @@ -14,13 +14,10 @@ display: inline-flex; align-items: center; color: var(--medium-dark); - background: none; - padding-bottom: 0; } .menu li .link:hover { color: var(--link); - transition: none; } .menu li .icon { diff --git a/components/Name/Name.module.css b/components/Name/Name.module.css index 037d182a..cec82a2e 100644 --- a/components/Name/Name.module.css +++ b/components/Name/Name.module.css @@ -2,13 +2,10 @@ display: inline-flex; align-items: center; color: var(--medium-dark); - background: none; - padding-bottom: 0; } .link:hover { color: var(--link); - transition: none; } .selfie { diff --git a/components/NoteMeta/NoteMeta.module.css b/components/NoteMeta/NoteMeta.module.css index b9ba3a5b..64d52ff5 100644 --- a/components/NoteMeta/NoteMeta.module.css +++ b/components/NoteMeta/NoteMeta.module.css @@ -8,9 +8,7 @@ } .meta a { - color: var(--medium); - background: none; - padding-bottom: 0; + color: inherit; } .meta > div { diff --git a/components/NoteTitle/NoteTitle.module.css b/components/NoteTitle/NoteTitle.module.css index f7d3228e..ba0a7a8f 100644 --- a/components/NoteTitle/NoteTitle.module.css +++ b/components/NoteTitle/NoteTitle.module.css @@ -6,9 +6,7 @@ } .title a { - background: none; - padding-bottom: 0; - color: var(--text); + color: inherit; } .title code { diff --git a/components/NotesList/NotesList.module.css b/components/NotesList/NotesList.module.css index 0b391c6c..d910d821 100644 --- a/components/NotesList/NotesList.module.css +++ b/components/NotesList/NotesList.module.css @@ -1,4 +1,6 @@ .section { + font-size: 1.1em; + line-height: 1.1; margin: 2.4em 0; } diff --git a/components/OctocatLink/OctocatLink.module.css b/components/OctocatLink/OctocatLink.module.css index c1e10f70..bdf5a575 100644 --- a/components/OctocatLink/OctocatLink.module.css +++ b/components/OctocatLink/OctocatLink.module.css @@ -1,10 +1,8 @@ .link { margin: 0 0.4em; - color: var(--text); - background: none !important; - padding-bottom: 0; + color: var(--text) !important; } .link:hover { - color: var(--link); + color: var(--link) !important; } diff --git a/components/OctocatLink/OctocatLink.tsx b/components/OctocatLink/OctocatLink.tsx index 0b4fcff2..b9ace638 100644 --- a/components/OctocatLink/OctocatLink.tsx +++ b/components/OctocatLink/OctocatLink.tsx @@ -9,7 +9,12 @@ type Props = { }; const OctocatLink = ({ repo, className }: Props) => ( - +