Firq/fgo-ta-com-website
Firq/fgo-ta-com-website
1
0
Fork 0
Code Issues1 Pull requests Projects Releases70 Packages1 Wiki Activity Actions

Redesign

Browse source
This commit is contained in:
Firq 2024-07-14 21:15:16 +02:00
parent 0b4bca36ed
commit f1bb9b80ca
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
18 changed files with 372 additions and 43 deletions

31
src/components/hero.astro
View file

@ -1,5 +1,11 @@
---
import packagejson from '../../package.json'
export interface Props {
fadeout?: boolean
}
const { fadeout } = Astro.props
const display = fadeout ? "": "display: none"
const version = packagejson.version
const release = `https://forgejo.neshweb.net/Firq/fgo-ta-com-website/releases/tag/${version}`
---
@ -8,36 +14,34 @@ const release = `https://forgejo.neshweb.net/Firq/fgo-ta-com-website/releases/ta
<span>
This site is a project by Firq.
<br />
In the future, it will be used to catalogue information around FGO TA and the
game in general.
<br />
<a href="https://firq.dev" target="_blank" rel="noopener noreferrer"
>Feel free to check out my personal site.</a
>
<br />
<span class="version"
>( Website version: <a
>Website version: <a
href={release}
target="_blank"
rel="noopener noreferrer">{version}</a
> )</span
></span
>
</span>
<slot />
<div class="fade" style={display}></div>
</div>
<style>
div {
display: flex;
width: 100%;
max-height: auto;
background-color: var(--c-duskgray);
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;
padding: 2rem 0rem 0rem 0rem;
}
a {
text-align: center;
@ -45,7 +49,14 @@ const release = `https://forgejo.neshweb.net/Firq/fgo-ta-com-website/releases/ta
color: var(--c-darkpurple);
}
.fade {
margin-top: 3rem;
background: linear-gradient(to bottom, transparent, var(--c-lightgray));
height: 2.5rem;
width: 100%;
}
.version {
font-size: 0.7em;
font-size: 0.65em;
}
</style>

95
src/components/smallTitle.astro Normal file
View file

@ -0,0 +1,95 @@
---
import '@fontsource/work-sans/800.css'
import '@fontsource/work-sans/600.css'
export interface Props {
maintext: string
subtext: string
fadeout?: boolean
baseurl?: string
}
const { maintext, subtext, fadeout, baseurl } = Astro.props
const display = fadeout ? "": "display: none"
---
<div class="wrap">
<div class="head">{maintext}</div>
<div class="sub">{subtext}</div>
<a href=`/${baseurl}`>&lt&lt Back to database</a>
<div class="fade" style={display}></div>
</div>
<style>
a {
font-weight: 600;
font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
color: white;
padding: 0.5rem 0px;
text-decoration: none;
}
.wrap {
position: relative;
width: 100%;
display: flex;
text-align: center;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
color: var(--c-lighter);
background-color: var(--c-darkergray);
}
.fade {
margin-top: 2rem;
background: linear-gradient(to bottom, transparent, var(--c-lightgray));
height: 2.5rem;
width: 100%;
}
.head {
hyphens: auto;
padding-top: 2rem;
font-size: 2rem;
font-weight: 800;
font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial,
sans-serif;
}
.sub {
font-size: 0.75rem;
font-weight: 600;
font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial,
sans-serif;
}
.head {
color: var(--c-darkpurple);
}
@supports (background-clip: text) {
.head {
background: linear-gradient(125deg, var(--c-darkpurple), var(--c-purplepink), var(--c-reddish) );
background-clip: text;
color: transparent;
}
}
@media (min-width: 620px) {
.head {
hyphens: none;
font-size: 3rem;
}
.sub {
font-size: 0.75rem;
}
}
@media (min-width: 1000px) {
.head {
font-size: 4rem;
}
.sub {
font-size: 1rem;
}
}
</style>

84
src/components/title.astro Normal file
View file

@ -0,0 +1,84 @@
---
import '@fontsource/work-sans/800.css'
export interface Props {
maintext: string
subtext: string
fadeout?: boolean
}
const { maintext, subtext, fadeout } = Astro.props
const display = fadeout ? "": "display: none"
---
<div class="wrap">
<div class="head">{maintext}</div>
<div class="sub">{subtext}</div>
<div class="fade" style={display}></div>
</div>
<style>
.wrap {
position: relative;
width: 100%;
display: flex;
text-align: center;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
color: var(--c-lighter);
background-color: var(--c-darkergray);
}
.fade {
margin-top: 2rem;
background: linear-gradient(to bottom, transparent, var(--c-lightgray));
height: 2.5rem;
width: 100%;
}
.head {
hyphens: auto;
padding-top: 2rem;
font-size: 4rem;
font-weight: 800;
font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial,
sans-serif;
}
.sub {
font-size: 1.5rem;
font-weight: 800;
font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial,
sans-serif;
}
.head {
color: var(--c-darkpurple);
}
@supports (background-clip: text) {
.head {
background: linear-gradient(125deg, var(--c-darkpurple), var(--c-purplepink), var(--c-reddish) );
background-clip: text;
color: transparent;
}
}
@media (min-width: 620px) {
.head {
hyphens: none;
font-size: 6rem;
}
.sub {
font-size: 1.5rem;
}
}
@media (min-width: 1000px) {
.head {
font-size: 8rem;
}
.sub {
font-size: 2rem;
}
}
</style>