🍱 [Assets] Replace PNG cursors with SVGs

beefchimi · Jul 25, 2024 · 8f0287b · 8f0287b
1 parent 7c01851
commit 8f0287b
Show file tree

Hide file tree

Showing 20 changed files with 64 additions and 23 deletions.
diff --git a/src/assets/img/README.md b/src/assets/img/README.md
@@ -0,0 +1,3 @@
+# Images
+
+Place any images here that we want optimized by Astro. Otherwise, put pre-optimized images in the `/public` folder.
diff --git a/src/assets/img/cursor-auto.png b/src/assets/img/cursor-auto.png
diff --git a/src/assets/img/cursor-dead.png b/src/assets/img/cursor-dead.png
diff --git a/src/assets/img/cursor-pointer-clicked.png b/src/assets/img/cursor-pointer-clicked.png
diff --git a/src/assets/img/cursor-pointer.png b/src/assets/img/cursor-pointer.png
diff --git a/src/assets/img/cursor-rock-clicked.png b/src/assets/img/cursor-rock-clicked.png
diff --git a/src/assets/img/cursor-rock.png b/src/assets/img/cursor-rock.png
diff --git a/src/assets/img/cursor-text.png b/src/assets/img/cursor-text.png
diff --git a/src/assets/svg/cursors/CursorAuto.svg b/src/assets/svg/cursors/CursorAuto.svg
diff --git a/src/assets/svg/cursors/CursorDead.svg b/src/assets/svg/cursors/CursorDead.svg
diff --git a/src/assets/svg/cursors/CursorDeadClicked.svg b/src/assets/svg/cursors/CursorDeadClicked.svg
diff --git a/src/assets/svg/cursors/CursorHorns.svg b/src/assets/svg/cursors/CursorHorns.svg
diff --git a/src/assets/svg/cursors/CursorHornsClicked.svg b/src/assets/svg/cursors/CursorHornsClicked.svg
diff --git a/src/assets/svg/cursors/CursorPointer.svg b/src/assets/svg/cursors/CursorPointer.svg
diff --git a/src/assets/svg/cursors/CursorPointerClicked.svg b/src/assets/svg/cursors/CursorPointerClicked.svg
diff --git a/src/assets/svg/cursors/CursorText.svg b/src/assets/svg/cursors/CursorText.svg
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
@@ -160,7 +160,7 @@ const {id, items = []} = Astro.props;
     text-transform: uppercase;
     letter-spacing: 0.2rem;
     white-space: nowrap;
-    /* Required for the `rock` cursor to work. */
+    /* Required for the `horns` cursor to work. */
     pointer-events: none;
   }
 
@@ -182,7 +182,7 @@ const {id, items = []} = Astro.props;
   html[data-current-index='12'] .Item:nth-child(13) .Link,
   html[data-current-index='13'] .Item:nth-child(14) .Link,
   html[data-current-index='14'] .Item:nth-child(15) .Link {
-    cursor: url('../assets/img/cursor-rock.png'), not-allowed;
+    cursor: url('../assets/svg/cursors/CursorHorns.svg'), not-allowed;
     color: var(--color-primary);
     translate: calc(var(--nav-item-shift-x) * -1) 0;
   }
@@ -202,7 +202,7 @@ const {id, items = []} = Astro.props;
   html[data-current-index='12'] .Item:nth-child(13) .Link:active,
   html[data-current-index='13'] .Item:nth-child(14) .Link:active,
   html[data-current-index='14'] .Item:nth-child(15) .Link:active {
-    cursor: url('../assets/img/cursor-rock-clicked.png'), not-allowed;
+    cursor: url('../assets/svg/cursors/CursorHornsClicked.svg'), not-allowed;
   }
 
   html[data-current-index='0'] .Item:nth-child(1) .Link::before,

diff --git a/src/components/ProjectLogo.astro b/src/components/ProjectLogo.astro
@@ -68,7 +68,11 @@ const iconProps = {
   }
 
   div.ProjectLogo {
-    cursor: url('../assets/img/cursor-dead.png'), not-allowed;
+    cursor: url('../assets/svg/cursors/CursorDead.svg'), not-allowed;
+
+    &:active {
+      cursor: url('../assets/svg/cursors/CursorDeadClicked.svg'), not-allowed;
+    }
   }
 
   .ProjectLogo > [data-icon] {

diff --git a/src/sections/Intro.astro b/src/sections/Intro.astro
@@ -24,7 +24,7 @@ const {id, thumbnail} = Astro.props;
         Background image photographed by: Curtis Dulmage
       </p>
 
-      <p class="paragraph visually-hidden preload-cursors">
+      <p class="paragraph visually-hidden">
         <b>Curtis Dulmage.</b>
         <u>Front end web developer.</u>
         <i>Ottawa, Canada.</i> Here are a few of my most recent projects. Please

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -84,7 +84,7 @@ html {
 
 body {
   font-family: 'Outfit Variable', var(--font-stack-sans-serif);
-  cursor: url('../assets/img/cursor-auto.png'), auto;
+  cursor: url('../assets/svg/cursors/CursorAuto.svg'), auto;
 }
 
 /* --- Page load --- */
@@ -290,32 +290,18 @@ code,
 cite,
 blockquote,
 figcaption {
-  cursor: url('../assets/img/cursor-text.png'), text;
+  cursor: url('../assets/svg/cursors/CursorText.svg'), text;
 }
 
 a,
 button {
   &,
   & * {
-    cursor: url('../assets/img/cursor-pointer.png'), pointer;
+    cursor: url('../assets/svg/cursors/CursorPointer.svg'), pointer;
   }
 
   &:active,
   &:active * {
-    cursor: url('../assets/img/cursor-pointer-clicked.png'), pointer;
+    cursor: url('../assets/svg/cursors/CursorPointerClicked.svg'), pointer;
   }
 }
-
-/*
-.preload-cursors b {
-  cursor: url('../assets/img/cursor-drag-clicked.png'), auto;
-}
-*/
-
-.preload-cursors u {
-  cursor: url('../assets/img/cursor-pointer-clicked.png'), pointer;
-}
-
-.preload-cursors i {
-  cursor: url('../assets/img/cursor-rock-clicked.png'), pointer;
-}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Images

		Place any images here that we want optimized by Astro. Otherwise, put pre-optimized images in the `/public` folder.