Updated bottom footer style making it 100% explicitly.

This commit is contained in:
David Ball 2024-07-13 03:27:34 -04:00
parent bfc50d8926
commit 22eb644ad3

View File

@ -28,16 +28,18 @@ const { title } = Astro.props;
</head> </head>
<body> <body>
<slot /> <slot />
<div class="footer"> <div class="footer-container">
<div class="footer-header"> <div class="footer">
<p class="logo"><a class="daball-navbar-brand" href="https://daball.me">A <span class="pretty">pretty</span> <span class="cool">cool</span> website by <span class="david">David</span> <span class="allen">A.</span> <span class="ball">Ball</span>.</a></p> <div class="footer-header">
</div> <p class="logo"><a class="daball-navbar-brand" href="https://daball.me">A <span class="pretty">pretty</span> <span class="cool">cool</span> website by <span class="david">David</span> <span class="allen">A.</span> <span class="ball">Ball</span>.</a></p>
<div class="footer-content"> </div>
<p> <div class="footer-content">
&copy; Copyright 2024 David A. Ball. Dasher Supply is not endorsed by nor affiliated with DoorDash. <p>
<slot name="disclaimers" /> &copy; Copyright 2024 David A. Ball. Dasher Supply is not endorsed by nor affiliated with DoorDash.
</p> <slot name="disclaimers" />
<p><a href="/about">About this site</a>. | <a href="https://gitea.daball.me/daball/dashersupply">View source</a>.</p> </p>
<p><a href="/about">About this site</a>. | <a href="https://gitea.daball.me/daball/dashersupply">View source</a>.</p>
</div>
</div> </div>
</div> </div>
</body> </body>
@ -71,9 +73,15 @@ const { title } = Astro.props;
Courier New, Courier New,
monospace; monospace;
} }
.footer-container {
display: flex;
justify-content: center;
width: 100%;
flex-grow: 1;
padding-left: 2rem;
padding-right: 2rem;
}
.footer { .footer {
margin-left: 2rem;
margin-right: 2rem;
/* border: 1px solid #23262d; */ /* border: 1px solid #23262d; */
border: none; border: none;
background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%)); background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
@ -85,12 +93,15 @@ const { title } = Astro.props;
font-weight: 400; font-weight: 400;
font-size: 1.2em; font-size: 1.2em;
font-style: normal; font-style: normal;
/* width: 100%; */
flex-grow: 1;
} }
.footer, .footer-header { .footer, .footer-header {
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-top-right-radius: 8px; border-top-right-radius: 8px;
} }
.footer-header, .footer-content { .footer-header, .footer-content {
width: 100%;
padding: 1.5rem; padding: 1.5rem;
} }
.footer-header { .footer-header {