Replace Bootstrap with Tailwind CSS + Alpine.js
All checks were successful
check / check (push) Successful in 1m13s
All checks were successful
check / check (push) Successful in 1m13s
- Remove all Bootstrap CSS/JS references from templates - Add Tailwind CSS v4 with Material Design inspired theme (input.css) - Compile tailwind.css with standalone CLI (committed to repo) - Vendor Alpine.js 3.14.9 for reactive UI components - Rewrite base.html to match µPaaS layout structure - Rewrite htmlheader.html with Tailwind CSS link - Rewrite navbar.html with Alpine.js mobile menu toggle - Convert index.html to Tailwind utility classes - Convert login.html to Tailwind utility classes - Convert profile.html to Tailwind utility classes - Add make css target for Tailwind compilation - Add footer template with project links closes #4
This commit is contained in:
@@ -1,59 +1 @@
|
||||
/* Webhooker main stylesheet */
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* Custom styles for Webhooker */
|
||||
|
||||
/* Navbar customization */
|
||||
.navbar-brand {
|
||||
font-weight: 600;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* Card hover effects */
|
||||
.card {
|
||||
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
|
||||
}
|
||||
|
||||
/* Background opacity utilities */
|
||||
.bg-opacity-10 {
|
||||
background-color: rgba(var(--bs-success-rgb), 0.1);
|
||||
}
|
||||
|
||||
.bg-primary.bg-opacity-10 {
|
||||
background-color: rgba(var(--bs-primary-rgb), 0.1);
|
||||
}
|
||||
|
||||
/* User dropdown styling */
|
||||
.navbar .dropdown-toggle::after {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.navbar .dropdown-menu {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* Footer styling */
|
||||
footer {
|
||||
margin-top: auto;
|
||||
padding: 2rem 0;
|
||||
background-color: #f8f9fa;
|
||||
border-top: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.display-4 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
/* Webhooker custom styles — see input.css for Tailwind theme */
|
||||
|
||||
Reference in New Issue
Block a user