colours
diff --git a/styles/card.module.css b/styles/card.module.css
index d2bd0a3..883ddc7 100644
--- a/styles/card.module.css
+++ b/styles/card.module.css
@@ -7,6 +7,7 @@
scale: stretch;
border-radius: 0;
filter: var(--theme-ui-colors-cardFilter);
+ transition: filter 0.3s ease-in-out;
}
.card {
@@ -19,6 +20,7 @@
overflow: hidden;
margin: 100px;
filter: var(--theme-ui-colors-cardFilter);
+ transition: filter 0.3s ease-in-out;
}
@@ -34,6 +36,7 @@
padding-bottom: 10px;
border-radius: 17px;
background-color: var(--theme-ui-colors-cardBackground);
+ transition: background-color 0.3s ease-in-out;
backdrop-filter: blur(7px);
}
@@ -55,6 +58,7 @@
line-height: 24px;
max-lines: 2;
color: var(--theme-ui-colors-text);
+ transition: color 0.3s ease-in-out;
}
.image {
@@ -67,6 +71,7 @@
padding-inline: 10px;
text-align: center;
color: var(--theme-ui-colors-text);
+ transition: color 0.3s ease-in-out;
}
diff --git a/styles/globals.css b/styles/globals.css
index 175239c..1b39e04 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -10,13 +10,15 @@
html {
background-color: var(--theme-ui-colors-background);
+ transition: background-color 0.3s ease-in-out;
}
a {
text-decoration: none;
transition: 0.5s ease-in-out;
- color: var(--theme-ui-colors-primary)
+ color: var(--theme-ui-colors-primary);
+ transition: color 0.3s ease-in-out;
}
* {
@@ -30,6 +32,7 @@
font-weight: bold;
color: #F27878;
background-color: var(--theme-ui-colors-hint);
+ transition: background-color 0.3s ease-in-out;
padding: 2px;
font-size: 105%;
border-radius: 5px;
diff --git a/styles/header.module.css b/styles/header.module.css
index dd78daa..7353e3d 100644
--- a/styles/header.module.css
+++ b/styles/header.module.css
@@ -5,6 +5,7 @@
width: calc(100% + 6px);
border-radius: 0 0 16.5px 16.5px;
filter: var(--theme-ui-colors-cardFilter);
+ transition: filter 0.3s ease-in-out;
}
.header {
@@ -13,6 +14,7 @@
position: relative;
overflow: hidden;
filter: var(--theme-ui-colors-cardFilter);
+ transition: filter 0.3s ease-in-out;
display: flex;
flex-direction: column;
justify-content: center;
@@ -26,6 +28,7 @@
height: auto;
border-radius: 16.5px;
background-color: var(--theme-ui-colors-cardBackground);
+ transition: background-color 0.3s ease-in-out;
backdrop-filter: blur(7px);
padding-top: 30px;
padding-bottom: 40px;
@@ -42,6 +45,7 @@
margin-bottom: -20px;
font-size: max(2em, 4vw);
color: var(--theme-ui-colors-text);
+ transition: color 0.3s ease-in-out;
word-break: break-word;
}
@@ -52,6 +56,7 @@
font-weight: 100;
font-size: max(1.5em, 1.5vw);
color: var(--theme-ui-colors-text);
+ transition: color 0.3s ease-in-out;
}
.subtextExtra {
diff --git a/styles/navbar.module.css b/styles/navbar.module.css
index 51d6784..5ad34ec 100644
--- a/styles/navbar.module.css
+++ b/styles/navbar.module.css
@@ -24,6 +24,7 @@
align-items: center;
background-color: var(--theme-ui-colors-cardBackground);
+ transition: background-color 0.3s ease-in-out;
backdrop-filter: blur(7px), brightness(0.1);
border-radius: 32px;
@@ -47,6 +48,13 @@
width: 50px;
margin-bottom: 5px;
cursor: pointer;
+ display: block;
+}
+
+.ThemeChangeButton {
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
.containerOpen {
diff --git a/styles/sectionheading.module.css b/styles/sectionheading.module.css
index 5b469af..097d4ab 100644
--- a/styles/sectionheading.module.css
+++ b/styles/sectionheading.module.css
@@ -2,6 +2,7 @@
width: 100%;
font-size: max(2em, 4vw);
color: var(--theme-ui-colors-text);
+ transition: color 0.3s ease-in-out;
font-weight: lighter;
text-align: center;
word-break: break-all;
diff --git a/styles/subheading.module.css b/styles/subheading.module.css
index c24926c..ca71918 100644
--- a/styles/subheading.module.css
+++ b/styles/subheading.module.css
@@ -2,6 +2,7 @@
width: 100%;
font-size: max(2em, 2vw);
color: var(--theme-ui-colors-text);
+ transition: color 0.3s ease-in-out;
font-weight: lighter;
text-align: center;
word-break: break-word;