Update site data and add photos lightbox

This commit is contained in:
2024-06-24 00:17:35 +01:00
parent 010e8b2485
commit fca4eb190e
17 changed files with 81 additions and 136 deletions

View File

@@ -679,7 +679,7 @@ main {
pointer-events: all;
}
.testimonials-modal {
.modal {
background: var(--eerie-black-2);
position: relative;
padding: 15px;
@@ -693,11 +693,31 @@ main {
z-index: 2;
}
.modal-container.active .testimonials-modal {
.modal-container.active .modal {
transform: scale(1);
opacity: 1;
}
.photos-modal {
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-direction: column;
gap: 25px;
padding: 30px;
border-radius: 20px;
height: 100%;
width: 100%;
}
.photos-modal .modal-img {
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 100%;
width: 100%;
}
.modal-close-btn {
position: absolute;
top: 15px;
@@ -975,7 +995,10 @@ main {
100% { transform: scale(1); }
}
.select-grid-item > a { width: 100%; }
.select-grid-item > a, .select-grid-item > div {
width: 100%;
cursor: pointer;
}
.select-grid-item-img {
position: relative;
@@ -998,7 +1021,7 @@ main {
transition: var(--transition-1);
}
.select-grid-item > a:hover .select-grid-item-img::before { background: hsla(0, 0%, 0%, 0.5); }
.select-grid-item > a:hover .select-grid-item-img::before, .select-grid-item > div:hover .select-grid-item-img::before { background: hsla(0, 0%, 0%, 0.5); }
.select-grid-item-icon-box {
--scale: 0.8;
@@ -1017,7 +1040,7 @@ main {
transition: var(--transition-1);
}
.select-grid-item > a:hover .select-grid-item-icon-box {
.select-grid-item > a:hover .select-grid-item-icon-box, .select-grid-item > div:hover .select-grid-item-icon-box {
--scale: 1;
opacity: 1;
}
@@ -1031,7 +1054,7 @@ main {
transition: var(--transition-1);
}
.select-grid-item > a:hover img { transform: scale(1.1); }
.select-grid-item > a:hover img, .select-grid-item > div:hover img { transform: scale(1.1); }
.select-grid-item-title,
.select-grid-item-description { margin-left: 10px; }
@@ -1066,93 +1089,6 @@ main {
}
/*-----------------------------------*\
#BLOG
\*-----------------------------------*/
.blog-posts { margin-bottom: 10px; }
.blog-posts-list {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.blog-post-item > a {
position: relative;
background: var(--border-gradient-onyx);
height: 100%;
box-shadow: var(--shadow-4);
border-radius: 16px;
z-index: 1;
}
.blog-post-item > a::before {
content: "";
position: absolute;
inset: 1px;
border-radius: inherit;
background: var(--eerie-black-1);
z-index: -1;
}
.blog-banner-box {
width: 100%;
height: 200px;
border-radius: 12px;
overflow: hidden;
}
.blog-banner-box img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-1);
}
.blog-post-item > a:hover .blog-banner-box img { transform: scale(1.1); }
.blog-content { padding: 15px; }
.blog-meta {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 7px;
margin-bottom: 10px;
}
.blog-meta :is(.blog-category, time) {
color: var(--light-gray-70);
font-size: var(--fs-6);
font-weight: var(--fw-300);
}
.blog-meta .dot {
background: var(--light-gray-70);
width: 4px;
height: 4px;
border-radius: 4px;
}
.blog-item-title {
margin-bottom: 10px;
line-height: 1.3;
transition: var(--transition-1);
}
.blog-post-item > a:hover .blog-item-title { color: var(--secondary-color); }
.blog-text {
color: var(--light-gray);
font-size: var(--fs-6);
font-weight: var(--fw-300);
line-height: 1.6;
}
/*-----------------------------------*\
#CONTACT
@@ -1784,14 +1720,6 @@ textarea.form-input::-webkit-resizer { display: none; }
.select-grid-list { grid-template-columns: repeat(3, 1fr); }
/**
* BLOG
*/
.blog-banner-box { height: 230px; }
}