huge changes
diff --git a/styles/Components/card.module.css b/styles/Components/card.module.css
index 775be5c..5b269fa 100644
--- a/styles/Components/card.module.css
+++ b/styles/Components/card.module.css
@@ -33,11 +33,9 @@
margin: 100px;
transition: filter 0.3s ease-in-out;
transition: transform 0.15s ease-in-out;
-
- transition: all 10s ease-in-out;
}
.card:hover {
- transform: scale(1.025);
+ transform: translateY(-5px);
cursor: pointer;
}
@@ -121,9 +119,6 @@
}
@media (max-width: 500px) {
- .card {
- height: 254px;
- }
}
diff --git a/styles/Components/header.module.css b/styles/Components/header.module.css
index d37417d..e37ea1c 100644
--- a/styles/Components/header.module.css
+++ b/styles/Components/header.module.css
@@ -1,11 +1,13 @@
.backgroundImage {
position: absolute;
- bottom: -10px;
- width: calc(100% + 6px);
- border-radius: 0 0 16.5px 16.5px;
+ 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;
@@ -53,6 +55,7 @@
color: var(--theme-ui-colors-text);
transition: color 0.3s ease-in-out;
word-break: break-word;
+ font-variant-ligatures: none;
}
.subtext {
@@ -70,52 +73,33 @@
margin-bottom: 40px;
}
-@keyframes arrow-slide {
- 0% {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
- 50% {
- -webkit-transform: translateY(-1em);
- transform: translateY(-1em);
- }
- 100% {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
-}
-.arrow {
- -webkit-animation: arrow-slide 2s ease-in-out infinite both;
- animation: arrow-slide 2s ease-in-out infinite both;
-}
-
-.arrowSpan {
- position: absolute;
- bottom: min(10vh, 1em);
- width: 100%;
- text-align: center;
-}
-
-.arrowHidden {
- display: none;
-}
-
.buttonLayout {
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;
- flex-wrap: wrap;
- padding: 0px;
+ 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-start;
+ align-items: flex-end;
justify-content: right;
position: static;
flex: none;
@@ -126,3 +110,35 @@
padding: 5px 10px;
border-radius: 8px;
}
+
+.titleContainer {
+ 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;
+}
+
+.indicator {
+ height: auto;
+ width: 24px;
+ margin-inline: 5px;
+ padding: 0;
+}
+
+.leftArrow {
+ transform: rotate(90deg);
+}
+.rightArrow {
+ transform: rotate(270deg);
+}
\ No newline at end of file
diff --git a/styles/Components/navbar.module.css b/styles/Components/navbar.module.css
index 88aa580..ecbf786 100644
--- a/styles/Components/navbar.module.css
+++ b/styles/Components/navbar.module.css
@@ -1,134 +1,45 @@
-.container {
- display: flex;
- flex-direction: column;
- justify-content: top;
- align-items: center;
+.icon {
+ height: 32px;
+ margin: 0;
+ padding: 0;
+ width: 32px;
+}
+.container {
position: fixed;
top: 0;
- left: 0;
+ display: flex;
+ justify-content: left;
+ align-items: center;
+ flex-direction: row;
+ gap: 10px;
+
+ height: 42px;
+ padding: 5px;
+ padding-left: 25px;
+
+ z-index: 69;
+}
+
+.divider {
+ height: 100%;
+ width: 3px;
+ border-radius: 100vh;
+ background-color: #424242;
+}
+
+.skipNav {
+ width: 0%;
overflow: hidden;
- margin: 20px;
-
- width: 64px;
- max-height: 64px;
- padding-bottom: -1px;
- height: auto;
-
- border-radius: 32px;
- transition: 0.5s ease-in-out;
-}
-.group {
- display: flex;
- flex-direction: column;
- justify-content: top;
- align-items: center;
-
- background-color: var(--theme-ui-colors-cardBackground);
- transition: background-color 0.3s ease-in-out;
- backdrop-filter: blur(2px);
- border-radius: 32px;
-
- width: 64px;
- margin-bottom: 20px;
- padding-top: 7px;
+ color: white;
+ max-lines: 1;
+ text-overflow: clip;
+ -webkit-line-clamp: 1;
+ height: 20px;
+ transition: width 0.3s ease-in-out;
}
-.headerIcon {
- height: 64px;
- width: 64px;
- margin-bottom: 20px;
- margin-right: 0;
- margin-top: -7px;
- border-radius: 50vw;
-
- cursor: pointer;
-}
-
-.icon {
- height: 50px;
- width: 50px;
- border-radius: 50vw;
- margin-bottom: 5px;
- cursor: pointer;
- display: block;
-}
-
-.ThemeChangeButton {
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-.containerOpen {
- max-height: 460px;
-}
-
-.containerDesktop {
- animation-name: containerCloseOnStart;
- animation-duration: 0.5s;
- animation-direction: forwards;
- animation-timing-function: ease-in-out;
-}
-
-@keyframes containerCloseOnStart {
- from { max-height: 460px; }
- to { max-height: 64px ; }
-}
-
-.containerDesktop:hover {
- max-height: 460px;
- animation-name: none;
-}
-
-@media screen and (min-width: 450px) {
- .container {
- flex-direction: row;
- justify-content: left;
-
- margin: 20px;
-
- height: 64px;
- max-width: 64px;
- width: auto;
- border-radius: 32px;
-
- border-radius: 32px;
- transition: 0.5s ease-in-out;
- }
- .group {
- flex-direction: row;
- justify-content: left;
-
- height: 64px;
- width: auto;
- padding-right: 7px;
- margin-bottom: 0;
- padding-top: 7px;
- margin-right: 20px;
- padding-left: 3px;
- }
- .headerIcon {
- height: 64px;
- width: 64px;
- margin-top: 12px;
- margin-left: -3px;
- }
- .containerOpen {
- max-width: 460px;
- max-height: 64px;
- }
- .containerDesktop:hover {
- max-width: 460px;
- max-height: 64px;
- }
- .icon {
- height: 50px;
- width: 50px;
- margin-left: 5px;
- }
- @keyframes containerCloseOnStart {
- from { max-width: 460px; }
- to { max-width: 64px ; }
- }
-}
+.skipNav:focus {
+ width: 100%;
+ overflow: auto;
+}
\ No newline at end of file
diff --git a/styles/Components/panels.module.css b/styles/Components/panels.module.css
index 2229866..35096b2 100644
--- a/styles/Components/panels.module.css
+++ b/styles/Components/panels.module.css
@@ -12,8 +12,6 @@
background-color: var(--theme-ui-colors-panelColor);
border-radius: 20px;
- transition: background-color 0.3s ease-in-out;
-
}
.doublePanel {
@@ -51,7 +49,7 @@
.title {
width: 100%;
- font-size: max(2em, 3.25vw);
+ font-size: min(max(2em, 3.25vw), 4em);
margin: 0;
color: var(--theme-ui-colors-text);
transition: color 0.3s ease-in-out;
diff --git a/styles/Components/texttools.module.css b/styles/Components/texttools.module.css
index b07fd6d..76857b9 100644
--- a/styles/Components/texttools.module.css
+++ b/styles/Components/texttools.module.css
@@ -3,7 +3,7 @@
width: 15px !important;
position: relative;
border-radius: 5px;
- border: solid 4px #000;
+ border: solid 3px #000;
}
.list {
diff --git a/styles/globals.css b/styles/globals.css
index 1b39e04..4fac2dc 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -9,10 +9,35 @@
}
html {
- background-color: var(--theme-ui-colors-background);
+ /* 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: var(--theme-ui-colors-background);
+ overflow: hidden;
+ overflow-y: auto;
+ transition: 0.3s ease-in-out border-radius;
+ padding-bottom: 0;
+ border-radius: 25px;
}
+body {
+ height: 100%;
+ overflow: hidden;
+}
+html {
+ position: absolute;
+ top: 42px;
+ height: calc(100vh -42px + 1px);
+ overflow-y: auto;
+ scrollbar-width: none;
+}
+html::-webkit-scrollbar {
+ display: none;
+}
a {
text-decoration: none;