diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
new file mode 100644
index 0000000..82e08c5
--- /dev/null
+++ b/app/assets/stylesheets/application.css
@@ -0,0 +1,86 @@
+/* General avatar styles */
+.avatar-container {
+ width: 8rem;
+ height: 8rem;
+ overflow: hidden;
+ border-radius: 50%;
+ display: inline-block;
+}
+
+.avatar-image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+/* Enhanced rainbow border animation */
+@keyframes rainbow-border {
+ 0% { box-shadow: 0 0 0 4px red, 0 0 10px red; }
+ 14% { box-shadow: 0 0 0 4px orange, 0 0 10px orange; }
+ 28% { box-shadow: 0 0 0 4px yellow, 0 0 10px yellow; }
+ 42% { box-shadow: 0 0 0 4px green, 0 0 10px green; }
+ 56% { box-shadow: 0 0 0 4px blue, 0 0 10px blue; }
+ 70% { box-shadow: 0 0 0 4px indigo, 0 0 10px indigo; }
+ 84% { box-shadow: 0 0 0 4px violet, 0 0 10px violet; }
+ 100% { box-shadow: 0 0 0 4px red, 0 0 10px red; }
+}
+
+/* Enhanced rainbow overlay animation */
+@keyframes rainbow-overlay {
+ 0% { filter: hue-rotate(0deg) brightness(1); }
+ 50% { filter: hue-rotate(180deg) brightness(1.2); }
+ 100% { filter: hue-rotate(360deg) brightness(1); }
+}
+
+/* Pulsing animation */
+@keyframes pulse {
+ 0% { transform: scale(1); }
+ 50% { transform: scale(1.05); }
+ 100% { transform: scale(1); }
+}
+
+.avatar-rainbow-border,
+.avatar-rainbow-overlay {
+ animation: rainbow-border 5s linear infinite, pulse 2s ease-in-out infinite;
+ position: relative;
+}
+
+.avatar-rainbow-overlay::before {
+ content: '';
+ position: absolute;
+ top: -5px;
+ right: -5px;
+ bottom: -5px;
+ left: -5px;
+ background: linear-gradient(45deg,
+ rgba(255,0,0,0.7),
+ rgba(255,165,0,0.7),
+ rgba(255,255,0,0.7),
+ rgba(0,128,0,0.7),
+ rgba(0,0,255,0.7),
+ rgba(75,0,130,0.7),
+ rgba(238,130,238,0.7)
+ );
+ border-radius: 50%;
+ z-index: 1;
+ animation: rainbow-overlay 5s linear infinite;
+ mix-blend-mode: overlay;
+ opacity: 0.8;
+}
+
+/* Border color styles */
+.avatar-border-white,
+.avatar-border-black,
+.avatar-rainbow-border,
+.avatar-rainbow-overlay {
+ border-radius: 50%;
+ overflow: hidden;
+}
+
+.avatar-border-white {
+ box-shadow: 0 0 0 4px white, 0 0 10px rgba(255,255,255,0.5);
+}
+
+.avatar-border-black {
+ box-shadow: 0 0 0 4px black, 0 0 10px rgba(0,0,0,0.5);
+}
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
deleted file mode 100644
index f43abbe..0000000
--- a/app/assets/stylesheets/application.css.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-// General avatar styles
-.avatar-container {
- width: 8rem;
- height: 8rem;
- overflow: hidden;
- border-radius: 50%;
- display: inline-block;
- }
-
- .avatar-image {
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
-
- // Enhanced rainbow border animation
- @keyframes rainbow-border {
- 0% { box-shadow: 0 0 0 4px red, 0 0 10px red; }
- 14% { box-shadow: 0 0 0 4px orange, 0 0 10px orange; }
- 28% { box-shadow: 0 0 0 4px yellow, 0 0 10px yellow; }
- 42% { box-shadow: 0 0 0 4px green, 0 0 10px green; }
- 56% { box-shadow: 0 0 0 4px blue, 0 0 10px blue; }
- 70% { box-shadow: 0 0 0 4px indigo, 0 0 10px indigo; }
- 84% { box-shadow: 0 0 0 4px violet, 0 0 10px violet; }
- 100% { box-shadow: 0 0 0 4px red, 0 0 10px red; }
- }
-
- // Enhanced rainbow overlay animation
- @keyframes rainbow-overlay {
- 0% { filter: hue-rotate(0deg) brightness(1); }
- 50% { filter: hue-rotate(180deg) brightness(1.2); }
- 100% { filter: hue-rotate(360deg) brightness(1); }
- }
-
- // Pulsing animation
- @keyframes pulse {
- 0% { transform: scale(1); }
- 50% { transform: scale(1.05); }
- 100% { transform: scale(1); }
- }
-
- .avatar-rainbow-border,
- .avatar-rainbow-overlay {
- animation: rainbow-border 5s linear infinite, pulse 2s ease-in-out infinite;
- position: relative;
- }
-
- .avatar-rainbow-overlay::before {
- content: '';
- position: absolute;
- top: -5px; right: -5px; bottom: -5px; left: -5px;
- background: linear-gradient(45deg,
- rgba(255,0,0,0.7),
- rgba(255,165,0,0.7),
- rgba(255,255,0,0.7),
- rgba(0,128,0,0.7),
- rgba(0,0,255,0.7),
- rgba(75,0,130,0.7),
- rgba(238,130,238,0.7)
- );
- border-radius: 50%;
- z-index: 1;
- animation: rainbow-overlay 5s linear infinite;
- mix-blend-mode: overlay;
- opacity: 0.8;
- }
-
- // Border color styles
- .avatar-border-white,
- .avatar-border-black,
- .avatar-rainbow-border,
- .avatar-rainbow-overlay {
- border-radius: 50%;
- overflow: hidden;
- }
-
- .avatar-border-white {
- box-shadow: 0 0 0 4px white, 0 0 10px rgba(255,255,255,0.5);
- }
-
- .avatar-border-black {
- box-shadow: 0 0 0 4px black, 0 0 10px rgba(0,0,0,0.5);
- }
\ No newline at end of file
diff --git a/app/javascript/entrypoints/application.js b/app/javascript/entrypoints/application.js
index d85d140..529bd2c 100644
--- a/app/javascript/entrypoints/application.js
+++ b/app/javascript/entrypoints/application.js
@@ -3,9 +3,13 @@ import "chartkick/chart.js";
import "flowbite";
// Import your stylesheet
-import "../../assets/stylesheets/application.css.scss";
+import "../../assets/stylesheets/application.css";
import "../../assets/stylesheets/application.tailwind.css";
+// Import Font Awesome JS and CSS
+import '@fortawesome/fontawesome-free/js/all.min.js';
+import '@fortawesome/fontawesome-free/css/all.min.css';
+
Rails.start();
console.log('Vite ⚡️ Rails');
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 9ec68d7..8a01407 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -10,8 +10,6 @@
<%= vite_client_tag %>
<%= vite_javascript_tag 'application' %>
-
-
<%= tag.meta property: 'og:type', content: 'website' %>
<%= tag.meta property: 'og:site_name', content: 'Linkarooie' %>
diff --git a/package-lock.json b/package-lock.json
index fd20363..ff586cd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,6 @@
"flowbite": "^2.4.1"
},
"devDependencies": {
- "sass": "^1.78.0",
"vite": "^5.3.5",
"vite-plugin-ruby": "^5.0.0"
}
@@ -766,6 +765,8 @@
"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
"dev": true,
"license": "ISC",
+ "optional": true,
+ "peer": true,
"dependencies": {
"normalize-path": "^3.0.0",
"picomatch": "^2.0.4"
@@ -780,6 +781,8 @@
"integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
"dev": true,
"license": "MIT",
+ "optional": true,
+ "peer": true,
"engines": {
"node": ">=8"
},
@@ -852,6 +855,8 @@
"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
"dev": true,
"license": "MIT",
+ "optional": true,
+ "peer": true,
"dependencies": {
"anymatch": "~3.1.2",
"braces": "~3.0.2",
@@ -1069,7 +1074,9 @@
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
"integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
"dev": true,
- "license": "MIT"
+ "license": "MIT",
+ "optional": true,
+ "peer": true
},
"node_modules/is-binary-path": {
"version": "2.1.0",
@@ -1077,6 +1084,8 @@
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
"dev": true,
"license": "MIT",
+ "optional": true,
+ "peer": true,
"dependencies": {
"binary-extensions": "^2.0.0"
},
@@ -1218,6 +1227,8 @@
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
"dev": true,
"license": "MIT",
+ "optional": true,
+ "peer": true,
"engines": {
"node": ">=0.10.0"
}
@@ -1303,6 +1314,8 @@
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
"dev": true,
"license": "MIT",
+ "optional": true,
+ "peer": true,
"dependencies": {
"picomatch": "^2.2.1"
},
@@ -1404,6 +1417,8 @@
"integrity": "sha512-AaIqGSrjo5lA2Yg7RvFZrlXDBCp3nV4XP73GrLGvdRWWwk+8H3l0SDvq/5bA4eF+0RFPLuWUk3E+P1U/YqnpsQ==",
"dev": true,
"license": "MIT",
+ "optional": true,
+ "peer": true,
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
diff --git a/package.json b/package.json
index 30abb90..39187a6 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,6 @@
"flowbite": "^2.4.1"
},
"devDependencies": {
- "sass": "^1.78.0",
"vite": "^5.3.5",
"vite-plugin-ruby": "^5.0.0"
}