Fix light/dark mode transition for projects section
This commit is contained in:
parent
ff21444fed
commit
4289a373a1
1 changed files with 28 additions and 1 deletions
29
index.css
29
index.css
|
@ -257,11 +257,15 @@ body.light-mode .home-container a:hover {
|
|||
align-items: center;
|
||||
color: rgb(216, 216, 216);
|
||||
}
|
||||
body.light-mode .projects-container {
|
||||
color: rgb(216, 216, 216);
|
||||
}
|
||||
.projects-container h1 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
color: rgb(216, 216, 216);
|
||||
}
|
||||
body.light-mode .projects-container {
|
||||
body.light-mode .projects-container h1 {
|
||||
color: #3a3a3a;
|
||||
}
|
||||
.projects {
|
||||
|
@ -284,6 +288,16 @@ body.light-mode .project {
|
|||
.project h1 {
|
||||
margin-bottom: 1.25rem;
|
||||
font-size: 1.5rem;
|
||||
color: rgb(216, 216, 216);
|
||||
}
|
||||
body.light-mode .project h1 {
|
||||
color: #3a3a3a;
|
||||
}
|
||||
.project p {
|
||||
color: rgb(216, 216, 216);
|
||||
}
|
||||
body.light-mode .project p {
|
||||
color: #3a3a3a;
|
||||
}
|
||||
.project ul {
|
||||
display: flex;
|
||||
|
@ -295,6 +309,10 @@ body.light-mode .project {
|
|||
.project li {
|
||||
margin: 0.5em;
|
||||
font-size: 0.85rem;
|
||||
color: rgb(216, 216, 216);
|
||||
}
|
||||
body.light-mode .project li {
|
||||
color: #3a3a3a;
|
||||
}
|
||||
.project a {
|
||||
display: inline-flex;
|
||||
|
@ -327,3 +345,12 @@ body.light-mode .project a:hover {
|
|||
color: white;
|
||||
background-color: #5865f2;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* <a> transition fix */
|
||||
.project a,
|
||||
.home-container a,
|
||||
footer a {
|
||||
transition: background-color 0.3s ease, transform 0.15s ease;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue