erik/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add new animation, add close button, add back button
All checks were successful
Deploy new version of the application / Deploy Application (push) Successful in 3s
Details

Browse Source
This commit is contained in:
Erik Fehér
2025-10-23 16:54:54 +02:00
parent 5c42665c8f
commit d97e432695
4 changed files with 282 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
styles.css
View File

@@ -3,7 +3,7 @@
:root {
--card-gap: 6px;
--background-color: #1b1b1b;
--text-color: #fff;
--text-color: #ffffff;
--label-height: 60px;
--header-height: 50px;
--base-border-radius: 7px;
@@ -13,6 +13,7 @@
--content-wrap-padding: 16px;
--header-margin-bottom: 20px;
--content-container-height: calc(100dvh - (2 * var(--card-gap)));
--card-switch-duration: 0.8s;
font-family: "BBH Sans Bogle", sans-serif;
font-weight: 400;
@@ -49,12 +50,17 @@ html, body {
align-items: center;
gap: var(--card-gap);
margin: var(--card-gap);
transition: var(--card-switch-duration) cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#container:has(.hidden) {
gap: 0;
}
.card-image {
filter: grayscale(100%) brightness(80%);
transform: translateY(0);
transition: 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);
object-fit: cover;
width: 100%;
height: 100%;
@@ -80,7 +86,7 @@ html, body {
width: 100%;
height: 100%;
cursor: pointer;
transition: 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: var(--card-switch-duration) cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.card-label {
@@ -94,7 +100,7 @@ html, body {
width: 100%;
filter: grayscale(0%) brightness(100%);
transform: translateY(0);
transition: 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: var(--card-switch-duration) cubic-bezier(0.455, 0.03, 0.515, 0.955);
font-size: 32px;
padding-left: 30px;
}
@@ -108,8 +114,17 @@ html, body {
transform: translateY(calc(-1 * var(--label-height)));
}
.card-image-idle-animation {
filter: grayscale(0%) brightness(110%);
transform: translateY(-30px);
}
.card-label-idle-animation {
transform: translateY(calc(-1 * var(--label-height)));
}
.hidden {
width: calc(100% / 10);
width: 0;
}
.active .card-label {
@@ -146,12 +161,13 @@ html, body {
.visible {
display: block !important;
opacity: 1 !important;
transition-delay: 0.5s !important;
transition-delay: var(--card-switch-duration) !important;
transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.header {
display: flex;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
justify-content: space-between;
align-items: center;
font-size: 48px;
@@ -159,6 +175,26 @@ html, body {
height: var(--header-height);
}
.header-left {
display: flex;
gap: 16px;
justify-content: left;
}
.header-right {
display: flex;
gap: 16px;
justify-content: right;
align-items: center;
width: 100%;
}
.header-center {
display: flex;
justify-content: center;
align-items: center;
}
.brand {
font-size: 24px;
display: flex;
@@ -167,13 +203,13 @@ html, body {
padding: 10px;
background-color: var(--base-content-background-color);
box-shadow: var(--base-box-shadow);
color: #ffffff;
color: var(--text-color);
backdrop-filter: var(--base-blur);
border-radius: var(--base-border-radius);
}
.close {
.control-button {
cursor: pointer;
width: 48px;
background-color: var(--base-content-background-color);
@@ -183,7 +219,28 @@ html, body {
transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.close:hover {
.close-svg {
width: 24px !important;
}
.close {
display: flex;
justify-content: center;
align-items: center;
width: 42px;
height: 42px;
border: 3px solid white;
}
.back {
transform: rotate(180deg) scale(1);
}
.back:hover {
transform: rotate(180deg) scale(1.1) !important;
}
.control-button:hover {
transform: scale(1.1);
}