firq-dev-website/src/components/fgotaHero.astro
2024-07-19 22:52:15 +02:00

44 lines
900 B
Text

---
export interface Props {
fadeout?: boolean
}
const { fadeout } = Astro.props
const display = fadeout ? "": "display: none"
---
<div>
<span>
I am currently working on a site to catalogue past and future TAs.<br/>
Check it out at <a href="https://fgo-ta.com">fgo-ta.com</a>
</span>
<div class="fade" style={display}></div>
</div>
<style>
div {
display: flex;
width: 100%;
flex-wrap: nowrap;
flex-flow: column;
background-color: var(--c-darkergray);
text-align: center;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5em;
padding: 2rem 0rem 0rem 0rem;
}
a {
text-align: center;
text-decoration: none;
color: var(--c-darkpurple);
}
.fade {
margin-top: 3rem;
background: linear-gradient(to bottom, transparent, var(--c-lightgray));
height: 2.5rem;
width: 100%;
}
</style>