dangrubbb/dangrubb.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated scaling for mobile

Browse Source
This commit is contained in:
dangrubbb
2025-06-12 12:07:19 -04:00
parent f2db5f197a
commit 5f32d340fd
2 changed files with 26 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -5,6 +5,7 @@
<meta charset="UTF-8">
<title>dangrubb.net</title>
<link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./style.css">

35
style.css
View File

@ -7,23 +7,38 @@ body {
.bard {
margin: 0 auto 40px;
width: 65em;
height: 62em;
/* Remove fixed width in pixels */
width: 100%;
max-width: 65em; /* Keep the same max size for desktop */
height: auto;
aspect-ratio: 1 / 0.95; /* Maintains the proportion of the artwork */
font-size: 2px;
}
@media (min-width: 360px) {
/* Adjust media queries for better scaling */
@media (max-width: 768px) {
body {
padding: 20px 10px; /* Smaller padding on mobile */
}
.bard {
font-size: 3px;
font-size: 3px; /* Slightly larger base size for small screens */
}
p {
font-size: 0.8rem;
max-width: 320px;
}
}
@media (min-width: 600px) {
/* For very small screens */
@media (max-width: 400px) {
.bard {
font-size: 4px;
aspect-ratio: 1 / 1; /* Slightly different ratio for tiny screens */
}
}
@media (min-width: 1000px) {
.bard {
font-size: 5px;
p {
font-size: 0.75rem;
}
}