i think i made changes
diff --git a/styles/Components/card.module.css b/styles/Components/card.module.css
index 5b269fa..b085718 100644
--- a/styles/Components/card.module.css
+++ b/styles/Components/card.module.css
@@ -1,121 +1,121 @@
.backgroundImage {
- position: absolute;
- bottom: -5px;
- left: 0;
- width: calc(100% + 5px);
- height: auto;
- scale: stretch;
- border-radius: 0;
- filter: var(--theme-ui-colors-cardFilter);
- transition: filter 0.3s ease-in-out;
+ position: absolute;
+ bottom: -5px;
+ left: 0;
+ width: calc(100% + 5px);
+ height: auto;
+ scale: stretch;
+ border-radius: 0;
+ filter: var(--theme-ui-colors-cardFilter);
+ transition: filter 0.3s ease-in-out;
}
.backgroundGradient {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 100%;
- scale: stretch;
- border-radius: 0;
- filter: var(--theme-ui-colors-cardFilter);
- transition: filter 0.3s ease-in-out;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ scale: stretch;
+ border-radius: 0;
+ filter: var(--theme-ui-colors-cardFilter);
+ transition: filter 0.3s ease-in-out;
}
.card {
- border-radius: 17px;
- width: 100%;
- height: 204px;
- padding-inline: 5px;
- padding-bottom: 5px;
- position: relative;
- overflow: hidden;
- margin: 100px;
- transition: filter 0.3s ease-in-out;
- transition: transform 0.15s ease-in-out;
+ border-radius: 17px;
+ width: 100%;
+ height: 204px;
+ padding-inline: 5px;
+ padding-bottom: 5px;
+ position: relative;
+ overflow: hidden;
+ margin: 100px;
+ transition: filter 0.3s ease-in-out;
+ transition: transform 0.15s ease-in-out;
}
.card:hover {
- transform: translateY(-5px);
- cursor: pointer;
+ transform: translateY(-5px);
+ cursor: pointer;
}
.panel {
- position: absolute;
- overflow-x: hidden;
- overflow-y: hidden;
- width: 88%;
- height: 76%;
- top: 12%;
- left: 6%;
- padding-top: 10px;
- 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);
+ position: absolute;
+ overflow-x: hidden;
+ overflow-y: hidden;
+ width: 88%;
+ height: 76%;
+ top: 12%;
+ left: 6%;
+ padding-top: 10px;
+ 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);
}
.titleContainer {
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- width: 100%;
- height: 32px;
- padding-inline: 10px;
- margin-top: 10px;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 32px;
+ padding-inline: 10px;
+ margin-top: 10px;
}
.title {
- font-weight: 100;
- font-size: 25px;
- margin-left: 1vw;
- line-height: 24px;
- max-lines: 2;
- color: var(--theme-ui-colors-text);
- transition: color 0.3s ease-in-out;
+ font-weight: 100;
+ font-size: 25px;
+ margin-left: 1vw;
+ line-height: 24px;
+ max-lines: 2;
+ color: var(--theme-ui-colors-text);
+ transition: color 0.3s ease-in-out;
}
.image {
- height: 40px;
- width: 40px;
+ height: 40px;
+ width: 40px;
}
.subtext {
- width: 100%;
- padding-inline: 10px;
- text-align: center;
- color: var(--theme-ui-colors-text);
- transition: color 0.3s ease-in-out;
+ width: 100%;
+ padding-inline: 10px;
+ text-align: center;
+ color: var(--theme-ui-colors-text);
+ transition: color 0.3s ease-in-out;
}
.buttonLayout {
- display: flex;
- flex-direction: row;
- justify-content: flex-end;
- align-items: center;
- flex-wrap: wrap;
- padding: 0px;
- position: absolute;
- bottom: 5px;
- right: 5px;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: center;
+ flex-wrap: wrap;
+ padding: 0px;
+ position: absolute;
+ bottom: 5px;
+ right: 5px;
}
.button {
- display: flex;
- flex-direction: row;
- align-items: flex-start;
- justify-content: right;
- position: static;
- flex: none;
- order: 1;
- flex-grow: 0;
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ justify-content: right;
+ position: static;
+ flex: none;
+ order: 1;
+ flex-grow: 0;
- margin: 5px;
- padding: 5px 10px;
- border-radius: 8px;
+ margin: 5px;
+ padding: 5px 10px;
+ border-radius: 8px;
}
@media (max-width: 500px) {
@@ -123,8 +123,8 @@
.card.clicked {
- transform: scale(1) !important;
- z-index: 9999;
+ transform: scale(1) !important;
+ z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
@@ -133,11 +133,11 @@
}
.backgroundGradient.clicked {
- background-image: red;
+ background-image: red;
}
/* .image.clicked {
- width: 1000px !important;
+ width: 1000px !important;
} */
.container {
diff --git a/styles/Components/header.module.css b/styles/Components/header.module.css
index e37ea1c..c6f12ad 100644
--- a/styles/Components/header.module.css
+++ b/styles/Components/header.module.css
@@ -1,72 +1,72 @@
.backgroundImage {
- position: absolute;
- bottom: 0;
- /* bottom: 50vh;
- transform: translateY(50%); */
- width: 100%;
- filter: var(--theme-ui-colors-cardFilter);
- transition: filter 0.3s ease-in-out;
+ position: absolute;
+ bottom: 0;
+ /* bottom: 50vh;
+ transform: translateY(50%); */
+ width: 100%;
+ filter: var(--theme-ui-colors-cardFilter);
+ transition: filter 0.3s ease-in-out;
}
.backgroundGradient {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 100%;
- filter: var(--theme-ui-colors-cardFilter);
- transition: filter 0.3s ease-in-out;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ filter: var(--theme-ui-colors-cardFilter);
+ transition: filter 0.3s ease-in-out;
}
.header {
- width: 100vw;
- position: relative;
- overflow: hidden;
- transition: filter 0.3s ease-in-out;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
+ width: 100vw;
+ position: relative;
+ overflow: hidden;
+ transition: filter 0.3s ease-in-out;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
}
.panel {
position: relative;
- overflow: hidden;
- width: min(calc(100vw - 40px), 1000px);
- 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;
- padding-left: 10px;
- padding-right: 10px;
- margin-top: 20px;
- margin-bottom: 20vh;
+ overflow: hidden;
+ width: min(calc(100vw - 40px), 1000px);
+ 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;
+ padding-left: 10px;
+ padding-right: 10px;
+ margin-top: 20px;
+ margin-bottom: 20vh;
}
.title {
width: 100%;
text-align: center;
font-weight: 100;
- margin-top: 0px;
- margin-bottom: -20px;
+ margin-top: 0px;
+ margin-bottom: -20px;
font-size: 3em;
color: var(--theme-ui-colors-text);
- transition: color 0.3s ease-in-out;
- word-break: break-word;
- font-variant-ligatures: none;
+ transition: color 0.3s ease-in-out;
+ word-break: break-word;
+ font-variant-ligatures: none;
}
.subtext {
- margin-bottom: 0px;
+ margin-bottom: 0px;
width: 100%;
text-align: center;
font-weight: 100;
font-size: 1.5em;
- margin-top: 50px;
+ margin-top: 50px;
color: var(--theme-ui-colors-text);
- transition: color 0.3s ease-in-out;
+ transition: color 0.3s ease-in-out;
}
.subtextExtra {
@@ -74,71 +74,71 @@
}
.buttonLayout {
- display: flex;
- flex-direction: row;
- justify-content: flex-start;
- align-items: center;
- flex-wrap: nowrap;
- height: fit-content;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
+ flex-wrap: nowrap;
+ height: fit-content;
}
.buttonOverflow {
- display: flex;
- flex-direction: row;
- justify-content: flex-end;
- align-items: center;
- overflow-x: hidden;
- flex-wrap: nowrap;
- position: absolute;
- bottom: 5px;
- right: 5px;
- width: calc(100% - 10px);
- height: auto;
- border-radius: 10px;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: center;
+ overflow-x: hidden;
+ flex-wrap: nowrap;
+ position: absolute;
+ bottom: 5px;
+ right: 5px;
+ width: calc(100% - 10px);
+ height: auto;
+ border-radius: 10px;
}
.button {
- display: flex;
- flex-direction: row;
- align-items: flex-end;
- justify-content: right;
- position: static;
- flex: none;
- order: 1;
- flex-grow: 0;
+ display: flex;
+ flex-direction: row;
+ align-items: flex-end;
+ justify-content: right;
+ position: static;
+ flex: none;
+ order: 1;
+ flex-grow: 0;
- margin: 5px;
- padding: 5px 10px;
- border-radius: 8px;
+ margin: 5px;
+ padding: 5px 10px;
+ border-radius: 8px;
}
.titleContainer {
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- flex-wrap: wrap;
- padding: 0px;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: wrap;
+ padding: 0px;
}
.headerImage {
- width: auto;
- height: 64px;
- object-fit: cover;
- object-position: center;
- transition: filter 0.3s ease-in-out;
- margin-bottom: 20px;
+ width: auto;
+ height: 64px;
+ object-fit: cover;
+ object-position: center;
+ transition: filter 0.3s ease-in-out;
+ margin-bottom: 20px;
}
.indicator {
- height: auto;
- width: 24px;
- margin-inline: 5px;
- padding: 0;
+ height: auto;
+ width: 24px;
+ margin-inline: 5px;
+ padding: 0;
}
.leftArrow {
- transform: rotate(90deg);
+ transform: rotate(90deg);
}
.rightArrow {
- transform: rotate(270deg);
+ transform: rotate(270deg);
}
\ No newline at end of file