Fix layout to prevent scrollbar

- Change body height from min-height to height: 100vh with overflow: hidden
- Use flexbox with flex-grow/flex-shrink to keep everything on one screen
- Reduce padding and margins for better fit
- Debug section takes remaining space, links always at bottom
- No scrollbar, works on all screen sizes
This commit is contained in:
dangrubbb
2026-02-28 09:54:41 -05:00
parent 1e6a843b94
commit b9d5d5cc80

View File

@ -1,19 +1,20 @@
body {
background: #0d0a14;
padding: 40px 20px;
padding: 20px;
font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
color: #9d9aa4;
display: flex;
flex-direction: column;
min-height: 100vh;
height: 100vh;
overflow: hidden;
}
.bard {
margin: 0 auto 40px;
margin: 0 auto 20px;
/* Remove fixed width in pixels */
width: 100%;
max-width: 65em; /* Keep the same max size for desktop */
height: auto;
flex-shrink: 1;
aspect-ratio: 1 / 0.95; /* Maintains the proportion of the artwork */
font-size: 2px;
}
@ -151,21 +152,23 @@ body {
}
}
p {
margin: 20px auto 0;
margin: 10px auto 0;
position: relative;
max-width: 400px;
text-align: center;
line-height: 1.3;
font-size: 0.875rem;
flex-shrink: 0;
}
.announcement {
margin: 20px auto 0;
margin: 10px auto 0;
position: relative;
max-width: 400px;
text-align: center;
line-height: 1.3;
font-size: 0.875rem;
flex-shrink: 0;
}
.announcement a {
@ -180,9 +183,13 @@ p {
opacity: 0.85;
}
.debug {
flex: 1;
}
.links-bottom {
margin-top: auto;
padding-top: 40px;
padding-top: 10px;
position: relative;
max-width: 400px;
text-align: center;
@ -191,6 +198,7 @@ p {
gap: 20px;
justify-content: center;
align-self: center;
flex-shrink: 0;
}
.links-bottom a {