Merge branch 'feature/redesign' into 'main'

Rounded Edges Redesign

See merge request Firq/fgosite!3
This commit is contained in:
Firq 2023-07-08 15:07:19 +00:00
commit fcce0af5b2
27 changed files with 2477 additions and 1515 deletions

View file

@ -24,8 +24,6 @@ stages:
checking:
image: node:lts
stage: validate
only:
- main
before_script:
- npm install
script:
@ -39,8 +37,6 @@ build-site:
cache:
paths:
- node_modules/
only:
- main
script:
- npm install
- npm run build
@ -55,7 +51,9 @@ deploy-site:
stage: deploy
when: on_success
only:
- main
- tags
except:
- branches
before_script:
- *ssh_default
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"
- 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:
stage: post_deploy
before_script:
@ -101,6 +118,8 @@ maintenance-mode:
when: on_failure
before_script:
- *ssh_default
only:
- main
script:
- echo "Stopping screen session"
- ssh $DEPLOY_USER@$DEPLOY_HOST "screen -X -S website-firq-npx kill;"
@ -111,6 +130,10 @@ maintenance-mode:
redeploy-site:
stage: scripts
when: manual
only:
- tags
except:
- branches
before_script:
- *ssh_default
script:
@ -119,3 +142,18 @@ redeploy-site:
- echo "Restarting screen session"
- 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/"
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

File diff suppressed because it is too large Load diff

View file

@ -1,7 +1,7 @@
{
"name": "@firq/fgosite",
"type": "module",
"version": "0.1.2",
"version": "0.1.3",
"private": true,
"scripts": {
"dev": "astro dev",
@ -12,7 +12,7 @@
},
"dependencies": {
"@astrojs/sitemap": "^1.2.1",
"astro": "^2.1.3",
"astro": "^2.8.0",
"iconoir": "^6.1.0"
}
}

View file

@ -37,7 +37,7 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
visibility: visible;
height: 1.5rem;
width: 1.5rem;
border-radius: 50%;
border-radius: 40%;
background-color: var(--c-darkpurple);
transition: transform var(--speed) var(--ease);
}
@ -96,6 +96,7 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
text-align: center;
transition: transform var(--speed) var(--ease);
min-height: 100%;
border-radius: 1.25rem;
}
a:hover > article {
transform: scaleY(102.5%) scaleX(101%);

View file

@ -17,7 +17,6 @@ if (mlb === 'false') {
---
<article>
<div class="heading-center">{name}</div>
<div>
<img class="ce-crop" src={ce_img} alt={name} />
</div>
@ -33,6 +32,7 @@ if (mlb === 'false') {
}
article {
border-radius: 1.25rem;
background-color: var(--c-darkergray);
padding: 20px;
padding-top: 5px;
@ -44,11 +44,10 @@ if (mlb === 'false') {
margin: 0px;
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto auto 3em;
grid-template-rows: auto 3em;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
'.'
'.'
'.';
}
@ -62,6 +61,8 @@ if (mlb === 'false') {
}
img {
border-radius: 1.5rem;
margin-top: 1rem;
display: flex;
margin-left: auto;
margin-right: auto;
@ -84,8 +85,7 @@ if (mlb === 'false') {
}
.mlb {
width: 120px;
height: 30px;
width: 5.5rem;
margin-left: auto;
margin-right: auto;
}
@ -103,11 +103,13 @@ if (mlb === 'false') {
}
article {
width: 10em;
grid-template-columns: auto;
grid-template-rows: auto auto 3em;
}
.mlbalign {
width: 7.5em;
}
.mlb {
width: 7rem;
}
}
</style>

View file

@ -24,15 +24,27 @@ const icon: string = `background-image: url('/assets/social/${image}.webp')`
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 {
padding: 0.5rem 0.5rem;
border-radius: 1.25rem;
padding: 0 0.5rem;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: var(--c-darkgray);
height: 85%;
width: 100%;
height: calc(var(--size-value) + 0.1rem);
width: calc(var(--size-value) + 0.1rem);
opacity: 90%;
}
@ -51,16 +63,8 @@ const icon: string = `background-image: url('/assets/social/${image}.webp')`
article span {
display: none;
}
article div {
background-size: contain;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
article {
border-radius: 1.25rem;
display: flex;
align-items: center;
justify-content: center;

View file

@ -23,7 +23,7 @@ const img: string = `/assets/favourites/${image}.webp`
.heading {
display: flex;
height: 4rem;
font-size: 22px;
font-size: 24px;
color: white;
max-width: 200px;
padding-bottom: 0.3rem;
@ -38,6 +38,7 @@ const img: string = `/assets/favourites/${image}.webp`
}
a {
border-radius: 1rem;
display: flex;
flex-wrap: wrap;
flex-direction: column;
@ -54,7 +55,7 @@ const img: string = `/assets/favourites/${image}.webp`
}
a > img {
padding: 0.25em;
padding: 0px 0.25em;
width: 90%;
height: auto;
}
@ -67,7 +68,7 @@ const img: string = `/assets/favourites/${image}.webp`
}
a > img {
padding: 1.5em;
padding: 0px 1.5em;
width: 200px;
height: auto;
}

View file

@ -110,7 +110,7 @@
justify-self: top;
}
@media (min-width: 1120px) {
@media (min-width: 1140px) {
.mobile {
display: none;
}

View file

@ -23,7 +23,6 @@ if (bond10 === 'false') {
---
<article>
<div class="heading">{name}</div>
<img src={servant_img} alt={name} />
<h2 class="subtext">
Level {level}<br />
@ -43,7 +42,7 @@ if (bond10 === 'false') {
width: 100%;
align-items: center;
justify-content: center;
font-size: 22px;
font-size: 24px;
color: white;
max-width: 200px;
padding-bottom: 0.3rem;
@ -67,18 +66,21 @@ if (bond10 === 'false') {
flex-direction: column;
background-color: var(--c-darkergray);
border-color: var(--c-darkgray);
padding: 0em 0.75em;
padding: 0em 0.75em 0.5rem 0.75em;
width: 40%;
height: auto;
justify-content: center;
align-items: center;
text-align: center;
transition: transform var(--speed) var(--ease);
border-radius: 1.25rem;
}
article > img {
width: 120px;
height: 120px;
width: 7.5rem;
height: 7.5rem;
border-radius: 2.5rem;
margin-top: 0.75rem;
}
.subtext {
color: white;
@ -94,9 +96,10 @@ if (bond10 === 'false') {
transform: scaleY(0);
transform-origin: top;
position: absolute;
top: 95%;
top: 92.5%;
left: 0px;
right: 0px;
border-radius: 0px 0px 1.25rem 1.25rem;
}
article:hover .expand-on-hover {
@ -116,7 +119,7 @@ if (bond10 === 'false') {
@media (min-width: 512px) {
article {
padding: 10px 10px;
padding: 10px;
width: auto;
height: auto;
}
@ -127,8 +130,11 @@ if (bond10 === 'false') {
}
.bond-ce {
width: 128px;
height: 58px;
height: 3.5rem;
}
.expand-on-hover {
top: 95%;
}
}
</style>

View file

@ -65,27 +65,33 @@ if (user !== undefined) {
transition: transform var(--speed) var(--ease);
height: auto;
width: auto;
border-radius: 1.25rem;
padding-bottom: 1.5rem;
}
article:hover {
transform: scale(var(--hover-scale));
}
article > .icon {
width: 128px;
height: 128px;
object-fit: cover;
border-radius: 1.25rem;
--size-value: 7rem;
width: var(--size-value);
height: var(--size-value);
margin: 0.5rem;
object-fit: contain;
object-position: 0% 0%;
}
article:hover .icon span {
padding: 0.5rem 0.5rem;
display: flex;
position: absolute;
align-items: center;
justify-content: center;
text-align: center;
background-color: var(--c-darkgray);
height: 90%;
width: 90%;
height: calc(var(--size-value) + 0.1rem);
width: calc(var(--size-value) + 0.1rem);
opacity: 90%;
border-radius: 1.25rem;
}
article:hover span h2 {
@ -95,6 +101,7 @@ if (user !== undefined) {
color: white;
font-size: 18px;
line-height: 150%;
padding: 0.5rem;
}
article span h2 {
@ -138,16 +145,19 @@ if (user !== undefined) {
transform: scaleY(0);
transform-origin: top;
position: absolute;
top: 95%;
top: 90%;
left: 0px;
right: 0px;
color: white;
border-radius: 0px 0px 1.25rem 1.25rem;
}
.expand-on-hover img {
width: 3rem;
height: 3rem;
margin: 0.5rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
border-radius: 0.5rem;
}
.expand-on-hover h2 {

View file

@ -33,28 +33,32 @@ const icon: string = `background-image: url('/assets/technologies/${image}.webp'
height: auto;
width: auto;
line-height: 100px;
border-radius: 1.25rem;
}
article:hover {
transform: scale(var(--hover-scale));
}
article > div {
border-radius: 1.25rem;
display: flex;
justify-content: center;
align-items: center;
background-size: contain;
width: 100px;
height: 100px;
--size-value: 6.25rem;
width: var(--size-value);
height: var(--size-value);
}
article:hover span {
border-radius: 1.25rem;
padding: 0 0.5rem;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: var(--c-darkgray);
height: 100%;
width: 100%;
height: calc(var(--size-value) + 0.1rem);
width: calc(var(--size-value) + 0.1rem);
opacity: 90%;
}

View file

@ -15,11 +15,17 @@ const { title } = Astro.props
<style>
h1 {
font-size: 26px;
line-height: 32px;
letter-spacing: -1px;
color: white;
margin: 0.5rem 0.75rem 0.5rem 0.75rem;
padding: 0.25rem 0.75rem;
width: max-content;
background-color: var(--c-darkgray);
padding: 0.25rem 1rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
}
div {
row-gap: 1em;

View file

@ -31,14 +31,19 @@ const { title } = Astro.props
position: relative;
}
div h1 {
font-size: 40px;
line-height: 48px;
letter-spacing: -1px;
color: white;
margin-top: 2rem;
margin-bottom: 0;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 0.25rem 0.75rem;
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: 512px) {
div {

View file

@ -42,11 +42,17 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
text-decoration: none;
}
h1 {
font-size: 34px;
line-height: 40px;
letter-spacing: -1px;
color: white;
margin: 0.5rem 3rem 0.5rem 3rem;
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-darkgray);
padding: 0.25rem 1rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
}
p {
color: white;
@ -54,6 +60,8 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-gray);
border-radius: 0.5rem;
padding-bottom: 0.5rem;
}
article :global(h2) {
margin-right: 3rem;
@ -62,6 +70,9 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-darkgray);
padding: 0.25rem 1rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
}
article :global(h3) {
@ -72,6 +83,9 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-darkgray);
padding: 0.25rem 1rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
}
article :global(h4) {
@ -82,6 +96,9 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-darkgray);
padding: 0.25rem 1rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
}
article :global(a) {
color: #dcb7ff;
@ -103,18 +120,33 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
color: orange;
}
@media (min-width: 1500px) {
@media (min-width: 1000px) {
article {
margin-left: 15rem;
margin-right: 15rem;
margin-left: 10rem;
margin-right: 10rem;
}
h1 {
margin-left: 15rem;
margin-right: 15rem;
margin-left: 10rem;
margin-right: 10rem;
}
p {
margin-left: 15rem;
margin-right: 15rem;
margin-left: 10rem;
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>

View file

@ -46,6 +46,9 @@ const { title } = Astro.props
z-index: -1;
}
h1 {
font-size: 40px;
line-height: 48px;
letter-spacing: -1px;
color: white;
font-size: 2.25rem;
margin-top: 1rem;
@ -55,6 +58,9 @@ const { title } = Astro.props
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-darkgray);
padding: 0.25rem 1.5rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
}
.wrapper {
margin: 2rem 3rem 0.5rem 3rem;
@ -80,12 +86,12 @@ const { title } = Astro.props
}
@media (min-width: 1500px) {
.wrapper {
margin-left: 15rem;
margin-right: 15rem;
margin-left: 20rem;
margin-right: 20rem;
}
h1 {
margin-left: 15rem;
margin-right: 15rem;
margin-left: 20rem;
margin-right: 20rem;
}
}
</style>

View file

@ -16,10 +16,16 @@ const { title } = Astro.props
<style>
h1 {
color: white;
font-size: 26px;
line-height: 32px;
letter-spacing: -1px;
margin: 0.5rem 0px 0.5rem 0.5em;
padding: 0.25rem 0.75rem;
width: max-content;
background-color: var(--c-darkgray);
padding: 0.25rem 1rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
}
div {
row-gap: 1em;

View file

@ -33,6 +33,9 @@ if (abovetext === undefined) {
padding: 1em;
}
h1 {
font-size: 40px;
line-height: 48px;
letter-spacing: -1px;
color: white;
margin-top: 2rem;
margin-bottom: 0;
@ -41,6 +44,9 @@ if (abovetext === undefined) {
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-darkgray);
padding: 0.25rem 1.5rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
}
h2 {
color: white;

View file

@ -14,9 +14,11 @@ import featured_data from '../../static/assets/data/_featureddata.json'
const important_data = tadata.filter(function (el) {
return [
'Ibuki 3T (Lostbelt 5.5)',
'Ibuki 3T (LB 5.5)',
'DB 7T (No Duplicates)',
'Kingprotea 1T',
'Goetia Memorial Quest 2T',
'Morgan 3T (LB 6) Skadi'
].includes(el.title)
})

View file

@ -11,7 +11,7 @@
},
{
"site": "Discord: firq",
"link": "https://discord.gg",
"link": "https://discord.com/users/186014064835690496",
"image": "discord"
},
{

View file

@ -24,7 +24,7 @@
"turns": "1T"
},
{
"title": "Ibuki 3T (Lostbelt 5.5)",
"title": "Ibuki 3T (LB 5.5)",
"link": "https://www.youtube.com/watch?v=AaqRN73dO5k",
"image": "ibuki",
"date": "2022-11-22",
@ -48,7 +48,7 @@
"turns": "2T"
},
{
"title": "Taira 3T (Lostbelt 5.5)",
"title": "Taira 3T (LB 5.5)",
"link": "https://www.youtube.com/watch?v=YtRvahqFA0Y",
"image": "taira",
"date": "2022-11-22",
@ -56,7 +56,7 @@
"turns": "3T"
},
{
"title": "Douman 3T (Lostbelt 5.5)",
"title": "Douman 3T (LB 5.5)",
"link": "https://www.youtube.com/watch?v=6cstr3vTd8Y",
"image": "douman",
"date": "2022-11-23",
@ -88,7 +88,7 @@
"turns": "3T"
},
{
"title": "Kirschtaria 3T (Lostbelt 5)",
"title": "Kirschtaria 3T (LB 5)",
"link": "https://www.youtube.com/watch?v=aYlyfAzuFw0",
"image": "kirschtaria",
"date": "2022-04-04",
@ -166,5 +166,61 @@
"date": "2023-03-20",
"ta_servant": "shishou",
"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"
}
]

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB