lukaszraczylo/beat-delivery-methodology
1
0
Fork 0
mirror of https://github.com/lukaszraczylo/beat-delivery-methodology.git synced 2026-10-22 06:47:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update user experience.

Browse Source
This commit is contained in:
lukaszraczylo
2025-12-13 01:38:45 +00:00
parent 2c35679bd8
commit c7dd4d0371
7 changed files with 255 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/src/assets/styles/main.css
+24 -6
View File
@@ -2,6 +2,19 @@
@tailwind components;
@tailwind utilities;
@layer base {
/* Ensure smooth scrolling */
html {
scroll-behavior: smooth;
-webkit-tap-highlight-color: transparent;
}
/* Better touch targets on mobile */
button, a {
touch-action: manipulation;
}
}
@layer components {
.glass {
@apply bg-white/70 dark:bg-gray-800/70 backdrop-blur-lg border border-white/20 dark:border-gray-700/50;
@@ -20,23 +33,23 @@
}
.btn-primary {
@apply bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-6 py-3 rounded-lg font-medium transition-all duration-300 shadow-lg hover:shadow-xl hover:scale-105;
@apply bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-5 sm:px-6 py-2.5 sm:py-3 rounded-lg font-medium transition-all duration-300 shadow-lg hover:shadow-xl hover:scale-105 text-sm sm:text-base min-h-[44px] flex items-center justify-center;
}
.btn-secondary {
@apply glass hover:shadow-lg text-gray-900 dark:text-gray-100 px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:scale-105;
@apply glass hover:shadow-lg text-gray-900 dark:text-gray-100 px-5 sm:px-6 py-2.5 sm:py-3 rounded-lg font-medium transition-all duration-300 hover:scale-105 text-sm sm:text-base min-h-[44px] flex items-center justify-center;
}
.section-title {
@apply text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4;
@apply text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4;
}
.section-subtitle {
@apply text-lg text-gray-600 dark:text-gray-300;
@apply text-base sm:text-lg text-gray-600 dark:text-gray-300 px-2 sm:px-0;
}
.card {
@apply glass p-6 rounded-xl transition-all duration-300 hover:shadow-lg;
@apply glass p-4 sm:p-6 rounded-xl transition-all duration-300 hover:shadow-lg;
}
.nav-link {
@@ -44,7 +57,12 @@
}
.icon-box {
@apply w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0 transition-transform duration-300 group-hover:scale-110;
@apply w-10 h-10 sm:w-12 sm:h-12 rounded-xl flex items-center justify-center flex-shrink-0 transition-transform duration-300 group-hover:scale-110;
}
/* Section spacing responsive */
.section-padding {
@apply py-10 sm:py-12 md:py-16;
}
}