Many changes
diff --git a/styles/Components/card.module.css b/styles/Components/card.module.css
index 9997098..9cdb2d8 100644
--- a/styles/Components/card.module.css
+++ b/styles/Components/card.module.css
@@ -23,7 +23,7 @@
}
.card {
- border-radius: 17px;
+ border-radius: 25px;
width: 100%;
height: 204px;
padding-inline: 5px;
@@ -35,6 +35,8 @@
opacity: 0;
transform: translateY(10px);
transition: 0.3s ease-in-out;
+
+ box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.25);
}
.card:hover {
transform: translateY(-5px) !important;
@@ -45,8 +47,6 @@
transform: translateY(0px);
}
-
-
.panel {
position: absolute;
overflow-x: hidden;
@@ -69,7 +69,7 @@
justify-content: center;
align-items: center;
width: 100%;
- height: 32px;
+ height: 20%;
padding-inline: 10px;
margin-top: 10px;
}
@@ -82,6 +82,7 @@
max-lines: 2;
color: var(--theme-ui-colors-text);
transition: color 0.3s ease-in-out;
+ text-align: center;
}
.image {
@@ -91,8 +92,10 @@
.subtext {
width: 100%;
+ height: 35%;
padding-inline: 10px;
text-align: center;
+ overflow-y: auto;
color: var(--theme-ui-colors-text);
transition: color 0.3s ease-in-out;
}
@@ -108,6 +111,7 @@
position: absolute;
bottom: 5px;
right: 5px;
+ height: 25%
}
.button {
@@ -125,28 +129,6 @@
border-radius: 8px;
}
-@media (max-width: 500px) {
-}
-
-
-.card.clicked {
- transform: scale(1) !important;
- z-index: 9999;
- width: 100%;
- height: 100%;
- position: fixed;
- top: 0;
- left: 0;
-}
-
-.backgroundGradient.clicked {
- background-image: red;
-}
-
-/* .image.clicked {
- width: 1000px !important;
-} */
-
.container {
width: calc(100% - 20px);
height: 100%;
diff --git a/styles/Components/header.module.css b/styles/Components/header.module.css
index c6f12ad..25f95e8 100644
--- a/styles/Components/header.module.css
+++ b/styles/Components/header.module.css
@@ -32,8 +32,8 @@
.panel {
position: relative;
overflow: hidden;
- width: min(calc(100vw - 40px), 1000px);
- border-radius: 16.5px;
+ width: min(calc(100vw - 40px), 750px);
+ border-radius: 25px;
background-color: var(--theme-ui-colors-cardBackground);
transition: background-color 0.3s ease-in-out;
backdrop-filter: blur(7px);
diff --git a/styles/Components/panels.module.css b/styles/Components/panels.module.css
index c06a5a6..8659030 100644
--- a/styles/Components/panels.module.css
+++ b/styles/Components/panels.module.css
@@ -11,6 +11,8 @@
gap: 10px;
background-color: var(--theme-ui-colors-panelColor);
+ transition: background-color 0.3s ease-in-out !important;
+
border-radius: 20px;
}
@@ -46,6 +48,8 @@
padding-block: 20px;
padding-inline: 20px;
background-color: var(--theme-ui-colors-background);
+
+ transition: 0.3s ease-in-out background-color;
}
.title {
@@ -83,7 +87,8 @@
.divider {
width: 75%;
- height: 4px;
+ height: 6px;
+ min-height: 6px;
border-radius: 100vw;
margin-block: 10px;
transition: background-color 0.3s ease-in-out;
diff --git a/styles/globals.css b/styles/globals.css
index 98d38b0..b2806e2 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -12,14 +12,12 @@
/* background-color: var(--theme-ui-colors-background); */
transition: background-color 0.3s ease-in-out;
background-color: #000000 !important;
- transition: 0.3s ease-in-out border-radius;
border-radius: 0px;
}
body {
background-color: #000000;
overflow: hidden;
overflow-y: auto;
- transition: 0.3s ease-in-out border-radius;
padding-bottom: 0;
border-radius: 25px;
}