artist-gallery-theme

Hugo theme made for websites with loads of images
Log | Files | Refs | README | LICENSE

header.html (3901B)

      1 <!-- Keep - override to add code to <header /> tag -->
      2 <!-- Lightbox CSS -->
      3 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
      4 
      5 <!-- Custom Lightbox arrow behavior -->
      6 <style>
      7 /* Hide arrows by default */
      8 .lb-nav a.lb-prev,
      9 .lb-nav a.lb-next {
     10     opacity: 0 !important;
     11     transition: opacity 0.3s ease-out;
     12 }
     13 
     14 /* Show arrows when triggered */
     15 .lb-nav.show-arrows a.lb-prev,
     16 .lb-nav.show-arrows a.lb-next {
     17     opacity: 1 !important;
     18 }
     19 
     20 /* Also show on hover for desktop users */
     21 @media (hover: hover) {
     22     .lb-nav:hover a.lb-prev,
     23     .lb-nav:hover a.lb-next {
     24         opacity: 1 !important;
     25     }
     26 }
     27 
     28 /* Center and constrain rotating image on desktop */
     29 @media (min-width: 1024px) {
     30     #rotating-image {
     31         width: 70%;
     32         margin: 0 auto;
     33         display: block;
     34     }
     35 }
     36 
     37 /* Make projects grid less squished on desktop */
     38 @media (min-width: 1024px) {
     39     .image-grid {
     40         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
     41         max-width: 1400px;
     42         margin: 0 auto;
     43     }
     44 }
     45 
     46 /* Change link hover to only affect text color, not background */
     47 a:hover {
     48     background-color: transparent !important;
     49     color: var(--primary-color) !important;
     50 }
     51 
     52 /* Make project titles turn red when hovering over image or title */
     53 .image-grid a:hover h2 {
     54     color: var(--primary-color) !important;
     55 }
     56 
     57 /* Site title styling - bold and regular color, red on hover */
     58 .terminal-logo a,
     59 .logo a {
     60     color: var(--font-color) !important;
     61     font-weight: 700 !important;
     62 }
     63 
     64 .terminal-logo a:hover,
     65 .logo a:hover {
     66     color: var(--primary-color) !important;
     67     background-color: transparent !important;
     68 }
     69 </style>
     70 
     71 <!-- jQuery (required for Lightbox2) -->
     72 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     73 
     74 <!-- Lightbox JavaScript -->
     75 <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
     76 
     77 <!-- Lightbox configuration and mobile menu -->
     78 <script>
     79 if (typeof lightbox !== 'undefined') {
     80     lightbox.option({
     81         'resizeDuration': 0,
     82         'imageFadeDuration': 0,
     83         'fadeDuration': 0,
     84         'wrapAround': true,
     85         'alwaysShowNavOnTouchDevices': false
     86     });
     87 }
     88 
     89 // Show/hide lightbox arrows with auto-fade
     90 $(document).ready(function() {
     91     let arrowTimeout;
     92     
     93     function showArrowsTemporarily() {
     94         const lbNav = $('.lb-nav');
     95         
     96         // Clear any existing timeout
     97         if (arrowTimeout) {
     98             clearTimeout(arrowTimeout);
     99         }
    100         
    101         // Show arrows
    102         lbNav.addClass('show-arrows');
    103         
    104         // Hide arrows after 1 second
    105         arrowTimeout = setTimeout(function() {
    106             lbNav.removeClass('show-arrows');
    107         }, 1000);
    108     }
    109     
    110     // Show arrows when lightbox opens
    111     $(document).on('click', 'a[data-lightbox]', function() {
    112         // Wait for lightbox to initialize
    113         setTimeout(showArrowsTemporarily, 100);
    114     });
    115     
    116     // Show arrows when navigating between images
    117     $(document).on('click', '.lb-prev, .lb-next', function() {
    118         showArrowsTemporarily();
    119     });
    120     
    121     // Also detect keyboard navigation
    122     let lastImage = null;
    123     setInterval(function() {
    124         const currentImage = $('.lb-image').attr('src');
    125         if (currentImage && currentImage !== lastImage) {
    126             lastImage = currentImage;
    127             if ($('.lightbox').is(':visible')) {
    128                 showArrowsTemporarily();
    129             }
    130         }
    131     }, 100);
    132 });
    133 
    134 // Mobile menu toggle
    135 document.addEventListener('DOMContentLoaded', function() {
    136     var toggle = document.querySelector('.mobile-menu-toggle');
    137     var menu = document.querySelector('.terminal-menu');
    138     
    139     if (toggle && menu) {
    140         toggle.addEventListener('click', function() {
    141             menu.classList.toggle('active');
    142         });
    143     }
    144 });
    145 </script>