Satisfying

package.json

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

src/components/cards/blogCard.astro

@@ -27,6 +27,9 @@ 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;
   }

src/components/cards/favouriteCard.astro

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

src/components/cards/servantCard.astro

@@ -47,6 +47,7 @@ let loading: "eager" | "lazy" = index <= 3 ? "eager" : "lazy";
 
 <style>
   article:hover {
+    transition: all var(--a-time-default) var(--a-animation-1);
     transform: scale(1);
     border-color: var(--c-accent-1);
   }
@@ -82,7 +83,7 @@ let loading: "eager" | "lazy" = index <= 3 ? "eager" : "lazy";
 
   .expand-on-hover {
     background-color: var(--c-primary-background);
-    border: 2px var(--c-accent-1) solid;
+    border: 2px var(--c-primary-background) solid;
     border-top: 0px;
     z-index: 99;
     transform: scaleY(0);
@@ -95,6 +96,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);
   }
 

src/components/cards/taCard.astro

@@ -57,6 +57,9 @@ 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;
@@ -141,7 +144,7 @@ const hasuser = user !== undefined ? 'display: flex' : 'display: none'
     align-items: top;
     justify-content: space-evenly;
     background-color: var(--c-primary-background);
-    border: 2px var(--c-accent-1) solid;
+    border: 2px var(--c-primary-background) solid;
     border-top: 0px;
     z-index: 99;
     transform: scaleY(0);
@@ -168,8 +171,9 @@ const hasuser = user !== undefined ? 'display: flex' : 'display: none'
 
   a:hover .expand-on-hover {
     transform: scaleY(1);
-    transition: transform var(--a-time-default) var(--a-animation-1);
+    transition: all var(--a-time-default) var(--a-animation-1);
     background-color: var(--c-primary-background);
+    border-color: var(--c-accent-1);
   }
 
   @media (min-width: 512px) {

src/components/cards/technologyCard.astro

@@ -28,6 +28,10 @@ const loadedImage = plsLoadImage(images_logos, imagePath)
 </a>
 
 <style>
+  * {
+    transition: all var(--a-time-default) var(--a-animation-1);
+  }
+
   a {
     text-decoration: none;
   }

src/components/fgotaHero.astro

@@ -41,10 +41,12 @@ 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);
   }
 
   a:hover {
     border-color: var(--c-accent-1-alt);
+    transition: all var(--a-time-default) var(--a-animation-1);
   }
 
   .fade {

src/components/links/linkCard.astro

@@ -19,6 +19,9 @@ 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;

src/components/navbar/navbarEntry.astro

@@ -39,6 +39,9 @@ let extraattributes = navtype === 'mobile' ? { tabindex: '0' } : {}
 </li>
 
 <style define:vars={{ icon_src_url }}>
+  * {
+    transition: all var(--a-time-default) var(--a-animation-1);
+  }
   li {
     align-items: center;
     justify-content: center;