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 {
background: #0d0a14;
padding: 20px;
padding: 20px 20px 80px 20px;
font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
color: #9d9aa4;
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
position: relative;
min-height: 100vh;
}
.bard {
@ -14,7 +12,7 @@ body {
/* Remove fixed width in pixels */
width: 100%;
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 */
font-size: 2px;
}
@ -158,7 +156,6 @@ p {
text-align: center;
line-height: 1.3;
font-size: 0.875rem;
flex-shrink: 0;
}
.announcement {
@ -168,7 +165,6 @@ p {
text-align: center;
line-height: 1.3;
font-size: 0.875rem;
flex-shrink: 0;
}
.announcement a {
@ -184,21 +180,28 @@ p {
}
.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 {
margin-top: auto;
padding-top: 10px;
position: relative;
max-width: 400px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
text-align: center;
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
align-self: center;
flex-shrink: 0;
background: linear-gradient(to top, rgba(13, 10, 20, 0.95), rgba(13, 10, 20, 0.8));
backdrop-filter: blur(4px);
}
.links-bottom a {