Better mobile scaling

This commit is contained in:
Notoric 2024-05-30 23:20:08 +01:00
parent 8c61d0e14b
commit e96a9c6797
1 changed files with 28 additions and 6 deletions

View File

@ -250,7 +250,6 @@ em {
#box-with-title { #box-with-title {
border-radius: 60px; border-radius: 60px;
margin-top: 100px !important;
padding-inline: 50px; padding-inline: 50px;
padding-block: 30px; padding-block: 30px;
position: relative; position: relative;
@ -292,7 +291,7 @@ em {
margin: auto; margin: auto;
position: relative; position: relative;
font-family: "Barlow", sans-serif; font-family: "Barlow", sans-serif;
margin-bottom: 100px; padding-top: 100px !important;
} }
#aboutme h1 { #aboutme h1 {
@ -300,7 +299,7 @@ em {
padding-inline: 15px; padding-inline: 15px;
position: absolute; position: absolute;
text-align: center; text-align: center;
top: -1.25em; top: calc(-1.25em + 100px);
left: 70px; left: 70px;
z-index: 2; z-index: 2;
} }
@ -321,6 +320,7 @@ em {
#projects { #projects {
margin: auto; margin: auto;
width: fit-content; width: fit-content;
padding-top: 100px;
} }
#projects h1 { #projects h1 {
@ -425,7 +425,7 @@ em {
content: ""; content: "";
display: block; display: block;
position: fixed; position: fixed;
top: 50px; top: 25px;
right: 50px; right: 50px;
z-index: 11; z-index: 11;
margin: 0; margin: 0;
@ -438,11 +438,11 @@ em {
cursor: pointer; cursor: pointer;
} }
body::before { body::after {
content: "[N]"; content: "[N]";
display: flex; display: flex;
position: fixed; position: fixed;
top: 45px; top: 20px;
left: 50px; left: 50px;
font-size: 3em; font-size: 3em;
font-weight: 700; font-weight: 700;
@ -452,6 +452,18 @@ em {
font-family: "Fira Mono", monospace; font-family: "Fira Mono", monospace;
} }
body::before {
content: "";
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-image: linear-gradient(180deg, #000, #0000);
height: 8em;
z-index: 10;
}
#nav-btn.expanded { #nav-btn.expanded {
transform: rotate(225deg); transform: rotate(225deg);
} }
@ -543,6 +555,15 @@ em {
height: 17.5em; height: 17.5em;
} }
.project:nth-child(odd) {
flex-direction: column;
}
.project img {
width: calc(100vw - 192px);
height: auto;
}
#navbar #links { #navbar #links {
padding-bottom: 1em; padding-bottom: 1em;
} }
@ -558,6 +579,7 @@ em {
#aboutme h1 { #aboutme h1 {
transform: translateY(170px); transform: translateY(170px);
top: -150px;
} }
} }