diff --git a/assets/css/style-starter.css b/assets/css/style-starter.css index 68dbd98..0011c99 100644 --- a/assets/css/style-starter.css +++ b/assets/css/style-starter.css @@ -12633,14 +12633,626 @@ body:after { .blog-post-content h3 { font-size: 1.5rem; } + +/* ============================================ + LiquidJava Custom Styles - Enhanced Design + ============================================ */ + +/* Section Titles */ +.section-title { + font-size: 2rem; + font-weight: 700; + color: #2c3e50; + margin-bottom: 1rem; + position: relative; +} + +.section-title::after { + content: ''; + display: block; + width: 60px; + height: 3px; + background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); + margin: 15px auto 0; +} + +.section-subtitle { + font-size: 1.1rem; + color: #666; + margin-bottom: 2rem; + max-width: 800px; + margin-left: auto; + margin-right: auto; +} + +.section-description { + font-size: 1.1rem; + line-height: 1.8; + color: #444; + text-align: center; + max-width: 900px; + margin: 0 auto; +} + +/* Info Section */ +.info-section { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + padding: 3rem 2.5rem; + border-radius: 12px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + margin: 0 1rem; +} + +.info-section .section-title { + color: #fff; + margin-bottom: 1.5rem; +} + +.info-section .section-title::after { + background: #fff; +} + +.info-section .section-description { + color: #fff; + font-size: 1.15rem; +} + +/* Code Comparison Cards */ +.code-comparison-card { + background: #fff; + border-radius: 10px; + overflow: hidden; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; + height: 100%; +} + +.code-comparison-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); +} + +.card-header-danger { + background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); + padding: 1.5rem; + color: #fff; +} + +.card-header-success { + background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); + padding: 1.5rem; + color: #fff; +} + +.card-header-danger h5, +.card-header-success h5 { + margin: 0; + font-size: 1.3rem; + font-weight: 600; + color: #fff; +} + +.card-subtitle { + margin: 0.5rem 0 0 0; + font-size: 0.95rem; + opacity: 0.95; + font-style: italic; + color: #fff; +} + +.code-block { + background: #272822; + padding: 1.5rem; + overflow-x: auto; +} + +.code-block pre { + margin: 0; + line-height: 1.6; + font-size: 0.9rem; + color: #f8f8f2; + font-family: 'Courier New', Courier, monospace; +} + +/* Features Section */ +.features-section { + padding: 2rem 1rem; +} + +.features-list { + list-style: none; + padding: 0; + margin: 0; +} + +.feature-item { + display: flex; + align-items: flex-start; + padding: 1.5rem; + margin-bottom: 1rem; + background: #f8f9fa; + border-radius: 10px; + border-left: 4px solid #667eea; + transition: all 0.3s ease; +} + +.feature-item:hover { + background: #fff; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); + transform: translateX(5px); +} + +.feature-icon { + font-size: 1.5rem; + color: #667eea; + margin-right: 1.2rem; + font-weight: bold; + flex-shrink: 0; + width: 30px; + text-align: center; +} + +.feature-item strong { + display: block; + font-size: 1.15rem; + color: #2c3e50; + margin-bottom: 0.3rem; +} + +.feature-item p { + margin: 0; + color: #666; + font-size: 1rem; + line-height: 1.6; +} + +/* Get Started Section */ +.get-started-section { + padding: 2rem 1rem; + background: #f8f9fa; + border-radius: 12px; + margin: 0 1rem; +} + +.get-started-text { + font-size: 1.1rem; + line-height: 1.8; + color: #444; + text-align: center; + margin-bottom: 2rem; +} + +.cta-box { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + padding: 2rem; + border-radius: 10px; + text-align: center; + box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3); +} + +.cta-text { + color: #fff; + font-size: 1.15rem; + margin: 0; + line-height: 1.6; +} + +.cta-text .fa { + margin-right: 10px; + font-size: 1.3rem; +} + +.inline-link { + color: #667eea; + text-decoration: none; + border-bottom: 2px solid transparent; + transition: border-bottom 0.2s ease; + font-weight: 500; +} + +.inline-link:hover { + border-bottom: 2px solid #667eea; +} + +.cta-box .inline-link { + color: #fff; + border-bottom-color: rgba(255, 255, 255, 0.5); +} + +.cta-box .inline-link:hover { + border-bottom-color: #fff; +} + +/* Responsive Design */ +@media (max-width: 991px) { + .section-title { + font-size: 1.75rem; + } + + .info-section { + padding: 2rem 1.5rem; + margin: 0 0.5rem; + } + + .code-comparison-card { + margin-bottom: 2rem; + } + + .get-started-section { + margin: 0 0.5rem; + } } @media (max-width: 767px) { - .blog-post-title { - font-size: 1.7rem; + .section-title { + font-size: 1.5rem; + } + + .section-subtitle { + font-size: 1rem; + } + + .section-description { + font-size: 1rem; + } + + .info-section { + padding: 1.5rem 1rem; + margin: 0; } + + .info-section .section-description { + font-size: 1rem; + } + + .code-block { + padding: 1rem; + } + + .code-block pre { + font-size: 0.8rem; + } + + .feature-item { + padding: 1rem; + } + + .feature-item strong { + font-size: 1rem; + } + + .feature-item p { + font-size: 0.9rem; + } + + .get-started-section { + padding: 1.5rem 1rem; + margin: 0; + } + + .get-started-text { + font-size: 1rem; + } + + .cta-box { + padding: 1.5rem; + } + + .cta-text { + font-size: 1rem; + } +} - .blog-post-card { - margin-bottom: 3rem; +@media (max-width: 576px) { + .section-title { + font-size: 1.3rem; + } + + .card-header-danger h5, + .card-header-success h5 { + font-size: 1.1rem; + } + + .feature-icon { + font-size: 1.2rem; + margin-right: 0.8rem; } -} \ No newline at end of file +} + +/* Better spacing for main content area */ +.w3l-content-photo-5 .container { + max-width: 1200px; +} + +/* Smooth transitions */ + +a { + transition: all 0.2s ease; +} + +/* Print styles */ +@media print { + .code-comparison-card, + .feature-item, + .get-started-section, + .info-section { + box-shadow: none; + border: 1px solid #ddd; + } +} + +/* ============================================ + Dark Theme Support + ============================================ */ + +/* Theme Toggle Button */ + +/* ============================================ + Fix Toggle Button Size and Background Colors + ============================================ */ + +/* Make toggle button larger on desktop */ +.theme-toggle { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border: none; + border-radius: 50%; + width: 60px; + height: 60px; + cursor: pointer; + box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4); + transition: all 0.3s ease; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.8rem; + position: relative; +} + +.theme-toggle:hover { + transform: scale(1.15); + box-shadow: 0 6px 25px rgba(102, 126, 234, 0.5); +} + +.theme-toggle:active { + transform: scale(0.95); +} + +/* Larger on very wide screens */ +@media (min-width: 1400px) { + .theme-toggle { + width: 70px; + height: 70px; + font-size: 2rem; + } +} + +/* Medium size on tablets */ +@media (max-width: 991px) and (min-width: 577px) { + .theme-toggle { + width: 55px; + height: 55px; + font-size: 1.6rem; + } +} + +/* Smaller on mobile */ +@media (max-width: 576px) { + .theme-toggle { + width: 50px; + height: 50px; + font-size: 1.5rem; + } + + .theme-toggle-wrapper { + top: 15px; + right: 15px; + } +} + +/* Fix background color transitions */ +body { + transition: background-color 0.4s ease; +} + +body.light-theme { + background-color: #ffffff !important; +} + +body.dark-theme { + background-color: #1a1a2e !important; +} + +/* Ensure all major sections transition smoothly */ +.w3l-content-photo-5, +.w3l-feature-code, +.w3l-about, +.w3l-footer-29-main { + transition: background-color 0.4s ease; +} + +/* Light theme section backgrounds */ +body.light-theme .w3l-content-photo-5 { + background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%) !important; +} + +body.light-theme .w3l-feature-code { + background: #667eea !important; +} + +body.light-theme .w3l-about { + background-color: #ffffff !important; +} + +body.light-theme .w3l-footer-29-main { + background: #f8f9fa !important; +} + +/* Dark theme section backgrounds */ +body.dark-theme .w3l-content-photo-5 { + background-color: #1a1a2e !important; +} + +body.dark-theme .w3l-feature-code { + background: #16213e !important; +} + +body.dark-theme .w3l-about { + background-color: #1a1a2e !important; +} + +body.dark-theme .w3l-footer-29-main { + background: #16213e !important; +} + +/* Ensure skills-bars section changes color */ +body.light-theme .skills-bars { + background-color: #ffffff !important; +} + +body.dark-theme .skills-bars { + background-color: #1a1a2e !important; +} + +/* Fix research context section */ +body.light-theme .w3l-about .skills-bars[style*="background-color"] { + background-color: #f8f9fa !important; +} + +body.dark-theme .w3l-about .skills-bars[style*="background-color"] { + background-color: #2d3748 !important; +} + +/* Better toggle wrapper positioning */ +.theme-toggle-wrapper { + position: fixed; + top: 25px; + right: 25px; + z-index: 9999; +} + +@media (min-width: 1400px) { + .theme-toggle-wrapper { + top: 30px; + right: 30px; + } +} + +/* Add subtle pulse animation to toggle button */ +@keyframes subtle-pulse { + 0%, 100% { + box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4); + } + 50% { + box-shadow: 0 4px 25px rgba(102, 126, 234, 0.6); + } +} + +.theme-toggle { + animation: subtle-pulse 3s ease-in-out infinite; +} + +.theme-toggle:hover { + animation: none; +} + + +/* ============================================ + FORCE Background Color Changes - Override Everything + ============================================ */ + +/* Override global transition that might be interfering */ +body.light-theme, +body.dark-theme, +body.light-theme *, +body.dark-theme * { + transition: background-color 0.5s ease, color 0.3s ease !important; +} + +/* Force body backgrounds */ +body.light-theme, +body.light-theme .w3l-content-photo-5 { + background-color: #f8f9fa !important; + background-image: none !important; +} + +body.dark-theme, +body.dark-theme .w3l-content-photo-5 { + background-color: #1a1a2e !important; + background-image: none !important; +} + +/* Force section backgrounds to change */ +body.light-theme .w3l-feature-code { + background-color: #667eea !important; + background-image: none !important; +} + +body.dark-theme .w3l-feature-code { + background-color: #0f172a !important; + background-image: none !important; +} + +body.light-theme .w3l-about, +body.light-theme .w3l-about .skills-bars { + background-color: #ffffff !important; + background-image: none !important; +} + +body.dark-theme .w3l-about, +body.dark-theme .w3l-about .skills-bars { + background-color: #1a1a2e !important; + background-image: none !important; +} + +body.light-theme .w3l-footer-29-main { + background-color: #2c3e50 !important; + background-image: none !important; +} + +body.dark-theme .w3l-footer-29-main { + background-color: #0f172a !important; + background-image: none !important; +} + +/* Ensure content area changes too */ +body.light-theme .content-main { + background-color: transparent !important; +} + +body.dark-theme .content-main { + background-color: transparent !important; +} + +/* Make sure predicate examples section changes */ +body.light-theme .skills-bars[style] { + background-color: #ffffff !important; +} + +body.dark-theme .skills-bars[style] { + background-color: #1a1a2e !important; +} + +/* Force text colors to update */ +body.dark-theme .w3l-content-photo-5, +body.dark-theme .w3l-content-photo-5 h1, +body.dark-theme .w3l-content-photo-5 h2, +body.dark-theme .w3l-content-photo-5 h3, +body.dark-theme .w3l-content-photo-5 h4, +body.dark-theme .w3l-content-photo-5 h5, +body.dark-theme .w3l-content-photo-5 h6, +body.dark-theme .w3l-content-photo-5 p { + color: #f0f0f0 !important; +} + +body.light-theme .w3l-content-photo-5 h1, +body.light-theme .w3l-content-photo-5 h2, +body.light-theme .w3l-content-photo-5 h3, +body.light-theme .w3l-content-photo-5 h4, +body.light-theme .w3l-content-photo-5 h5, +body.light-theme .w3l-content-photo-5 h6 { + color: #2c3e50 !important; +} + +body.light-theme .w3l-content-photo-5 p { + color: #444 !important; +} diff --git a/index.html b/index.html index 70b611e..c45c6e3 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,13 @@
+ +
@@ -81,13 +78,118 @@
- Extend your Java code with Refinement Types and catch bugs earlier!
- LiquidJava implements an additional type system with Refinement Types on top of Java.
- It allows developers to express better restrictions on the code and discover more bugs before executing the program.
+ Extend your Java code with Refinement Types and catch bugs earlier!
+ LiquidJava extends Java's type system with refinement types—types enriched with logical predicates. + This allows you to express and verify precise properties about your code, catching bugs like null pointer exceptions, + division by zero, and array index errors at compile time rather than runtime. By adding lightweight annotations to your + Java code, LiquidJava provides an additional layer of safety without requiring you to rewrite your programs. +
+Here's a simple example showing how LiquidJava catches potential runtime errors at compile time:
+ +Compiles but may crash at runtime
+int divide(int a, int b) { + return a / b; // potential division by zero! +} + +int result = divide(10, 0); // Runtime error!+
Verified safe at compile time
+int divide(int a, @Refinement("b != 0") int b) { + return a / b; // guaranteed safe! +} + +int result = divide(10, 0); // Compile-time error!+
Verify that objects are non-null where needed
+Ensure array indices are always within valid ranges
+Prevent division-by-zero errors at compile time
+Define and verify application-specific properties
+Add refinements incrementally to your projects
++ Ready to try LiquidJava? Visit our main GitHub repository + for installation instructions and comprehensive examples. You can also follow our + interactive tutorial to learn how to use + LiquidJava's capabilities step by step. +
++ + Install the Visual Studio Code plugin + to get started with LiquidJava in your favorite IDE. +
+