Continuing the redesign
All checks were successful
/ get-version (push) Successful in 2s
/ astro-check (push) Successful in 11s
/ create-release (push) Successful in 5s
/ check-tag (push) Successful in 2s
/ checking (push) Successful in 12s
/ build-site (push) Successful in 1m13s
/ auto-deploy-dockge (push) Successful in 5s
/ unlighthouse (push) Successful in 19s
/ deploy-unlighthouse-files (push) Successful in 7s
/ deploy-unlighthouse-site (push) Successful in 4s

This commit is contained in:
Firq 2024-10-21 22:23:25 +02:00
parent 9d8493273d
commit 1f7709031c
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
9 changed files with 699 additions and 690 deletions

1226
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

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

View file

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

View file

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

View file

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

View file

@ -1,4 +1,6 @@
--- ---
import '@fontsource/work-sans/500.css'
export interface Props { export interface Props {
fadeout?: boolean fadeout?: boolean
} }
@ -8,9 +10,9 @@ const display = fadeout ? "": "display: none"
<div> <div>
<span> <span>
I am currently working on a site to catalogue past and future TAs.<br/> I am currently creating a site to catalogue past and future TAs for the whole community.
Check it out at <a href="https://fgo-ta.com">fgo-ta.com</a>
</span> </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 class="fade" style={display}></div>
</div> </div>
@ -27,11 +29,24 @@ const display = fadeout ? "": "display: none"
color: white; color: white;
font-size: 1.5em; font-size: 1.5em;
padding: 2rem 0rem 0rem 0rem; padding: 2rem 0rem 0rem 0rem;
font-weight: 400;
font-size: 1.3rem;
} }
a { 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; 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 { .fade {
@ -40,4 +55,16 @@ const display = fadeout ? "": "display: none"
height: 2.5rem; height: 2.5rem;
width: 100%; 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> </style>

View file

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

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>

View file

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