🌓 transition (#271)

* remove global transition. * bump version. Co-authored-by: Brad Garropy <[email protected]>
bradgarropy · Jan 31, 2022 · f0de7f3 · f0de7f3 · vercel · Jan 31, 2022
1 parent 1b6527a
commit f0de7f3
Show file tree

Hide file tree

Showing 30 changed files with 90 additions and 74 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "bradgarropy.com",
-    "version": "5.0.2",
+    "version": "5.0.3",
     "description": "🏠 my home on the web",
     "keywords": [
         "javascript",

diff --git a/src/components/Heading/Heading.module.css b/src/components/Heading/Heading.module.css
@@ -13,15 +13,11 @@
     display: flex;
     box-shadow: none !important;
     height: 100%;
-    padding-right: 1.25rem;
+    padding: 0rem 1.25rem;
     visibility: hidden;
     color: var(--text);
 }
 
 .icon {
     width: 1.25rem;
 }
-
-.icon:hover {
-    color: var(--primary);
-}
diff --git a/src/components/Heading/Heading.tsx b/src/components/Heading/Heading.tsx
@@ -1,9 +1,8 @@
+import HeadingStyles from "components/Heading/Heading.module.css"
 import Icon from "components/Icon"
 import {FC} from "react"
 import slugify from "slugify"
 
-import HeadingStyles from "./Heading.module.css"
-
 type HeadingProps = {
     level: 1 | 2 | 3
     id?: string

diff --git a/src/components/Hero/Hero.module.css b/src/components/Hero/Hero.module.css
@@ -26,6 +26,8 @@
 }
 
 .heroImage {
+    transition-property: transform, border, background-color;
+    transition-duration: 300ms;
     border-radius: 100%;
     border: 7px solid var(--text) !important;
     background-color: var(--text);

diff --git a/src/components/LatestVideos/LatestVideos.module.css b/src/components/LatestVideos/LatestVideos.module.css
@@ -17,6 +17,8 @@
 }
 
 .thumbnail {
+    transition-property: box-shadow;
+    transition-duration: 300ms;
     box-sizing: border-box;
     border-radius: 0.3rem;
     border: 3px solid var(--text) !important;

diff --git a/src/components/LatestVideos/LatestVideos.tsx b/src/components/LatestVideos/LatestVideos.tsx
@@ -3,28 +3,28 @@ import Image from "next/image"
 import {FC} from "react"
 import {Video} from "types/video"
 
-import styles from "./LatestVideos.module.css"
+import LatestVideosStyles from "./LatestVideos.module.css"
 
 type LatestVideosProps = {
     latestVideos: Video[]
 }
 
 const LatestVideos: FC<LatestVideosProps> = ({latestVideos}) => {
     return (
-        <div className={styles.latestVideos}>
+        <div className={LatestVideosStyles.latestVideos}>
             {latestVideos.map(latestVideo => {
                 return (
                     <Link
                         key={latestVideo.id}
                         to={`https://www.youtube.com/watch?v=${latestVideo.id}`}
-                        className={styles.thumbnailLink}
+                        className={LatestVideosStyles.thumbnailLink}
                     >
                         <Image
                             src={latestVideo.thumbnail}
                             alt={latestVideo.title}
                             width="1280"
                             height="720"
-                            className={styles.thumbnail}
+                            className={LatestVideosStyles.thumbnail}
                         />
                     </Link>
                 )

diff --git a/src/components/LinkButton/LinkButton.module.css b/src/components/LinkButton/LinkButton.module.css
@@ -1,4 +1,6 @@
 .linkButton {
+    transition-property: color, box-shadow;
+    transition-duration: 300ms;
     display: inline-block;
     background: var(--white);
     color: var(--black);

diff --git a/src/components/LinkButton/LinkButton.tsx b/src/components/LinkButton/LinkButton.tsx
@@ -1,9 +1,8 @@
 import Link from "@bradgarropy/next-link"
 import classnames from "classnames"
+import LinkButtonStyles from "components/LinkButton/LinkButton.module.css"
 import {FC} from "react"
 
-import styles from "./LinkButton.module.css"
-
 type LinkButtonProps = {
     to: string
     reverse?: boolean
@@ -16,9 +15,9 @@ const LinkButton: FC<LinkButtonProps> = ({
     disabled = false,
     ...props
 }) => {
-    const classes = classnames(styles.linkButton, {
-        [styles.reverse]: reverse,
-        [styles.disabled]: disabled,
+    const classes = classnames(LinkButtonStyles.linkButton, {
+        [LinkButtonStyles.reverse]: reverse,
+        [LinkButtonStyles.disabled]: disabled,
     })
 
     if (disabled) {

diff --git a/src/components/Navigation/Navigation.module.css b/src/components/Navigation/Navigation.module.css
@@ -12,6 +12,8 @@
 }
 
 .link {
+    transition-property: color;
+    transition-duration: 300ms;
     color: var(--text);
 }
 

diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx
@@ -1,36 +1,36 @@
 import Link from "@bradgarropy/next-link"
 import {FC} from "react"
 
-import styles from "./Navigation.module.css"
+import NavigationStyles from "./Navigation.module.css"
 
 const Navigation: FC = () => {
     return (
-        <nav className={styles.navigation}>
-            <Link className={styles.link} to="/blog">
+        <nav className={NavigationStyles.navigation}>
+            <Link className={NavigationStyles.link} to="/blog">
                 blog
             </Link>
 
             <span>|</span>
 
-            <Link className={styles.link} to="/now">
+            <Link className={NavigationStyles.link} to="/now">
                 now
             </Link>
 
             <span>|</span>
 
-            <Link className={styles.link} to="/uses">
+            <Link className={NavigationStyles.link} to="/uses">
                 uses
             </Link>
 
             <span>|</span>
 
-            <Link className={styles.link} to="/hire-me">
+            <Link className={NavigationStyles.link} to="/hire-me">
                 hire me
             </Link>
 
             <span>|</span>
 
-            <Link className={styles.link} to="/contact">
+            <Link className={NavigationStyles.link} to="/contact">
                 contact
             </Link>
         </nav>

diff --git a/src/components/Newsletter/Newsletter.tsx b/src/components/Newsletter/Newsletter.tsx
@@ -1,10 +1,9 @@
 import {post} from "@bradgarropy/http"
+import NewsletterStyles from "components/Newsletter/Newsletter.module.css"
 import {FC, useState} from "react"
 import ButtonStyles from "styles/Button.module.css"
 import InputStyles from "styles/Input.module.css"
 
-import styles from "./Newsletter.module.css"
-
 const Newsletter: FC = () => {
     const [email, setEmail] = useState("")
     const [subscribed, setSubscribed] = useState(false)
@@ -27,11 +26,11 @@ const Newsletter: FC = () => {
 
     return (
         <div>
-            <p className={styles.description}>
+            <p className={NewsletterStyles.description}>
                 💻 side projects | 📰 web dev news | ⚡ tech opinions
             </p>
 
-            <form className={styles.newsletter} onSubmit={onSubmit}>
+            <form className={NewsletterStyles.newsletter} onSubmit={onSubmit}>
                 <input
                     className={InputStyles.input}
                     placeholder="[email protected]"

diff --git a/src/components/Podcast/Podcast.module.css b/src/components/Podcast/Podcast.module.css
@@ -38,6 +38,8 @@
 }
 
 .host {
+    transition-property: color, text-shadow;
+    transition-duration: 300ms;
     color: var(--text);
 }
 
@@ -58,6 +60,8 @@
 }
 
 .coverImage {
+    transition-property: box-shadow;
+    transition-duration: 300ms;
     box-sizing: border-box;
     border: 2px solid var(--text) !important;
     background-color: var(--text);

diff --git a/src/components/Podcast/Podcast.tsx b/src/components/Podcast/Podcast.tsx
@@ -1,33 +1,32 @@
 import Link from "@bradgarropy/next-link"
+import PodcastStyles from "components/Podcast/Podcast.module.css"
 import Image from "next/image"
 import {FC} from "react"
 import {Podcast as PodcastType} from "types/podcast"
 
-import styles from "./Podcast.module.css"
-
 type PodcastProps = {
     podcast: PodcastType
 }
 
 const Podcast: FC<PodcastProps> = ({podcast}) => {
     return (
-        <div className={styles.podcast}>
-            <Link to={podcast.link} className={styles.podcastLink}>
+        <div className={PodcastStyles.podcast}>
+            <Link to={podcast.link} className={PodcastStyles.podcastLink}>
                 <Image
                     src={podcast.image}
                     alt={podcast.title}
                     width={3000}
                     height={3000}
-                    className={styles.coverImage}
+                    className={PodcastStyles.coverImage}
                 />
             </Link>
 
-            <div className={styles.description}>
+            <div className={PodcastStyles.description}>
                 <span>a weekly podcast about web development hosted by</span>
 
-                <div className={styles.hosts}>
+                <div className={PodcastStyles.hosts}>
                     <Link
-                        className={styles.host}
+                        className={PodcastStyles.host}
                         to="https://twitter.com/bradgarropy"
                     >
                         brad garropy
@@ -36,7 +35,7 @@ const Podcast: FC<PodcastProps> = ({podcast}) => {
                     <span>/</span>
 
                     <Link
-                        className={styles.host}
+                        className={PodcastStyles.host}
                         to="https://twitter.com/RGottleber"
                     >
                         richard gottleber

diff --git a/src/components/PostMeta/PostMeta.module.css b/src/components/PostMeta/PostMeta.module.css
@@ -4,6 +4,8 @@
 }
 
 .postMeta a {
+    transition-property: color;
+    transition-duration: 300ms;
     color: var(--text);
 }
 

diff --git a/src/components/PostMeta/PostMeta.tsx b/src/components/PostMeta/PostMeta.tsx
@@ -1,17 +1,16 @@
 import Link from "@bradgarropy/next-link"
+import PostMetaStyles from "components/PostMeta/PostMeta.module.css"
 import {FC} from "react"
 import {Post} from "types/post"
 import {formatDate} from "utils/date"
 
-import styles from "./PostMeta.module.css"
-
 type PostMetaProps = Pick<Post["frontmatter"], "date" | "topic">
 
 const PostMeta: FC<PostMetaProps> = ({date, topic}) => {
     const {name} = topic
 
     return (
-        <div className={styles.postMeta}>
+        <div className={PostMetaStyles.postMeta}>
             <p>
                 {formatDate(date)} in <Link to={`/topic/${name}`}>#{name}</Link>
             </p>

diff --git a/src/components/PostTitle/PostTitle.module.css b/src/components/PostTitle/PostTitle.module.css
@@ -12,6 +12,8 @@
 }
 
 .postTitle a {
+    transition-property: color;
+    transition-duration: 300ms;
     color: var(--text);
 }
 

diff --git a/src/components/PostTitle/PostTitle.tsx b/src/components/PostTitle/PostTitle.tsx
@@ -2,7 +2,7 @@ import Link from "@bradgarropy/next-link"
 import {FC} from "react"
 import {Post} from "types/post"
 
-import styles from "./PostTitle.module.css"
+import PostStyles from "./PostTitle.module.css"
 
 type PostTitleProps = {
     title: Post["frontmatter"]["title"]
@@ -11,7 +11,7 @@ type PostTitleProps = {
 
 const PostTitle: FC<PostTitleProps> = ({title, slug}) => {
     return (
-        <div className={styles.postTitle}>
+        <div className={PostStyles.postTitle}>
             <h1>{slug ? <Link to={`/blog/${slug}`}>{title}</Link> : title}</h1>
         </div>
     )

diff --git a/src/components/Project/Project.module.css b/src/components/Project/Project.module.css
@@ -1,4 +1,6 @@
 .project {
+    transition-property: color, box-shadow;
+    transition-duration: 300ms;
     padding: 1.125rem;
     border-radius: 0.3rem;
     border: 3px solid var(--text);

diff --git a/src/components/Project/Project.tsx b/src/components/Project/Project.tsx
@@ -1,25 +1,30 @@
 import Link from "@bradgarropy/next-link"
+import ProjectStyles from "components/Project/Project.module.css"
 import ProjectTech from "components/ProjectTech"
 import {FC} from "react"
 import {Project as ProjectType} from "types/project"
 
-import styles from "./Project.module.css"
-
 type ProjectProps = {
     project: ProjectType
 }
 
 const Project: FC<ProjectProps> = ({project}) => {
     return (
-        <Link className={styles.project} to={`${project.url}#readme`}>
+        <Link className={ProjectStyles.project} to={`${project.url}#readme`}>
             <div>
-                <h3 className={styles.name}>{project.name}</h3>
-                <p className={styles.description}>{project.description}</p>
+                <h3 className={ProjectStyles.name}>{project.name}</h3>
+
+                <p className={ProjectStyles.description}>
+                    {project.description}
+                </p>
             </div>
 
-            <div className={styles.bottom}>
+            <div className={ProjectStyles.bottom}>
                 <ProjectTech project={project} />
-                <span className={styles.stars}>{`${project.stars}⭐`}</span>
+
+                <span
+                    className={ProjectStyles.stars}
+                >{`${project.stars}⭐`}</span>
             </div>
         </Link>
     )

diff --git a/src/components/Section/Section.module.css b/src/components/Section/Section.module.css
@@ -1,4 +1,6 @@
 .title {
+    transition-property: text-shadow;
+    transition-duration: 300ms;
     font-size: clamp(3rem, 10vw, 4.5rem);
     font-weight: 900;
     letter-spacing: -0.2rem;
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,6 +12,8 @@ @@
     }
     .link {
+        transition-property: color;
+        transition-duration: 300ms;
         color: var(--text);
     }
@@ Expand Down @@