Firq
4eb390d0b1
All checks were successful
/ get-version (push) Successful in 2s
/ astro-check (push) Successful in 14s
/ check-tag (push) Successful in 2s
/ checking (push) Successful in 14s
/ build-site (push) Successful in 1m11s
/ create-release (push) Successful in 6s
/ auto-deploy-dockge (push) Successful in 23s
/ run-unlighthouse (push) Successful in 0s
69 lines
1.6 KiB
Text
69 lines
1.6 KiB
Text
---
|
|
export interface Props {
|
|
fadeout?: boolean
|
|
}
|
|
const { fadeout } = Astro.props
|
|
const display = fadeout ? "": "display: none"
|
|
---
|
|
|
|
<div>
|
|
<span>
|
|
I am currently creating a site to catalogue past and future TAs for the whole community.
|
|
</span>
|
|
<a href=`https://fgo-ta.com/` target="_blank" rel="noopener noreferrer"><span class="fancy">Visit fgo-ta.com >></span></a>
|
|
<div class="fade" style={display}></div>
|
|
</div>
|
|
|
|
<style>
|
|
div {
|
|
display: flex;
|
|
width: 100%;
|
|
flex-wrap: nowrap;
|
|
flex-flow: column;
|
|
background-color: var(--c-primary-background);
|
|
text-align: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--c-primary-text);
|
|
font-size: 1.5em;
|
|
padding: 2rem 0rem 0rem 0rem;
|
|
font-weight: 400;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
a {
|
|
font-weight: 500;
|
|
font-family: 'Work Sans Variable', sans-serif;
|
|
color: var(--c-primary-text);
|
|
margin: 1rem 0px 0px;
|
|
padding: 0.5rem 0.75rem;
|
|
text-decoration: none;
|
|
background: radial-gradient(var(--c-primary-background), var(--c-secondary-background)) ;
|
|
border-radius: 10px;
|
|
border: 2px var(--c-accent-1) solid;
|
|
}
|
|
|
|
a:hover {
|
|
border-color: var(--c-accent-1-alt);
|
|
}
|
|
|
|
.fade {
|
|
margin-top: 3rem;
|
|
background: linear-gradient(to bottom, transparent, var(--c-secondary-background));
|
|
height: 2.5rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.fancy {
|
|
color: var(--c-accent-1);
|
|
}
|
|
|
|
@supports (background-clip: text) {
|
|
a:hover .fancy {
|
|
background: linear-gradient(125deg, var(--c-accent-1), var(--c-accent-1-alt), var(--c-accent-2) );
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
}
|
|
</style>
|