Notoric
/
Portfolio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

More sensible sizing for different devices

This commit is contained in:
Notoric 2024-05-23 20:23:47 +01:00
parent b95972830c
commit 1239158e26
1 changed files with 23 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
styles/global.css
View File

@ -110,7 +110,7 @@ em {
} }
.card { .card {
border-radius: 4em; border-radius: 64px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -130,10 +130,10 @@ em {
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
height: calc(100% - 0.5em); height: calc(100% - 8px);
width: calc(100% - 0.5em); width: calc(100% - 8px);
z-index: -2; z-index: -2;
border-radius: 3.8em; border-radius: 60px;
background-image: linear-gradient( background-image: linear-gradient(
135deg, 135deg,
hsl(263, 25%, 10%), hsl(263, 25%, 10%),
@ -161,8 +161,8 @@ em {
background-image: url("/assets/headshot.jpg"); background-image: url("/assets/headshot.jpg");
background-size: cover; background-size: cover;
background-position: center; background-position: center;
width: 22em; width: 350px;
height: 22em; height: 350px;
aspect-ratio: 1/1; aspect-ratio: 1/1;
border-radius: 50%; border-radius: 50%;
position: relative; position: relative;
@ -211,15 +211,14 @@ em {
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
top: 0.5em; top: 50px;
right: 0.5em; right: 50px;
font-size: 5em;
z-index: 11; z-index: 11;
margin: 0; margin: 0;
background-image: url("/assets/plus.svg"); background-image: url("/assets/plus.svg");
background-size: contain; background-size: contain;
height: 0.6em; height: 3em;
width: 0.6em; width: 3em;
padding: 0px; padding: 0px;
transition: transform 0.5s ease; transition: transform 0.5s ease;
cursor: pointer; cursor: pointer;
@ -229,9 +228,9 @@ em {
content: "[N]"; content: "[N]";
display: flex; display: flex;
position: absolute; position: absolute;
top: 1.1em; top: 45px;
left: 1.1em; left: 50px;
font-size: 2.5em; font-size: 3em;
font-weight: 700; font-weight: 700;
z-index: 11; z-index: 11;
margin: 0; margin: 0;
@ -295,12 +294,12 @@ em {
gap: 70px; gap: 70px;
width: fit-content; width: fit-content;
padding: 80px; padding: 80px;
margin-top: 120px;
} }
.card::after { .card::after {
height: calc(100% - 0.35em); height: calc(100% - 10px);
width: calc(100% - 0.35em); width: calc(100% - 10px);
border-radius: 3.9em;
} }
#homepage-text { #homepage-text {
@ -309,8 +308,8 @@ em {
} }
#homepage-img { #homepage-img {
width: 16em; width: 300px;
height: 16em; height: 300px;
} }
#hi { #hi {
@ -336,4 +335,9 @@ em {
#navbar #links { #navbar #links {
padding-bottom: 1em; padding-bottom: 1em;
} }
#homepage-img {
width: 500px;
height: 500px;
}
} }