Another attempt at a major redesign, but for real this time, i swear
All checks were successful
/ get-version (push) Successful in 3s
/ astro-check (push) Successful in 12s
/ check-tag (push) Successful in 2s
/ checking (push) Successful in 12s
/ build-site (push) Successful in 1m9s
/ create-release (push) Successful in 6s
/ auto-deploy-dockge (push) Successful in 21s

This commit is contained in:
Firq 2024-10-21 16:57:02 +02:00
parent 676e5e2b00
commit 9d8493273d
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
10 changed files with 54 additions and 69 deletions

View file

@ -1,7 +1,7 @@
{
"name": "@firq/fgosite",
"type": "module",
"version": "0.2.0-pre.10",
"version": "0.2.0-pre.11",
"private": true,
"scripts": {
"dev": "astro dev",

Binary file not shown.

Before

Width:  |  Height:  |  Size: 554 KiB

After

Width:  |  Height:  |  Size: 425 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 565 KiB

After

Width:  |  Height:  |  Size: 421 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 561 KiB

After

Width:  |  Height:  |  Size: 436 KiB

View file

@ -35,14 +35,12 @@ const mlb_image = mlb ? 'mlbalign' : 'hidemlb'
article {
border-radius: 1.25rem;
border: 2px var(--c-darkgray) solid;
background-color: var(--c-darkergray);
padding: 20px;
padding-top: 5px;
width: 35%;
height: auto;
justify-content: center;
text-align: center;
transition: transform var(--speed) var(--ease);
margin: 0px;
display: grid;
grid-template-columns: 100%;
@ -55,11 +53,11 @@ const mlb_image = mlb ? 'mlbalign' : 'hidemlb'
}
article:hover {
transform: scale(var(--hover-scale));
border: 2px var(--c-darkpurple) solid;
}
article div {
margin: 0.5em auto;
margin: auto;
}
img {
@ -70,27 +68,17 @@ const mlb_image = mlb ? 'mlbalign' : 'hidemlb'
margin-right: auto;
}
.heading-center {
display: flex;
height: 4rem;
width: 100%;
align-items: center;
justify-content: center;
font-size: 1.25em;
color: white;
font-weight: bold;
}
.ce-crop {
width: 6em;
height: 6em;
width: 100px;
height: 100px;
}
.mlb {
width: 5.5rem;
width: 85px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
}
.mlbalign {
@ -101,18 +89,18 @@ const mlb_image = mlb ? 'mlbalign' : 'hidemlb'
@media (min-width: 512px) {
.ce-crop {
width: 7.5em;
height: 7.5em;
width: 100px;
height: 100px;
}
article {
width: 10em;
width: 128px;
}
.mlbalign {
width: 7.5em;
width: 85px;
}
.mlb {
width: 7rem;
width: 85px;
}
}
</style>

View file

@ -34,7 +34,7 @@ const loadedImage = plsLoadImage(images, imagePath)
<style>
.heading {
display: flex;
height: 4rem;
height: 2.5rem;
font-size: 24px;
color: white;
max-width: 200px;
@ -51,8 +51,7 @@ const loadedImage = plsLoadImage(images, imagePath)
flex-wrap: wrap;
flex-direction: column;
background-color: var(--c-darkergray);
border-color: var(--c-darkgray);
padding: 0em 0.75em;
padding: 0em 0.5em;
width: max(40%, 200px);
height: auto;
justify-content: center;
@ -60,15 +59,17 @@ const loadedImage = plsLoadImage(images, imagePath)
text-align: center;
transition: transform var(--speed) var(--ease);
text-decoration: none;
border: 2px var(--c-darkgray) solid;
&:hover {
transform: scale(var(--hover-scale));
border: 2px var(--c-darkpurple) solid;
}
img {
padding: 0px 0.25em;
width: min(90%, 200px);
width: min(90%, 160px);
margin: 0px 0.5rem;
height: auto;
border-radius: 1rem;
}
}
@ -78,8 +79,7 @@ const loadedImage = plsLoadImage(images, imagePath)
width: auto;
height: auto;
img {
padding: 0px 1.5em;
width: 200px;
width: 160px;
}
}
}
@ -88,7 +88,7 @@ const loadedImage = plsLoadImage(images, imagePath)
color: white;
font-size: 16px;
font-weight: 600;
margin: 5;
margin: 0.5rem;
line-height: 20px;
}
</style>

View file

@ -64,7 +64,8 @@ if (bond10 === false) {
}
article:hover {
transform: scale(var(--hover-scale));
transform: scale(1);
border-color: var(--c-darkpurple);
}
article {
@ -72,14 +73,13 @@ if (bond10 === false) {
flex-wrap: wrap;
flex-direction: column;
background-color: var(--c-darkergray);
border-color: var(--c-darkgray);
border: 2px var(--c-darkgray) solid;
padding: 0em 0.75em 0.5rem 0.75em;
width: max(40%, 100px);
height: auto;
justify-content: center;
align-items: center;
text-align: center;
transition: transform var(--speed) var(--ease);
border-radius: 1.25rem;
}
@ -98,27 +98,27 @@ if (bond10 === false) {
}
.expand-on-hover {
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: 92.5%;
left: 0px;
right: 0px;
border-radius: 0px 0px 1.25rem 1.25rem;
width: 100%;
}
article:hover .expand-on-hover {
transform: scaleY(1);
transition: transform 200ms ease-in-out;
background-color: var(--c-duskgray);
}
.bond-ce {
padding-top: 0.75rem;
width: auto;
height: 3rem;
height: 3.5rem;
}
.unobtained {
@ -133,16 +133,12 @@ if (bond10 === false) {
}
article > img {
width: 200px;
height: 200px;
width: 128px;
height: 128px;
}
.bond-ce {
height: 3.5rem;
}
.expand-on-hover {
top: 95%;
height: 3rem;
}
}
</style>

View file

@ -1,6 +1,6 @@
---
import '@fontsource/work-sans/800.css'
import '@fontsource/work-sans/600.css'
import '@fontsource/work-sans/700.css'
import '@fontsource/work-sans/500.css'
export interface Props {
maintext: string
subtext: string
@ -22,7 +22,7 @@ const displayBackButton = returnbutton ? "": "display: none"
<style>
a {
font-weight: 600;
font-weight: 500;
font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
color: white;
margin: 1rem 0px 0px;
@ -63,14 +63,14 @@ const displayBackButton = returnbutton ? "": "display: none"
hyphens: auto;
padding-top: 2rem;
font-size: 2rem;
font-weight: 800;
font-weight: 700;
font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial,
sans-serif;
}
.sub {
font-size: 0.75rem;
font-weight: 600;
font-weight: 500;
font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial,
sans-serif;
margin-top: 0.5em;
@ -103,7 +103,7 @@ const displayBackButton = returnbutton ? "": "display: none"
font-size: 4rem;
}
.sub {
font-size: 1rem;
font-size: 1.2rem;
}
}
</style>

View file

@ -1,10 +1,11 @@
---
import '@fontsource/work-sans/800.css'
import '@fontsource/work-sans/700.css'
import '@fontsource/work-sans/500.css'
---
<div class="wrap">
<div class="head">Hi, I'm <span class="fancy">Firq</span></div>
<div class="sub">Nice to meet you</div>
<div class="sub">&lt;/ Software dev / Scathach enthusiast / Germany /&gt;</div>
<div class="fade"></div>
</div>
@ -31,14 +32,14 @@ import '@fontsource/work-sans/800.css'
.head {
padding-top: 2rem;
font-size: 3rem;
font-weight: 800;
font-weight: 700;
font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial,
sans-serif;
}
.sub {
font-size: 1rem;
font-weight: 800;
font-weight: 500;
font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial,
sans-serif;
}
@ -56,6 +57,15 @@ import '@fontsource/work-sans/800.css'
}
@media (min-width: 620px) {
.head {
font-size: 3rem;
}
.sub {
font-size: 1rem;
}
}
@media (min-width: 1000px) {
.head {
font-size: 4rem;
}
@ -63,13 +73,4 @@ import '@fontsource/work-sans/800.css'
font-size: 1.25rem;
}
}
@media (min-width: 1000px) {
.head {
font-size: 6rem;
}
.sub {
font-size: 1.5rem;
}
}
</style>

View file

@ -15,7 +15,7 @@ const description =
descriptionOverride={description}
>
<Hi />
<BaseSection title="Favourites">
<BaseSection title="Favourite Things">
{favouritesdata.map((item) => <FavouriteCard {...item} />)}
</BaseSection>
</Layout>