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">
</head>
<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">
<div id="navbar">
<p id="logo">[Notoric]</p>

30
styles/global.css
View File

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