Интеграция baguetteBox.js для просмотра изображений во вспывающем окне

This commit is contained in:
2025-04-05 14:47:40 +07:00
parent ac2bedac72
commit 512520dad4
4 changed files with 218 additions and 13 deletions

View File

@@ -1,4 +1,5 @@
@import "../themes/tabi/sass/main.scss";
@import "./baguetteBox.scss";
// main.scss
@@ -34,20 +35,12 @@ article {
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 4fr));
grid-auto-rows: auto;
grid-auto-flow: dense;
gap: 18px;
margin-top: 4vmin;
padding: 20px 0;
}
.gallery img {
border-radius: 1rem;
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
transition: transform 200ms ease;
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
cursor: zoom-in;
}
.gallery img:hover {