💄Animations - Make them consistent and snappy

SamBWagner · Oct 19, 2024 · f0c4395 · f0c4395
1 parent e240063
commit f0c4395
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 12 deletions.
diff --git a/UI/app/components/blogCard.module.css b/UI/app/components/blogCard.module.css
@@ -7,11 +7,11 @@
     padding: 20px;
     border-radius: 8px;
     cursor: pointer;
-    transition: box-shadow 0.3s ease-in-out;
+    transition: box-shadow 0.2s ease;
 
     background-color: var(--background-color-lightened);
 
-    transition: transform 0.1s ease-in-out, box-shadow 0.4s ease-in-out;
+    transition: transform 0.2s ease, box-shadow 0.3s ease-in-out;
     transform-origin: center;
 
     color: var(--white);
@@ -37,7 +37,7 @@
 .seeMoreIcon {
     height: 32px;
     color: var(--accent1);
-    transition: transform 0.3s ease;
+    transition: transform 0.2s ease;
 }
 
 .card:hover .seeMoreIcon {

diff --git a/UI/app/components/footer.module.css b/UI/app/components/footer.module.css
@@ -20,7 +20,7 @@
 .gitHub, .linkedIn {
     font-size: 2rem;
     color: var(--accent1);
-    transition: fill 0.3s ease, transform 0.3s ease;
+    transition: fill 0.2s ease, transform 0.2s ease;
 }
 
 .gitHub:hover, .linkedIn:hover {

diff --git a/UI/app/first-commander-deck/page.jsx b/UI/app/first-commander-deck/page.jsx
@@ -1,12 +1,13 @@
 import Link from "next/link";
 import Footer from "../components/footer";
 import Header from "../components/header";
-import style from "./style.module.css";
+import styles from "./style.module.css";
+import { IoIosArrowBack } from "react-icons/io";
 
 export default function Page() {
   return (
     <>
-      <Link href="/" className={`${style.headerLink}`}>
+      <Link href="/" className={`${styles.headerLink}`}>
         <Header className={`container`} />
       </Link>
 
@@ -1090,7 +1091,10 @@ export default function Page() {
             </p>
 
             <p>
-              <Link href="/">back home</Link>
+              <Link href="/" className={`${styles.goBackLink}`}>
+                <IoIosArrowBack />
+                back home
+              </Link>
             </p>
           </section>
         </div>

diff --git a/UI/app/first-commander-deck/style.module.css b/UI/app/first-commander-deck/style.module.css
@@ -1,3 +1,9 @@
 .headerLink {
     text-decoration: none;
 }
+
+.goBackLink {
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+}
diff --git a/UI/app/globals.css b/UI/app/globals.css
@@ -185,7 +185,7 @@ ul:not(#footer-list) li:nth-child(11)::before {
 a {
   color: var(--accent1);
   text-decoration: underline;
-  transition: color 0.3s ease, text-decoration 0.3s ease;
+  transition: color 0.2s ease, text-decoration 0.2s ease;
 }
 
 a:hover {

diff --git a/UI/app/rust-game/page.jsx b/UI/app/rust-game/page.jsx
@@ -1,16 +1,17 @@
 import Link from "next/link";
 import Footer from "../components/footer";
 import Header from "../components/header";
-import style from "./style.module.css";
+import styles from "./style.module.css";
+import { IoIosArrowBack } from "react-icons/io";
 
 export default function Page() {
   return (
     <>
-      <Link href="/" className={`${style.headerLink}`}>
+      <Link href="/" className={`${styles.headerLink}`}>
         <Header className={`container`} />
       </Link>
 
-      <main className={style.mainContainer}>
+      <main className={styles.mainContainer}>
         <h2 id="learning-rust-blog-heading" className="container blog-heading">
           Learning Rust
         </h2>
@@ -261,7 +262,10 @@ export default function Page() {
             </p>
 
             <p>
-              <Link href="/">back home</Link>
+              <Link href="/" className={`${styles.goBackLink}`}>
+                <IoIosArrowBack />
+                back home
+              </Link>
             </p>
           </section>
         </div>

diff --git a/UI/app/rust-game/style.module.css b/UI/app/rust-game/style.module.css
@@ -1,3 +1,9 @@
 .headerLink {
     text-decoration: none;
 }
+
+.goBackLink {
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+}