Merge branch 'feature/redesign' into 'main'
Rounded Edges Redesign See merge request Firq/fgosite!3
This commit is contained in:
commit
fcce0af5b2
27 changed files with 2477 additions and 1515 deletions
|
|
@ -24,8 +24,6 @@ stages:
|
||||||
checking:
|
checking:
|
||||||
image: node:lts
|
image: node:lts
|
||||||
stage: validate
|
stage: validate
|
||||||
only:
|
|
||||||
- main
|
|
||||||
before_script:
|
before_script:
|
||||||
- npm install
|
- npm install
|
||||||
script:
|
script:
|
||||||
|
|
@ -39,8 +37,6 @@ build-site:
|
||||||
cache:
|
cache:
|
||||||
paths:
|
paths:
|
||||||
- node_modules/
|
- node_modules/
|
||||||
only:
|
|
||||||
- main
|
|
||||||
script:
|
script:
|
||||||
- npm install
|
- npm install
|
||||||
- npm run build
|
- npm run build
|
||||||
|
|
@ -55,7 +51,9 @@ deploy-site:
|
||||||
stage: deploy
|
stage: deploy
|
||||||
when: on_success
|
when: on_success
|
||||||
only:
|
only:
|
||||||
- main
|
- tags
|
||||||
|
except:
|
||||||
|
- branches
|
||||||
before_script:
|
before_script:
|
||||||
- *ssh_default
|
- *ssh_default
|
||||||
script:
|
script:
|
||||||
|
|
@ -69,6 +67,25 @@ deploy-site:
|
||||||
- ssh $DEPLOY_USER@$DEPLOY_HOST "find maintenance public -maxdepth 1 -printf '%p\n'; screen -S website-firq-npx -dm npx serve public/ -p 9000 -c serve.json"
|
- ssh $DEPLOY_USER@$DEPLOY_HOST "find maintenance public -maxdepth 1 -printf '%p\n'; screen -S website-firq-npx -dm npx serve public/ -p 9000 -c serve.json"
|
||||||
- echo "Website is up on https://firq.dev/"
|
- echo "Website is up on https://firq.dev/"
|
||||||
|
|
||||||
|
deploy-testing:
|
||||||
|
stage: deploy
|
||||||
|
when: on_success
|
||||||
|
except:
|
||||||
|
- tags
|
||||||
|
- main
|
||||||
|
before_script:
|
||||||
|
- *ssh_default
|
||||||
|
script:
|
||||||
|
- echo "Getting artifacts"
|
||||||
|
- ls public
|
||||||
|
- echo "Stopping screen session, cleaning"
|
||||||
|
- ssh $DEPLOY_USER@$DEPLOY_HOST "screen -X -S staging-firq-npx kill; rm -r -f staging/*;"
|
||||||
|
- echo "Copying to proxmox machine"
|
||||||
|
- rsync -az --stats public/* $DEPLOY_USER@$DEPLOY_HOST:~/staging
|
||||||
|
- echo "Restarting screen session"
|
||||||
|
- ssh $DEPLOY_USER@$DEPLOY_HOST "find staging -maxdepth 1 -printf '%p\n'; screen -S staging-firq-npx -dm npx serve staging/ -p 9100 -c serve.json"
|
||||||
|
- echo "Staging environment is up!"
|
||||||
|
|
||||||
success_notification:
|
success_notification:
|
||||||
stage: post_deploy
|
stage: post_deploy
|
||||||
before_script:
|
before_script:
|
||||||
|
|
@ -101,6 +118,8 @@ maintenance-mode:
|
||||||
when: on_failure
|
when: on_failure
|
||||||
before_script:
|
before_script:
|
||||||
- *ssh_default
|
- *ssh_default
|
||||||
|
only:
|
||||||
|
- main
|
||||||
script:
|
script:
|
||||||
- echo "Stopping screen session"
|
- echo "Stopping screen session"
|
||||||
- ssh $DEPLOY_USER@$DEPLOY_HOST "screen -X -S website-firq-npx kill;"
|
- ssh $DEPLOY_USER@$DEPLOY_HOST "screen -X -S website-firq-npx kill;"
|
||||||
|
|
@ -111,6 +130,10 @@ maintenance-mode:
|
||||||
redeploy-site:
|
redeploy-site:
|
||||||
stage: scripts
|
stage: scripts
|
||||||
when: manual
|
when: manual
|
||||||
|
only:
|
||||||
|
- tags
|
||||||
|
except:
|
||||||
|
- branches
|
||||||
before_script:
|
before_script:
|
||||||
- *ssh_default
|
- *ssh_default
|
||||||
script:
|
script:
|
||||||
|
|
@ -119,3 +142,18 @@ redeploy-site:
|
||||||
- echo "Restarting screen session"
|
- echo "Restarting screen session"
|
||||||
- ssh $DEPLOY_USER@$DEPLOY_HOST "screen -S website-firq-npx -dm npx serve public/ -p 9000 -c serve.json"
|
- ssh $DEPLOY_USER@$DEPLOY_HOST "screen -S website-firq-npx -dm npx serve public/ -p 9000 -c serve.json"
|
||||||
- echo "Website is up on https://firq.dev/"
|
- echo "Website is up on https://firq.dev/"
|
||||||
|
|
||||||
|
redeploy-staging:
|
||||||
|
stage: scripts
|
||||||
|
when: manual
|
||||||
|
except:
|
||||||
|
- main
|
||||||
|
- tags
|
||||||
|
before_script:
|
||||||
|
- *ssh_default
|
||||||
|
script:
|
||||||
|
- echo "Stopping screen session"
|
||||||
|
- ssh $DEPLOY_USER@$DEPLOY_HOST "screen -X -S staging-firq-npx kill" || true
|
||||||
|
- echo "Restarting screen session"
|
||||||
|
- ssh $DEPLOY_USER@$DEPLOY_HOST "screen -S staging-firq-npx -dm npx serve staging/ -p 9100 -c serve.json"
|
||||||
|
- echo "Staging environment is up!"
|
||||||
|
|
|
||||||
3665
package-lock.json
generated
3665
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"name": "@firq/fgosite",
|
"name": "@firq/fgosite",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"version": "0.1.2",
|
"version": "0.1.3",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "astro dev",
|
"dev": "astro dev",
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/sitemap": "^1.2.1",
|
"@astrojs/sitemap": "^1.2.1",
|
||||||
"astro": "^2.1.3",
|
"astro": "^2.8.0",
|
||||||
"iconoir": "^6.1.0"
|
"iconoir": "^6.1.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -37,7 +37,7 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
height: 1.5rem;
|
height: 1.5rem;
|
||||||
width: 1.5rem;
|
width: 1.5rem;
|
||||||
border-radius: 50%;
|
border-radius: 40%;
|
||||||
background-color: var(--c-darkpurple);
|
background-color: var(--c-darkpurple);
|
||||||
transition: transform var(--speed) var(--ease);
|
transition: transform var(--speed) var(--ease);
|
||||||
}
|
}
|
||||||
|
|
@ -96,6 +96,7 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transition: transform var(--speed) var(--ease);
|
transition: transform var(--speed) var(--ease);
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
|
border-radius: 1.25rem;
|
||||||
}
|
}
|
||||||
a:hover > article {
|
a:hover > article {
|
||||||
transform: scaleY(102.5%) scaleX(101%);
|
transform: scaleY(102.5%) scaleX(101%);
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,6 @@ if (mlb === 'false') {
|
||||||
---
|
---
|
||||||
|
|
||||||
<article>
|
<article>
|
||||||
<div class="heading-center">{name}</div>
|
|
||||||
<div>
|
<div>
|
||||||
<img class="ce-crop" src={ce_img} alt={name} />
|
<img class="ce-crop" src={ce_img} alt={name} />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -33,6 +32,7 @@ if (mlb === 'false') {
|
||||||
}
|
}
|
||||||
|
|
||||||
article {
|
article {
|
||||||
|
border-radius: 1.25rem;
|
||||||
background-color: var(--c-darkergray);
|
background-color: var(--c-darkergray);
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
|
|
@ -44,11 +44,10 @@ if (mlb === 'false') {
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 100%;
|
grid-template-columns: 100%;
|
||||||
grid-template-rows: auto auto 3em;
|
grid-template-rows: auto 3em;
|
||||||
gap: 0px 0px;
|
gap: 0px 0px;
|
||||||
grid-auto-flow: row;
|
grid-auto-flow: row;
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
'.'
|
|
||||||
'.'
|
'.'
|
||||||
'.';
|
'.';
|
||||||
}
|
}
|
||||||
|
|
@ -62,6 +61,8 @@ if (mlb === 'false') {
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
|
border-radius: 1.5rem;
|
||||||
|
margin-top: 1rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
|
|
@ -84,8 +85,7 @@ if (mlb === 'false') {
|
||||||
}
|
}
|
||||||
|
|
||||||
.mlb {
|
.mlb {
|
||||||
width: 120px;
|
width: 5.5rem;
|
||||||
height: 30px;
|
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
@ -103,11 +103,13 @@ if (mlb === 'false') {
|
||||||
}
|
}
|
||||||
article {
|
article {
|
||||||
width: 10em;
|
width: 10em;
|
||||||
grid-template-columns: auto;
|
|
||||||
grid-template-rows: auto auto 3em;
|
|
||||||
}
|
}
|
||||||
.mlbalign {
|
.mlbalign {
|
||||||
width: 7.5em;
|
width: 7.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mlb {
|
||||||
|
width: 7rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -24,15 +24,27 @@ const icon: string = `background-image: url('/assets/social/${image}.webp')`
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
article div {
|
||||||
|
border-radius: 1.25rem;
|
||||||
|
background-size: contain;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
--size-value: 6.25rem;
|
||||||
|
width: var(--size-value);
|
||||||
|
height: var(--size-value);
|
||||||
|
}
|
||||||
|
|
||||||
article:hover span {
|
article:hover span {
|
||||||
padding: 0.5rem 0.5rem;
|
border-radius: 1.25rem;
|
||||||
|
padding: 0 0.5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: var(--c-darkgray);
|
background-color: var(--c-darkgray);
|
||||||
height: 85%;
|
height: calc(var(--size-value) + 0.1rem);
|
||||||
width: 100%;
|
width: calc(var(--size-value) + 0.1rem);
|
||||||
opacity: 90%;
|
opacity: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -51,16 +63,8 @@ const icon: string = `background-image: url('/assets/social/${image}.webp')`
|
||||||
article span {
|
article span {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
article div {
|
|
||||||
background-size: contain;
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
article {
|
article {
|
||||||
|
border-radius: 1.25rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@ const img: string = `/assets/favourites/${image}.webp`
|
||||||
.heading {
|
.heading {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 4rem;
|
height: 4rem;
|
||||||
font-size: 22px;
|
font-size: 24px;
|
||||||
color: white;
|
color: white;
|
||||||
max-width: 200px;
|
max-width: 200px;
|
||||||
padding-bottom: 0.3rem;
|
padding-bottom: 0.3rem;
|
||||||
|
|
@ -38,6 +38,7 @@ const img: string = `/assets/favourites/${image}.webp`
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
border-radius: 1rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -54,7 +55,7 @@ const img: string = `/assets/favourites/${image}.webp`
|
||||||
}
|
}
|
||||||
|
|
||||||
a > img {
|
a > img {
|
||||||
padding: 0.25em;
|
padding: 0px 0.25em;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
@ -67,7 +68,7 @@ const img: string = `/assets/favourites/${image}.webp`
|
||||||
}
|
}
|
||||||
|
|
||||||
a > img {
|
a > img {
|
||||||
padding: 1.5em;
|
padding: 0px 1.5em;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -110,7 +110,7 @@
|
||||||
justify-self: top;
|
justify-self: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1120px) {
|
@media (min-width: 1140px) {
|
||||||
.mobile {
|
.mobile {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,6 @@ if (bond10 === 'false') {
|
||||||
---
|
---
|
||||||
|
|
||||||
<article>
|
<article>
|
||||||
<div class="heading">{name}</div>
|
|
||||||
<img src={servant_img} alt={name} />
|
<img src={servant_img} alt={name} />
|
||||||
<h2 class="subtext">
|
<h2 class="subtext">
|
||||||
Level {level}<br />
|
Level {level}<br />
|
||||||
|
|
@ -43,7 +42,7 @@ if (bond10 === 'false') {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 22px;
|
font-size: 24px;
|
||||||
color: white;
|
color: white;
|
||||||
max-width: 200px;
|
max-width: 200px;
|
||||||
padding-bottom: 0.3rem;
|
padding-bottom: 0.3rem;
|
||||||
|
|
@ -67,18 +66,21 @@ if (bond10 === 'false') {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background-color: var(--c-darkergray);
|
background-color: var(--c-darkergray);
|
||||||
border-color: var(--c-darkgray);
|
border-color: var(--c-darkgray);
|
||||||
padding: 0em 0.75em;
|
padding: 0em 0.75em 0.5rem 0.75em;
|
||||||
width: 40%;
|
width: 40%;
|
||||||
height: auto;
|
height: auto;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transition: transform var(--speed) var(--ease);
|
transition: transform var(--speed) var(--ease);
|
||||||
|
border-radius: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
article > img {
|
article > img {
|
||||||
width: 120px;
|
width: 7.5rem;
|
||||||
height: 120px;
|
height: 7.5rem;
|
||||||
|
border-radius: 2.5rem;
|
||||||
|
margin-top: 0.75rem;
|
||||||
}
|
}
|
||||||
.subtext {
|
.subtext {
|
||||||
color: white;
|
color: white;
|
||||||
|
|
@ -94,9 +96,10 @@ if (bond10 === 'false') {
|
||||||
transform: scaleY(0);
|
transform: scaleY(0);
|
||||||
transform-origin: top;
|
transform-origin: top;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 95%;
|
top: 92.5%;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
|
border-radius: 0px 0px 1.25rem 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
article:hover .expand-on-hover {
|
article:hover .expand-on-hover {
|
||||||
|
|
@ -116,7 +119,7 @@ if (bond10 === 'false') {
|
||||||
|
|
||||||
@media (min-width: 512px) {
|
@media (min-width: 512px) {
|
||||||
article {
|
article {
|
||||||
padding: 10px 10px;
|
padding: 10px;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
@ -127,8 +130,11 @@ if (bond10 === 'false') {
|
||||||
}
|
}
|
||||||
|
|
||||||
.bond-ce {
|
.bond-ce {
|
||||||
width: 128px;
|
height: 3.5rem;
|
||||||
height: 58px;
|
}
|
||||||
|
|
||||||
|
.expand-on-hover {
|
||||||
|
top: 95%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -65,27 +65,33 @@ if (user !== undefined) {
|
||||||
transition: transform var(--speed) var(--ease);
|
transition: transform var(--speed) var(--ease);
|
||||||
height: auto;
|
height: auto;
|
||||||
width: auto;
|
width: auto;
|
||||||
|
border-radius: 1.25rem;
|
||||||
|
padding-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
article:hover {
|
article:hover {
|
||||||
transform: scale(var(--hover-scale));
|
transform: scale(var(--hover-scale));
|
||||||
}
|
}
|
||||||
article > .icon {
|
article > .icon {
|
||||||
width: 128px;
|
border-radius: 1.25rem;
|
||||||
height: 128px;
|
--size-value: 7rem;
|
||||||
object-fit: cover;
|
width: var(--size-value);
|
||||||
|
height: var(--size-value);
|
||||||
|
margin: 0.5rem;
|
||||||
|
object-fit: contain;
|
||||||
object-position: 0% 0%;
|
object-position: 0% 0%;
|
||||||
}
|
}
|
||||||
|
|
||||||
article:hover .icon span {
|
article:hover .icon span {
|
||||||
padding: 0.5rem 0.5rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: var(--c-darkgray);
|
background-color: var(--c-darkgray);
|
||||||
height: 90%;
|
height: calc(var(--size-value) + 0.1rem);
|
||||||
width: 90%;
|
width: calc(var(--size-value) + 0.1rem);
|
||||||
opacity: 90%;
|
opacity: 90%;
|
||||||
|
border-radius: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
article:hover span h2 {
|
article:hover span h2 {
|
||||||
|
|
@ -95,6 +101,7 @@ if (user !== undefined) {
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
line-height: 150%;
|
line-height: 150%;
|
||||||
|
padding: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
article span h2 {
|
article span h2 {
|
||||||
|
|
@ -138,16 +145,19 @@ if (user !== undefined) {
|
||||||
transform: scaleY(0);
|
transform: scaleY(0);
|
||||||
transform-origin: top;
|
transform-origin: top;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 95%;
|
top: 90%;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
color: white;
|
color: white;
|
||||||
|
border-radius: 0px 0px 1.25rem 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.expand-on-hover img {
|
.expand-on-hover img {
|
||||||
width: 3rem;
|
width: 3rem;
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
margin: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.expand-on-hover h2 {
|
.expand-on-hover h2 {
|
||||||
|
|
|
||||||
|
|
@ -33,28 +33,32 @@ const icon: string = `background-image: url('/assets/technologies/${image}.webp'
|
||||||
height: auto;
|
height: auto;
|
||||||
width: auto;
|
width: auto;
|
||||||
line-height: 100px;
|
line-height: 100px;
|
||||||
|
border-radius: 1.25rem;
|
||||||
}
|
}
|
||||||
article:hover {
|
article:hover {
|
||||||
transform: scale(var(--hover-scale));
|
transform: scale(var(--hover-scale));
|
||||||
}
|
}
|
||||||
article > div {
|
article > div {
|
||||||
|
border-radius: 1.25rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
width: 100px;
|
--size-value: 6.25rem;
|
||||||
height: 100px;
|
width: var(--size-value);
|
||||||
|
height: var(--size-value);
|
||||||
}
|
}
|
||||||
|
|
||||||
article:hover span {
|
article:hover span {
|
||||||
|
border-radius: 1.25rem;
|
||||||
padding: 0 0.5rem;
|
padding: 0 0.5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: var(--c-darkgray);
|
background-color: var(--c-darkgray);
|
||||||
height: 100%;
|
height: calc(var(--size-value) + 0.1rem);
|
||||||
width: 100%;
|
width: calc(var(--size-value) + 0.1rem);
|
||||||
opacity: 90%;
|
opacity: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -15,11 +15,17 @@ const { title } = Astro.props
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
h1 {
|
h1 {
|
||||||
|
font-size: 26px;
|
||||||
|
line-height: 32px;
|
||||||
|
letter-spacing: -1px;
|
||||||
color: white;
|
color: white;
|
||||||
margin: 0.5rem 0.75rem 0.5rem 0.75rem;
|
margin: 0.5rem 0.75rem 0.5rem 0.75rem;
|
||||||
padding: 0.25rem 0.75rem;
|
padding: 0.25rem 0.75rem;
|
||||||
width: max-content;
|
width: max-content;
|
||||||
background-color: var(--c-darkgray);
|
background-color: var(--c-darkgray);
|
||||||
|
padding: 0.25rem 1rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
div {
|
div {
|
||||||
row-gap: 1em;
|
row-gap: 1em;
|
||||||
|
|
|
||||||
|
|
@ -31,14 +31,19 @@ const { title } = Astro.props
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
div h1 {
|
div h1 {
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: 48px;
|
||||||
|
letter-spacing: -1px;
|
||||||
color: white;
|
color: white;
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0px;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
padding: 0.25rem 0.75rem;
|
padding: 0.25rem 1.5rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
max-width: max-content;
|
max-width: max-content;
|
||||||
background-color: var(--c-darkgray);
|
background-color: var(--c-darkgray);
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
@media (min-width: 512px) {
|
@media (min-width: 512px) {
|
||||||
div {
|
div {
|
||||||
|
|
|
||||||
|
|
@ -42,11 +42,17 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
|
font-size: 34px;
|
||||||
|
line-height: 40px;
|
||||||
|
letter-spacing: -1px;
|
||||||
color: white;
|
color: white;
|
||||||
margin: 0.5rem 3rem 0.5rem 3rem;
|
margin: 0.5rem 3rem 0.5rem 3rem;
|
||||||
padding: 0.25rem 0.75rem;
|
padding: 0.25rem 0.75rem;
|
||||||
max-width: max-content;
|
max-width: max-content;
|
||||||
background-color: var(--c-darkgray);
|
background-color: var(--c-darkgray);
|
||||||
|
padding: 0.25rem 1rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
p {
|
p {
|
||||||
color: white;
|
color: white;
|
||||||
|
|
@ -54,6 +60,8 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
|
||||||
padding: 0.25rem 0.75rem;
|
padding: 0.25rem 0.75rem;
|
||||||
max-width: max-content;
|
max-width: max-content;
|
||||||
background-color: var(--c-gray);
|
background-color: var(--c-gray);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
article :global(h2) {
|
article :global(h2) {
|
||||||
margin-right: 3rem;
|
margin-right: 3rem;
|
||||||
|
|
@ -62,6 +70,9 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
|
||||||
padding: 0.25rem 0.75rem;
|
padding: 0.25rem 0.75rem;
|
||||||
max-width: max-content;
|
max-width: max-content;
|
||||||
background-color: var(--c-darkgray);
|
background-color: var(--c-darkgray);
|
||||||
|
padding: 0.25rem 1rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
article :global(h3) {
|
article :global(h3) {
|
||||||
|
|
@ -72,6 +83,9 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
|
||||||
padding: 0.25rem 0.75rem;
|
padding: 0.25rem 0.75rem;
|
||||||
max-width: max-content;
|
max-width: max-content;
|
||||||
background-color: var(--c-darkgray);
|
background-color: var(--c-darkgray);
|
||||||
|
padding: 0.25rem 1rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
article :global(h4) {
|
article :global(h4) {
|
||||||
|
|
@ -82,6 +96,9 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
|
||||||
padding: 0.25rem 0.75rem;
|
padding: 0.25rem 0.75rem;
|
||||||
max-width: max-content;
|
max-width: max-content;
|
||||||
background-color: var(--c-darkgray);
|
background-color: var(--c-darkgray);
|
||||||
|
padding: 0.25rem 1rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
article :global(a) {
|
article :global(a) {
|
||||||
color: #dcb7ff;
|
color: #dcb7ff;
|
||||||
|
|
@ -103,18 +120,33 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
|
||||||
color: orange;
|
color: orange;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1500px) {
|
@media (min-width: 1000px) {
|
||||||
article {
|
article {
|
||||||
margin-left: 15rem;
|
margin-left: 10rem;
|
||||||
margin-right: 15rem;
|
margin-right: 10rem;
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
margin-left: 15rem;
|
margin-left: 10rem;
|
||||||
margin-right: 15rem;
|
margin-right: 10rem;
|
||||||
}
|
}
|
||||||
p {
|
p {
|
||||||
margin-left: 15rem;
|
margin-left: 10rem;
|
||||||
margin-right: 15rem;
|
margin-right: 10rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1500px) {
|
||||||
|
article {
|
||||||
|
margin-left: 20rem;
|
||||||
|
margin-right: 20rem;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
margin-left: 20rem;
|
||||||
|
margin-right: 20rem;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin-left: 20rem;
|
||||||
|
margin-right: 20rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -46,6 +46,9 @@ const { title } = Astro.props
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: 48px;
|
||||||
|
letter-spacing: -1px;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 2.25rem;
|
font-size: 2.25rem;
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
|
|
@ -55,6 +58,9 @@ const { title } = Astro.props
|
||||||
padding: 0.25rem 0.75rem;
|
padding: 0.25rem 0.75rem;
|
||||||
max-width: max-content;
|
max-width: max-content;
|
||||||
background-color: var(--c-darkgray);
|
background-color: var(--c-darkgray);
|
||||||
|
padding: 0.25rem 1.5rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
.wrapper {
|
.wrapper {
|
||||||
margin: 2rem 3rem 0.5rem 3rem;
|
margin: 2rem 3rem 0.5rem 3rem;
|
||||||
|
|
@ -80,12 +86,12 @@ const { title } = Astro.props
|
||||||
}
|
}
|
||||||
@media (min-width: 1500px) {
|
@media (min-width: 1500px) {
|
||||||
.wrapper {
|
.wrapper {
|
||||||
margin-left: 15rem;
|
margin-left: 20rem;
|
||||||
margin-right: 15rem;
|
margin-right: 20rem;
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
margin-left: 15rem;
|
margin-left: 20rem;
|
||||||
margin-right: 15rem;
|
margin-right: 20rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -16,10 +16,16 @@ const { title } = Astro.props
|
||||||
<style>
|
<style>
|
||||||
h1 {
|
h1 {
|
||||||
color: white;
|
color: white;
|
||||||
|
font-size: 26px;
|
||||||
|
line-height: 32px;
|
||||||
|
letter-spacing: -1px;
|
||||||
margin: 0.5rem 0px 0.5rem 0.5em;
|
margin: 0.5rem 0px 0.5rem 0.5em;
|
||||||
padding: 0.25rem 0.75rem;
|
padding: 0.25rem 0.75rem;
|
||||||
width: max-content;
|
width: max-content;
|
||||||
background-color: var(--c-darkgray);
|
background-color: var(--c-darkgray);
|
||||||
|
padding: 0.25rem 1rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
div {
|
div {
|
||||||
row-gap: 1em;
|
row-gap: 1em;
|
||||||
|
|
|
||||||
|
|
@ -33,6 +33,9 @@ if (abovetext === undefined) {
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: 48px;
|
||||||
|
letter-spacing: -1px;
|
||||||
color: white;
|
color: white;
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
@ -41,6 +44,9 @@ if (abovetext === undefined) {
|
||||||
padding: 0.25rem 0.75rem;
|
padding: 0.25rem 0.75rem;
|
||||||
max-width: max-content;
|
max-width: max-content;
|
||||||
background-color: var(--c-darkgray);
|
background-color: var(--c-darkgray);
|
||||||
|
padding: 0.25rem 1.5rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
h2 {
|
h2 {
|
||||||
color: white;
|
color: white;
|
||||||
|
|
|
||||||
|
|
@ -14,9 +14,11 @@ import featured_data from '../../static/assets/data/_featureddata.json'
|
||||||
|
|
||||||
const important_data = tadata.filter(function (el) {
|
const important_data = tadata.filter(function (el) {
|
||||||
return [
|
return [
|
||||||
'Ibuki 3T (Lostbelt 5.5)',
|
'Ibuki 3T (LB 5.5)',
|
||||||
'DB 7T (No Duplicates)',
|
'DB 7T (No Duplicates)',
|
||||||
'Kingprotea 1T',
|
'Kingprotea 1T',
|
||||||
|
'Goetia Memorial Quest 2T',
|
||||||
|
'Morgan 3T (LB 6) Skadi'
|
||||||
].includes(el.title)
|
].includes(el.title)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"site": "Discord: firq",
|
"site": "Discord: firq",
|
||||||
"link": "https://discord.gg",
|
"link": "https://discord.com/users/186014064835690496",
|
||||||
"image": "discord"
|
"image": "discord"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@
|
||||||
"turns": "1T"
|
"turns": "1T"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Ibuki 3T (Lostbelt 5.5)",
|
"title": "Ibuki 3T (LB 5.5)",
|
||||||
"link": "https://www.youtube.com/watch?v=AaqRN73dO5k",
|
"link": "https://www.youtube.com/watch?v=AaqRN73dO5k",
|
||||||
"image": "ibuki",
|
"image": "ibuki",
|
||||||
"date": "2022-11-22",
|
"date": "2022-11-22",
|
||||||
|
|
@ -48,7 +48,7 @@
|
||||||
"turns": "2T"
|
"turns": "2T"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Taira 3T (Lostbelt 5.5)",
|
"title": "Taira 3T (LB 5.5)",
|
||||||
"link": "https://www.youtube.com/watch?v=YtRvahqFA0Y",
|
"link": "https://www.youtube.com/watch?v=YtRvahqFA0Y",
|
||||||
"image": "taira",
|
"image": "taira",
|
||||||
"date": "2022-11-22",
|
"date": "2022-11-22",
|
||||||
|
|
@ -56,7 +56,7 @@
|
||||||
"turns": "3T"
|
"turns": "3T"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Douman 3T (Lostbelt 5.5)",
|
"title": "Douman 3T (LB 5.5)",
|
||||||
"link": "https://www.youtube.com/watch?v=6cstr3vTd8Y",
|
"link": "https://www.youtube.com/watch?v=6cstr3vTd8Y",
|
||||||
"image": "douman",
|
"image": "douman",
|
||||||
"date": "2022-11-23",
|
"date": "2022-11-23",
|
||||||
|
|
@ -88,7 +88,7 @@
|
||||||
"turns": "3T"
|
"turns": "3T"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Kirschtaria 3T (Lostbelt 5)",
|
"title": "Kirschtaria 3T (LB 5)",
|
||||||
"link": "https://www.youtube.com/watch?v=aYlyfAzuFw0",
|
"link": "https://www.youtube.com/watch?v=aYlyfAzuFw0",
|
||||||
"image": "kirschtaria",
|
"image": "kirschtaria",
|
||||||
"date": "2022-04-04",
|
"date": "2022-04-04",
|
||||||
|
|
@ -166,5 +166,61 @@
|
||||||
"date": "2023-03-20",
|
"date": "2023-03-20",
|
||||||
"ta_servant": "shishou",
|
"ta_servant": "shishou",
|
||||||
"turns": "3T"
|
"turns": "3T"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Goetia Memorial Quest 2T",
|
||||||
|
"link": "https://www.youtube.com/watch?v=lZHgSVpPv24",
|
||||||
|
"image": "goetia",
|
||||||
|
"date": "2023-07-04",
|
||||||
|
"ta_servant": "skadi",
|
||||||
|
"turns": "2T"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Melusine 3T (LB 6)",
|
||||||
|
"link": "https://www.youtube.com/watch?v=f35hlBXuR3w",
|
||||||
|
"image": "melusine",
|
||||||
|
"date": "2023-06-26",
|
||||||
|
"ta_servant": "shishou",
|
||||||
|
"turns": "3T"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Morgan 3T (LB 6) Shishou",
|
||||||
|
"link": "https://www.youtube.com/watch?v=7wQ6iabqgEc",
|
||||||
|
"image": "morgan",
|
||||||
|
"date": "2023-06-26",
|
||||||
|
"ta_servant": "shishou",
|
||||||
|
"turns": "3T"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Morgan 3T (LB 6) Skadi",
|
||||||
|
"link": "https://www.youtube.com/watch?v=sQ7HHl1Pb3c",
|
||||||
|
"image": "morgan",
|
||||||
|
"date": "2023-06-25",
|
||||||
|
"ta_servant": "skadi",
|
||||||
|
"turns": "3T"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Woodwose 3T (LB 6)",
|
||||||
|
"link": "https://www.youtube.com/watch?v=ZPgIDZjrGA0",
|
||||||
|
"image": "woodwose",
|
||||||
|
"date": "2023-06-23",
|
||||||
|
"ta_servant": "shishou",
|
||||||
|
"turns": "3T"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Barghest 2T (LB 6)",
|
||||||
|
"link": "https://www.youtube.com/watch?v=kjMAccbq7-A",
|
||||||
|
"image": "barghest",
|
||||||
|
"date": "2023-06-21",
|
||||||
|
"ta_servant": "tomoe",
|
||||||
|
"turns": "2T"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Calamity of Norwich 3T (LB 6)",
|
||||||
|
"link": "https://www.youtube.com/watch?v=IwkCnVej_PY",
|
||||||
|
"image": "calamityofnorwich",
|
||||||
|
"date": "2023-06-08",
|
||||||
|
"ta_servant": "shishou",
|
||||||
|
"turns": "3T"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
||||||
BIN
static/assets/ta_icons/barghest.webp
Normal file
BIN
static/assets/ta_icons/barghest.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
static/assets/ta_icons/calamityofnorwich.webp
Normal file
BIN
static/assets/ta_icons/calamityofnorwich.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
static/assets/ta_icons/goetia.webp
Normal file
BIN
static/assets/ta_icons/goetia.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
BIN
static/assets/ta_icons/melusine.webp
Normal file
BIN
static/assets/ta_icons/melusine.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
static/assets/ta_icons/morgan.webp
Normal file
BIN
static/assets/ta_icons/morgan.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
static/assets/ta_icons/ta_servants/tomoe.webp
Normal file
BIN
static/assets/ta_icons/ta_servants/tomoe.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
static/assets/ta_icons/woodwose.webp
Normal file
BIN
static/assets/ta_icons/woodwose.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Loading…
Reference in a new issue