Firq/firq-dev-website
Firq/firq-dev-website
1
0
Fork 0
Code Issues Pull requests Projects Releases172 Packages1 Wiki Activity Actions

Animations fix

Browse source
This commit is contained in:
Firq 2025-04-17 20:06:18 +02:00
parent 14cc9e0b7e
commit ce4e7777e0
Signed by: Firq
GPG key ID: DCE182BA39C697B2
13 changed files with 23 additions and 37 deletions

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{
"name": "@firq/fgosite",
"version": "0.2.0-pre.106",
"version": "0.2.0-pre.107",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@firq/fgosite",
"version": "0.2.0-pre.106",
"version": "0.2.0-pre.107",
"dependencies": {
"@astro-community/astro-embed-youtube": "^0.5.6",
"@astrojs/check": "^0.9.4",

2
package.json
View file

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

12
src/components/cards/blogCard.astro
View file

@ -27,9 +27,6 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
</a>
<style>
* {
transition: all var(--a-time-default) var(--a-animation-1);
}
.circle {
display: none;
}
@ -77,6 +74,7 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
min-height: 100%;
border: 2px solid var(--c-primary-background);
border-radius: 1.25rem;
transition: border-color var(--a-time-default) var(--a-animation-1);
}
a:hover article {
@ -96,13 +94,17 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
border-width: 0.25rem;
border-color: var(--c-secondary-background);
border-radius: 40%;
transition: all var(--a-time-short) var(--a-animation-1);
transition:
height var(--a-time-short) var(--a-animation-1),
width var(--a-time-short) var(--a-animation-1),
margin-right var(--a-time-short) var(--a-animation-1),
transform var(--a-time-short) var(--a-animation-1);
}
a:hover > .circle {
height: 1.25rem;
width: 1.25rem;
translate: -0.125rem;
transform: translateX(-0.125rem);
margin-right: 4px;
}

5
src/components/cards/ceCard.astro
View file

@ -28,16 +28,13 @@ const mlb_image = mlb ? 'mlbalign' : 'hidemlb'
</article>
<style>
* {
transition: all var(--a-time-default) var(--a-animation-1);
}
.hidemlb {
display: none;
height: 1em;
}
article {
transition: border-color var(--a-time-default) var(--a-animation-1);
border-radius: 1.25rem;
border: 2px var(--c-primary-background) solid;
background-color: var(--c-primary-background);

5
src/components/cards/favouriteCard.astro
View file

@ -32,10 +32,6 @@ const loadedImage = plsLoadImage(images, imagePath)
</a>
<style>
* {
transition: all var(--a-time-default) var(--a-animation-1);
}
.heading {
display: flex;
height: fit-content;
@ -52,6 +48,7 @@ const loadedImage = plsLoadImage(images, imagePath)
}
a {
transition: border-color var(--a-time-default) var(--a-animation-1);
border-radius: 1rem;
display: flex;
flex-wrap: wrap;

5
src/components/cards/projectCard.astro
View file

@ -15,11 +15,8 @@ const target = url.startsWith("/") ? "" : "_blank"
</a>
<style>
* {
transition: all var(--a-time-default) var(--a-animation-1);
}
a {
transition: border-color var(--a-time-default) var(--a-animation-1);
align-items: center;
justify-content: center;
display: flex;

4
src/components/cards/servantCard.astro
View file

@ -47,7 +47,7 @@ let loading: "eager" | "lazy" = index <= 3 ? "eager" : "lazy";
<style>
article:hover {
transition: all var(--a-time-default) var(--a-animation-1);
transition: border-color var(--a-time-default) var(--a-animation-1), transform var(--a-time-default) var(--a-animation-1);
transform: scale(1);
border-color: var(--c-accent-1);
}
@ -97,7 +97,7 @@ let loading: "eager" | "lazy" = index <= 3 ? "eager" : "lazy";
article:hover .expand-on-hover {
transform: scaleY(1);
border-color: var(--c-accent-1);
transition: all var(--a-time-default) var(--a-animation-1);
transition: border-color var(--a-time-default) var(--a-animation-1), transform var(--a-time-default) var(--a-animation-1);
}
.bond-ce {

6
src/components/cards/taCard.astro
View file

@ -57,9 +57,6 @@ const hasuser = user !== undefined ? 'display: flex' : 'display: none'
</a>
<style>
* {
transition: all var(--a-time-default) var(--a-animation-1);
}
a {
text-decoration: none;
display: flex;
@ -78,6 +75,7 @@ const hasuser = user !== undefined ? 'display: flex' : 'display: none'
}
a:hover {
transition: border-color var(--a-time-default) var(--a-animation-1), transform var(--a-time-default) var(--a-animation-1);
transform: scale(1);
border-color: var(--c-accent-1);
z-index: 10;
@ -171,7 +169,7 @@ const hasuser = user !== undefined ? 'display: flex' : 'display: none'
a:hover .expand-on-hover {
transform: scaleY(1);
transition: all var(--a-time-default) var(--a-animation-1);
transition: border-color var(--a-time-default) var(--a-animation-1), transform var(--a-time-default) var(--a-animation-1), background-color var(--a-time-default) var(--a-animation-1);
background-color: var(--c-primary-background);
border-color: var(--c-accent-1);
}

5
src/components/cards/technologyCard.astro
View file

@ -28,15 +28,12 @@ const loadedImage = plsLoadImage(images_logos, imagePath)
</a>
<style>
* {
transition: all var(--a-time-default) var(--a-animation-1);
}
a {
text-decoration: none;
}
article {
transition: border-color var(--a-time-default) var(--a-animation-1);
display: flex;
position: relative;
align-items: center;

4
src/components/fgotaHero.astro
View file

@ -41,12 +41,11 @@ const display = fadeout ? "": "display: none"
background: var(--c-primary-background);
border-radius: 10px;
border: 2px var(--c-accent-1) solid;
transition: all var(--a-time-default) var(--a-animation-1);
transition: border-color var(--a-time-default) var(--a-animation-1);
}
a:hover {
border-color: var(--c-accent-1-alt);
transition: all var(--a-time-default) var(--a-animation-1);
}
.fade {
@ -66,6 +65,7 @@ const display = fadeout ? "": "display: none"
@supports (background-clip: text) {
a:hover .fancy {
transition: color var(--a-time-default) var(--a-animation-1);
background: linear-gradient(125deg, var(--c-accent-1), var(--c-accent-1-alt), var(--c-accent-2) );
background-clip: text;
color: transparent;

4
src/components/links/linkCard.astro
View file

@ -19,9 +19,6 @@ const icon_src_url = `url("${icon.src}")`
</a>
<style define:vars={{ icon_src_url }}>
* {
transition: all var(--a-time-default) var(--a-animation-1);
}
a {
display: flex;
align-items: center;
@ -34,6 +31,7 @@ const icon_src_url = `url("${icon.src}")`
}
a:hover {
transition: border-color var(--a-time-default) var(--a-animation-1);
border-color: var(--c-accent-1);
& .icon {
background: var(--c-accent-1);

2
src/components/navbar/navbarEntry.astro
View file

@ -40,7 +40,7 @@ let extraattributes = navtype === 'mobile' ? { tabindex: '0' } : {}
<style define:vars={{ icon_src_url }}>
* {
transition: all var(--a-time-default) var(--a-animation-1);
transition: color var(--a-time-default) var(--a-animation-1), background-color var(--a-time-default) var(--a-animation-1);
}
li {
align-items: center;

2
src/layouts/blogSection.astro
View file

@ -135,7 +135,7 @@ const line = displayLine ? "flex" : "none"
margin-left: 1.75rem;
}
.line {
margin-left: 2.6rem;
margin-left: 2.625rem;
height: calc(100% + 6rem);
translate: 0px -2rem;
}