Moved images & added cursor effects

Images have been moved to assets/images and a cursor effect has been added to all pages.
NoobToolzz · Mar 2, 2024 · a8d4530 · a8d4530
1 parent bb79a8c
commit a8d4530
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 6 deletions.
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -1,9 +1,9 @@
 @import url("https://fonts.googleapis.com/css?family=Work+Sans:400,600");
 
-/* Get rid of bloody scrollbars. I love Stack Overflow. */
 html {
   overflow: scroll;
   overflow-x: hidden;
+  cursor: url(../images/cursor.png) 24 24, auto !important;
 }
 
 ::-webkit-scrollbar {
@@ -46,6 +46,7 @@ header::after {
 
 nav {
   float: right;
+  cursor: url(../images/cursor.png) 24 24, auto !important;
 }
 
 nav ul {
@@ -65,6 +66,7 @@ nav a {
   text-decoration: none;
   text-transform: uppercase;
   font-size: 14px;
+  cursor: url(../images/cursor.png) 24 24, auto !important;
 }
 
 /* Body rules */
@@ -343,13 +345,15 @@ ol li {
   text-transform: uppercase;
   font-size: 15px;
   transition: all 0.5s ease;
+  cursor: url(../images/cursor.png) 24 24, auto !important;
 }
 
 .info-card button:hover {
   letter-spacing: 3px;
   background-color: hsl(261deg 80% 48%);
   color: hsl(0, 0%, 100%);
   box-shadow: rgb(93 24 220) 0px 7px 29px 0px;
+  cursor: url(../images/cursor.png) 24 24, auto !important;
 }
 
 .info-card button:active {
@@ -359,6 +363,7 @@ ol li {
   box-shadow: rgb(93 24 220) 0px 0px 0px 0px;
   transform: translateY(10px);
   transition: 100ms;
+  cursor: url(../images/cursor.png) 24 24, auto !important;
 }
 
 /* Image dimensions for information cards */
@@ -385,6 +390,7 @@ ol li {
   border: none;
   cursor: pointer;
   text-align: center;
+  cursor: url(../images/cursor.png) 24 24, auto !important;
 }
 
 .back-button:hover::before {
@@ -545,6 +551,7 @@ ol li {
   float: right;
   font-size: 28px;
   font-weight: bold;
+  cursor: url(../images/cursor.png) 24 24, auto !important;
 }
 
 .close:hover,

diff --git a/assets/images/cursor.png b/assets/images/cursor.png
diff --git a/assets/icon.ico → assets/images/icon.ico b/assets/icon.ico → assets/images/icon.ico
diff --git a/assets/js/cursor.js b/assets/js/cursor.js
@@ -0,0 +1,6 @@
+window.addEventListener("load", (event) => {
+  new cursoreffects.fairyDustCursor({
+    baseImageSrc: "./assets/images/cursor.png",
+    colors: ["black", "white"],
+  });
+});
diff --git a/index.html b/index.html
@@ -2,9 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="./assets/icon.ico" />
+    <link rel="icon" href="./assets/images/icon.ico" />
     <link rel="stylesheet" href="./assets/css/styles.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://unpkg.com/cursor-effects@latest/dist/browser.js"></script>
     <title>Recipes of The World - Home</title>
   </head>
   <header>
@@ -67,6 +68,7 @@ <h3>Other Cuisines</h3>
       </div>
     </div>
 
+    <script src="./assets/js/cursor.js"></script>
     <script src="./assets/js/loader.js"></script>
   </body>
 </html>
diff --git a/pages/about/index.html b/pages/about/index.html
@@ -3,9 +3,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="../../assets/icon.ico" />
+    <link rel="icon" href="../../assets/images/icon.ico" />
     <link rel="stylesheet" href="../../assets/css/styles.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://unpkg.com/cursor-effects@latest/dist/browser.js"></script>
     <title>Recipes of The World - Home</title>
   </head>
   <header>
@@ -39,6 +40,7 @@ <h1>Still a work in progress uwu~</h1>
       </button>
     </div>
 
+    <script src="../../assets/js/cursor.js"></script>
     <script src="../../assets/js/loader.js"></script>
   </body>
 </html>
diff --git a/pages/cuisines/finnish/index.html b/pages/cuisines/finnish/index.html
@@ -2,9 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="../../../assets/icon.ico" />
+    <link rel="icon" href="../../../assets/images/icon.ico" />
     <link rel="stylesheet" href="../../../assets/css/styles.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://unpkg.com/cursor-effects@latest/dist/browser.js"></script>
     <title>Recipes of The World - Finnish Cuisines</title>
   </head>
   <body onload="loader()" style="margin: 0">
@@ -652,6 +653,7 @@ <h3>Recipes of the World</h3>
       </button>
     </div>
 
+    <script src="../../../assets/js/cursor.js"></script>
     <script src="../../../assets/js/loader.js"></script>
     <script src="../../../assets/js/cardScaling.js"></script>
     <script src="../../../assets/js/modalHandler.js"></script>

diff --git a/pages/cuisines/indian/index.html b/pages/cuisines/indian/index.html
@@ -2,9 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="../../../assets/icon.ico" />
+    <link rel="icon" href="../../../assets/images/icon.ico" />
     <link rel="stylesheet" href="../../../assets/css/styles.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://unpkg.com/cursor-effects@latest/dist/browser.js"></script>
     <title>Recipes of The World - Indian Cuisines</title>
   </head>
   <body onload="loader()" style="margin: 0">
@@ -544,6 +545,7 @@ <h3>Recipes of the World</h3>
       </button>
     </div>
 
+    <script src="../../../assets/js/cursor.js"></script>
     <script src="../../../assets/js/loader.js"></script>
     <script src="../../../assets/js/cardScaling.js"></script>
     <script src="../../../assets/js/modalHandler.js"></script>

diff --git a/pages/cuisines/mexican/index.html b/pages/cuisines/mexican/index.html
@@ -2,9 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="../../../assets/icon.ico" />
+    <link rel="icon" href="../../../assets/images/icon.ico" />
     <link rel="stylesheet" href="../../../assets/css/styles.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://unpkg.com/cursor-effects@latest/dist/browser.js"></script>
     <title>Recipes of The World - Mexican Cuisines</title>
   </head>
   <body onload="loader()" style="margin: 0">
@@ -552,6 +553,7 @@ <h3>Recipes of the World</h3>
       </button>
     </div>
 
+    <script src="../../../assets/js/cursor.js"></script>
     <script src="../../../assets/js/loader.js"></script>
     <script src="../../../assets/js/cardScaling.js"></script>
     <script src="../../../assets/js/modalHandler.js"></script>