From 4aa04b68d951e18f6a73562cc932f237f4c9f611 Mon Sep 17 00:00:00 2001 From: Dean Lofts Date: Thu, 5 Sep 2024 11:53:01 +1000 Subject: [PATCH 1/2] didn't expect this to work so easily --- app/javascript/entrypoints/application.js | 4 ++++ app/views/layouts/application.html.erb | 2 -- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/app/javascript/entrypoints/application.js b/app/javascript/entrypoints/application.js index d85d140..c6fa6d1 100644 --- a/app/javascript/entrypoints/application.js +++ b/app/javascript/entrypoints/application.js @@ -6,6 +6,10 @@ import "flowbite"; import "../../assets/stylesheets/application.css.scss"; 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' %> From 9ea21164d19d219714dd2b73cef5c4f92db233ca Mon Sep 17 00:00:00 2001 From: Dean Lofts Date: Thu, 5 Sep 2024 12:01:08 +1000 Subject: [PATCH 2/2] remove sass --- app/assets/stylesheets/application.css | 86 +++++++++++++++++++++ app/assets/stylesheets/application.css.scss | 83 -------------------- app/javascript/entrypoints/application.js | 2 +- package-lock.json | 19 ++++- package.json | 1 - 5 files changed, 104 insertions(+), 87 deletions(-) create mode 100644 app/assets/stylesheets/application.css delete mode 100644 app/assets/stylesheets/application.css.scss 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 c6fa6d1..529bd2c 100644 --- a/app/javascript/entrypoints/application.js +++ b/app/javascript/entrypoints/application.js @@ -3,7 +3,7 @@ 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 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" }