From c4ed976d760166860041ac0fe245a0fdf0080224 Mon Sep 17 00:00:00 2001 From: "James R. Perkins" Date: Mon, 23 Mar 2026 15:53:19 -0700 Subject: [PATCH 01/28] Modernize site with Bootstrap 5 and custom theme - Add Bootstrap 5 framework for responsive design - Create custom bootstrap-theme.css with RESTEasy brand colors - Implement modern teal/slate color palette (#2c5f7a, #4a9ebb) - Add responsive containers to all page templates - Update navigation with gradient and modern styling - Add viewport meta tag for mobile responsiveness - Improve typography and spacing throughout - Add breadcrumb styling and sidebar layout - Update .gitignore to exclude node_modules The site now has a clean, professional look with: - Compact navigation (no longer 375px tall) - Responsive grid layout for features - Proper content width constraints - Modern color scheme matching brand identity Signed-off-by: James R. Perkins Co-Authored-By: Claude Sonnet 4.5 --- .gitignore | 3 + public/css/bootstrap-theme.css | 551 ++++++++++++++++++++++++++++++++ templates/partials/default.html | 2 + templates/partials/footer.html | 6 +- templates/partials/head.html | 16 +- templates/partials/main.html | 4 +- templates/partials/nav.html | 14 +- templates/partials/post.html | 2 + 8 files changed, 589 insertions(+), 9 deletions(-) create mode 100644 public/css/bootstrap-theme.css diff --git a/.gitignore b/.gitignore index fc56ab2..388cac3 100644 --- a/.gitignore +++ b/.gitignore @@ -8,5 +8,8 @@ target *.iml .vscode +node_modules + ## OS related *.DS_Store +node_modules/ diff --git a/public/css/bootstrap-theme.css b/public/css/bootstrap-theme.css new file mode 100644 index 0000000..93e5e14 --- /dev/null +++ b/public/css/bootstrap-theme.css @@ -0,0 +1,551 @@ +/* ============================================ + RESTEasy Bootstrap Theme + Modern design using Bootstrap 5 + ============================================ */ + +/* ============================================ + CSS VARIABLES - Brand Colors + ============================================ */ +:root { + /* RESTEasy Brand Colors - Modern Teal/Slate Palette */ + --resteasy-primary: #2c5f7a; /* Deep slate blue */ + --resteasy-primary-dark: #1e4255; /* Darker slate */ + --resteasy-primary-light: #3d7a9a; /* Lighter slate */ + --resteasy-accent: #4a9ebb; /* Bright teal accent */ + --resteasy-accent-light: #5fb8d4; /* Light teal */ + --resteasy-success: #2d8659; /* Muted green */ + --resteasy-bg-light: #f4f6f8; /* Cool light gray */ + --resteasy-bg-accent: #e8f2f7; /* Light blue-gray */ + --resteasy-border: #d1dce3; /* Cool border */ + --resteasy-text-muted: #5a6c7d; /* Muted slate text */ +} + +/* ============================================ + RESET OLD STYLES + ============================================ */ +/* Hide all old wrapper divs and use Bootstrap container */ +body#project { + background-color: #ffffff !important; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; + font-size: 16px !important; + color: #212529 !important; + overflow-x: hidden !important; +} + +/* Fix Bootstrap containers - no fixed heights! */ +.container, +.container-fluid { + height: auto !important; + min-height: 0 !important; + max-height: none !important; +} + +#wrapper, +#maincontent-wrapper, +#wrapper-2, +#wrap-content, +#wrapper-3, +#main-wrapper { + all: unset !important; + display: block !important; + width: 100% !important; + max-width: none !important; + margin: 0 !important; + padding: 0 !important; + background: none !important; + float: none !important; + box-shadow: none !important; + border-radius: 0 !important; + height: auto !important; + min-height: 0 !important; + overflow: visible !important; +} + +#main { + all: unset !important; + display: block !important; + width: 100% !important; + padding: 0 !important; + margin: 0 !important; + background: white !important; + min-height: auto !important; + height: auto !important; + overflow: visible !important; +} + +/* Hide old logo and branding */ +#branding, +#logo, +#proj_logo, +#proj_logo-neg { + display: none !important; +} + +/* ============================================ + HEADER & BANNER + ============================================ */ +#top_subnav_branding { + all: unset !important; + display: block !important; + background: white !important; + border-bottom: 1px solid var(--resteasy-border) !important; + position: sticky !important; + top: 0 !important; + z-index: 1030 !important; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; + margin: 0 !important; + padding: 0 !important; +} + +#banner { + all: unset !important; + display: block !important; + padding: 1rem 0 !important; + background: none !important; + border-radius: 0 !important; + height: auto !important; +} + +#banner img { + max-height: 40px !important; + width: auto !important; + margin-bottom: 0.25rem !important; +} + +#projectname { + all: unset !important; + display: block !important; + font-size: 1.5rem !important; + font-weight: 700 !important; + color: var(--resteasy-primary-dark) !important; + margin: 0.25rem 0 0.125rem 0 !important; + letter-spacing: -0.02em !important; +} + +#tagline { + all: unset !important; + display: block !important; + font-size: 0.95rem !important; + color: var(--resteasy-text-muted) !important; + margin: 0 !important; +} + +/* ============================================ + NAVIGATION - Bootstrap Navbar Style + ============================================ */ +#proj_nav { + all: unset !important; + display: block !important; + background: linear-gradient(135deg, var(--resteasy-primary-dark) 0%, var(--resteasy-primary) 100%) !important; + margin: 0 !important; + padding: 0 !important; + height: auto !important; + min-height: 0 !important; + overflow: visible !important; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; +} + +#proj_nav .container { + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +#proj_nav ul.sf-menu { + all: unset !important; + display: flex !important; + flex-wrap: nowrap !important; + align-items: center !important; + list-style: none !important; + margin: 0 !important; + padding: 0 !important; + height: auto !important; + min-height: 0 !important; +} + +#proj_nav ul.sf-menu > li { + all: unset !important; + display: block !important; + position: relative !important; + height: auto !important; + margin: 0 !important; + float: none !important; +} + +#proj_nav ul.sf-menu > li > a { + all: unset !important; + display: block !important; + padding: 0.625rem 1rem !important; + color: rgba(255, 255, 255, 0.9) !important; + font-size: 0.9375rem !important; + font-weight: 500 !important; + text-decoration: none !important; + transition: all 0.2s ease !important; + cursor: pointer !important; + white-space: nowrap !important; + height: auto !important; + line-height: 1.5 !important; +} + +#proj_nav ul.sf-menu > li > a:hover, +#proj_nav ul.sf-menu > li.current > a { + background-color: rgba(255, 255, 255, 0.15) !important; + color: #ffffff !important; + border-bottom: 2px solid var(--resteasy-accent-light) !important; +} + +/* Dropdown menus */ +#proj_nav ul.sf-menu li ul { + all: unset !important; + display: none !important; + position: absolute !important; + top: 100% !important; + left: 0 !important; + min-width: 180px !important; + background: white !important; + border: 1px solid var(--resteasy-border) !important; + border-radius: 0.25rem !important; + box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15) !important; + padding: 0.25rem 0 !important; + margin: 0 !important; + z-index: 1050 !important; + list-style: none !important; + height: auto !important; +} + +#proj_nav ul.sf-menu li:hover > ul { + display: block !important; +} + +#proj_nav ul.sf-menu li ul li { + all: unset !important; + display: block !important; +} + +#proj_nav ul.sf-menu li ul li a { + all: unset !important; + display: block !important; + padding: 0.5rem 1rem !important; + color: #212529 !important; + text-decoration: none !important; + font-size: 0.95rem !important; + cursor: pointer !important; + transition: background-color 0.15s ease !important; +} + +#proj_nav ul.sf-menu li ul li a:hover { + background-color: var(--resteasy-bg-light) !important; + color: var(--resteasy-primary) !important; +} + +/* Hide notch elements */ +.notch { + display: none !important; +} + +/* ============================================ + MAIN CONTENT + ============================================ */ +.proj_define { + background: linear-gradient(135deg, var(--resteasy-bg-accent) 0%, #d4e8f0 100%) !important; + border-left: 4px solid var(--resteasy-accent) !important; + padding: 1.25rem !important; + margin: 1.5rem 0 !important; + border-radius: 0.375rem !important; + font-size: 1rem !important; + line-height: 1.6 !important; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; +} + +/* Features Section */ +#proj_checklist { + margin: 2rem 0 !important; + width: 100% !important; + clear: both !important; + overflow: visible !important; +} + +#proj_checklist h3 { + font-size: 1.5rem !important; + font-weight: 700 !important; + margin-bottom: 1rem !important; + color: #212529 !important; +} + +#proj_checklist ul { + all: unset !important; + display: grid !important; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; + gap: 0.75rem !important; + list-style: none !important; + padding: 0 !important; + margin: 0 !important; + width: 100% !important; + overflow: visible !important; +} + +#proj_checklist li { + all: unset !important; + display: flex !important; + align-items: flex-start !important; + padding: 0.75rem !important; + background: var(--resteasy-bg-light) !important; + border: 1px solid var(--resteasy-border) !important; + border-radius: 0.375rem !important; + transition: all 0.2s ease !important; + font-size: 0.95rem !important; + line-height: 1.5 !important; +} + +#proj_checklist li:hover { + background: white !important; + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; + transform: translateY(-1px) !important; + border-color: var(--resteasy-primary) !important; +} + +#proj_checklist li::before { + content: "✓" !important; + flex-shrink: 0 !important; + width: 20px !important; + height: 20px !important; + background: var(--resteasy-success) !important; + color: white !important; + border-radius: 50% !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + font-weight: bold !important; + font-size: 12px !important; + margin-right: 0.625rem !important; +} + +/* ============================================ + FOOTER + ============================================ */ +#site-info { + all: unset !important; + display: block !important; + background: var(--resteasy-bg-light) !important; + border-top: 1px solid var(--resteasy-border) !important; + padding: 3rem 0 2rem 0 !important; + margin-top: 4rem !important; + text-align: left !important; +} + +.commonhaus-footer { + margin-bottom: 1.5rem !important; +} + +.commonhaus-logo img { + max-width: 200px !important; + height: auto !important; + margin-bottom: 1rem !important; +} + +.commonhaus-legal { + font-size: 0.875rem !important; + color: #6c757d !important; + line-height: 1.75 !important; +} + +/* Footer Navigation */ +#projsubnav_footer { + all: unset !important; + display: block !important; + padding: 2rem 0 !important; + border-top: 1px solid var(--resteasy-border) !important; + margin-top: 2rem !important; +} + +#projsubnav_footer ul { + all: unset !important; + display: flex !important; + flex-wrap: wrap !important; + gap: 2rem !important; + list-style: none !important; + padding: 0 !important; + margin: 0 !important; +} + +#projsubnav_footer > ul > li { + all: unset !important; + display: block !important; + flex: 1 1 150px !important; + min-width: 150px !important; +} + +#projsubnav_footer a { + color: #495057 !important; + text-decoration: none !important; + font-weight: 500 !important; + transition: color 0.15s ease !important; +} + +#projsubnav_footer a:hover { + color: var(--resteasy-primary) !important; + text-decoration: underline !important; +} + +#projsubnav_footer .menu-title { + font-weight: 600 !important; + font-size: 1.05rem !important; + margin-bottom: 0.5rem !important; + display: block !important; +} + +#projsubnav_footer ul.level1 { + all: unset !important; + display: block !important; + list-style: none !important; + padding: 0 !important; + margin: 0.5rem 0 0 0 !important; +} + +#projsubnav_footer ul.level1 li { + all: unset !important; + display: block !important; + margin: 0.25rem 0 !important; +} + +#projsubnav_footer ul.level1 a { + font-size: 0.95rem !important; + font-weight: 400 !important; +} + +/* ============================================ + RESPONSIVE + ============================================ */ +@media (max-width: 768px) { + #proj_nav ul.sf-menu { + flex-direction: column !important; + align-items: stretch !important; + } + + #proj_nav ul.sf-menu > li { + width: 100% !important; + } + + #proj_nav ul.sf-menu > li > a { + padding: 0.75rem 1rem !important; + } + + #proj_nav ul.sf-menu li ul { + position: static !important; + box-shadow: none !important; + border: none !important; + background: rgba(0, 0, 0, 0.05) !important; + border-radius: 0 !important; + margin: 0 !important; + } + + #proj_nav ul.sf-menu li ul li a { + color: rgba(255, 255, 255, 0.8) !important; + padding-left: 2rem !important; + } + + #proj_nav ul.sf-menu li ul li a:hover { + background: rgba(255, 255, 255, 0.1) !important; + color: white !important; + } + + #proj_checklist ul { + grid-template-columns: 1fr !important; + } + + #projsubnav_footer ul { + flex-direction: column !important; + } +} + +/* ============================================ + BREADCRUMBS & RIGHT COLUMN + ============================================ */ +#breadcrumb { + font-size: 0.875rem !important; + color: var(--resteasy-text-muted) !important; + margin-bottom: 1rem !important; + padding: 0.5rem 0 !important; + border-bottom: 1px solid var(--resteasy-border) !important; +} + +#breadcrumb a { + color: var(--resteasy-primary) !important; + text-decoration: none !important; +} + +#breadcrumb a:hover { + text-decoration: underline !important; +} + +#breadcrumb img { + height: 16px !important; + width: auto !important; + vertical-align: middle !important; + margin-left: 0.5rem !important; +} + +/* Right column - hide on mobile, show as sidebar on desktop */ +#rightcolumn { + background: var(--resteasy-bg-light) !important; + padding: 1.5rem !important; + border-radius: 0.5rem !important; + margin-top: 2rem !important; + float: none !important; + width: 100% !important; + margin-left: 0 !important; +} + +@media (min-width: 992px) { + /* On larger screens, show as a sidebar */ + .rightcol-layout #wrapper-3 { + display: flex !important; + gap: 2rem !important; + } + + .rightcol-layout #main-wrapper { + flex: 1 !important; + min-width: 0 !important; + } + + .rightcol-layout #rightcolumn { + flex: 0 0 300px !important; + margin-top: 0 !important; + width: 300px !important; + } +} + +#proj_quick-start h3 { + font-size: 1.125rem !important; + font-weight: 600 !important; + margin-bottom: 1rem !important; + color: #212529 !important; +} + +#proj_quick-start ul { + list-style: none !important; + padding: 0 !important; + margin: 0 !important; +} + +#proj_quick-start li { + margin-bottom: 0.5rem !important; +} + +#proj_quick-start a { + color: var(--resteasy-primary) !important; + text-decoration: none !important; + font-size: 0.95rem !important; +} + +#proj_quick-start a:hover { + text-decoration: underline !important; +} + +/* ============================================ + UTILITIES + ============================================ */ +.clearfix::after { + content: "" !important; + display: table !important; + clear: both !important; +} diff --git a/templates/partials/default.html b/templates/partials/default.html index 0a2da42..eadcc52 100644 --- a/templates/partials/default.html +++ b/templates/partials/default.html @@ -3,6 +3,7 @@
+
{#insert /} +
diff --git a/templates/partials/footer.html b/templates/partials/footer.html index 5fa622f..66e21ed 100644 --- a/templates/partials/footer.html +++ b/templates/partials/footer.html @@ -1,4 +1,5 @@
-
-
+
+
diff --git a/templates/partials/head.html b/templates/partials/head.html index 4a3c052..9318829 100644 --- a/templates/partials/head.html +++ b/templates/partials/head.html @@ -5,11 +5,11 @@ {#seo page site /} {#rss site /} + - @@ -18,7 +18,21 @@ + + + + + + + + + + diff --git a/templates/partials/main.html b/templates/partials/main.html index 5431dfa..faf7090 100644 --- a/templates/partials/main.html +++ b/templates/partials/main.html @@ -3,8 +3,9 @@
+
-

RESTEasy

+

RESTEasy

RESTEasy is a Commonhaus project that provides various frameworks to help you build RESTful Web Services and RESTful Java applications. It is an implementation of the Jakarta RESTful Web Services, an Eclipse @@ -48,5 +49,6 @@

RESTEasy

{#include partials/news-list.html /}
+
diff --git a/templates/partials/nav.html b/templates/partials/nav.html index 5f9ec0b..a0564ce 100644 --- a/templates/partials/nav.html +++ b/templates/partials/nav.html @@ -3,14 +3,17 @@
diff --git a/templates/partials/post.html b/templates/partials/post.html index b856c3d..a27faa7 100644 --- a/templates/partials/post.html +++ b/templates/partials/post.html @@ -3,6 +3,7 @@
+
From 5fc6a3a4add3d47aa5b491b65538c066709399f6 Mon Sep 17 00:00:00 2001 From: "James R. Perkins" Date: Mon, 23 Mar 2026 16:34:47 -0700 Subject: [PATCH 02/28] Add dark mode toggle and enhance styling Major improvements: - Implement full dark/light theme toggle with localStorage persistence - Add theme switcher button in navigation (moon/sun icon) - Detect and respect system color scheme preferences - Create comprehensive dark mode styles for all components Table enhancements: - Modern gradient headers with teal/slate colors - Clean zebra striping with subtle backgrounds - Smooth hover effects and transitions - Rounded corners with shadow for depth - Uppercase header text with better spacing Sidebar improvements: - Modern card-style design with clean borders - Animated arrow indicators on links - Section headers with accent underlines - Professional spacing and visual hierarchy Navigation fixes: - Dynamic active state highlighting using JavaScript - Correctly highlights current section on all pages - Removed redundant project name text from banner - Improved banner sizing for better visibility UI cleanup: - Remove old CSS files (org_common.css, styles.css, etc.) - Streamline to Bootstrap + custom theme only - Keep minimal legacy CSS for compatibility - All styling now uses modern CSS custom properties The site now features a polished, professional design with seamless light/dark mode switching and improved UX throughout. Signed-off-by: James R. Perkins Co-Authored-By: Claude Sonnet 4.5 --- public/css/bootstrap-theme.css | 440 ++++++++++++++++++++++++++++++++- public/js/theme-toggle.js | 105 ++++++++ templates/partials/footer.html | 8 +- templates/partials/head.html | 10 +- templates/partials/nav.html | 19 +- 5 files changed, 556 insertions(+), 26 deletions(-) create mode 100644 public/js/theme-toggle.js diff --git a/public/css/bootstrap-theme.css b/public/css/bootstrap-theme.css index 93e5e14..b98d078 100644 --- a/public/css/bootstrap-theme.css +++ b/public/css/bootstrap-theme.css @@ -107,7 +107,6 @@ body#project { } #banner img { - max-height: 40px !important; width: auto !important; margin-bottom: 0.25rem !important; } @@ -457,6 +456,93 @@ body#project { } } +/* ============================================ + TABLES - Modern Bootstrap Style + ============================================ */ +table, +.simpletablestyle, +.wikimarkup, +.directory-listing { + width: 100% !important; + border-collapse: separate !important; + border-spacing: 0 !important; + margin: 1.5rem 0 !important; + border: 1px solid var(--resteasy-border) !important; + border-radius: 0.5rem !important; + overflow: hidden !important; + background-color: white !important; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; +} + +table thead, +.simpletablestyle thead, +table tr.header, +.simpletablestyle tr.header { + background: linear-gradient(135deg, var(--resteasy-primary-dark) 0%, var(--resteasy-primary) 100%) !important; + color: white !important; +} + +table th, +.simpletablestyle th { + padding: 1rem !important; + font-weight: 600 !important; + font-size: 0.875rem !important; + text-transform: uppercase !important; + letter-spacing: 0.05em !important; + color: white !important; + border-bottom: 2px solid var(--resteasy-primary-dark) !important; + text-align: left !important; + text-shadow: none !important; +} + +table td, +.simpletablestyle td { + padding: 0.875rem 1rem !important; + font-size: 0.9375rem !important; + color: var(--color-text, #212529) !important; + border-bottom: 1px solid var(--resteasy-border) !important; +} + +/* Alternating row colors - clean and subtle */ +table tbody tr:nth-child(odd), +.simpletablestyle tbody tr:nth-child(odd) { + background-color: white !important; +} + +table tbody tr:nth-child(even), +.simpletablestyle tbody tr:nth-child(even) { + background-color: #f8f9fa !important; +} + +table tbody tr:hover, +.simpletablestyle tbody tr:hover { + background-color: #e8f4f8 !important; + transition: background-color 0.15s ease !important; +} + +/* Links in tables */ +table td a, +.simpletablestyle td a, +table td a.td-download, +.simpletablestyle td a.td-download { + color: var(--resteasy-primary) !important; + text-decoration: none !important; + font-weight: 500 !important; + transition: color 0.15s ease !important; +} + +table td a:hover, +.simpletablestyle td a:hover { + color: var(--resteasy-accent) !important; + text-decoration: underline !important; +} + +/* Remove border from last row */ +table tbody tr:last-child td, +.simpletablestyle tbody tr:last-child td { + border-bottom: none !important; +} + /* ============================================ BREADCRUMBS & RIGHT COLUMN ============================================ */ @@ -484,15 +570,18 @@ body#project { margin-left: 0.5rem !important; } -/* Right column - hide on mobile, show as sidebar on desktop */ +/* Right column - Modern card-style sidebar */ #rightcolumn { - background: var(--resteasy-bg-light) !important; - padding: 1.5rem !important; + background: white !important; + padding: 0 !important; border-radius: 0.5rem !important; margin-top: 2rem !important; float: none !important; width: 100% !important; margin-left: 0 !important; + border: 1px solid var(--resteasy-border) !important; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; + overflow: hidden !important; } @media (min-width: 992px) { @@ -514,11 +603,28 @@ body#project { } } +/* Social media section */ +.projectpage-socialmedia { + padding: 1rem !important; + border-bottom: 1px solid var(--resteasy-border) !important; + background: var(--resteasy-bg-light) !important; +} + +/* Useful Links section */ +#proj_quick-start { + padding: 1.5rem !important; +} + #proj_quick-start h3 { font-size: 1.125rem !important; - font-weight: 600 !important; - margin-bottom: 1rem !important; - color: #212529 !important; + font-weight: 700 !important; + margin: 0 0 1rem 0 !important; + color: var(--resteasy-primary-dark) !important; + text-transform: uppercase !important; + letter-spacing: 0.05em !important; + font-size: 0.875rem !important; + padding-bottom: 0.75rem !important; + border-bottom: 2px solid var(--resteasy-accent) !important; } #proj_quick-start ul { @@ -528,19 +634,335 @@ body#project { } #proj_quick-start li { - margin-bottom: 0.5rem !important; + margin-bottom: 0 !important; + border-bottom: 1px solid var(--resteasy-border-light, #eaecef) !important; +} + +#proj_quick-start li:last-child { + border-bottom: none !important; } #proj_quick-start a { + display: block !important; + padding: 0.75rem 0 !important; color: var(--resteasy-primary) !important; text-decoration: none !important; - font-size: 0.95rem !important; + font-size: 0.9375rem !important; + font-weight: 500 !important; + transition: all 0.15s ease !important; + position: relative !important; + padding-left: 1.25rem !important; +} + +#proj_quick-start a::before { + content: "›" !important; + position: absolute !important; + left: 0 !important; + color: var(--resteasy-accent) !important; + font-weight: bold !important; + font-size: 1.25rem !important; + line-height: 1 !important; + transition: transform 0.15s ease !important; } #proj_quick-start a:hover { + color: var(--resteasy-accent) !important; + text-decoration: none !important; + padding-left: 1.5rem !important; +} + +#proj_quick-start a:hover::before { + transform: translateX(0.25rem) !important; +} + +/* Badges section */ +#badges { + padding: 1.5rem !important; + border-top: 1px solid var(--resteasy-border) !important; + background: var(--resteasy-bg-light) !important; +} + +#badges ul { + list-style: none !important; + padding: 0 !important; + margin: 0 !important; +} + +#badges li { + margin-bottom: 0.5rem !important; +} + +#badges a { + color: var(--resteasy-primary) !important; + text-decoration: none !important; + font-size: 0.875rem !important; +} + +#badges a:hover { text-decoration: underline !important; } +/* ============================================ + DARK MODE THEME + ============================================ */ +[data-bs-theme="dark"] { + /* Dark mode color overrides */ + --resteasy-primary: #4a9ebb; + --resteasy-primary-dark: #3d7a9a; + --resteasy-primary-light: #5fb8d4; + --resteasy-accent: #6dd4f0; + --resteasy-accent-light: #89def4; + --resteasy-success: #3fa76b; + --resteasy-bg-light: #1a1f24; + --resteasy-bg-accent: #242b32; + --resteasy-border: #3a4149; + --resteasy-text-muted: #8f9ba8; +} + +[data-bs-theme="dark"] body#project { + background-color: #0d1117 !important; + color: #e6edf3 !important; +} + +[data-bs-theme="dark"] #wrapper, +[data-bs-theme="dark"] #maincontent-wrapper, +[data-bs-theme="dark"] #wrapper-2, +[data-bs-theme="dark"] #wrap-content, +[data-bs-theme="dark"] #wrapper-3, +[data-bs-theme="dark"] #main-wrapper, +[data-bs-theme="dark"] #main { + background: #0d1117 !important; + color: #e6edf3 !important; +} + +[data-bs-theme="dark"] #top_subnav_branding { + background: #161b22 !important; + border-bottom-color: var(--resteasy-border) !important; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; +} + +[data-bs-theme="dark"] #proj_nav { + background: linear-gradient(135deg, #1a2332 0%, #2c3e50 100%) !important; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important; +} + +[data-bs-theme="dark"] #proj_nav ul.sf-menu li ul { + background: #1a1f24 !important; + border-color: var(--resteasy-border) !important; + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important; +} + +[data-bs-theme="dark"] #proj_nav ul.sf-menu li ul li a { + color: #e6edf3 !important; +} + +[data-bs-theme="dark"] #proj_nav ul.sf-menu li ul li a:hover { + background-color: #242b32 !important; + color: var(--resteasy-accent) !important; +} + +[data-bs-theme="dark"] .proj_define { + background: linear-gradient(135deg, #1c2a38 0%, #243447 100%) !important; + border-left-color: var(--resteasy-accent) !important; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important; +} + +[data-bs-theme="dark"] #proj_checklist li { + background: var(--resteasy-bg-light) !important; + border-color: var(--resteasy-border) !important; + color: #e6edf3 !important; +} + +[data-bs-theme="dark"] #proj_checklist li:hover { + background: #242b32 !important; + border-color: var(--resteasy-accent) !important; +} + +[data-bs-theme="dark"] #rightcolumn { + background: #161b22 !important; + border-color: var(--resteasy-border) !important; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important; +} + +[data-bs-theme="dark"] .projectpage-socialmedia { + background: #0d1117 !important; + border-bottom-color: var(--resteasy-border) !important; +} + +[data-bs-theme="dark"] #proj_quick-start { + background: transparent !important; +} + +[data-bs-theme="dark"] #proj_quick-start h3 { + color: #e6edf3 !important; + border-bottom-color: var(--resteasy-accent) !important; +} + +[data-bs-theme="dark"] #proj_quick-start li { + border-bottom-color: var(--resteasy-border) !important; +} + +[data-bs-theme="dark"] #proj_quick-start a { + color: var(--resteasy-accent-light) !important; +} + +[data-bs-theme="dark"] #proj_quick-start a:hover { + color: var(--resteasy-accent) !important; +} + +[data-bs-theme="dark"] #badges { + background: #0d1117 !important; + border-top-color: var(--resteasy-border) !important; +} + +[data-bs-theme="dark"] #badges a { + color: var(--resteasy-accent-light) !important; +} + +[data-bs-theme="dark"] #breadcrumb { + color: var(--resteasy-text-muted) !important; + border-bottom-color: var(--resteasy-border) !important; +} + +[data-bs-theme="dark"] #breadcrumb a { + color: var(--resteasy-accent) !important; +} + +[data-bs-theme="dark"] h1, +[data-bs-theme="dark"] h2, +[data-bs-theme="dark"] h3, +[data-bs-theme="dark"] h4, +[data-bs-theme="dark"] h5, +[data-bs-theme="dark"] h6 { + color: #e6edf3 !important; +} + +[data-bs-theme="dark"] p, +[data-bs-theme="dark"] a { + color: #c9d1d9 !important; +} + +[data-bs-theme="dark"] a:hover { + color: var(--resteasy-accent-light) !important; +} + +/* Tables in dark mode */ +[data-bs-theme="dark"] table, +[data-bs-theme="dark"] .simpletablestyle, +[data-bs-theme="dark"] .wikimarkup, +[data-bs-theme="dark"] .directory-listing { + background-color: #161b22 !important; + color: #e6edf3 !important; + border-color: var(--resteasy-border) !important; +} + +[data-bs-theme="dark"] table thead, +[data-bs-theme="dark"] .simpletablestyle thead, +[data-bs-theme="dark"] .wikimarkup thead, +[data-bs-theme="dark"] table tr.header, +[data-bs-theme="dark"] .simpletablestyle tr.header, +[data-bs-theme="dark"] .wikimarkup tr.header, +[data-bs-theme="dark"] .directory-listing tr.header { + background-color: #1a1f24 !important; + color: #e6edf3 !important; +} + +[data-bs-theme="dark"] table th, +[data-bs-theme="dark"] .simpletablestyle th, +[data-bs-theme="dark"] .wikimarkup th, +[data-bs-theme="dark"] .directory-listing th { + background-color: #1a1f24 !important; + color: #e6edf3 !important; + border-color: var(--resteasy-border) !important; + text-shadow: none !important; +} + +[data-bs-theme="dark"] table td, +[data-bs-theme="dark"] .simpletablestyle td, +[data-bs-theme="dark"] .wikimarkup td, +[data-bs-theme="dark"] .directory-listing td { + background-color: #0d1117 !important; + color: #c9d1d9 !important; + border-color: var(--resteasy-border) !important; +} + +/* Odd rows (white #ffffff in light mode) - dark in dark mode */ +[data-bs-theme="dark"] table.simpletablestyle tbody tr:nth-child(odd), +[data-bs-theme="dark"] .simpletablestyle tbody tr:nth-child(odd), +[data-bs-theme="dark"] table tbody tr:nth-child(odd), +[data-bs-theme="dark"] table tr:nth-child(odd), +[data-bs-theme="dark"] .wikimarkup tr:nth-child(2n+1), +[data-bs-theme="dark"] .directory-listing tr:nth-child(odd) { + background-color: #0d1117 !important; + padding-left: 6px !important; +} + +/* Even rows (light gray #f4f3f3 in light mode) - lighter in dark mode */ +[data-bs-theme="dark"] table.simpletablestyle tbody tr:nth-child(even), +[data-bs-theme="dark"] .simpletablestyle tbody tr:nth-child(even), +[data-bs-theme="dark"] table tbody tr:nth-child(even), +[data-bs-theme="dark"] table tr:nth-child(even), +[data-bs-theme="dark"] .wikimarkup tr:nth-child(2n), +[data-bs-theme="dark"] .directory-listing tr:nth-child(even) { + background-color: #21262d !important; + padding-left: 6px !important; +} + +[data-bs-theme="dark"] table tbody tr:hover, +[data-bs-theme="dark"] .simpletablestyle tbody tr:hover, +[data-bs-theme="dark"] .wikimarkup tr:hover, +[data-bs-theme="dark"] .directory-listing tr:hover { + background-color: #2d333b !important; +} + +[data-bs-theme="dark"] table a, +[data-bs-theme="dark"] .simpletablestyle a, +[data-bs-theme="dark"] .wikimarkup a, +[data-bs-theme="dark"] .directory-listing a { + color: var(--resteasy-accent) !important; +} + +[data-bs-theme="dark"] #site-info { + background: #0d1117 !important; + border-top-color: var(--resteasy-border) !important; +} + +/* Theme toggle button */ +#theme-toggle { + all: unset !important; + display: flex !important; + align-items: center !important; + gap: 0.5rem !important; + padding: 0.5rem 1rem !important; + margin-left: auto !important; + cursor: pointer !important; + color: rgba(255, 255, 255, 0.9) !important; + font-size: 0.9375rem !important; + font-weight: 500 !important; + transition: all 0.2s ease !important; + border-radius: 0.25rem !important; + white-space: nowrap !important; +} + +#theme-toggle:hover { + background-color: rgba(255, 255, 255, 0.15) !important; + color: #ffffff !important; +} + +#theme-toggle i { + font-size: 1.125rem !important; +} + +.theme-toggle-text { + display: inline !important; +} + +@media (max-width: 768px) { + .theme-toggle-text { + display: none !important; + } +} + /* ============================================ UTILITIES ============================================ */ diff --git a/public/js/theme-toggle.js b/public/js/theme-toggle.js new file mode 100644 index 0000000..12e4e5e --- /dev/null +++ b/public/js/theme-toggle.js @@ -0,0 +1,105 @@ +/** + * RESTEasy Theme Switcher + * Toggles between light and dark modes using Bootstrap's data-bs-theme + */ + +(function() { + 'use strict'; + + // Get stored theme or default to light + const getStoredTheme = () => localStorage.getItem('theme'); + const setStoredTheme = theme => localStorage.setItem('theme', theme); + + // Get preferred theme (stored or system preference) + const getPreferredTheme = () => { + const storedTheme = getStoredTheme(); + if (storedTheme) { + return storedTheme; + } + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + }; + + // Apply theme to document + const setTheme = theme => { + document.documentElement.setAttribute('data-bs-theme', theme); + updateToggleButton(theme); + }; + + // Update the toggle button icon and text + const updateToggleButton = theme => { + const toggleBtn = document.getElementById('theme-toggle'); + if (!toggleBtn) return; + + const icon = toggleBtn.querySelector('i'); + const text = toggleBtn.querySelector('.theme-toggle-text'); + + if (theme === 'dark') { + icon.className = 'fas fa-sun'; + if (text) text.textContent = 'Light'; + } else { + icon.className = 'fas fa-moon'; + if (text) text.textContent = 'Dark'; + } + }; + + // Toggle between light and dark + const toggleTheme = () => { + const currentTheme = document.documentElement.getAttribute('data-bs-theme'); + const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; + setStoredTheme(newTheme); + setTheme(newTheme); + }; + + // Initialize theme on page load + document.addEventListener('DOMContentLoaded', () => { + setTheme(getPreferredTheme()); + + // Add click handler to toggle button + const toggleBtn = document.getElementById('theme-toggle'); + if (toggleBtn) { + toggleBtn.addEventListener('click', toggleTheme); + } + }); + + // Listen for system theme changes + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => { + const storedTheme = getStoredTheme(); + if (!storedTheme) { + setTheme(e.matches ? 'dark' : 'light'); + } + }); + + // Expose toggle function globally if needed + window.toggleTheme = toggleTheme; +})(); + +/** + * Active Navigation Highlighting + * Highlights the current navigation item based on the URL + */ +(function() { + 'use strict'; + + document.addEventListener('DOMContentLoaded', () => { + const currentPath = window.location.pathname; + const navItems = document.querySelectorAll('#proj_nav [data-nav]'); + + navItems.forEach(item => { + const section = item.getAttribute('data-nav'); + item.classList.remove('current'); + + // Check if current path matches this nav item + if (section === 'overview' && (currentPath === '/' || currentPath === '/index.html')) { + item.classList.add('current'); + } else if (section === 'downloads' && currentPath.startsWith('/downloads')) { + item.classList.add('current'); + } else if (section === 'docs' && currentPath.startsWith('/docs')) { + item.classList.add('current'); + } else if (section === 'blogs' && (currentPath.startsWith('/blogs') || currentPath.startsWith('/posts'))) { + item.classList.add('current'); + } else if (section === 'build' && currentPath.startsWith('/build')) { + item.classList.add('current'); + } + }); + }); +})(); diff --git a/templates/partials/footer.html b/templates/partials/footer.html index 66e21ed..ce551f0 100644 --- a/templates/partials/footer.html +++ b/templates/partials/footer.html @@ -1,7 +1,7 @@ -
-
-
- -
- Copyright © RESTEasy. - All rights reserved. For details on our trademarks, please visit our Trademark Policy and - Trademark List. Trademarks of third parties are owned by their respective holders and their mention - here does not suggest any endorsement or association. +
+ + +
+
+
+ +
+ + Apache License 2.0 + + + Security + +
+
+ Copyright © RESTEasy. + All rights reserved. For details on our trademarks, please visit our Trademark Policy and + Trademark List. Trademarks of third parties are owned by their respective holders and their mention + here does not suggest any endorsement or association. +
+
-
-
-
-
- - - -
+
diff --git a/templates/partials/main.html b/templates/partials/main.html index faf7090..b820b71 100644 --- a/templates/partials/main.html +++ b/templates/partials/main.html @@ -1,11 +1,6 @@ -
-
-
-
-
-
- -

RESTEasy

+
+
+

RESTEasy

RESTEasy is a Commonhaus project that provides various frameworks to help you build RESTful Web Services and RESTful Java applications. It is an implementation of the Jakarta RESTful Web Services, an Eclipse @@ -49,6 +44,5 @@

RESTEasy

{#include partials/news-list.html /}
-
-
-
+
+ diff --git a/templates/partials/nav.html b/templates/partials/nav.html index caa6de5..738a57c 100644 --- a/templates/partials/nav.html +++ b/templates/partials/nav.html @@ -1,6 +1,3 @@ -
-
-