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",
|
"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",
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 >></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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
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 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>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue