Enhance Liquid Java research website with examples #3
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This commit significantly improves the website with: - Add "What is LiquidJava?" section explaining refinement types clearly - Add "See It in Action" section with side-by-side code comparison showing division by zero prevention example - Add "Why LiquidJava?" section with 5 key benefits as bullet points - Add "Get Started" section with clear call-to-action and links - Reorganize research context section to footer area - Add custom CSS for better mobile responsiveness - Improve code block styling and visual hierarchy - Enhance link styling and spacing throughout The new structure follows research project best practices, similar to LiquidHaskell, Lean, and RoSpec websites.
Major visual enhancements: HTML Structure: - Redesigned "What is LiquidJava?" section with gradient background card - Transformed code comparison section into polished cards with headers - Added card-based layout with danger (red) and success (blue) themes - Restructured features list with icons and better visual hierarchy - Enhanced "Get Started" section with prominent CTA box - Centered layouts and improved content flow CSS Improvements: - Added beautiful gradient backgrounds (purple/blue theme) - Created card-based design system with hover effects - Implemented smooth transitions and animations - Added feature list with checkmark icons and hover states - Enhanced typography with better font sizes and spacing - Improved code block styling with better contrast - Added comprehensive responsive design for all screen sizes - Implemented modern color palette with gradients - Added box shadows and depth for visual hierarchy - Created reusable component classes The design now follows modern web standards with: - Clean, professional appearance - Better visual hierarchy and spacing - Engaging hover effects and transitions - Mobile-first responsive design - Consistent branding with purple/blue gradients
Implemented comprehensive dark theme functionality: Toggle Button: - Added floating theme toggle button (top-right corner) - Beautiful gradient background with hover effects - Sun/moon emoji icons for visual feedback - Smooth animations and responsive design - Fixed position for easy access throughout page JavaScript Implementation: - Theme toggle with localStorage persistence - Remembers user preference across sessions - Smooth transitions between themes - Icon updates based on current theme - No flash of unstyled content on page load Dark Theme Styling: - Dark backgrounds (#1a1a2e, #2d3748, #16213e) - Light text colors for readability (#f0f0f0, #d0d0d0) - Adjusted gradients for dark mode aesthetics - Modified all custom sections (info, features, CTA) - Dark theme for code blocks and cards - Updated predicate examples section - Styled footer and all interactive elements - Maintained color hierarchy and contrast - Smooth 0.3s transitions for all theme changes Mobile Responsive: - Smaller toggle button on mobile devices - Touch-friendly sizing and positioning - Maintained functionality across all screen sizes The dark theme provides excellent readability while maintaining the modern, professional aesthetic of the site.
- Added specific CSS rules for h3 and p elements in content-left - Ensured proper text contrast in dark mode - Fixed bold text color in header tagline - Applied !important to override any conflicting styles
- Added explicit background colors for light theme - Ensured all gradient sections display properly - Fixed text colors for proper contrast in light mode - Added gradient background to main content area - Used !important flags to override any conflicting styles - Ensured info section, code cards, features, and CTA have visible colors - Fixed white text on colored backgrounds for readability
Major improvements: - Made toggle button significantly larger on desktop (60px, 70px on XL screens) - Added responsive sizing: 70px on XL, 60px on desktop, 55px on tablet, 50px on mobile - Increased font size of emoji icons for better visibility - Added subtle pulse animation to draw attention to toggle - Fixed background color transitions between light/dark themes - Added !important flags to ensure backgrounds change properly - Fixed all section backgrounds to transition smoothly - Improved hover effects with larger scale and better shadows - Better positioning with more spacing from edge on large screens The toggle is now much more visible and the theme switching works properly with smooth background transitions.
…ved JavaScript Critical fixes for theme switching: JavaScript improvements: - Apply theme class immediately on script load (before DOM ready) - Use className instead of classList for initial set - Remove both theme classes before adding new one (prevents conflicts) - Force browser repaint after theme change (void body.offsetHeight) - More robust theme detection and application - Better handling of saved theme preference CSS improvements: - Added ultra-strong !important overrides for all backgrounds - Removed background-image in favor of solid colors - Force body background: #f8f9fa (light) / #1a1a2e (dark) - Force all section backgrounds to change - Override inline styles with !important - Removed problematic wildcard (*) transition rule - Specific transitions only where needed (0.5s for backgrounds) - Force text colors to update with theme Targeted fixes: - .w3l-content-photo-5: main content area - .w3l-feature-code: predicate examples section - .w3l-about: about/skills section - .w3l-footer-29-main: footer - All heading and paragraph text colors The theme toggle should now visibly change all backgrounds and text colors throughout the entire page.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This commit significantly improves the website with:
The new structure follows research project best practices, similar to LiquidHaskell, Lean, and RoSpec websites.