From 5e221da3d36fe93812c2143cff25aad10086d9a2 Mon Sep 17 00:00:00 2001 From: Vatsal Sanjay Date: Sun, 13 Apr 2025 19:02:35 +0200 Subject: [PATCH 01/21] =?UTF-8?q?=E2=9C=A8=20feat(css):=20optimize=20style?= =?UTF-8?q?s=20for=20better=20performance=20and=20maintainability?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 65 +- assets/css/styles.css | 1910 +++++++++++++++++------------------------ 2 files changed, 872 insertions(+), 1103 deletions(-) diff --git a/README.md b/README.md index 01de94a7..d1147fd0 100644 --- a/README.md +++ b/README.md @@ -33,7 +33,7 @@ A static website for the Computational Multiphase Physics Laboratory, built with │ │ ├── research.css # Research page styles with dark mode support │ │ ├── teaching.css # Teaching page styles with dark mode support │ │ ├── team.css # Team page styles with dark mode support -│ │ ├── styles.css # Global styles with light/dark theme variables +│ │ ├── styles.css # Global styles with light/dark theme variables (optimized) │ │ └── command-palette.css # Command palette styles (⌘K) │ ├── js # JavaScript files │ │ ├── main.js # Main JavaScript @@ -467,4 +467,65 @@ To submit a PR: 3. Test changes locally 4. Create a PR using the template 5. Link any related issues -6. Wait for review \ No newline at end of file +6. Wait for review + +### Code Style + +#### General +- Use 2-space indentation across all files +- Follow DRY principles: reuse components, variables, and styles +- Add comments for complex logic, but keep code self-documenting + +#### HTML/Markdown +- Use semantic HTML elements +- Follow BEM naming convention for CSS classes (e.g., `s-header__nav-list`) +- Keep content files in markdown format where possible + +#### CSS +- Use CSS variables for colors and typography (defined in `:root`) +- Use responsive breakpoints at 1700px, 1300px, 900px, 768px, 500px +- Use `rem` units for font sizes and spacing +- Follow mobile-first approach for media queries +- Leverage CSS custom properties for theme switching +- Organize media queries by breakpoint for better maintainability +- Use standardized variable naming for consistent styling + +#### JavaScript +- Use ES6+ features (arrow functions, const/let, template literals) +- Always include 'use strict' mode +- Use async/await for asynchronous operations +- Implement error handling with try/catch blocks +- Use camelCase for variable and function names +- Prefer event delegation for multiple similar elements + +#### Images +- Optimize images for web (compress to reduce file size) +- Follow naming convention: `[name]-[descriptor].[extension]` +- Include alt text for all images + +### CSS Architecture + +The website's CSS has been optimized for better performance and maintainability: + +1. **Variable System** + - Color variables for both light and dark themes + - Typography variables for consistent font sizing + - Spacing variables for layout consistency + - Shadow and transition presets for unified effects + +2. **Consolidated Media Queries** + - Queries organized by breakpoint rather than by component + - Shared breakpoints at 1700px, 1300px, 1200px, 900px, 768px, and 500px + - Mobile-first approach throughout + +3. **Optimized Dark Theme Support** + - CSS variables for seamless theme switching + - Fallback values for older browsers + - Theme-specific accent colors and contrasts + - Consistent text and background colors across components + +4. **Performance Improvements** + - Reduced redundant selectors + - Consolidated duplicate styles + - Optimized transitions and animations + - Simplified box shadows for better rendering \ No newline at end of file diff --git a/assets/css/styles.css b/assets/css/styles.css index 9365a0b6..13675459 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -1,14 +1,16 @@ /* Base Styles */ :root { + /* Core colors */ --color-primary: #0056b3; --color-secondary: #2b2b2b; --color-text: #333333; --color-background: #ffffff; - --font-primary: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Arial', sans-serif; - --color-primary-hover: #004494; --color-link: #0056b3; --color-link-hover: #004494; + /* Core fonts */ + --font-primary: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Arial', sans-serif; + /* Heading styling */ --h2-gradient-start: #2b65c6; --h2-gradient-end: #0e4594; @@ -23,15 +25,34 @@ --nav-item-hover-bg: rgba(255, 255, 255, 0.35); --nav-item-shadow: rgba(0, 0, 0, 0.1); --nav-item-hover-shadow: rgba(0, 0, 0, 0.15); + + /* Icon colors */ + --icon-color: #333333; + + /* Box shadow presets */ + --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.1); + --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.15); + --shadow-lg: 0 4px 30px rgba(0, 0, 0, 0.2); + + /* Transition presets */ + --transition-fast: all 0.2s ease; + --transition-medium: all 0.3s ease; + + /* Spacing system */ + --space-xs: 0.5rem; + --space-sm: 1rem; + --space-md: 2rem; + --space-lg: 4rem; + --space-xl: 8rem; } /* Dark theme variables */ [data-theme="dark"] { + /* Core colors */ --color-text: #e0e0e0; --color-background: #121212; --color-primary: #4c8dff; --color-secondary: #a0a0a0; - --color-primary-hover: #6fa1ff; --color-link: #4c8dff; --color-link-hover: #6fa1ff; @@ -49,8 +70,17 @@ --nav-item-hover-bg: rgba(40, 40, 40, 0.8); --nav-item-shadow: rgba(0, 0, 0, 0.3); --nav-item-hover-shadow: rgba(0, 0, 0, 0.4); + + /* Icon color */ + --icon-color: #ffffff; + + /* Box shadow presets */ + --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.2); + --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.3); + --shadow-lg: 0 4px 30px rgba(0, 0, 0, 0.4); } +/* Base element styles */ html { font-size: 62.5%; box-sizing: border-box; @@ -70,32 +100,37 @@ body { -moz-osx-font-smoothing: grayscale; } -/* Make icons white in dark mode */ -[data-theme="dark"] .s-header__nav i, -[data-theme="dark"] .s-header__nav-list i, -[data-theme="dark"] .fa-brands, -[data-theme="dark"] .fa-solid, -[data-theme="dark"] .ai, -[data-theme="dark"] .s-footer i, -[data-theme="dark"] .site-footer i, -[data-theme="dark"] .footer-left i, -[data-theme="dark"] .footer-right i { - color: white !important; +/* Make icons use theme colors */ +.s-header__nav i, +.s-header__nav-list i, +.fa-brands, +.fa-solid, +.ai, +.s-footer i, +.site-footer i, +.footer-left i, +.footer-right i { + color: var(--icon-color); +} + +/* Apply exceptions for colored icons */ +.fa-bluesky { + color: #0085ff !important; } /* Theme-aware content styling */ -[data-theme="dark"] #about-content a, -[data-theme="dark"] #news-content a, -[data-theme="dark"] .teaching-content a, -[data-theme="dark"] .s-teaching a { - color: #78AAFF; +#about-content a, +#news-content a, +.teaching-content a, +.s-teaching a { + color: var(--color-link); text-decoration: none; } -[data-theme="dark"] #about-content h1, -[data-theme="dark"] #about-content h3, -[data-theme="dark"] #news-content h1, -[data-theme="dark"] #news-content h3 { +#about-content h1, +#about-content h3, +#news-content h1, +#news-content h3 { color: var(--color-text); } @@ -184,7 +219,6 @@ h2 { position: relative; font-size: 2.2rem; font-weight: 600; - color: var(--color-text); padding-bottom: 0.5rem; margin: 1.5rem 0 1rem; background: linear-gradient(to right, var(--h2-gradient-start), var(--h2-gradient-end)); @@ -206,16 +240,6 @@ h2::after { background: linear-gradient(to right, var(--h2-border-color), transparent); } -/* Enhanced h2 styling for dark theme */ -[data-theme="dark"] h2 { - background: linear-gradient(to right, var(--h2-gradient-start), var(--h2-gradient-end)); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - text-shadow: 0 1px 2px rgba(74, 125, 255, 0.5); - filter: drop-shadow(0 0 2px rgba(120, 170, 255, 0.3)); -} - /* Fix h3 headings in dark mode */ [data-theme="dark"] h3 { color: #e0e0e0 !important; @@ -250,19 +274,10 @@ img.youtube-stats-dark { box-sizing: border-box; } -@media screen and (max-width: 768px) { - img.youtube-stats-light, - img.youtube-stats-dark { - max-width: 100%; - height: auto !important; - width: 100% !important; - } -} - /* Fix box shadows and borders in dark mode */ [data-theme="dark"] .featured-paper, [data-theme="dark"] .s-about__grid { - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important; + box-shadow: var(--shadow-lg) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } @@ -312,7 +327,7 @@ img.youtube-stats-dark { align-items: center; padding: 0 3rem; box-shadow: 0 4px 16px var(--header-shadow); - transition: background 0.3s ease, box-shadow 0.3s ease; + transition: var(--transition-medium); } .s-header__logo { @@ -385,15 +400,15 @@ img.youtube-stats-dark { } .s-header__nav-list a { - color: #1a1a1a; + color: var(--nav-item-color); text-decoration: none; font-size: 1.6rem; - transition: all 0.3s ease; + transition: var(--transition-medium); padding: 0.8rem 1.6rem; border-radius: 5px; - background: rgba(255, 255, 255, 0.25); + background: var(--nav-item-bg); backdrop-filter: blur(8px); - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow-sm); display: flex; align-items: center; height: 40px; @@ -402,10 +417,10 @@ img.youtube-stats-dark { .s-header__nav-list a:hover { background: var(--nav-item-hover-bg); transform: translateY(-2px); - box-shadow: 0 4px 15px var(--nav-item-hover-shadow); + box-shadow: var(--shadow-md); } -/* Special styling for the Bluesky icon */ +/* Special styling for icons in navigation */ .s-header__nav-list li[style="background: none;"] a { display: flex; align-items: center; @@ -419,22 +434,22 @@ img.youtube-stats-dark { position: absolute; top: 2rem; right: 2rem; - color: #000000; + color: var(--nav-item-color); text-decoration: none; font-size: 1.6rem; - transition: all 0.3s ease; + transition: var(--transition-medium); padding: 0.8rem 1.6rem; border-radius: 5px; - background: rgba(255, 255, 255, 0.25); + background: var(--nav-item-bg); backdrop-filter: blur(8px); - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow-sm); margin-left: 0.8rem; } .s-header__nav-close-btn:hover { - background: rgba(255, 255, 255, 0.35); + background: var(--nav-item-hover-bg); transform: translateY(-2px); - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); + box-shadow: var(--shadow-md); } /* Theme toggle button */ @@ -447,36 +462,15 @@ img.youtube-stats-dark { cursor: pointer; border-radius: 50%; background: var(--nav-item-bg); - box-shadow: 0 2px 10px var(--nav-item-shadow); - transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; + box-shadow: var(--shadow-sm); + transition: var(--transition-medium); position: relative; } -/* Special styling for dark theme text and icons */ -[data-theme="dark"] .s-header__nav-list a, -[data-theme="dark"] .s-header__nav-list a i, -[data-theme="dark"] .command-k-style-btn, -[data-theme="dark"] .command-k-style-btn span, -[data-theme="dark"] .command-k-style-btn i, -[data-theme="dark"] .s-header__menu-text, -[data-theme="dark"] .s-header__menu-icon, -[data-theme="dark"] .s-header__menu-icon::before, -[data-theme="dark"] .s-header__menu-icon::after { - color: #ffffff; -} - -[data-theme="dark"] .fa-bluesky { - color: #0085ff !important; -} - -[data-theme="dark"] .theme-toggle-icon { - stroke: #ffffff; -} - .theme-toggle:hover { background: var(--nav-item-hover-bg); transform: translateY(-2px); - box-shadow: 0 4px 15px var(--nav-item-hover-shadow); + box-shadow: var(--shadow-md); } .theme-toggle-icon { @@ -506,18 +500,26 @@ img.youtube-stats-dark { transform: rotate(0); } -/* Dark mode styling for browsers that support media queries */ -@media (prefers-color-scheme: dark) { - /* Dark mode for the navigation close button */ - .s-header__nav-close-btn { - background: rgba(255, 255, 255, 0.1); - color: #000000; /* Keep text black in dark mode too to match command palette */ - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); - } - - .s-header__nav-close-btn:hover { - background: rgba(255, 255, 255, 0.15); - } +/* Ensure consistent height and alignment for all header items including icons */ +.s-header__nav-list li[style="background: none;"] { + display: flex; + align-items: center; + height: 100%; +} + +.s-header__nav-list li[style="background: none;"] a { + display: flex; + align-items: center; + justify-content: center; + height: 40px; + width: 40px; +} + +/* Ensure the Bluesky icon is centered */ +.s-header__nav-list .fa-bluesky { + display: flex; + align-items: center; + justify-content: center; } /* Intro Section */ @@ -551,7 +553,6 @@ img.youtube-stats-dark { background-image: url('../../featured/GraphicalAbstract_v7_FrontOnly-darkTheme.jpg'); opacity: 0.42; filter: brightness(0.85) contrast(1.15); - backdrop-filter: blur(8px); } .s-intro__content { @@ -563,7 +564,7 @@ img.youtube-stats-dark { backdrop-filter: blur(12px); padding: 4rem; border-radius: 10px; - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); + box-shadow: var(--shadow-lg); } [data-theme="dark"] .s-intro__content { @@ -572,31 +573,6 @@ img.youtube-stats-dark { border: 1px solid rgba(255, 255, 255, 0.1); } -/* Social icons styling - matching title gradient in dark mode */ -[data-theme="dark"] .ai-orcid { - color: #ff8888 !important; /* Match left side of gradient (red) */ -} - -[data-theme="dark"] .fa-github { - color: #9077ff !important; /* Match middle of gradient (purple/blue mix) */ -} - -[data-theme="dark"] .ai-google-scholar { - color: #546cff !important; /* Match right side of gradient (blue) */ -} - -/* Make Google Scholar icon white in command palette dark theme */ -[data-theme="dark"] .cmdk-item .ai-google-scholar, -[data-theme="dark"] [cmdk-item] .ai-google-scholar, -[data-theme="dark"] [data-cmdk-item] .ai-google-scholar, -[data-theme="dark"] .cmdk-list .ai-google-scholar, -[data-theme="dark"] [role="dialog"] .ai-google-scholar, -[data-theme="dark"] #command-modal .ai-google-scholar, -[data-theme="dark"] .command-palette-icon .ai-google-scholar, -[data-theme="dark"] .command-palette-command .ai-google-scholar { - color: white !important; -} - .s-intro__pretitle { font-size: 2.4rem; margin-bottom: 2rem; @@ -671,14 +647,14 @@ img.youtube-stats-dark { text-decoration: none; border-radius: 25px; font-size: 0.9em; - transition: all 0.3s ease; - box-shadow: 0 2px 4px rgba(0,0,0,0.1); + transition: var(--transition-medium); + box-shadow: var(--shadow-sm); backdrop-filter: blur(5px); } .s-intro__subtitle a.smoothscroll:hover { background-color: rgba(3, 102, 214, 1); - box-shadow: 0 4px 8px rgba(0,0,0,0.2); + box-shadow: var(--shadow-md); transform: translateY(-2px); } @@ -708,14 +684,6 @@ img.youtube-stats-dark { color: #e0e0e0; } -[data-theme="dark"] .s-intro__caption a { - color: #6fa1ff; -} - -[data-theme="dark"] .s-intro__caption a:hover { - color: #8bb5ff; -} - .s-intro__caption p { margin: 0; line-height: 1.6; @@ -733,6 +701,14 @@ img.youtube-stats-dark { text-decoration: none; } +[data-theme="dark"] .s-intro__caption a { + color: #6fa1ff; +} + +[data-theme="dark"] .s-intro__caption a:hover { + color: #8bb5ff; +} + /* Make sure the Learn More button is visible */ .s-intro__more { margin-top: 2rem; @@ -747,7 +723,7 @@ img.youtube-stats-dark { border-radius: 5px; font-size: 1.8rem; font-weight: 600; - transition: all 0.3s ease; + transition: var(--transition-medium); border: 1px solid rgba(255, 255, 255, 0.4); backdrop-filter: blur(4px); } @@ -755,13 +731,13 @@ img.youtube-stats-dark { .s-intro__more-btn:hover { background: rgba(255, 255, 255, 0.4); transform: translateY(-2px); - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow-sm); } /* About Section */ .s-about { padding: 10rem 2rem; - background: white; + background: var(--color-background); min-height: 100vh; display: flex; align-items: flex-start; @@ -781,18 +757,11 @@ img.youtube-stats-dark { backdrop-filter: blur(8px); border-radius: 15px; justify-content: space-between; - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow-lg); padding: 3rem; overflow: hidden; } -@media (max-width: 900px) { - .s-about__grid { - flex-direction: column; - gap: 3rem; - } -} - .s-about__left { display: flex; flex-direction: column; @@ -800,12 +769,6 @@ img.youtube-stats-dark { width: 60%; } -@media (max-width: 900px) { - .s-about__left { - width: 100%; - } -} - .s-about__right { display: flex; flex-direction: column; @@ -813,12 +776,6 @@ img.youtube-stats-dark { width: 42%; } -@media (max-width: 900px) { - .s-about__right { - width: 100%; - } -} - .s-about__social { display: flex; flex-direction: column; @@ -843,11 +800,6 @@ img.youtube-stats-dark { margin-bottom: 0.5rem; } -[data-theme="dark"] .s-about__social-header { - border-bottom: 1px solid rgba(255, 255, 255, 0.1); - color: #ffffff; -} - .s-about__social-header img { width: 24px; height: 24px; @@ -861,25 +813,16 @@ img.youtube-stats-dark { } .s-about__social-header a { - color: #4c6ef5; + color: var(--color-link); text-decoration: none; transition: color 0.3s ease; } .s-about__social-header a:hover { - color: #364fc7; + color: var(--color-link-hover); text-decoration: none; } -.s-about__social bsky-embed { - flex: 1; - overflow-y: auto; - overflow-x: hidden; - padding: 2rem; - scrollbar-width: thin; - scrollbar-color: rgba(0, 0, 0, 0.2) transparent; -} - /* News content padding to match About section */ #news-content { padding: 1.5rem 2rem; @@ -896,37 +839,6 @@ img.youtube-stats-dark { scrollbar-color: rgba(255, 255, 255, 0.2) transparent; } -/* Force all content inside bsky-embed to fit */ -.s-about__social bsky-embed * { - max-width: 100%; - box-sizing: border-box; - word-wrap: break-word; -} - -/* Ensure images don't overflow */ -.s-about__social bsky-embed img { - max-width: 100%; - height: auto; -} - -/* Custom scrollbar for Bluesky feed */ -.s-about__social bsky-embed::-webkit-scrollbar { - width: 6px; -} - -.s-about__social bsky-embed::-webkit-scrollbar-track { - background: transparent; -} - -.s-about__social bsky-embed::-webkit-scrollbar-thumb { - background-color: rgba(0, 0, 0, 0.2); - border-radius: 3px; -} - -.s-about__social bsky-embed::-webkit-scrollbar-thumb:hover { - background-color: rgba(0, 0, 0, 0.3); -} - .text-pretitle { font-size: 1.8rem; color: var(--color-primary); @@ -1000,13 +912,13 @@ img.youtube-stats-dark { } .s-about__desc a { - color: #4c6ef5; + color: var(--color-link); text-decoration: none; transition: color 0.3s ease; } .s-about__desc a:hover { - color: #364fc7; + color: var(--color-link-hover); text-decoration: none; } @@ -1095,7 +1007,24 @@ img.youtube-stats-dark { } } -/* Responsive Design */ +/* Responsive Design - Consolidated Media Queries */ +@media screen and (max-width: 1700px) { + .team-grid { + grid-template-columns: repeat(3, 400px); + } +} + +@media screen and (max-width: 1300px) { + .team-grid { + grid-template-columns: repeat(2, 400px); + } + + .s-about__grid { + grid-template-columns: minmax(350px, 1.2fr) minmax(400px, 1fr); + gap: 2rem; + } +} + @media screen and (max-width: 1200px) { .s-about__grid { grid-template-columns: minmax(400px, 1.2fr) minmax(450px, 1fr); @@ -1105,12 +1034,56 @@ img.youtube-stats-dark { .footer-right { padding-right: 90px; } + + .footer-logo { + height: 45px; + } + + .pof-logo { + height: 50px; + } + + .footer-left, .footer-right { + gap: 1.5rem; + } } -@media screen and (max-width: 1000px) { +@media screen and (max-width: 900px) { + .team-grid { + grid-template-columns: repeat(1, 400px); + } + .s-about__grid { - grid-template-columns: minmax(350px, 1.2fr) minmax(400px, 1fr); - gap: 2rem; + flex-direction: column; + gap: 3rem; + } + + .s-about__left { + width: 100%; + } + + .s-about__right { + width: 100%; + } + + .footer-logo { + height: 35px; + } + + .pof-logo { + height: 40px; + } + + .footer-left, .footer-right { + gap: 1rem; + } + + .footer-right { + padding-right: 80px; + } + + .footer-right i { + font-size: 2em !important; } } @@ -1259,23 +1232,174 @@ img.youtube-stats-dark { .s-header__nav-list li:first-child { margin-right: 4rem; } -} + + .site-footer { + flex-direction: column; + gap: 2rem; + text-align: center; + padding: 2rem 1rem; + } + + .footer-left, .footer-center, .footer-right { + justify-content: center; + width: 100%; + flex-wrap: wrap; + margin: 0; + padding-right: 0; + } -/* Team Section */ -.s-team { - padding: 10rem 2rem; - background: var(--color-background); - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; -} + .footer-right a:last-child { + margin-right: 0; + } + + .footer-logo { + height: 30px; + } + + .pof-logo { + height: 35px; + } + + .footer-center { + order: -1; + } + + .footer-right { + gap: 1.5rem; + } + + .footer-right i { + font-size: 1.75em !important; + } + + .edit-link { + width: 100%; + justify-content: center; + margin-top: 1rem; + color: white; + } + + .s-research { + padding: 10rem 0 6rem; + } -.s-team__desc { - width: 100%; - max-width: 1600px; - margin: 0 auto; - text-align: center; + .research-content { + padding: 2rem; + } + + .research-content h1 { + font-size: 3rem; + } + + .research-content h2 { + font-size: 2.4rem; + } + + .research-content h3 { + font-size: 1.6rem; + } + + .research-content h4 { + font-size: 1.5rem; + } + + .research-content ul li { + font-size: 1.4rem; + } + + .s-join { + padding: 10rem 0 6rem; + } + + .join-content { + padding: 2rem; + } + + .join-content h1 { + font-size: 3rem; + } + + .position-section h2 { + font-size: 2.2rem; + } + + .position-section h3 { + font-size: 1.6rem; + } +} + +@media screen and (max-width: 500px) { + .team-grid { + grid-template-columns: 1fr; + } + + .team-member, + .member-image { + width: 100%; + } + + .member-image { + height: auto; + padding-bottom: 0; + } + + .member-image img { + width: 100%; + max-width: 250px; + height: auto; + aspect-ratio: 1/1; + } + + .featured-paper { + min-width: 400px; + } + + .featured-papers { + gap: 1.5rem; + } +} + +/* Mobile image adaptations for YouTube stats */ +@media screen and (max-width: 768px) { + img.youtube-stats-light, + img.youtube-stats-dark { + max-width: 100%; + height: auto !important; + width: 100% !important; + } +} + +/* Ensure all nav links have consistent height */ +.s-header__nav-list a { + color: var(--nav-item-color); + text-decoration: none; + font-size: 1.6rem; + transition: var(--transition-medium); + padding: 0.8rem 1.6rem; + border-radius: 5px; + background: var(--nav-item-bg); + backdrop-filter: blur(8px); + box-shadow: var(--shadow-sm); + display: flex; + align-items: center; + height: 40px; +} + +/* Team Section */ +.s-team { + padding: var(--space-xl) var(--space-md); + background: var(--color-background); + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; +} + +.s-team__desc { + width: 100%; + max-width: 1600px; + margin: 0 auto; + text-align: center; } .s-team__desc h1 { @@ -1304,6 +1428,10 @@ img.youtube-stats-dark { transition: transform 0.3s ease; } +.team-member:hover { + transform: translateY(-5px); +} + /* Center the name */ .team-member h2 { text-align: center; @@ -1320,6 +1448,11 @@ img.youtube-stats-dark { .team-member img { display: block; margin: 0 auto 1rem; + width: 250px; + height: 250px; + object-fit: cover; + transform: translateZ(0); + will-change: transform; } /* Center "Joint with" text (it's a paragraph with a single link) */ @@ -1351,54 +1484,6 @@ img.youtube-stats-dark { text-align: justify; } -/* Responsive breakpoints */ -@media screen and (max-width: 1700px) { - .team-grid { - grid-template-columns: repeat(3, 400px); - } -} - -@media screen and (max-width: 1300px) { - .team-grid { - grid-template-columns: repeat(2, 400px); - } -} - -@media screen and (max-width: 900px) { - .team-grid { - grid-template-columns: 400px; - } -} - -@media screen and (max-width: 500px) { - .team-grid { - grid-template-columns: 1fr; - } - - - - .team-member { - width: 100%; - } - - .team-member img { - width: 100%; - height: auto; - } -} - -.member-image { - width: 100%; - display: flex; - justify-content: center; - margin-bottom: 1rem; - background-color: #f8f9fa; - min-height: 250px; - overflow: hidden; - content-visibility: auto; - contain: layout paint; -} - /* Dark theme text color fixes for team section */ [data-theme="dark"] .team-member p, [data-theme="dark"] .team-member strong, @@ -1430,14 +1515,20 @@ img.youtube-stats-dark { [data-theme="dark"] .team-member { background: rgba(30, 30, 38, 0.7); - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); + box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, 0.1); } -/* Make GitHub and Bluesky icons white in dark theme */ -[data-theme="dark"] .fa-github, -[data-theme="dark"] .fa-bluesky { - color: white !important; +.member-image { + width: 100%; + display: flex; + justify-content: center; + margin-bottom: 1rem; + background-color: #f8f9fa; + min-height: 250px; + overflow: hidden; + content-visibility: auto; + contain: layout paint; } .member-image::before { @@ -1469,38 +1560,6 @@ img.youtube-stats-dark { filter: blur(0); } -/* Loading animation */ -.member-image::after { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 50%; - height: 100%; - background: linear-gradient( - 90deg, - transparent, - rgba(0, 86, 179, 0.1), - transparent - ); - animation: loading 1.5s infinite; - contain: paint; -} - -@keyframes loading { - 0% { - left: -100%; - } - 100% { - left: 200%; - } -} - -/* Hide loading animation when image is loaded */ -.member-image.loaded::after { - display: none; -} - .member-content { padding: 0 2rem; } @@ -1517,63 +1576,9 @@ img.youtube-stats-dark { margin: 0 0 0.8rem; font-weight: 700; letter-spacing: -0.02em; - transition: color 0.3s ease; -} - -/* Removed hover effect and transitions to prevent blurriness */ -.member-content h2 { transition: none; } -.member-content h2:hover { - /* Disable any hover effects */ - color: inherit; - filter: none; - transform: none; -} - -/* Responsive breakpoints */ -@media screen and (max-width: 1700px) { - .team-grid { - grid-template-columns: repeat(3, 400px); - } -} - -@media screen and (max-width: 1300px) { - .team-grid { - grid-template-columns: repeat(2, 400px); - } -} - -@media screen and (max-width: 900px) { - .team-grid { - grid-template-columns: 400px; - } -} - -@media screen and (max-width: 500px) { - .team-grid { - grid-template-columns: 1fr; - } - - .team-member, - .member-image { - width: 100%; - } - - .member-image { - height: auto; - padding-bottom: 0; - } - - .member-image img { - width: 100%; - max-width: 250px; - height: auto; - aspect-ratio: 1/1; - } -} - .member-content ul { list-style: none; padding: 0; @@ -1595,13 +1600,13 @@ img.youtube-stats-dark { } .member-content a { - color: #4c6ef5; + color: var(--color-link); text-decoration: none; transition: color 0.3s ease; } .member-content a:hover { - color: #364fc7; + color: var(--color-link-hover); text-decoration: none; } @@ -1619,7 +1624,7 @@ img.youtube-stats-dark { font-weight: 500; font-size: 1.2rem; text-decoration: none !important; - transition: all 0.3s ease; + transition: var(--transition-medium); } .cv-button:hover { @@ -1628,532 +1633,146 @@ img.youtube-stats-dark { box-shadow: 0 2px 6px rgba(76, 110, 245, 0.15); } -/* Research Section ---------------------------------------------- */ -.s-research { - padding: 12rem 0 8rem; - background-color: white; - color: var(--color-text); -} - -.s-research .row { - max-width: 1200px; - margin: 0 auto; - padding: 0 2rem; +.team-section { + margin-bottom: 4rem; + width: 100%; + max-width: 1600px; + margin-left: auto; + margin-right: auto; } -.s-research .column { - width: 100%; +.team-section h1 { + font-size: 2.4rem; + margin-bottom: 2rem; + color: var(--color-text); + text-align: center; } -.research-content { - background: rgba(255, 255, 255, 0.25); - backdrop-filter: blur(8px); - padding: 4rem; - border-radius: 10px; - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); +/* Featured Section */ +.s-featured { + padding: 0 var(--space-md); + background: var(--color-background); + display: flex; + align-items: flex-start; } -.research-content h1 { - font-size: 3.6rem; - margin-bottom: 4rem; - color: #2b2b2b; - text-align: center; -} - -.research-content h2 { - font-size: 2.8rem; - margin: 4rem 0 2rem; - color: #4c6ef5; - border-bottom: 2px solid rgba(76, 110, 245, 0.2); - padding-bottom: 1rem; -} - -.research-content h3 { - font-size: 1.8rem; - margin: 2rem 0 1rem; - color: #2b2b2b; - font-weight: 500; -} - -.research-content h4 { - font-size: 1.6rem; - margin: 2rem 0 1rem; - color: #4c6ef5; - font-weight: 600; - font-style: italic; -} - -.research-content ul { - list-style: none; - margin: 0; - padding: 0; -} - -.research-content ul li { - margin-bottom: 1rem; - font-size: 1.5rem; - line-height: 1.6; -} - -.research-content h4 + ul { - margin-left: 2rem; - border-left: 3px solid rgba(76, 110, 245, 0.2); - padding-left: 1rem; -} - -.research-content h4 + ul li { - color: #666; -} - -.research-content ul li p { - margin: 0.5rem 0; -} - -.research-content ul li:first-child p { - margin-top: 0; -} - -.research-content img { - margin-right: 0.5rem; - vertical-align: middle; -} - -.research-content a { - color: #4c6ef5; - text-decoration: none; - transition: color 0.3s ease; -} - -.research-content a:hover { - color: #364fc7; - text-decoration: none; -} - -/* Responsive adjustments */ -@media screen and (max-width: 768px) { - .s-research { - padding: 10rem 0 6rem; - } - - .research-content { - padding: 2rem; - } - - .research-content h1 { - font-size: 3rem; - } - - .research-content h2 { - font-size: 2.4rem; - } - - .research-content h3 { - font-size: 1.6rem; - } - - .research-content h4 { - font-size: 1.5rem; - } - - .research-content ul li { - font-size: 1.4rem; - } -} - -/* Markdown Content Styles */ -.markdown-content strong, -.markdown-content b { - font-weight: 700; - color: #2b2b2b; -} - -.markdown-content em, -.markdown-content i { - font-style: italic; -} - -.markdown-content code { - font-family: monospace; - background: rgba(0, 0, 0, 0.05); - padding: 0.2rem 0.4rem; - border-radius: 3px; - font-size: 0.9em; -} - -.markdown-content pre code { - display: block; - padding: 1rem; - overflow-x: auto; -} - -.markdown-content blockquote { - border-left: 4px solid #4c6ef5; - margin: 1.5rem 0; - padding-left: 1rem; - color: #666; -} - -.markdown-content hr { - border: none; - border-top: 1px solid rgba(0, 0, 0, 0.1); - margin: 2rem 0; -} - -/* Add to existing styles.css where other image rules exist */ -.team-member img { - width: 250px; - height: 250px; - object-fit: cover; - transform: translateZ(0); - will-change: transform; -} - -@media screen and (max-width: 768px) { - .team-member img { - width: 100%; - height: auto; - } -} - -.team-section { - margin-bottom: 4rem; - width: 100%; - max-width: 1600px; - margin-left: auto; - margin-right: auto; -} - -.team-section h1 { - font-size: 2.4rem; - margin-bottom: 2rem; - color: var(--color-1); - text-align: center; -} - -.team-grid { - display: grid; - grid-template-columns: repeat(4, 400px); - gap: 2rem; - margin-bottom: 2rem; - justify-content: center; -} - -.team-member { - width: 400px; - background: rgba(255, 255, 255, 0.1); - backdrop-filter: blur(10px); - border-radius: 10px; - padding: 2rem; - text-align: justify; - transition: transform 0.3s ease; -} - -.team-member:hover { - transform: translateY(-5px); -} - -/* Responsive breakpoints for team grid */ -@media screen and (max-width: 1700px) { - .team-grid { - grid-template-columns: repeat(3, 400px); - } -} - -@media screen and (max-width: 1300px) { - .team-grid { - grid-template-columns: repeat(2, 400px); - } -} - -@media screen and (max-width: 900px) { - .team-grid { - grid-template-columns: repeat(1, 400px); - } -} - -@media screen and (max-width: 500px) { - .team-grid { - grid-template-columns: 1fr; - } - - - - .team-member { - width: 100%; - } -} - -/* Badge/Shield Styles */ -.s-about__desc img[src*="img.shields.io"] { - height: 24px; - margin: 5px 8px; - transform: scale(1.1); - vertical-align: middle; - transition: transform 0.3s ease; -} - -.s-about__desc a { - display: inline-block; - padding: 2px; - transition: transform 0.3s ease; -} - -.s-about__desc a:hover { - color: #364fc7; - text-decoration: none; - transform: translateY(-2px); -} - -.s-about__desc a:hover img[src*="img.shields.io"] { - transform: scale(1.15); -} - -.s-about__desc strong, -.s-about__desc b { - font-weight: 700; - color: #4c6ef5; - padding: 0.1em 0.2em; - background: linear-gradient(120deg, rgba(76, 110, 245, 0.1) 0%, rgba(76, 110, 245, 0.05) 100%); - border-radius: 3px; - transition: all 0.3s ease; -} - -.s-about__desc strong:hover, -.s-about__desc b:hover { - background: linear-gradient(120deg, rgba(76, 110, 245, 0.15) 0%, rgba(76, 110, 245, 0.08) 100%); -} - -/* Code block styling for contact info */ -.s-about__desc code.copyable { - font-family: 'Consolas', 'Monaco', monospace; - font-size: 0.95em; - background: rgba(76, 110, 245, 0.05); - padding: 0.4em 0.8em; - border-radius: 4px; - border: 1px solid rgba(76, 110, 245, 0.1); - color: #4c6ef5; - margin: 0; - display: inline-block; - cursor: pointer; - transition: all 0.2s ease; - position: relative; - user-select: all; - text-decoration: none; - pointer-events: auto; -} - -.s-about__desc code.copyable:link, -.s-about__desc code.copyable:visited, -.s-about__desc code.copyable:hover, -.s-about__desc code.copyable:active { - text-decoration: none; - color: #4c6ef5; -} - -.s-about__desc code.copyable::before { - content: "Click to copy"; - position: absolute; - top: -30px; - left: 50%; - transform: translateX(-50%) translateY(10px); - background: rgba(0, 0, 0, 0.8); - color: white; - padding: 4px 8px; - border-radius: 4px; - font-size: 12px; - opacity: 0; - visibility: hidden; - transition: all 0.2s ease; - white-space: nowrap; - pointer-events: none; -} - -.s-about__desc code.copyable::after { - content: ""; - position: absolute; - top: -10px; - left: 50%; - transform: translateX(-50%) translateY(10px); - border: 5px solid transparent; - border-top-color: rgba(0, 0, 0, 0.8); - opacity: 0; - visibility: hidden; - transition: all 0.2s ease; - pointer-events: none; -} - -.s-about__desc code.copyable:hover::before, -.s-about__desc code.copyable:hover::after { - opacity: 1; - visibility: visible; - transform: translateX(-50%) translateY(0); -} - -.s-about__desc code.copyable.copied::before { - content: "Copied!"; - background: #4c6ef5; -} - -.s-about__desc code.copyable.copied::after { - border-top-color: #4c6ef5; -} - -.s-about__desc code.copyable:hover { - background: rgba(76, 110, 245, 0.1); - border-color: rgba(76, 110, 245, 0.2); -} - -.s-about__desc code.copyable:active { - background: rgba(76, 110, 245, 0.15); - transform: scale(0.98); -} - -/* Email wrapper styles */ -.email-wrapper { - margin: 1em 0; -} - -.email-wrapper pre { - margin: 0; - padding: 0; - background: none; -} - -.email-wrapper code.copyable { - font-family: 'Consolas', 'Monaco', monospace; - font-size: 0.95em; - background: rgba(76, 110, 245, 0.05); - padding: 0.4em 0.8em; - border-radius: 4px; - border: 1px solid rgba(76, 110, 245, 0.1); - color: #4c6ef5; - display: inline-block; - cursor: pointer; - transition: all 0.2s ease; - position: relative; - user-select: all; -} - -.email-wrapper code.copyable::before { - content: "Click to copy"; - position: absolute; - top: -30px; - left: 50%; - transform: translateX(-50%) translateY(10px); - background: rgba(0, 0, 0, 0.8); - color: white; - padding: 4px 8px; - border-radius: 4px; - font-size: 12px; - opacity: 0; - visibility: hidden; - transition: all 0.2s ease; - white-space: nowrap; - pointer-events: none; +.s-featured__content { + width: 100%; + max-width: 1400px; + margin: 0 auto; } -.email-wrapper code.copyable::after { - content: ""; - position: absolute; - top: -10px; - left: 50%; - transform: translateX(-50%) translateY(10px); - border: 5px solid transparent; - border-top-color: rgba(0, 0, 0, 0.8); - opacity: 0; - visibility: hidden; - transition: all 0.2s ease; - pointer-events: none; +.s-featured__grid { + display: flex; + justify-content: center; + width: 100%; } -.email-wrapper code.copyable:hover::before, -.email-wrapper code.copyable:hover::after { - opacity: 1; - visibility: visible; - transform: translateX(-50%) translateY(0); +.s-featured__left { + width: 100%; + max-width: 1400px; + margin: 0 auto; } -.email-wrapper code.copyable.copied::before { - content: "Copied!"; - background: #4c6ef5; +.s-featured__header { + text-align: center; + margin-bottom: 4rem; } -.email-wrapper code.copyable.copied::after { - border-top-color: #4c6ef5; +.s-featured__header .text-pretitle { + font-size: 3.6rem; + color: var(--color-primary); + margin-bottom: 1.5rem; + text-transform: uppercase; + letter-spacing: 0.1em; + font-weight: 500; } -.email-wrapper code.copyable:hover { - background: rgba(76, 110, 245, 0.1); - border-color: rgba(76, 110, 245, 0.2); +.s-featured__header .text-display-title { + font-size: 3.6rem; + color: var(--color-text); + margin: 0; + font-weight: 700; } -.email-wrapper code.copyable:active { - background: rgba(76, 110, 245, 0.15); - transform: scale(0.98); +.featured-papers { + display: flex; + flex-direction: row; + gap: 2rem; + overflow-x: auto; + padding: 1rem 0; + scroll-snap-type: x mandatory; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ } -/* Email container styles */ -.email-container { - display: flex; - align-items: center; - justify-content: space-between; - background: rgba(76, 110, 245, 0.05); - border: 1px solid rgba(76, 110, 245, 0.1); - border-radius: 6px; - padding: 0.8em 1em; - margin: 1em 0; - transition: all 0.3s ease; +/* Hide scrollbar but keep functionality */ +.featured-papers::-webkit-scrollbar { + display: none; } -.email-container:hover { - background: rgba(76, 110, 245, 0.08); - border-color: rgba(76, 110, 245, 0.2); +.featured-paper { + flex: 0 0 auto; + width: calc(50% - 1rem); + min-width: 600px; + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + border-radius: 10px; + padding: 2rem; + transition: transform 0.3s ease; + box-shadow: var(--shadow-md); + scroll-snap-align: start; } -.email-text { - font-family: 'Consolas', 'Monaco', monospace; - color: #4c6ef5; - font-size: 0.95em; - user-select: all; +.featured-paper:hover { + transform: translateY(-5px); } -.copy-btn { - background: transparent; - border: none; - color: #4c6ef5; - cursor: pointer; - padding: 0.6em; - border-radius: 4px; - transition: all 0.2s ease; - opacity: 0.7; - font-size: 1.1em; - display: flex; - align-items: center; - justify-content: center; - min-width: 36px; +.featured-paper h3 { + font-size: 2rem; + margin: 0 0 1rem; + color: var(--color-primary); } -.copy-btn:hover { - opacity: 1; - background: rgba(76, 110, 245, 0.1); +/* Style tags */ +.featured-paper tags { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin: 1rem 0; } -.copy-btn:active { - transform: scale(0.95); +.featured-paper tags span { + display: inline-block; + padding: 0.4rem 0.8rem; + background: rgba(76, 110, 245, 0.1); + color: var(--color-primary); + border-radius: 4px; + font-size: 1.4rem; + cursor: pointer; + transition: var(--transition-medium); + text-decoration: none; } -.copy-btn.copied { - background: #4c6ef5; - color: white; - opacity: 1; +.featured-paper tags span:hover { + background: rgba(76, 110, 245, 0.2); + transform: translateY(-2px); } -.copy-btn i { - pointer-events: none; +.featured-paper iframe { + width: 100%; + border-radius: 8px; + margin: 1rem 0; + box-shadow: var(--shadow-sm); +} + +/* Hide year headers */ +.featured-paper h2 { + display: none; } -/* Footer Styles */ +/* Footer */ .site-footer { background-color: #333; color: white; @@ -2212,7 +1831,7 @@ img.youtube-stats-dark { padding: 0.5em 1em; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; - transition: all 0.3s ease; + transition: var(--transition-medium); display: inline-flex; align-items: center; gap: 0.5em; @@ -2253,240 +1872,148 @@ img.youtube-stats-dark { opacity: 0.8; } -/* Responsive footer adjustments */ -@media screen and (max-width: 1200px) { - .footer-logo { - height: 45px; - } - - .pof-logo { - height: 50px; - } - - .footer-left, .footer-right { - gap: 1.5rem; - } - - .footer-right { - padding-right: 90px; - } -} - -@media screen and (max-width: 900px) { - .footer-logo { - height: 35px; - } - - .pof-logo { - height: 40px; - } - - .footer-left, .footer-right { - gap: 1rem; - } - - .footer-right { - padding-right: 80px; - } - - .footer-right i { - font-size: 2em !important; - } +/* Go to top button */ +.ss-go-top { + display: none; + position: fixed; + bottom: 30px; + right: 30px; + z-index: 100; + padding: 15px; + background: rgba(255, 255, 255, 0.2); + color: #333; + text-decoration: none; + border-radius: 50%; + transition: var(--transition-medium); + cursor: pointer; + box-shadow: var(--shadow-sm); + backdrop-filter: blur(4px); + border: 1px solid rgba(255, 255, 255, 0.3); } -@media screen and (max-width: 768px) { - .site-footer { - flex-direction: column; - gap: 2rem; - text-align: center; - padding: 2rem 1rem; - } - - .footer-left, .footer-center, .footer-right { - justify-content: center; - width: 100%; - flex-wrap: wrap; - margin: 0; - padding-right: 0; - } - - .footer-right a:last-child { - margin-right: 0; - } - - .footer-logo { - height: 30px; - } - - .pof-logo { - height: 35px; - } - - .footer-center { - order: -1; - } - - .footer-right { - gap: 1.5rem; - } - - .footer-right i { - font-size: 1.75em !important; - } - - .edit-link { - width: 100%; - justify-content: center; - margin-top: 1rem; - color: white; - } +.ss-go-top:hover { + background: rgba(255, 255, 255, 0.3); + transform: translateY(-3px); + box-shadow: var(--shadow-md); } -/* Featured Section */ -.s-featured { - padding: 0 2rem; - background: white; - display: flex; - align-items: flex-start; +.ss-go-top i { + font-size: 1.5em; + color: #333; + display: block; } -.s-featured__content { - width: 100%; - max-width: 1400px; - margin: 0 auto; +.link-is-visible { + display: block; } -.s-featured__grid { - display: flex; - justify-content: center; - width: 100%; +/* Research Section */ +.s-research { + padding: 12rem 0 8rem; + background-color: var(--color-background); + color: var(--color-text); } -.s-featured__left { - width: 100%; - max-width: 1400px; - margin: 0 auto; +.s-research .row { + max-width: 1200px; + margin: 0 auto; + padding: 0 2rem; } -.s-featured__header { - text-align: center; - margin-bottom: 4rem; +.s-research .column { + width: 100%; } -.s-featured__header .text-pretitle { - font-size: 3.6rem; - color: #4c6ef5; - margin-bottom: 1.5rem; - text-transform: uppercase; - letter-spacing: 0.1em; - font-weight: 500; +.research-content { + background: rgba(255, 255, 255, 0.25); + backdrop-filter: blur(8px); + padding: 4rem; + border-radius: 10px; + box-shadow: var(--shadow-lg); } -.s-featured__header .text-display-title { - font-size: 3.6rem; - color: #2b2b2b; - margin: 0; - font-weight: 700; +[data-theme="dark"] .research-content { + background: rgba(30, 30, 30, 0.4); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); } -.featured-papers { - display: flex; - flex-direction: row; - gap: 2rem; - overflow-x: auto; - padding: 1rem 0; - scroll-snap-type: x mandatory; - -webkit-overflow-scrolling: touch; +.research-content h1 { + font-size: 3.6rem; + margin-bottom: 4rem; + color: var(--color-text); + text-align: center; } -/* Hide scrollbar but keep functionality */ -.featured-papers::-webkit-scrollbar { - display: none; +.research-content h2 { + font-size: 2.8rem; + margin: 4rem 0 2rem; + color: var(--color-primary); + border-bottom: 2px solid rgba(76, 110, 245, 0.2); + padding-bottom: 1rem; } -.featured-papers { - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ +.research-content h3 { + font-size: 1.8rem; + margin: 2rem 0 1rem; + color: var(--color-text); + font-weight: 500; } -.featured-paper { - flex: 0 0 auto; - width: calc(50% - 1rem); - min-width: 600px; - background: rgba(255, 255, 255, 0.1); - backdrop-filter: blur(10px); - border-radius: 10px; - padding: 2rem; - transition: transform 0.3s ease; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - scroll-snap-align: start; +.research-content h4 { + font-size: 1.6rem; + margin: 2rem 0 1rem; + color: var(--color-primary); + font-weight: 600; + font-style: italic; } -.featured-paper:hover { - transform: translateY(-5px); +.research-content ul { + list-style: none; + margin: 0; + padding: 0; } -.featured-paper h3 { - font-size: 2rem; - margin: 0 0 1rem; - color: #4c6ef5; +.research-content ul li { + margin-bottom: 1rem; + font-size: 1.5rem; + line-height: 1.6; } -/* Style tags */ -.featured-paper tags { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - margin: 1rem 0; +.research-content h4 + ul { + margin-left: 2rem; + border-left: 3px solid rgba(76, 110, 245, 0.2); + padding-left: 1rem; } -.featured-paper tags span { - display: inline-block; - padding: 0.4rem 0.8rem; - background: rgba(76, 110, 245, 0.1); - color: #4c6ef5; - border-radius: 4px; - font-size: 1.4rem; - cursor: pointer; - transition: all 0.3s ease; - text-decoration: none; +.research-content h4 + ul li { + color: #666; } -.featured-paper tags span:hover { - background: rgba(76, 110, 245, 0.2); - transform: translateY(-2px); +.research-content ul li p { + margin: 0.5rem 0; } -.featured-paper iframe { - width: 100%; - border-radius: 8px; - margin: 1rem 0; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +.research-content ul li:first-child p { + margin-top: 0; } -/* Hide year headers */ -.featured-paper h2 { - display: none; +.research-content img { + margin-right: 0.5rem; + vertical-align: middle; } -@media screen and (max-width: 1200px) { - .featured-paper { - width: calc(100% - 1rem); - min-width: 500px; - } +.research-content a { + color: var(--color-link); + text-decoration: none; + transition: color 0.3s ease; } -@media screen and (max-width: 768px) { - .featured-paper { - min-width: 400px; - } - - .featured-papers { - gap: 1.5rem; - } +.research-content a:hover { + color: var(--color-link-hover); + text-decoration: none; } -/* Join Us Section Styles */ +/* Join Us Section */ .s-join { padding: 12rem 0 8rem; background-color: var(--color-background); @@ -2499,7 +2026,7 @@ img.youtube-stats-dark { background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(8px); border-radius: 10px; - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow-lg); } [data-theme="dark"] .join-content { @@ -2510,21 +2037,17 @@ img.youtube-stats-dark { .join-content h1 { font-size: 3.6rem; margin-bottom: 4rem; - color: #2b2b2b; + color: var(--color-text); text-align: center; } -[data-theme="dark"] .join-content h1 { - color: #ffffff; -} - .position-section { margin-bottom: 4rem; } .position-section h2 { font-size: 2.4rem; - color: #4c6ef5; + color: var(--color-primary); margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid rgba(76, 110, 245, 0.2); @@ -2537,14 +2060,10 @@ img.youtube-stats-dark { .position-section h3 { font-size: 1.8rem; - color: #2b2b2b; + color: var(--color-text); margin-bottom: 0.5rem; } -[data-theme="dark"] .position-section h3 { - color: #e0e0e0; -} - .position-section p { font-size: 1.6rem; line-height: 1.6; @@ -2574,7 +2093,7 @@ img.youtube-stats-dark { } .external-links a { - color: #4c6ef5; + color: var(--color-link); text-decoration: none; transition: color 0.3s ease; } @@ -2584,7 +2103,7 @@ img.youtube-stats-dark { } .external-links a:hover { - color: #364fc7; + color: var(--color-link-hover); text-decoration: none; } @@ -2598,7 +2117,7 @@ img.youtube-stats-dark { } .project-list h3 { - color: #4c6ef5; + color: var(--color-primary); margin-bottom: 0.5rem; } @@ -2609,62 +2128,251 @@ img.youtube-stats-dark { margin-top: 4rem; } -@media screen and (max-width: 768px) { - .s-join { - padding: 10rem 0 6rem; - } +/* Badge/Shield Styles */ +.s-about__desc img[src*="img.shields.io"] { + height: 24px; + margin: 5px 8px; + transform: scale(1.1); + vertical-align: middle; + transition: transform 0.3s ease; +} - .join-content { - padding: 2rem; - } +.s-about__desc a { + display: inline-block; + padding: 2px; + transition: transform 0.3s ease; +} - .join-content h1 { - font-size: 3rem; - } +.s-about__desc a:hover { + color: var(--color-link-hover); + text-decoration: none; + transform: translateY(-2px); +} - .position-section h2 { - font-size: 2.2rem; - } +.s-about__desc a:hover img[src*="img.shields.io"] { + transform: scale(1.15); +} - .position-section h3 { - font-size: 1.6rem; - } +.s-about__desc strong, +.s-about__desc b { + font-weight: 700; + color: var(--color-primary); + padding: 0.1em 0.2em; + background: linear-gradient(120deg, rgba(76, 110, 245, 0.1) 0%, rgba(76, 110, 245, 0.05) 100%); + border-radius: 3px; + transition: all 0.3s ease; } -/* Ensure consistent height and alignment for all header items including icons */ -.s-header__nav-list li[style="background: none;"] { - display: flex; - align-items: center; - height: 100%; +.s-about__desc strong:hover, +.s-about__desc b:hover { + background: linear-gradient(120deg, rgba(76, 110, 245, 0.15) 0%, rgba(76, 110, 245, 0.08) 100%); } -.s-header__nav-list li[style="background: none;"] a { +/* Markdown Content Styles */ +.markdown-content strong, +.markdown-content b { + font-weight: 700; + color: var(--color-text); +} + +.markdown-content em, +.markdown-content i { + font-style: italic; +} + +.markdown-content code { + font-family: monospace; + background: rgba(0, 0, 0, 0.05); + padding: 0.2rem 0.4rem; + border-radius: 3px; + font-size: 0.9em; +} + +.markdown-content pre code { + display: block; + padding: 1rem; + overflow-x: auto; +} + +.markdown-content blockquote { + border-left: 4px solid var(--color-primary); + margin: 1.5rem 0; + padding-left: 1rem; + color: #666; +} + +.markdown-content hr { + border: none; + border-top: 1px solid rgba(0, 0, 0, 0.1); + margin: 2rem 0; +} + +/* Code block styling for contact info */ +.s-about__desc code.copyable { + font-family: 'Consolas', 'Monaco', monospace; + font-size: 0.95em; + background: rgba(76, 110, 245, 0.05); + padding: 0.4em 0.8em; + border-radius: 4px; + border: 1px solid rgba(76, 110, 245, 0.1); + color: var(--color-primary); + margin: 0; + display: inline-block; + cursor: pointer; + transition: var(--transition-fast); + position: relative; + user-select: all; + text-decoration: none; + pointer-events: auto; +} + +.s-about__desc code.copyable:link, +.s-about__desc code.copyable:visited, +.s-about__desc code.copyable:hover, +.s-about__desc code.copyable:active { + text-decoration: none; + color: var(--color-primary); +} + +.s-about__desc code.copyable::before { + content: "Click to copy"; + position: absolute; + top: -30px; + left: 50%; + transform: translateX(-50%) translateY(10px); + background: rgba(0, 0, 0, 0.8); + color: white; + padding: 4px 8px; + border-radius: 4px; + font-size: 12px; + opacity: 0; + visibility: hidden; + transition: var(--transition-fast); + white-space: nowrap; + pointer-events: none; +} + +.s-about__desc code.copyable::after { + content: ""; + position: absolute; + top: -10px; + left: 50%; + transform: translateX(-50%) translateY(10px); + border: 5px solid transparent; + border-top-color: rgba(0, 0, 0, 0.8); + opacity: 0; + visibility: hidden; + transition: var(--transition-fast); + pointer-events: none; +} + +.s-about__desc code.copyable:hover::before, +.s-about__desc code.copyable:hover::after { + opacity: 1; + visibility: visible; + transform: translateX(-50%) translateY(0); +} + +.s-about__desc code.copyable.copied::before { + content: "Copied!"; + background: var(--color-primary); +} + +.s-about__desc code.copyable.copied::after { + border-top-color: var(--color-primary); +} + +.s-about__desc code.copyable:hover { + background: rgba(76, 110, 245, 0.1); + border-color: rgba(76, 110, 245, 0.2); +} + +.s-about__desc code.copyable:active { + background: rgba(76, 110, 245, 0.15); + transform: scale(0.98); +} + +/* Email wrapper styles */ +.email-wrapper { + margin: 1em 0; +} + +.email-wrapper pre { + margin: 0; + padding: 0; + background: none; +} + +.email-wrapper code.copyable { + font-family: 'Consolas', 'Monaco', monospace; + font-size: 0.95em; + background: rgba(76, 110, 245, 0.05); + padding: 0.4em 0.8em; + border-radius: 4px; + border: 1px solid rgba(76, 110, 245, 0.1); + color: var(--color-primary); + display: inline-block; + cursor: pointer; + transition: var(--transition-fast); + position: relative; + user-select: all; +} + +.email-container { display: flex; align-items: center; - justify-content: center; - height: 40px; - width: 40px; + justify-content: space-between; + background: rgba(76, 110, 245, 0.05); + border: 1px solid rgba(76, 110, 245, 0.1); + border-radius: 6px; + padding: 0.8em 1em; + margin: 1em 0; + transition: var(--transition-medium); } -/* Ensure the Bluesky icon is centered */ -.s-header__nav-list .fa-bluesky { +.email-container:hover { + background: rgba(76, 110, 245, 0.08); + border-color: rgba(76, 110, 245, 0.2); +} + +.email-text { + font-family: 'Consolas', 'Monaco', monospace; + color: var(--color-primary); + font-size: 0.95em; + user-select: all; +} + +.copy-btn { + background: transparent; + border: none; + color: var(--color-primary); + cursor: pointer; + padding: 0.6em; + border-radius: 4px; + transition: var(--transition-fast); + opacity: 0.7; + font-size: 1.1em; display: flex; align-items: center; justify-content: center; + min-width: 36px; } -/* Ensure all nav links have consistent height */ -.s-header__nav-list a { - color: #1a1a1a; - text-decoration: none; - font-size: 1.6rem; - transition: all 0.3s ease; - padding: 0.8rem 1.6rem; - border-radius: 5px; - background: rgba(255, 255, 255, 0.25); - backdrop-filter: blur(8px); - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); - display: flex; - align-items: center; - height: 40px; +.copy-btn:hover { + opacity: 1; + background: rgba(76, 110, 245, 0.1); +} + +.copy-btn:active { + transform: scale(0.95); +} + +.copy-btn.copied { + background: var(--color-primary); + color: white; + opacity: 1; +} + +.copy-btn i { + pointer-events: none; } \ No newline at end of file From 141d70f034839fdca72650626f67776633d485f9 Mon Sep 17 00:00:00 2001 From: Vatsal Sanjay Date: Sun, 13 Apr 2025 19:06:04 +0200 Subject: [PATCH 02/21] =?UTF-8?q?=F0=9F=8E=A8=20Refine=20icon=20color=20st?= =?UTF-8?q?yles=20for=20header=20navigation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/css/styles.css b/assets/css/styles.css index 13675459..aec4d874 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -114,7 +114,7 @@ body { } /* Apply exceptions for colored icons */ -.fa-bluesky { +.s-header__nav-list .fa-bluesky { color: #0085ff !important; } From b4b4e4c84c72921020277cf87bff97c6fc7099ef Mon Sep 17 00:00:00 2001 From: Vatsal Sanjay Date: Sun, 13 Apr 2025 19:16:21 +0200 Subject: [PATCH 03/21] =?UTF-8?q?=E2=9C=A8=20feat:=20Improve=20article=20i?= =?UTF-8?q?mage=20credit=20styling?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- News.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/News.md b/News.md index 74e77698..2eb4193c 100644 --- a/News.md +++ b/News.md @@ -13,7 +13,7 @@ Read More -
+
Image credit: J. Heitman, B. J. Howlett, P. W. Crous, E. H. Stukenbrock, T. Y. James & N. A. R. Gow, The fungal kingdom, John Wiley & Sons (2020)
From 645b40d852301d3b6a4cf6872a6df87380f39d6f Mon Sep 17 00:00:00 2001 From: Vatsal Sanjay Date: Sun, 13 Apr 2025 19:21:31 +0200 Subject: [PATCH 04/21] =?UTF-8?q?=E2=9C=A8=20feat(team):=20style=20social?= =?UTF-8?q?=20icons=20and=20GitHub=20icon=20in=20dark=20mode?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/styles.css | 6 ++++++ assets/css/team.css | 22 ++++++++++++++++++++++ 2 files changed, 28 insertions(+) diff --git a/assets/css/styles.css b/assets/css/styles.css index aec4d874..6377d382 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -113,6 +113,12 @@ body { color: var(--icon-color); } +/* Ensure GitHub icons are white in dark theme */ +[data-theme="dark"] .fa-brands.fa-github, +[data-theme="dark"] .team-member .fa-brands.fa-github { + color: #ffffff !important; +} + /* Apply exceptions for colored icons */ .s-header__nav-list .fa-bluesky { color: #0085ff !important; diff --git a/assets/css/team.css b/assets/css/team.css index 9e95ef5b..d980f223 100644 --- a/assets/css/team.css +++ b/assets/css/team.css @@ -7,6 +7,7 @@ --team-image-bg: #f5f5f5; --team-member-bg: rgba(255, 255, 255, 0.7); --team-shadow: rgba(0, 0, 0, 0.1); + --team-icon-color: #333333; } [data-theme="dark"] { @@ -17,6 +18,7 @@ --team-image-bg: #2a2a2a; --team-member-bg: rgba(40, 40, 40, 0.7); --team-shadow: rgba(0, 0, 0, 0.3); + --team-icon-color: #ffffff; } /* Team page general styles with dark mode support */ @@ -210,4 +212,24 @@ .s-map .map-description .gray { font-size: 1.3rem; } +} + +/* Style for social icons */ +.team-member .fa, +.team-member .ai { + display: inline-block; + margin: 0 5px; + color: var(--team-icon-color); + transition: color 0.3s ease; +} + +/* Specific styling for GitHub icon */ +.team-member .fa-github, +[data-theme="dark"] .team-member .fa-github { + color: var(--team-icon-color) !important; +} + +/* Ensure GitHub icon is white in dark theme */ +[data-theme="dark"] .team-member .fa-brands.fa-github { + color: #ffffff !important; } \ No newline at end of file From 7097bbe4308a2df09b3495180214d94a29bb39b0 Mon Sep 17 00:00:00 2001 From: Vatsal Sanjay Date: Sun, 13 Apr 2025 19:27:28 +0200 Subject: [PATCH 05/21] =?UTF-8?q?=E2=9C=A8=20feat:=20Enhance=20social=20me?= =?UTF-8?q?dia=20icon=20styles=20and=20hover=20effects?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/styles.css | 93 +++++++++++++++++++++++++++++++++++++++++-- assets/css/team.css | 67 ++++++++++++++++++++++++++++--- 2 files changed, 152 insertions(+), 8 deletions(-) diff --git a/assets/css/styles.css b/assets/css/styles.css index 6377d382..b2f4f354 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -111,19 +111,106 @@ body { .footer-left i, .footer-right i { color: var(--icon-color); + font-size: 1.5em; + transition: transform 0.3s ease, color 0.3s ease; } -/* Ensure GitHub icons are white in dark theme */ +/* Ensure social media icons are white in dark theme */ [data-theme="dark"] .fa-brands.fa-github, -[data-theme="dark"] .team-member .fa-brands.fa-github { +[data-theme="dark"] .team-member .fa-brands.fa-github, +[data-theme="dark"] .fa-brands.fa-linkedin, +[data-theme="dark"] .team-member .fa-brands.fa-linkedin, +[data-theme="dark"] .fa-brands.fa-x-twitter, +[data-theme="dark"] .team-member .fa-brands.fa-x-twitter, +[data-theme="dark"] .fa-brands.fa-bluesky, +[data-theme="dark"] .team-member .fa-brands.fa-bluesky, +[data-theme="dark"] .fa-brands.fa-wikipedia-w, +[data-theme="dark"] .team-member .fa-brands.fa-wikipedia-w { color: #ffffff !important; } /* Apply exceptions for colored icons */ -.s-header__nav-list .fa-bluesky { +.s-header__nav-list .fa-bluesky, +.team-member .fa-bluesky, +.footer-right .fa-bluesky { color: #0085ff !important; } +.s-header__nav-list .fa-linkedin, +.team-member .fa-linkedin, +.footer-right .fa-linkedin { + color: #0077b5 !important; + font-size: 1.7em; +} + +.s-header__nav-list .fa-x-twitter, +.team-member .fa-x-twitter, +.footer-right .fa-x-twitter { + color: #000000 !important; +} + +.s-header__nav-list .fa-wikipedia-w, +.team-member .fa-wikipedia-w, +.footer-right .fa-wikipedia-w { + color: #000000 !important; + font-size: 1.4em; +} + +[data-theme="dark"] .s-header__nav-list .fa-x-twitter, +[data-theme="dark"] .team-member .fa-x-twitter, +[data-theme="dark"] .footer-right .fa-x-twitter, +[data-theme="dark"] .s-header__nav-list .fa-wikipedia-w, +[data-theme="dark"] .team-member .fa-wikipedia-w, +[data-theme="dark"] .footer-right .fa-wikipedia-w { + color: #ffffff !important; +} + +/* Hover effects for social media icons */ +.s-header__nav-list i:hover, +.team-member i:hover, +.footer-right i:hover { + transform: translateY(-2px); + opacity: 0.9; +} + +/* Ensure consistent sizing in navigation */ +.s-header__nav-list li[style="background: none;"] a { + display: flex; + align-items: center; + justify-content: center; + width: 44px; + height: 44px; + padding: 0; +} + +/* Footer social icons specific styles */ +.footer-right i { + font-size: 1.6em; +} + +.footer-right .fa-linkedin { + font-size: 1.8em; +} + +/* Mobile adjustments */ +@media screen and (max-width: 768px) { + .footer-right i { + font-size: 1.5em; + } + + .footer-right .fa-linkedin { + font-size: 1.7em; + } + + .s-header__nav-list i { + font-size: 1.4em; + } + + .s-header__nav-list .fa-linkedin { + font-size: 1.6em; + } +} + /* Theme-aware content styling */ #about-content a, #news-content a, diff --git a/assets/css/team.css b/assets/css/team.css index d980f223..bb27ec71 100644 --- a/assets/css/team.css +++ b/assets/css/team.css @@ -220,16 +220,73 @@ display: inline-block; margin: 0 5px; color: var(--team-icon-color); - transition: color 0.3s ease; + transition: color 0.3s ease, transform 0.3s ease; + font-size: 1.5em; } -/* Specific styling for GitHub icon */ +/* Specific styling for social media icons */ .team-member .fa-github, -[data-theme="dark"] .team-member .fa-github { +.team-member .fa-linkedin, +.team-member .fa-x-twitter, +.team-member .fa-bluesky, +.team-member .fa-wikipedia-w { color: var(--team-icon-color) !important; } -/* Ensure GitHub icon is white in dark theme */ -[data-theme="dark"] .team-member .fa-brands.fa-github { +/* Colored icons */ +.team-member .fa-bluesky { + color: #0085ff !important; +} + +.team-member .fa-linkedin { + color: #0077b5 !important; + font-size: 1.7em; +} + +.team-member .fa-x-twitter { + color: #000000 !important; +} + +.team-member .fa-wikipedia-w { + color: #000000 !important; + font-size: 1.4em; +} + +/* Dark theme overrides */ +[data-theme="dark"] .team-member .fa-github, +[data-theme="dark"] .team-member .fa-linkedin, +[data-theme="dark"] .team-member .fa-x-twitter, +[data-theme="dark"] .team-member .fa-bluesky, +[data-theme="dark"] .team-member .fa-wikipedia-w { color: #ffffff !important; +} + +[data-theme="dark"] .team-member .fa-bluesky { + color: #0085ff !important; +} + +[data-theme="dark"] .team-member .fa-linkedin { + color: #0077b5 !important; +} + +[data-theme="dark"] .team-member .fa-x-twitter, +[data-theme="dark"] .team-member .fa-wikipedia-w { + color: #ffffff !important; +} + +/* Hover effects */ +.team-member .fa:hover, +.team-member .ai:hover { + transform: translateY(-2px); + opacity: 0.9; +} + +/* Center social links */ +.team-member h2 + p { + text-align: center !important; + margin: 1rem 0; + display: flex; + justify-content: center; + align-items: center; + gap: 10px; } \ No newline at end of file From d10a33c1d5dec3058423a24980e8d3c35d4c4865 Mon Sep 17 00:00:00 2001 From: Vatsal Sanjay Date: Sun, 13 Apr 2025 19:39:22 +0200 Subject: [PATCH 06/21] =?UTF-8?q?=F0=9F=8E=A8=20feat(styles):=20Enhance=20?= =?UTF-8?q?tag=20styles=20for=20dark=20mode?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _layouts/research.html | 14 +++++++++++++- assets/css/research.css | 14 ++++++++++++++ assets/css/styles.css | 19 ++++++++++++++++--- 3 files changed, 43 insertions(+), 4 deletions(-) diff --git a/_layouts/research.html b/_layouts/research.html index 7451a993..697cdadb 100644 --- a/_layouts/research.html +++ b/_layouts/research.html @@ -61,15 +61,27 @@ cursor: pointer; transition: background-color 0.2s ease; text-decoration: none; - color: inherit; + color: #333333; + } + [data-theme="dark"] tags span, [data-theme="dark"] tags a.tag-link { + background-color: #2a2a30; + color: #ffffff; + border: 1px solid rgba(111, 161, 255, 0.3); } tags span:hover, tags a.tag-link:hover { background-color: #e0e0e0; } + [data-theme="dark"] tags span:hover, [data-theme="dark"] tags a.tag-link:hover { + background-color: #3a3a40; + } tags span.active, tags a.tag-link.active { background-color: #007bff; color: white; } + [data-theme="dark"] tags span.active, [data-theme="dark"] tags a.tag-link.active { + background-color: #4d8dff; + color: white; + } /* Style for filter notification */ .filter-note { margin: 1rem 0; diff --git a/assets/css/research.css b/assets/css/research.css index e4d8033d..22c716e6 100644 --- a/assets/css/research.css +++ b/assets/css/research.css @@ -637,6 +637,20 @@ border: 1px solid rgba(120, 170, 255, 0.3); } +/* Fix for top filter tags in dark theme */ +[data-theme="dark"] tags span, +[data-theme="dark"] tags a.tag-link { + background: rgba(40, 44, 52, 0.8) !important; + color: #ffffff !important; + border: 1px solid rgba(111, 161, 255, 0.4) !important; +} + +[data-theme="dark"] tags span:hover, +[data-theme="dark"] tags a.tag-link:hover { + background: rgba(76, 110, 245, 0.5) !important; + border-color: rgba(111, 161, 255, 0.6) !important; +} + /* First tag - brightest background */ .research-content tags span:nth-of-type(1) { background: rgba(147, 51, 234, 0.15); diff --git a/assets/css/styles.css b/assets/css/styles.css index b2f4f354..70032ca5 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -1839,18 +1839,31 @@ img.youtube-stats-dark { .featured-paper tags span { display: inline-block; padding: 0.4rem 0.8rem; - background: rgba(76, 110, 245, 0.1); - color: var(--color-primary); + background: rgba(76, 110, 245, 0.15); + color: #4c6ef5; border-radius: 4px; font-size: 1.4rem; cursor: pointer; transition: var(--transition-medium); text-decoration: none; + border: 1px solid rgba(76, 110, 245, 0.2); +} + +[data-theme="dark"] .featured-paper tags span { + background: rgba(40, 44, 52, 0.8) !important; + color: #ffffff !important; + border: 1px solid rgba(111, 161, 255, 0.4) !important; } .featured-paper tags span:hover { - background: rgba(76, 110, 245, 0.2); + background: rgba(76, 110, 245, 0.25); transform: translateY(-2px); + border-color: rgba(76, 110, 245, 0.3); +} + +[data-theme="dark"] .featured-paper tags span:hover { + background: rgba(76, 110, 245, 0.5) !important; + border-color: rgba(111, 161, 255, 0.6) !important; } .featured-paper iframe { From 58394c1640d275e1b4adea4d577a9144a0e0c4cc Mon Sep 17 00:00:00 2001 From: Vatsal Sanjay Date: Sun, 13 Apr 2025 19:41:57 +0200 Subject: [PATCH 07/21] =?UTF-8?q?=F0=9F=8E=A8=20feat(research):=20Improve?= =?UTF-8?q?=20active=20tag=20styling=20and=20behavior?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _layouts/research.html | 12 ++++++++++-- assets/css/research.css | 10 ++++++++++ 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/_layouts/research.html b/_layouts/research.html index 697cdadb..dce481d3 100644 --- a/_layouts/research.html +++ b/_layouts/research.html @@ -528,7 +528,12 @@

Contents

const updateMatchingTags = (tagText, shouldHighlight) => { document.querySelectorAll('tags span').forEach(tag => { if (tag.textContent === tagText) { - tag.classList.toggle('active', shouldHighlight); + // First remove any active class + tag.classList.remove('active'); + // Then add it back if needed + if (shouldHighlight) { + tag.classList.add('active'); + } } }); }; @@ -541,7 +546,8 @@

Contents

// If clicking the active tag, deactivate it if (activeTag === tagText) { activeTag = null; - updateMatchingTags(tagText, false); + // Remove active class from all tags + allTags.forEach(t => t.classList.remove('active')); paperContainers.forEach(container => { container.classList.remove('hidden'); }); @@ -551,7 +557,9 @@

Contents

// Update active tag activeTag = tagText; + // Remove active class from all tags allTags.forEach(t => t.classList.remove('active')); + // Add active class to matching tags updateMatchingTags(tagText, true); // Update URL diff --git a/assets/css/research.css b/assets/css/research.css index 22c716e6..844b0917 100644 --- a/assets/css/research.css +++ b/assets/css/research.css @@ -651,6 +651,16 @@ border-color: rgba(111, 161, 255, 0.6) !important; } +/* Fix for active tags in dark theme */ +[data-theme="dark"] tags span.active, +[data-theme="dark"] tags a.tag-link.active { + background: rgba(76, 110, 245, 0.8) !important; + color: #ffffff !important; + border-color: rgba(111, 161, 255, 0.8) !important; + transform: scale(1.1); + box-shadow: 0 2px 5px rgba(111, 161, 255, 0.5) !important; +} + /* First tag - brightest background */ .research-content tags span:nth-of-type(1) { background: rgba(147, 51, 234, 0.15); From 2adbf618fa5543f8c7e66586fb214698774082e3 Mon Sep 17 00:00:00 2001 From: Vatsal Sanjay Date: Sun, 13 Apr 2025 19:52:54 +0200 Subject: [PATCH 08/21] =?UTF-8?q?=F0=9F=94=A7=20feat(platform-utils):=20Ad?= =?UTF-8?q?d=20platform=20detection=20and=20UI=20utilities?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/assets/js/platform-utils.js | 32 ++++++++++++++++++++ .github/assets/js/shortcut-key.js | 4 +++ README.md | 3 +- _layouts/default.html | 2 ++ _layouts/research.html | 1 + _layouts/teaching-course.html | 1 + _layouts/teaching.html | 39 ++----------------------- _layouts/team.html | 45 ++--------------------------- 8 files changed, 48 insertions(+), 79 deletions(-) create mode 100644 .github/assets/js/platform-utils.js create mode 100644 .github/assets/js/shortcut-key.js diff --git a/.github/assets/js/platform-utils.js b/.github/assets/js/platform-utils.js new file mode 100644 index 00000000..4e4ff05e --- /dev/null +++ b/.github/assets/js/platform-utils.js @@ -0,0 +1,32 @@ +'use strict'; + +/** + * Check if the user is on a Mac platform + * @returns {boolean} True if user is on Mac, false otherwise + */ +function isMacPlatform() { + return navigator.platform.toUpperCase().indexOf('MAC') >= 0; +} + +/** + * Update UI elements based on platform (Mac vs non-Mac) + */ +function updatePlatformSpecificElements() { + const isMac = isMacPlatform(); + + // Update all platform-specific text elements + document.querySelectorAll('.default-theme-text').forEach(element => { + element.style.display = isMac ? 'none' : 'inline'; + }); + + document.querySelectorAll('.mac-theme-text').forEach(element => { + element.style.display = isMac ? 'inline' : 'none'; + }); +} + +// Initialize when DOM is loaded +document.addEventListener('DOMContentLoaded', updatePlatformSpecificElements); + +// Export functions for use in other scripts +window.isMacPlatform = isMacPlatform; +window.updatePlatformSpecificElements = updatePlatformSpecificElements; \ No newline at end of file diff --git a/.github/assets/js/shortcut-key.js b/.github/assets/js/shortcut-key.js new file mode 100644 index 00000000..1a03c47c --- /dev/null +++ b/.github/assets/js/shortcut-key.js @@ -0,0 +1,4 @@ +document.addEventListener('DOMContentLoaded', function() { + // Platform detection is now handled by platform-utils.js + // Update the displayed shortcut text is now handled by platform-utils.js +}); \ No newline at end of file diff --git a/README.md b/README.md index d1147fd0..2feb8c61 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,8 @@ A static website for the Computational Multiphase Physics Laboratory, built with │ ├── js # JavaScript files │ │ ├── main.js # Main JavaScript │ │ ├── command-data.js # Command palette data and functionality -│ │ ├── shortcut-key.js # Platform detection for shortcuts +│ │ ├── platform-utils.js # Platform detection and UI utilities +│ │ ├── shortcut-key.js # Keyboard shortcut handling │ │ └── search_db.json # Generated search database (used by command palette) │ ├── favicon # Favicon files │ └── img # Image assets diff --git a/_layouts/default.html b/_layouts/default.html index 92e8742f..bf9c288d 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -92,6 +92,8 @@ + + + + diff --git a/_layouts/teaching.html b/_layouts/teaching.html index a5597ff5..8a4cdf6b 100644 --- a/_layouts/teaching.html +++ b/_layouts/teaching.html @@ -81,6 +81,7 @@ + @@ -127,15 +128,6 @@ - - - - - - diff --git a/_layouts/team.html b/_layouts/team.html index d69cbdd4..26cc5962 100644 --- a/_layouts/team.html +++ b/_layouts/team.html @@ -111,6 +111,7 @@ + From 0f128e2720963cd2faaeafb754945391812e8170 Mon Sep 17 00:00:00 2001 From: Vatsal Sanjay Date: Sun, 13 Apr 2025 20:18:23 +0200 Subject: [PATCH 09/21] =?UTF-8?q?=F0=9F=8E=A8=20feat(styles):=20Update=20i?= =?UTF-8?q?con=20color=20to=20improve=20visibility?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/css/styles.css b/assets/css/styles.css index 70032ca5..9bb04333 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -27,7 +27,7 @@ --nav-item-hover-shadow: rgba(0, 0, 0, 0.15); /* Icon colors */ - --icon-color: #333333; + --icon-color: #ffffff; /* Box shadow presets */ --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.1); From 8d66e70d5c88794f3c58b63abbe11609cb1179d8 Mon Sep 17 00:00:00 2001 From: Vatsal Sanjay Date: Mon, 14 Apr 2025 00:09:45 +0200 Subject: [PATCH 10/21] =?UTF-8?q?=E2=9C=A8=20feat:=20Enhance=20icon=20styl?= =?UTF-8?q?ing=20in=20header=20and=20footer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/styles.css | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/assets/css/styles.css b/assets/css/styles.css index 9bb04333..0b8bcac5 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -101,20 +101,26 @@ body { } /* Make icons use theme colors */ -.s-header__nav i, -.s-header__nav-list i, -.fa-brands, -.fa-solid, -.ai, .s-footer i, .site-footer i, .footer-left i, -.footer-right i { +.footer-right i, +.fa-solid:not(.s-header__nav-list .fa-solid), +.fa-brands:not(.s-header__nav-list .fa-brands), +.ai:not(.s-header__nav-list .ai) { color: var(--icon-color); font-size: 1.5em; transition: transform 0.3s ease, color 0.3s ease; } +/* Header icons in command palette retain their natural colors */ +.s-header__nav i, +.s-header__nav-list i { + /* Use their natural colors */ + font-size: 1.5em; + transition: transform 0.3s ease, color 0.3s ease; +} + /* Ensure social media icons are white in dark theme */ [data-theme="dark"] .fa-brands.fa-github, [data-theme="dark"] .team-member .fa-brands.fa-github, From 9b1a1d4328be4ece779e11c55a63d92985ed883a Mon Sep 17 00:00:00 2001 From: Vatsal Sanjay Date: Mon, 14 Apr 2025 00:22:22 +0200 Subject: [PATCH 11/21] =?UTF-8?q?=E2=9C=A8=20feat(command-palette):=20impr?= =?UTF-8?q?ove=20dark=20mode=20styling?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/command-palette.css | 163 ++++++++------------------------- 1 file changed, 37 insertions(+), 126 deletions(-) diff --git a/assets/css/command-palette.css b/assets/css/command-palette.css index 6f5e7ace..b7af81b6 100644 --- a/assets/css/command-palette.css +++ b/assets/css/command-palette.css @@ -26,7 +26,8 @@ transform: translateX(-50%); width: 640px; max-width: 90vw; - background-color: #f9f5fb; + background-color: #2d1e30; /* Always use dark purple background */ + color: #fff; /* Always use white text */ border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); overflow: hidden; @@ -38,25 +39,25 @@ width: 100%; padding: 16px 18px; border: none; - border-bottom: 2px solid rgba(104, 35, 109, 0.3); + border-bottom: 2px solid rgba(104, 35, 109, 0.5); font-size: 16px; outline: none; - background-color: #fff; + background-color: #3a2a3d; /* Always use dark purple input */ transition: all 0.3s ease; - color: #333; + color: #fff; /* Always use white text */ font-weight: 500; } #command-palette-input:focus { - border-bottom-color: #68236D; - background-color: #fff; + border-bottom-color: rgba(104, 35, 109, 0.8); + background-color: #3a2a3d; /* Keep dark background on focus */ } .command-palette-results { max-height: 60vh; overflow-y: auto; padding: 0 4px; - background-color: #f9f5fb; + background-color: #2d1e30; /* Always use dark purple background */ } .command-palette-section { @@ -67,7 +68,7 @@ padding: 6px 16px; font-size: 12px; font-weight: bold; - color: #68236D; + color: #d4a5db; /* Always use light purple for section titles */ text-transform: uppercase; letter-spacing: 0.5px; } @@ -85,23 +86,23 @@ border-radius: 8px; transition: all 0.2s ease; margin: 2px 4px; - color: #333; + color: #f0f0f0; /* Always use white text */ } .command-palette-command:hover, .command-palette-command.selected { - background-color: rgba(104, 35, 109, 0.15); + background-color: rgba(104, 35, 109, 0.3); /* Darker hover state */ } .command-palette-command.selected { outline: 2px solid rgba(104, 35, 109, 0.3); position: relative; - background-color: rgba(104, 35, 109, 0.1); + background-color: rgba(104, 35, 109, 0.25); /* Darker selected state */ } .command-palette-icon { flex: 0 0 24px; margin-right: 14px; - color: #68236D; + color: #d4a5db; /* Always use light purple for icons */ } .command-palette-title { @@ -110,16 +111,16 @@ overflow: hidden; text-overflow: ellipsis; font-weight: 500; - color: #333; + color: #f0f0f0; /* Always use white text */ } .command-palette-shortcut { flex: 0 0 auto; padding: 3px 8px; border-radius: 4px; - background-color: rgba(104, 35, 109, 0.15); + background-color: rgba(104, 35, 109, 0.3); /* Darker background */ font-size: 12px; - color: #68236D; + color: #f0f0f0; /* Always use white text */ font-weight: 600; } @@ -128,7 +129,7 @@ margin-top: 6px; margin-left: 38px; font-size: 13px; - color: #555; + color: #ccc; /* Always use light gray for excerpts */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -146,7 +147,7 @@ .command-palette-no-results { padding: 20px; text-align: center; - color: #666; + color: #ccc; /* Always use light gray for no results */ font-style: italic; } @@ -243,94 +244,19 @@ } } -/* Dark mode styling */ -@media (prefers-color-scheme: dark) { - .simple-command-palette-modal { - background-color: #2d1e30; - color: #fff; - border-color: rgba(104, 35, 109, 0.3); - } - - #command-palette-input { - background-color: #3a2a3d; - color: #fff; - border-bottom-color: rgba(104, 35, 109, 0.5); - } - - #command-palette-input:focus { - border-bottom-color: rgba(104, 35, 109, 0.8); - background-color: #3a2a3d; - } - - .command-palette-results { - background-color: #2d1e30; - } - - .command-palette-section-title { - color: #d4a5db; - } - - .command-palette-command { - color: #f0f0f0; - } - - .command-palette-command:hover, .command-palette-command.selected { - background-color: rgba(104, 35, 109, 0.3); - } - - .command-palette-command.selected { - background-color: rgba(104, 35, 109, 0.25); - } - - .command-palette-icon { - color: #d4a5db; - } - - .command-palette-title { - color: #f0f0f0; - } - - .command-palette-shortcut { - background-color: rgba(104, 35, 109, 0.3); - color: #f0f0f0; - } - - .command-palette-excerpt { - color: #ccc; - } - - .command-palette-section:has(.command-palette-section-title:contains("Search Results")) { - border-top-color: rgba(104, 35, 109, 0.3); - } - - .command-palette-no-results { - color: #ccc; - } +/* Original Dark mode styling has been moved to the base styles above. + These styles have been applied directly to make the command palette + consistently use the dark purple theme across all browsers. */ - /* Dark mode for the command-k-style button */ - .command-k-style-btn { - background: rgba(255, 255, 255, 0.1); - color: #f0f0f0; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); - } - - .command-k-style-btn:hover { - background: rgba(255, 255, 255, 0.15); - } - - .command-k-style-btn:focus, - .command-k-style-btn.focused { - outline: 2px solid rgba(212, 165, 219, 0.6); - } - - .command-k-style-btn .search-icon { - color: #000000; - } - - .command-k-style-btn .default-theme-text, - .command-k-style-btn .mac-theme-text { - color: #000000; - } +/* Dark mode styles for command-k button that we aren't using in the main palette */ +.command-k-style-btn:focus, +.command-k-style-btn.focused { + outline: 2px solid rgba(212, 165, 219, 0.6); +} + +.command-palette-footer { + background-color: rgba(104, 35, 109, 0.1); + border-top-color: rgba(104, 35, 109, 0.3); } /* Custom styles for the shortcut help modal */ @@ -447,8 +373,8 @@ justify-content: center; align-items: center; padding: 12px; - background-color: rgba(104, 35, 109, 0.06); - border-top: 1px solid rgba(104, 35, 109, 0.15); + background-color: rgba(104, 35, 109, 0.1); + border-top: 1px solid rgba(104, 35, 109, 0.3); gap: 16px; flex-wrap: wrap; } @@ -456,7 +382,7 @@ .command-palette-footer-item { display: flex; align-items: center; - color: #555; + color: #ddd; font-size: 13px; } @@ -467,10 +393,10 @@ min-width: 22px; height: 22px; padding: 0 5px; - background-color: rgba(104, 35, 109, 0.15); - border: 1px solid rgba(104, 35, 109, 0.3); + background-color: rgba(104, 35, 109, 0.25); + border: 1px solid rgba(104, 35, 109, 0.4); border-radius: 4px; - color: #68236D; + color: #f0f0f0; margin: 0 3px; font-size: 12px; line-height: 1; @@ -479,19 +405,4 @@ font-weight: 600; } -@media (prefers-color-scheme: dark) { - .command-palette-footer { - background-color: rgba(104, 35, 109, 0.1); - border-top-color: rgba(104, 35, 109, 0.3); - } - - .command-palette-footer-item { - color: #ddd; - } - - .command-palette-footer kbd { - background-color: rgba(104, 35, 109, 0.25); - border-color: rgba(104, 35, 109, 0.4); - color: #f0f0f0; - } -} \ No newline at end of file +/* Footer dark styling is now applied to all color schemes above */ \ No newline at end of file From 538bb52addc469fa1d1015a7da4cc08217d0c317 Mon Sep 17 00:00:00 2001 From: Vatsal Sanjay Date: Mon, 14 Apr 2025 00:32:32 +0200 Subject: [PATCH 12/21] =?UTF-8?q?=E2=9C=A8=20feat:=20Add=20keyboard=20shor?= =?UTF-8?q?tcuts=20help=20command?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/js/command-data.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/assets/js/command-data.js b/assets/js/command-data.js index eea75639..0ea9091e 100644 --- a/assets/js/command-data.js +++ b/assets/js/command-data.js @@ -109,13 +109,6 @@ }, // Help commands - { - id: "help", - title: "View Keyboard Shortcuts", - handler: () => { window.displayShortcutsHelp(); }, - section: "Help", - icon: '' - }, { id: "repository", title: "View Website Repository", From 6c8b306c02784300a0138f2244293cf9d4249deb Mon Sep 17 00:00:00 2001 From: Vatsal Sanjay Date: Mon, 14 Apr 2025 01:35:23 +0200 Subject: [PATCH 13/21] =?UTF-8?q?=F0=9F=94=A7=20refactor(platform-utils):?= =?UTF-8?q?=20extract=20platform=20detection=20and=20update=20logic?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/assets/js/shortcut-key.js | 16 +++++++++ _layouts/default.html | 33 +++++++++---------- _layouts/research.html | 33 +++++++++---------- _layouts/teaching-course.html | 33 +++++++++---------- _layouts/teaching.html | 33 +++++++++---------- _layouts/team.html | 33 +++++++++---------- .../assets => assets}/js/platform-utils.js | 0 7 files changed, 91 insertions(+), 90 deletions(-) rename {.github/assets => assets}/js/platform-utils.js (100%) diff --git a/.github/assets/js/shortcut-key.js b/.github/assets/js/shortcut-key.js index 1a03c47c..a671bd1d 100644 --- a/.github/assets/js/shortcut-key.js +++ b/.github/assets/js/shortcut-key.js @@ -1,4 +1,20 @@ document.addEventListener('DOMContentLoaded', function() { // Platform detection is now handled by platform-utils.js // Update the displayed shortcut text is now handled by platform-utils.js + + function loadStylesheet(href) { + const link = document.createElement('link'); + link.rel = 'stylesheet'; + link.href = href; + link.crossOrigin = 'anonymous'; + link.onerror = () => console.error(`Failed to load stylesheet: ${href}`); + document.head.appendChild(link); + return link; + } + + const FA_VERSION = '6.7.2'; // Extract version to a constant for easier updates + + loadStylesheet(`https://use.fontawesome.com/releases/v${FA_VERSION}/css/solid.css`); + loadStylesheet(`https://use.fontawesome.com/releases/v${FA_VERSION}/css/brands.css`); + loadStylesheet(`https://use.fontawesome.com/releases/v${FA_VERSION}/css/fontawesome.css`); }); \ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html index bf9c288d..04400de6 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -137,25 +137,22 @@