Refine homepage layout

- Remove announcement box styling, keep only yellow text link
- Move links-bottom to true bottom of page using flexbox
- Add min-height: 100vh to body for proper footer alignment
- Announcement link now styled as plain yellow text without borders
This commit is contained in:
dangrubbb
2026-02-28 09:52:27 -05:00
parent 9afda9a01a
commit 1e6a843b94
2 changed files with 17 additions and 15 deletions

View File

@ -239,8 +239,12 @@
dangrubb.net dangrubb.net
</p> </p>
<div class="announcement"> <p class="announcement">
<a href="https://dangrubb.net/music">EXCLUSIVE: Leaked mixtape from Darnea's vault</a> <a href="https://dangrubb.net/music">EXCLUSIVE: Leaked mixtape from Darnea's vault</a>
</p>
<div class="debug">
<div class="code"></div>
</div> </div>
<div class="links-bottom"> <div class="links-bottom">
@ -251,9 +255,6 @@
<a target="_parent" href="https://dangrubb.net/cv">cv</a> <a target="_parent" href="https://dangrubb.net/cv">cv</a>
<a target="_parent" href="https://pi.dangrubb.net/dangit">git</a> <a target="_parent" href="https://pi.dangrubb.net/dangit">git</a>
</div> </div>
<div class="debug">
<div class="code"></div>
</div>
<!-- partial --> <!-- partial -->
<script src="./script.js"></script> <script src="./script.js"></script>

View File

@ -3,6 +3,9 @@ body {
padding: 40px 20px; padding: 40px 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;
flex-direction: column;
min-height: 100vh;
} }
.bard { .bard {
@ -157,21 +160,18 @@ p {
} }
.announcement { .announcement {
margin: 30px auto 0; margin: 20px auto 0;
padding: 20px; position: relative;
max-width: 500px; max-width: 400px;
background: #ffeb3b;
border: 3px solid #fbc02d;
border-radius: 8px;
text-align: center; text-align: center;
box-shadow: 0 4px 12px rgba(255, 235, 59, 0.3); line-height: 1.3;
font-size: 0.875rem;
} }
.announcement a { .announcement a {
color: #000; color: #ffeb3b;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
font-size: 1rem;
} }
.announcement a:hover, .announcement a:hover,
@ -181,15 +181,16 @@ p {
} }
.links-bottom { .links-bottom {
margin: 60px auto 0; margin-top: auto;
padding-top: 40px;
position: relative; position: relative;
max-width: 400px; max-width: 400px;
text-align: center; text-align: center;
padding-bottom: 20px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 20px; gap: 20px;
justify-content: center; justify-content: center;
align-self: center;
} }
.links-bottom a { .links-bottom a {