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