Firq/firq-dev-website
Firq/firq-dev-website
1
0
Fork 0
Code Issues Pull requests Projects Releases 119 Packages Wiki Activity Actions

Continuing the redesign

Browse source
This commit is contained in:
Firq 2024-10-21 22:23:25 +02:00
parent 9d8493273d
commit 044846b0a7
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
9 changed files with 699 additions and 690 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1226
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

10
package.json
View file

@ -1,7 +1,7 @@
{
"name": "@firq/fgosite",
"type": "module",
"version": "0.2.0-pre.11",
"version": "0.2.0-pre.12",
"private": true,
"scripts": {
"dev": "astro dev",
@ -12,11 +12,11 @@
},
"dependencies": {
"@astro-community/astro-embed-youtube": "^0.5.2",
"@astrojs/check": "^0.9.3",
"@astrojs/mdx": "^3.1.7",
"@astrojs/sitemap": "^3.1.6",
"@astrojs/check": "^0.9.4",
"@astrojs/mdx": "^3.1.8",
"@astrojs/sitemap": "^3.2.1",
"@fontsource/work-sans": "^5.0.18",
"astro": "^4.15.10",
"astro": "^4.16.6",
"astro-meta-tags": "^0.3.0",
"autoprefixer": "^10.4.19",
"iconoir": "^7.7.0",

6
src/components/cards/ceCard.astro
View file

@ -69,12 +69,12 @@ const mlb_image = mlb ? 'mlbalign' : 'hidemlb'
}
.ce-crop {
width: 100px;
height: 100px;
width: min(85%, 85px);
height: auto;
}
.mlb {
width: 85px;
width: min(85%, 85px);
height: auto;
margin-left: auto;
margin-right: auto;

8
src/components/cards/servantCard.astro
View file

@ -74,8 +74,8 @@ if (bond10 === false) {
flex-direction: column;
background-color: var(--c-darkergray);
border: 2px var(--c-darkgray) solid;
padding: 0em 0.75em 0.5rem 0.75em;
width: max(40%, 100px);
padding: 10px;
width: max(30%, 100px);
height: auto;
justify-content: center;
align-items: center;
@ -116,9 +116,9 @@ if (bond10 === false) {
}
.bond-ce {
padding-top: 0.75rem;
padding-top: 0.25rem;
width: auto;
height: 3.5rem;
height: 3rem;
}
.unobtained {

25
src/components/cards/taCard.astro
View file

@ -80,10 +80,9 @@ if (user !== undefined) {
article {
background-color: var(--c-darkergray);
border-color: var(--c-darkgray);
border: 2px var(--c-darkgray) solid;
padding: 10px;
text-align: center;
transition: transform var(--speed) var(--ease);
height: auto;
width: auto;
max-width: 8rem;
@ -97,7 +96,8 @@ if (user !== undefined) {
}
article:hover {
transform: scale(var(--hover-scale));
transform: scale(1);
border-color: var(--c-darkpurple);
}
article > .icon {
@ -114,11 +114,12 @@ if (user !== undefined) {
justify-content: center;
text-align: center;
background-color: var(--c-darkgray);
height: calc(var(--size-value) + 0.1rem);
width: calc(var(--size-value) + 0.1rem);
height: var(--size-value);
width: var(--size-value);
padding: 1px;
opacity: 90%;
border-radius: 1.25rem;
top: 1.1em;
top: calc(0.5rem + 9px);
}
article:hover .title h2 {
@ -165,24 +166,24 @@ if (user !== undefined) {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
align-items: top;
justify-content: space-evenly;
background-color: var(--c-duskgray);
background-color: var(--c-darkergray);
border: 2px var(--c-darkpurple) solid;
border-top: 0px;
z-index: 99;
transform: scaleY(0);
transform-origin: top;
position: absolute;
top: 90%;
left: 0px;
right: 0px;
color: white;
border-radius: 0px 0px 1.25rem 1.25rem;
width: 100%;
}
.expand-on-hover img {
width: 3rem;
height: 3rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
border-radius: 0.5rem;
}
@ -194,6 +195,6 @@ if (user !== undefined) {
article:hover .expand-on-hover {
transform: scaleY(1);
transition: transform 200ms ease-in-out;
background-color: var(--c-duskgray);
background-color: var(--c-darkergray);
}
</style>

35
src/components/fgotaHero.astro
View file

@ -1,4 +1,6 @@
---
import '@fontsource/work-sans/500.css'
export interface Props {
fadeout?: boolean
}
@ -8,9 +10,9 @@ 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>
I am currently creating a site to catalogue past and future TAs for the whole community.
</span>
<a href=`https://fgo-ta.com/`><span class="fancy">Visit fgo-ta.com &gt;&gt;</span></a>
<div class="fade" style={display}></div>
</div>
@ -27,11 +29,24 @@ const display = fadeout ? "": "display: none"
color: white;
font-size: 1.5em;
padding: 2rem 0rem 0rem 0rem;
font-weight: 400;
font-size: 1.3rem;
}
a {
text-align: center;
font-weight: 500;
font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
color: white;
margin: 1rem 0px 0px;
padding: 0.5rem 0.75rem;
text-decoration: none;
color: var(--c-darkpurple);
background-color: var(--c-duskgray);
border-radius: 10px;
border: 2px var(--c-darkpurple) solid;
}
a:hover {
border-color: var(--c-purplepink);
}
.fade {
@ -40,4 +55,16 @@ const display = fadeout ? "": "display: none"
height: 2.5rem;
width: 100%;
}
.fancy {
color: var(--c-darkpurple);
}
@supports (background-clip: text) {
a:hover .fancy {
background: linear-gradient(125deg, var(--c-darkpurple), var(--c-purplepink), var(--c-reddish) );
background-clip: text;
color: transparent;
}
}
</style>

5
src/layouts/baseSection.astro
View file

@ -52,11 +52,6 @@ const { title } = Astro.props
}
}
.base {
margin-left: 1rem;
margin-right: 1rem;
}
@media (min-width: 1000px) {
.base {
margin-left: 3rem;

64
src/layouts/servantSection.astro Normal file
View file

@ -0,0 +1,64 @@
---
export interface Props {
title: string
}
const { title } = Astro.props
---
<div class="base">
<h1>{title}</h1>
<div>
<slot />
</div>
</div>
<style>
.base {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.base div {
display: flex;
position: relative;
flex-flow: row wrap;
row-gap: 1em;
column-gap: 1em;
justify-content: center;
align-self: center;
padding: 1em;
}
.base h1 {
font-size: 40px;
line-height: 48px;
letter-spacing: -1px;
color: white;
margin-top: 2rem;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 0.25rem 1.5rem;
border-radius: 0.5rem;
max-width: max-content;
background-color: var(--c-darkgray);
padding-bottom: 0.5rem;
}
@media (min-width: 1000px) {
.base div {
margin-left: 3rem;
margin-right: 3rem;
}
}
@media (min-width: 1500px) {
.base div {
margin-left: 10%;
margin-right: 10%;
}
}
</style>

10
src/pages/servants.astro
View file

@ -1,6 +1,6 @@
---
import Layout from '../layouts/Layout.astro'
import BaseSection from '../layouts/baseSection.astro'
import ServantSection from '../layouts/servantSection.astro'
import ServantCard from '../components/cards/servantCard.astro'
import servantdata from '../../static/data/_servantdata.json'
@ -19,13 +19,13 @@ const description =
descriptionOverride={description}
>
<SmallTitle maintext='TA Offering' subtext='Servants and CEs I can offer for your TAs' fadeout={true}/>
<BaseSection title="Servants">
<ServantSection title="Servants">
{servantdata.map((item) => <ServantCard {...item} />)}
</BaseSection>
</ServantSection>
<div class="placeholder"></div>
<BaseSection title="CEs">
<ServantSection title="CEs">
{cedata.map((item) => <CeCard {...item} />)}
</BaseSection>
</ServantSection>
<div class="placeholder"></div>
</Layout>