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

Better mobile scaling

This commit is contained in:
Notoric 2024-05-29 17:06:32 +01:00
parent cd403826b3
commit 0876a3fa3b
2 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -5,7 +5,7 @@
<link rel="stylesheet" type="text/css" href="styles/global.css"> <link rel="stylesheet" type="text/css" href="styles/global.css">
</head> </head>
<body> <body>
<svg id="top-shrtct" fill="#eee" height="50px" width="50px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 330" xml:space="preserve" transform="rotate(270)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path id="XMLID_27_" d="M15,180h263.787l-49.394,49.394c-5.858,5.857-5.858,15.355,0,21.213C232.322,253.535,236.161,255,240,255 s7.678-1.465,10.606-4.394l75-75c5.858-5.857,5.858-15.355,0-21.213l-75-75c-5.857-5.857-15.355-5.857-21.213,0 c-5.858,5.857-5.858,15.355,0,21.213L278.787,150H15c-8.284,0-15,6.716-15,15S6.716,180,15,180z"></path> </g></svg> <svg id="top-shrtct" fill="#eee" height="500px" width="500px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 330" xml:space="preserve" transform="rotate(270)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path id="XMLID_27_" d="M15,180h263.787l-49.394,49.394c-5.858,5.857-5.858,15.355,0,21.213C232.322,253.535,236.161,255,240,255 s7.678-1.465,10.606-4.394l75-75c5.858-5.857,5.858-15.355,0-21.213l-75-75c-5.857-5.857-15.355-5.857-21.213,0 c-5.858,5.857-5.858,15.355,0,21.213L278.787,150H15c-8.284,0-15,6.716-15,15S6.716,180,15,180z"></path> </g></svg>
<img id="nav-btn" src="/assets/plus.svg"> <img id="nav-btn" src="/assets/plus.svg">
<div id="navbar"> <div id="navbar">
<p id="logo">[Notoric]</p> <p id="logo">[Notoric]</p>

30
styles/global.css
View File

@ -22,10 +22,10 @@ body {
position: fixed; position: fixed;
bottom: 30px; bottom: 30px;
right: 30px; right: 30px;
height: 50px; height: 3em;
width: 50px; width: 3em;
padding: 20px; padding: 1.5em;
background-color: #0008; background-color: #0004;
border-radius: 50%; border-radius: 50%;
opacity: 0; opacity: 0;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
@ -71,6 +71,7 @@ em {
} }
#logo { #logo {
font-family: "Fira Mono", monospace;
font-weight: 500; font-weight: 500;
} }
@ -298,13 +299,14 @@ em {
background-color: #111; background-color: #111;
padding-inline: 15px; padding-inline: 15px;
position: absolute; position: absolute;
top: -40px; text-align: center;
top: -1.25em;
left: 70px; left: 70px;
z-index: 2; z-index: 2;
} }
#aboutme p { #aboutme p {
font-size: 18px; font-size: 1.1em;
} }
#box-with-title p { #box-with-title p {
@ -385,7 +387,7 @@ em {
.project-tags p { .project-tags p {
margin: 0; margin: 0;
font-size: 0.8em; font-size: 0.8em;
width: 40px; width: 3.5em;
border-radius: 1em; border-radius: 1em;
background-color: #222; background-color: #222;
padding: 0.2em; padding: 0.2em;
@ -394,13 +396,17 @@ em {
} }
.project-description { .project-description {
max-width: 400px; max-width: 23em;
font-size: 1.1em; font-size: 1.1em;
margin: 0; margin: 0;
} }
@media screen and (max-width: 1100px) { @media screen and (max-width: 1100px) {
body {
font-size: 2.5vw;
}
#logo { #logo {
display: none; display: none;
} }
@ -433,6 +439,7 @@ em {
z-index: 11; z-index: 11;
margin: 0; margin: 0;
padding: 0px; padding: 0px;
font-family: "Fira Mono", monospace;
} }
#nav-btn.expanded { #nav-btn.expanded {
@ -520,11 +527,10 @@ em {
.project { .project {
flex-direction: column; flex-direction: column;
} }
}
@media (pointer: fine) and (hover: hover) and (max-width: 1100px) { .project img {
body { width: 25em;
font-size: 16px; height: 17.5em;
} }
} }