Fix links visibility with fixed bottom positioning

- Change body to min-height: 100vh with bottom padding for fixed footer
- Use position: fixed on links-bottom to keep them always visible at bottom
- Add gradient background to links bar for visual separation
- Content can scroll, links always visible and accessible
- Remove overflow: hidden to allow proper scrolling
This commit is contained in:
dangrubbb
2026-02-28 09:59:30 -05:00
parent b9d5d5cc80
commit 882fdd7e7f

View File

@ -1,12 +1,10 @@
body { body {
background: #0d0a14; background: #0d0a14;
padding: 20px; padding: 20px 20px 80px 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; position: relative;
flex-direction: column; min-height: 100vh;
height: 100vh;
overflow: hidden;
} }
.bard { .bard {
@ -14,7 +12,7 @@ body {
/* 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 */
flex-shrink: 1; height: auto;
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;
} }
@ -158,7 +156,6 @@ p {
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 {
@ -168,7 +165,6 @@ p {
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 {
@ -184,21 +180,28 @@ p {
} }
.debug { .debug {
flex: 1; margin: 40px auto 0;
position: relative;
max-width: 800px;
display: flex;
flex-direction: column;
align-items: center;
max-width: 100%;
} }
.links-bottom { .links-bottom {
margin-top: auto; position: fixed;
padding-top: 10px; bottom: 0;
position: relative; left: 0;
max-width: 400px; right: 0;
padding: 20px;
text-align: center; text-align: center;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 20px; gap: 20px;
justify-content: center; justify-content: center;
align-self: center; background: linear-gradient(to top, rgba(13, 10, 20, 0.95), rgba(13, 10, 20, 0.8));
flex-shrink: 0; backdrop-filter: blur(4px);
} }
.links-bottom a { .links-bottom a {