Merge pull request #33 from comphy-lab/vs-branch-6

vs-branch-6

Author: VatsalSy

Diff for: .github/assets/js/shortcut-key.js

@@ -0,0 +1,29 @@
+document.addEventListener('DOMContentLoaded', function() {
+  // Platform detection is now handled by platform-utils.js
+  /**
+   * Dynamically loads a stylesheet into the document's head.
+   *
+   * Creates a <link> element with the specified URL, sets attributes necessary for secure loading,
+   * and appends it to the document's head. If the stylesheet fails to load, an error is logged
+   * to the console.
+   *
+   * @param {string} href - The URL of the stylesheet to be loaded.
+   * @returns {HTMLLinkElement} The created and appended link element.
+   */
+  
+  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`);
+}); 

Diff for: News.md

@@ -13,7 +13,7 @@
         <a href="https://ammodo-science.webflow.io/researches/vatsal-sanjay" style="display: flex; align-items: center; text-decoration: none; color: #cf4900; font-size: 1em; font-weight: 500;"><i class="fa-solid fa-arrow-up-right-from-square" style="margin-right: 8px; font-size: 1.2em;"></i>Read More</a>
       </div>
     </div>
-    <div style="font-size: 0.75em; color: #666; margin-top: 5px; font-style: italic;">
+    <div style="font-size: 0.75em; color: var(--color-text); opacity: 0.7; margin-top: 5px; font-style: italic;">
       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)
     </div>
   </div>

Diff for: README.md

@@ -33,12 +33,13 @@ 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
 │   │   ├── 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
@@ -467,4 +468,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
+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

Diff for: _layouts/default.html

@@ -92,6 +92,8 @@
   <script defer src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
   <script defer src="/assets/js/main.js"></script>
   <script defer src="/assets/js/command-data.js"></script>
+  <script defer src="/assets/js/platform-utils.js"></script>
+  <script defer src="/assets/js/shortcut-key.js"></script>
 
   <script>
     document.documentElement.classList.remove('no-js');
@@ -135,25 +137,22 @@
   <script>
     // Check if we're on localhost
     if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
-      // Load only specific Font Awesome icons for local development
-      var icons = ['github', 'search', 'arrow-up-right-from-square', 'bluesky', 'youtube', 'arrow-up'];
-      var link = document.createElement('link');
-      link.rel = 'stylesheet';
-      link.href = 'https://use.fontawesome.com/releases/v6.7.2/css/solid.css';
-      link.crossOrigin = 'anonymous';
-      document.head.appendChild(link);
-      
-      var link2 = document.createElement('link');
-      link2.rel = 'stylesheet';
-      link2.href = 'https://use.fontawesome.com/releases/v6.7.2/css/brands.css';
-      link2.crossOrigin = 'anonymous';
-      document.head.appendChild(link2);
+      // Load Font Awesome stylesheets with improved error handling and version extraction
+      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
 
-      var link3 = document.createElement('link');
-      link3.rel = 'stylesheet';
-      link3.href = 'https://use.fontawesome.com/releases/v6.7.2/css/fontawesome.css';
-      link3.crossOrigin = 'anonymous';
-      document.head.appendChild(link3);
+      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`);
     } else {
       // Use Kit for production with defer
       var script = document.createElement('script');

Diff for: _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;
@@ -152,6 +164,7 @@
   <script defer src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <script defer src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
   <script defer src="/assets/js/main.js"></script>
+  <script defer src="/assets/js/platform-utils.js"></script>
   <script defer src="/assets/js/command-data.js"></script>  
   <script>
     document.documentElement.classList.remove('no-js');
@@ -195,25 +208,22 @@
   <script>
     // Check if we're on localhost
     if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
-      // Load only specific Font Awesome icons for local development
-      var icons = ['github', 'search', 'arrow-up-right-from-square', 'bluesky', 'youtube', 'arrow-up'];
-      var link = document.createElement('link');
-      link.rel = 'stylesheet';
-      link.href = 'https://use.fontawesome.com/releases/v6.7.2/css/solid.css';
-      link.crossOrigin = 'anonymous';
-      document.head.appendChild(link);
-      
-      var link2 = document.createElement('link');
-      link2.rel = 'stylesheet';
-      link2.href = 'https://use.fontawesome.com/releases/v6.7.2/css/brands.css';
-      link2.crossOrigin = 'anonymous';
-      document.head.appendChild(link2);
+      // Load Font Awesome stylesheets with improved error handling and version extraction
+      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
 
-      var link3 = document.createElement('link');
-      link3.rel = 'stylesheet';
-      link3.href = 'https://use.fontawesome.com/releases/v6.7.2/css/fontawesome.css';
-      link3.crossOrigin = 'anonymous';
-      document.head.appendChild(link3);
+      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`);
     } else {
       // Use Kit for production with defer
       var script = document.createElement('script');
@@ -516,7 +526,12 @@ <h3>Contents</h3>
         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');
+              }
             }
           });
         };
@@ -529,7 +544,8 @@ <h3>Contents</h3>
             // 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');
               });
@@ -539,7 +555,9 @@ <h3>Contents</h3>
 
             // 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 for: _layouts/teaching-course.html

@@ -81,6 +81,7 @@
   <script defer src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <script defer src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
   <script defer src="/assets/js/main.js"></script>
+  <script defer src="/assets/js/platform-utils.js"></script>
   <script defer src="/assets/js/command-data.js"></script>
 
   <!-- Theme toggle functionality -->
@@ -137,25 +138,22 @@
   <script>
     // Check if we're on localhost
     if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
-      // Load only specific Font Awesome icons for local development
-      var icons = ['github', 'search', 'arrow-up-right-from-square', 'bluesky', 'youtube', 'arrow-up', 'calendar-days', 'location-dot', 'clock'];
-      var link = document.createElement('link');
-      link.rel = 'stylesheet';
-      link.href = 'https://use.fontawesome.com/releases/v6.7.2/css/solid.css';
-      link.crossOrigin = 'anonymous';
-      document.head.appendChild(link);
-      
-      var link2 = document.createElement('link');
-      link2.rel = 'stylesheet';
-      link2.href = 'https://use.fontawesome.com/releases/v6.7.2/css/brands.css';
-      link2.crossOrigin = 'anonymous';
-      document.head.appendChild(link2);
+      // Load Font Awesome stylesheets with improved error handling and version extraction
+      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
 
-      var link3 = document.createElement('link');
-      link3.rel = 'stylesheet';
-      link3.href = 'https://use.fontawesome.com/releases/v6.7.2/css/fontawesome.css';
-      link3.crossOrigin = 'anonymous';
-      document.head.appendChild(link3);
+      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`);
     } else {
       // Use Kit for production with defer
       var script = document.createElement('script');