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
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:
parent
9d8493273d
commit
1f7709031c
9 changed files with 699 additions and 690 deletions
1226
package-lock.json
generated
1226
package-lock.json
generated
File diff suppressed because it is too large
Load diff
10
package.json
10
package.json
|
@ -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",
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 >></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>
|
||||
|
|
|
@ -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
64
src/layouts/servantSection.astro
Normal 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>
|
|
@ -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>
|
||||
|
||||
|
|
Loading…
Reference in a new issue