Skip to content

Commit

Permalink
🐛 dark mode transition (#280)
Browse files Browse the repository at this point in the history 
* dark mode transition.

* bump version.
  • Loading branch information
@bradgarropy
bradgarropy authored Feb 12, 2022
1 parent 442c984 commit 0bba32e
Show file tree
Hide file tree
Showing 24 changed files with 50 additions and 36 deletions.
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "bradgarropy.com",
"version": "5.1.0",
"version": "5.1.1",
"description": "🏠 my home on the web",
"keywords": [
"javascript",
Expand Down
2 changes: 1 addition & 1 deletion src/components/ColorTheme/ColorTheme.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.themeToggle {
cursor: pointer;
border: none;
background: none;
background-color: transparent;
padding: 0rem;
height: 1.5rem;
}
6 changes: 5 additions & 1 deletion src/components/Hero/Hero.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@

.heroImage {
transition-property: transform, border, background-color;
transition-duration: 300ms;
transition-duration: var(--transitionDuration);
border-radius: 100%;
border: 7px solid var(--text) !important;
background-color: var(--text);
Expand All @@ -44,6 +44,8 @@
letter-spacing: -0.2rem;
font-weight: 900;
font-size: 3rem;
transition-property: color;
transition-duration: var(--transitionDuration);
}

@media (max-width: 700px) {
Expand Down Expand Up @@ -74,6 +76,8 @@
margin: 0rem;
font-weight: 500;
font-family: "Open Sans", sans-serif;
transition-property: color;
transition-duration: var(--transitionDuration);
}

.description > h2 {
Expand Down
4 changes: 2 additions & 2 deletions src/components/LatestVideos/LatestVideos.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@

.thumbnail {
transition-property: box-shadow;
transition-duration: 300ms;
transition-duration: var(--transitionDuration);
box-sizing: border-box;
border-radius: 0.3rem;
border-radius: var(--borderRadius);
border: 3px solid var(--text) !important;
background-color: var(--text);
box-shadow: 3px 3px 0 var(--text);
Expand Down
6 changes: 3 additions & 3 deletions src/components/LinkButton/LinkButton.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
.linkButton {
transition-property: color, box-shadow;
transition-duration: 300ms;
transition-duration: var(--transitionDuration);
display: inline-block;
background: var(--white);
background-color: var(--white);
color: var(--black);
padding: 0.5rem 0.75rem;
border-radius: 0.3rem;
border-radius: var(--borderRadius);
border: 2px solid var(--black);
box-shadow: 3px 3px 0 var(--text);
margin-bottom: 5px;
Expand Down
2 changes: 2 additions & 0 deletions src/components/Logo/Logo.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,6 @@
display: inline-block;
width: 50px;
fill: var(--text);
transition-property: fill;
transition-duration: var(--transitionDuration);
}
2 changes: 1 addition & 1 deletion src/components/MobileNavigation/MobileNavigation.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.mobileNavigation {
background: var(--background);
background-color: var(--background);
position: fixed;
top: 0;
right: 0;
Expand Down
4 changes: 3 additions & 1 deletion src/components/Navigation/Navigation.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
grid-auto-flow: column;
column-gap: 1.25rem;
color: var(--text);
transition-property: color;
transition-duration: var(--transitionDuration);
}

@media (max-width: 800px) {
Expand All @@ -13,7 +15,7 @@

.link {
transition-property: color;
transition-duration: 300ms;
transition-duration: var(--transitionDuration);
color: var(--text);
}

Expand Down
4 changes: 2 additions & 2 deletions src/components/Podcast/Podcast.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@

.host {
transition-property: color, text-shadow;
transition-duration: 300ms;
transition-duration: var(--transitionDuration);
color: var(--text);
}

Expand All @@ -61,7 +61,7 @@

.coverImage {
transition-property: box-shadow;
transition-duration: 300ms;
transition-duration: var(--transitionDuration);
box-sizing: border-box;
border: 2px solid var(--text) !important;
background-color: var(--text);
Expand Down
2 changes: 1 addition & 1 deletion src/components/PostMeta/PostMeta.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

.postMeta a {
transition-property: color;
transition-duration: 300ms;
transition-duration: var(--transitionDuration);
color: var(--text);
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/PostSearchBar/PostSearchBar.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
font-size: 1rem;
font-family: "Open Sans", sans-serif;
border: 3px solid var(--black);
border-radius: 0.3rem;
border-radius: var(--borderRadius);
box-shadow: 3px 3px 0 var(--text);
color: var(--black);
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/PostTitle/PostTitle.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@

.postTitle a {
transition-property: color;
transition-duration: 300ms;
transition-duration: var(--transitionDuration);
color: var(--text);
}

Expand Down
4 changes: 2 additions & 2 deletions src/components/Project/Project.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
.project {
transition-property: color, box-shadow;
transition-duration: 300ms;
transition-duration: var(--transitionDuration);
padding: 1.125rem;
border-radius: 0.3rem;
border-radius: var(--borderRadius);
border: 3px solid var(--text);
box-shadow: 3px 3px 0 var(--text);
display: grid;
Expand Down
4 changes: 2 additions & 2 deletions src/components/Section/Section.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.title {
transition-property: text-shadow;
transition-duration: 300ms;
transition-property: text-shadow, color;
transition-duration: var(--transitionDuration);
font-size: clamp(3rem, 10vw, 4.5rem);
font-weight: 900;
letter-spacing: -0.2rem;
Expand Down
2 changes: 1 addition & 1 deletion src/components/SocialLink/SocialLink.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.icon {
transition-property: color;
transition-duration: 300ms;
transition-duration: var(--transitionDuration);
font-size: 2.5rem;
color: var(--text);
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Sponsors/Sponsors.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@

.avatar {
transition-property: transform, border, background-color;
transition-duration: 300ms;
transition-duration: var(--transitionDuration);
width: 6rem;
margin: 0rem;
border-radius: 100%;
Expand Down
4 changes: 2 additions & 2 deletions src/components/Testimonial/Testimonial.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
.testimonial {
transition-property: color, box-shadow;
transition-duration: 300ms;
transition-duration: var(--transitionDuration);
padding: 2rem;
border-radius: 0.3rem;
border-radius: var(--borderRadius);
border: 3px solid var(--text);
box-shadow: 3px 3px 0 var(--text);
display: grid;
Expand Down
6 changes: 3 additions & 3 deletions src/styles/Button.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
.button {
transition-property: box-shadow;
transition-duration: 300ms;
transition-duration: var(--transitionDuration);
display: inline-block;
background: var(--darkPurple);
background-color: var(--darkPurple);
color: var(--white);
padding: 0.5rem 0.75rem;
border-radius: 0.3rem;
border-radius: var(--borderRadius);
border: 2px solid var(--black);
box-shadow: 3px 3px 0 var(--text);
margin-bottom: 5px;
Expand Down
4 changes: 2 additions & 2 deletions src/styles/Code.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
.code :global(code:not(.grvsc-code)) {
background: #2d2b55;
background-color: #2d2b55;
color: #fad000;
padding: 0.25rem 0.5rem;
border-radius: 0.3rem;
border-radius: var(--borderRadius);
}

.code > :global(pre > code.grvsc-code) {
Expand Down
4 changes: 2 additions & 2 deletions src/styles/Embeds.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
height: 500px;
border: none;
margin: 1.75rem auto;
border-radius: 0.3rem;
border-radius: var(--borderRadius);
overflow: hidden;
}

Expand All @@ -18,7 +18,7 @@
position: relative;
width: 100%;
margin: 1.75rem auto;
border-radius: 0.3rem;
border-radius: var(--borderRadius);
}

.embeds :global(.twitch::after),
Expand Down
2 changes: 1 addition & 1 deletion src/styles/Input.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
font-size: 1rem;
font-family: "Open Sans", sans-serif;
border: 3px solid var(--black);
border-radius: 0.3rem;
border-radius: var(--borderRadius);
box-shadow: 3px 3px 0 var(--text);
color: var(--black);
}
Expand Down
2 changes: 1 addition & 1 deletion src/styles/Link.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.fancy a:not(.heading) {
transition-property: color, box-shadow;
transition-duration: 300ms;
transition-duration: var(--transitionDuration);
color: var(--text);
box-shadow: inset 0 -2px var(--primary);
}
Expand Down
10 changes: 8 additions & 2 deletions src/styles/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@
--grvsc-line-highlighted-background-color: #c792ea66;
--grvsc-line-highlighted-border-color: var(--primary);
--grvsc-line-highlighted-border-width: 4px;

/* design tokens */
--transitionDuration: 300ms;
--borderRadius: 0.3rem;
}

html {
Expand All @@ -25,13 +29,15 @@ html {
}

body {
background: var(--background);
background-color: var(--background);
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 16px;
overflow-y: scroll;
margin: 0rem;
padding: 0rem;
transition-property: background-color;
transition-duration: var(--transitionDuration);
}

h1,
Expand Down Expand Up @@ -72,7 +78,7 @@ img {
display: block;
max-width: 100%;
margin: 0rem auto;
border-radius: 0.3rem;
border-radius: var(--borderRadius);
}

blockquote {
Expand Down

1 comment on commit 0bba32e

@vercel
Copy link

@vercel vercel bot commented on 0bba32e Feb 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.