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