diff --git a/index.html b/index.html index a3a7f5d..eb74e55 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,22 @@ - + - Trunk Template + + Yew Bootstrap App - Modern Rust WebAssembly + + + + + + + + + - - + + + diff --git a/index.scss b/index.scss index 840ef34..7666de6 100644 --- a/index.scss +++ b/index.scss @@ -1,49 +1,254 @@ +// CSS Custom Properties for theming :root { - --bs-body-bg: #fff; + --bs-body-bg: #ffffff; --bs-body-color: #212529; --bs-navbar-bg: #f8f9fa; - --bs-navbar-color: rgba(0, 0, 0, 0.55); + --bs-navbar-color: rgba(0, 0, 0, 0.65); --bs-navbar-active-color: rgba(0, 0, 0, 0.9); - --bs-jumbotron-bg: #e9ecef; - --bs-jumbotron-color: #212529; + --bs-navbar-brand-color: #0d6efd; + --bs-hero-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + --bs-hero-color: #ffffff; + --bs-card-bg: #ffffff; + --bs-card-border: rgba(0, 0, 0, 0.125); + --bs-feature-bg: #f8f9fa; + --bs-footer-bg: #e9ecef; + --bs-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); + --bs-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175); } +// Dark theme variables .dark-theme { - --bs-body-bg: #212529; - --bs-body-color: #f8f9fa; - --bs-navbar-bg: #343a40; - --bs-navbar-color: rgba(255, 255, 255, 0.55); - --bs-navbar-active-color: rgba(255, 255, 255, 0.9); - --bs-jumbotron-bg: #343a40; - --bs-jumbotron-color: #f8f9fa; + --bs-body-bg: #0d1117; + --bs-body-color: #f0f6fc; + --bs-navbar-bg: #161b22; + --bs-navbar-color: rgba(240, 246, 252, 0.65); + --bs-navbar-active-color: rgba(240, 246, 252, 0.9); + --bs-navbar-brand-color: #58a6ff; + --bs-hero-bg: linear-gradient(135deg, #1f2937 0%, #374151 100%); + --bs-hero-color: #f0f6fc; + --bs-card-bg: #21262d; + --bs-card-border: rgba(240, 246, 252, 0.125); + --bs-feature-bg: #161b22; + --bs-footer-bg: #0d1117; + --bs-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3); + --bs-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5); +} + +// Global styles +* { + transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } body { background-color: var(--bs-body-bg); color: var(--bs-body-color); + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + line-height: 1.6; } +// Navbar styling .navbar { background-color: var(--bs-navbar-bg) !important; + backdrop-filter: blur(10px); + border-bottom: 1px solid var(--bs-card-border); + box-shadow: var(--bs-shadow); + + .navbar-brand { + color: var(--bs-navbar-brand-color) !important; + font-weight: 700; + font-size: 1.5rem; + + &:hover { + transform: scale(1.05); + transition: transform 0.2s ease; + } + } + + .navbar-nav .nav-link { + color: var(--bs-navbar-color) !important; + font-weight: 500; + padding: 0.5rem 1rem !important; + border-radius: 0.375rem; + margin: 0 0.25rem; + + &:hover { + background-color: rgba(var(--bs-primary-rgb), 0.1); + color: var(--bs-navbar-active-color) !important; + } + + &.active { + background-color: rgba(var(--bs-primary-rgb), 0.15); + color: var(--bs-navbar-active-color) !important; + } + } } -.navbar-light .navbar-nav .nav-link { - color: var(--bs-navbar-color); +// Hero section +.hero-section { + background: var(--bs-hero-bg); + color: var(--bs-hero-color); + min-height: 60vh; + display: flex; + align-items: center; + position: relative; + overflow: hidden; + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: url('data:image/svg+xml,'); + opacity: 0.3; + } + + .container { + position: relative; + z-index: 1; + } + + h1 { + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); + margin-bottom: 1.5rem; + } + + .lead { + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); + opacity: 0.95; + } + + .btn { + box-shadow: var(--bs-shadow-lg); + border: none; + font-weight: 600; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.2); + } + } } -.navbar-light .navbar-nav .nav-link.active { - color: var(--bs-navbar-active-color); +// Card styling +.card { + background-color: var(--bs-card-bg); + border: 1px solid var(--bs-card-border); + box-shadow: var(--bs-shadow); + transition: all 0.3s ease; + + &:hover { + transform: translateY(-5px); + box-shadow: var(--bs-shadow-lg); + } + + .feature-icon { + transition: transform 0.3s ease; + } + + &:hover .feature-icon { + transform: scale(1.1) rotate(5deg); + } } -.navbar-dark .navbar-nav .nav-link { - color: var(--bs-navbar-color); +// Theme toggle styling +.form-check-input { + &:checked { + background-color: #0d6efd; + border-color: #0d6efd; + } } -.navbar-dark .navbar-nav .nav-link.active { - color: var(--bs-navbar-active-color); +// Background sections +.bg-body-secondary { + background-color: var(--bs-feature-bg) !important; } -.jumbotron { - background-color: var(--bs-jumbotron-bg) !important; - color: var(--bs-jumbotron-color); +.bg-body-tertiary { + background-color: var(--bs-footer-bg) !important; +} + +// Animations +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.card { + animation: fadeInUp 0.6s ease forwards; + + &:nth-child(1) { animation-delay: 0.1s; } + &:nth-child(2) { animation-delay: 0.2s; } + &:nth-child(3) { animation-delay: 0.3s; } +} + +// Responsive improvements +@media (max-width: 768px) { + .hero-section { + min-height: 50vh; + text-align: center; + + h1 { + font-size: 2.5rem; + } + + .lead { + font-size: 1.1rem; + } + } + + .navbar-brand { + font-size: 1.25rem !important; + } + + .feature-icon { + width: 3rem !important; + height: 3rem !important; + } +} + +// Custom scrollbar for webkit browsers +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-track { + background: var(--bs-body-bg); +} + +::-webkit-scrollbar-thumb { + background: rgba(var(--bs-primary-rgb), 0.3); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: rgba(var(--bs-primary-rgb), 0.5); +} + +// Focus styles for accessibility +.btn:focus, +.form-check-input:focus, +.nav-link:focus { + box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); +} + +// Print styles +@media print { + .navbar, + .form-check, + footer { + display: none !important; + } + + .hero-section { + background: none !important; + color: black !important; + } } \ No newline at end of file diff --git a/src/app.rs b/src/app.rs index feb4378..4ba1ef8 100644 --- a/src/app.rs +++ b/src/app.rs @@ -38,58 +38,132 @@ pub fn app() -> Html { LocalStorage::set("theme", **theme).unwrap(); }); + let navbar_class = if *theme == Theme::Dark { "navbar navbar-expand-lg navbar-dark" } else { "navbar navbar-expand-lg navbar-light" }; + html! { <> -