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:
33
style.css
33
style.css
@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user