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

Add header and picture

Browse Source
This commit is contained in:
Erik Fehér
2025-10-22 21:14:17 +02:00
parent 794a18484b
commit fae8a80a2e
5 changed files with 105 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
styles.css
View File

@@ -5,10 +5,18 @@
--background-color: #1b1b1b;
--text-color: #fff;
--label-height: 60px;
--header-height: 50px;
--base-border-radius: 7px;
--base-box-shadow: 0 10px 15px rgb(0 0 0 / 20%);
--base-blur: blur(3px);
--base-content-background-color: #ffffff20;
--content-wrap-padding: 16px;
--header-margin-bottom: 20px;
font-family: "BBH Sans Bogle", sans-serif;
font-weight: 400;
font-style: normal;
color: #fff;
}
html, body {
@@ -32,6 +40,10 @@ html, body {
filter: grayscale(100%) brightness(80%);
transform: translateY(0);
transition: 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
object-fit: cover;
width: 100%;
height: 100%;
}
.card {
@@ -41,6 +53,7 @@ html, body {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
.card-wrapper {
@@ -50,6 +63,7 @@ html, body {
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
cursor: pointer;
transition: 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
@@ -100,21 +114,83 @@ html, body {
display: block;
position: relative;
max-width: 100%;
width: 100%;
height: calc(100dvh - (2 * var(--card-gap)));
top: calc(-1 * (100dvh - (2 * var(--card-gap))) - var(--label-height));
overflow: auto;
}
.content-wrapper {
display: block;
display: flex;
opacity: 0;
transition: opacity 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
margin: 10px;
padding: 0;
transition: opacity 0s cubic-bezier(0.455, 0.03, 0.515, 0.955);
height: calc(100% - 16px);
margin: var(--content-wrap-padding) var(--content-wrap-padding) 0px var(--content-wrap-padding);
}
.visible {
display: block !important;
opacity: 1 !important;
transition-delay: 0.5s !important;
transition: 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 48px;
margin-bottom: var(--header-margin-bottom);
height: var(--header-height);
}
.brand {
font-size: 24px;
display: flex;
align-items: center;
justify-items: center;
padding: 10px;
background-color: var(--base-content-background-color);
box-shadow: var(--base-box-shadow);
color: #ffffff;
backdrop-filter: var(--base-blur);
border-radius: var(--base-border-radius);
}
.close {
cursor: pointer;
width: 48px;
background-color: var(--base-content-background-color);
backdrop-filter: var(--base-blur);
box-shadow: var(--base-box-shadow);
border-radius: var(--base-border-radius);
transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.close:hover {
transform: scale(1.1);
}
.card-content {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: calc(100% - var(--header-height) - var(--header-margin-bottom) - var(--content-wrap-padding));
}
#card-content-container {
display: flex;
}
#card-content-image {
border-radius: var(--base-border-radius);
background-color: var(--base-content-background-color);
backdrop-filter: var(--base-blur);
box-shadow: var(--base-box-shadow);
padding: 10px;
width: 300px;
height: 300px;
}