Animations fix

package-lock.json

@@ -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",

package.json

@@ -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",

src/components/cards/blogCard.astro

@@ -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;
     }
 

src/components/cards/ceCard.astro

@@ -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);

src/components/cards/favouriteCard.astro

@@ -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;

src/components/cards/projectCard.astro

@@ -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;

src/components/cards/servantCard.astro

@@ -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 {

src/components/cards/taCard.astro

@@ -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);
   }

src/components/cards/technologyCard.astro

@@ -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;

src/components/fgotaHero.astro

@@ -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;

src/components/links/linkCard.astro

@@ -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);

src/components/navbar/navbarEntry.astro

@@ -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;

src/layouts/blogSection.astro

@@ -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;
     }