/* Simple Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background: #f4f4f4; color: #333; } /* When we add .no-scroll to , scrolling is disabled behind the lightbox */ body.no-scroll { overflow: hidden; } /* Header */ .header { text-align: center; padding: 1rem; background: #333; color: #fff; } /* Navigation menu */ .navbar { display: flex; justify-content: center; background-color: #333; padding: 10px; } .nav-btn { background: none; color: #fff; border: 2px solid #fff; padding: 0.5rem 1rem; font-size: 1.5rem; cursor: pointer; border-radius: 4px; transition: background 0.3s; } .nav-btn:hover { background-color: #555; } .nav-btn-container { display: flex; gap: 1rem; padding-top: 1.25rem; } /*************************************************************** CSS Grid with "grid-auto-rows" for a "2× vs. 1×" effect ***************************************************************/ .gallery { display: grid; /* Each column is at least 250px wide, then auto-fill more columns if space. */ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Each row is 200px tall by default (you can tweak). */ grid-auto-rows: 200px; gap: 10px; padding: 10px; max-width: 1200px; margin: 0 auto; } /* The figure remains a grid item. We'll define "span" in .horizontal and .vertical */ .gallery-item { position: relative; } /* Horizontal images (2:1) => occupy 1 row in height. */ .gallery-item.horizontal { grid-row: span 1; /* 1 row => 200px tall, plus the gap. */ } /* Vertical images (1:2) => occupy 2 rows => 400px tall. */ .gallery-item.vertical { grid-row: span 2; } /* The images fill each figure, cropped to fit. */ .gallery-item img { width: 100%; height: 100%; object-fit: cover; /* ensures it fills the figure bounding box */ cursor: pointer; transition: transform 0.3s ease; } .gallery-item img:hover { transform: scale(1.05); } /*************************************************************** Lightbox Overlay ***************************************************************/ /* Lightbox overlay: full screen, centered content */ /* The full-screen semi-transparent overlay */ .overlay { position: fixed; display: none; /* hidden by default, shown on click */ top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); justify-content: center; /* center horizontally */ align-items: center; /* center vertically */ overflow-y: auto; /* allow vertical scrolling inside the overlay */ z-index: 999; } .nav-btn { background: none; color: #fff; border: 2px solid #fff; padding: 0.5rem 1rem; font-size: 1.5rem; cursor: pointer; border-radius: 4px; transition: background 0.3s; } .nav-btn:hover { background: rgba(255,255,255,0.2); } /* Close (×) button */ .close { position: absolute; top: 30px; right: 30px; color: #fff; font-size: 3rem; font-weight: bold; cursor: pointer; transition: color 0.3s; } .close:hover { color: #f1c40f; } /* The container for the image + info side by side */ .overlay-container { display: flex; flex-direction: row; align-items: center; gap: 2rem; /* We limit total space so it doesn't overflow screen horizontally or vertically */ max-width: 90vw; max-height: 90vh; /* We'll let the items inside scale down as needed to fit */ } /* The large image in the lightbox */ .lightbox-img { display: block; /* Scale the image so it never exceeds 90% of the viewport height or 60% of the viewport width */ max-width: 60vw; max-height: 90vh; object-fit: contain; /* preserve aspect ratio, no cropping */ /* This ensures no horizontal or vertical scrollbars appear. */ } /* The Like/Comment box */ .lightbox-info { color: #fff; /* Let’s give it a max width so it doesn’t push the image too small. */ max-width: 28vw; /* If you want some background styling or padding, add here */ /* background: rgba(255,255,255,0.1); */ padding: 1rem; } /* Mobile responsive: stack vertically if the screen is smaller than 768px */ @media (max-width: 768px) { .overlay-container { flex-direction: column; align-items: center; } .lightbox-img { max-width: 90vw; /* Image can go nearly full width on mobile */ max-height: 60vh;/* so we leave room for the comment box below */ object-fit: contain; margin-bottom: 1rem; } .lightbox-info { max-width: 90vw; /* expand the comment box to full width on mobile */ margin-top: 1rem; /* some spacing above it */ } } .lightbox-left { display: flex; flex-direction: column; align-items: center; /* so the image and buttons are centered horizontally */ } .like-section { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; } #like-btn { background: #f1c40f; border: none; padding: 0.5rem 1rem; cursor: pointer; font-weight: bold; border-radius: 4px; transition: background 0.3s; } #like-btn:hover { background: #d4ac0d; } .comments-section { margin-top: 1rem; } #comment-list { list-style: none; max-height: 150px; overflow-y: auto; margin-bottom: 0.5rem; padding: 0.5rem; border: 1px solid #ccc; background: #fff; color: #333; } #comment-list li { margin-bottom: 0.5rem; border-bottom: 1px solid #ccc; padding-bottom: 0.5rem; } #comment-input { width: 100%; resize: none; height: 60px; margin-bottom: 0.5rem; } #comment-submit-btn { background: #3498db; color: #fff; border: none; padding: 0.5rem 1rem; cursor: pointer; font-weight: bold; border-radius: 4px; transition: background 0.3s; } #comment-submit-btn:hover { background: #2d80b8; }