84 lines
1.7 KiB
CSS
84 lines
1.7 KiB
CSS
.project-btn-wrapper {
|
|
padding-top: 20px;
|
|
padding-bottom: 35px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: start;
|
|
gap: 15px;
|
|
}
|
|
|
|
.project-btn {
|
|
padding-left: 15px !important;
|
|
padding-right: 15px !important;
|
|
font-size: 12px !important;
|
|
line-height: 40px !important;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
/* Style for active button state */
|
|
.project-btn.active {
|
|
border-radius: 8px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* Button hover effect */
|
|
.project-btn:hover {
|
|
transform: translateY(-2px);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
/* Add transition to the buttons */
|
|
.btn-one {
|
|
transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
|
|
}
|
|
|
|
/* Projects grid container */
|
|
#projects-grid-wrapper {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
/* Project item styling */
|
|
.project-item {
|
|
transition: opacity 0.4s ease, transform 0.4s ease;
|
|
}
|
|
|
|
/* THIS IS THE KEY CHANGE: Hidden items are completely removed from layout flow */
|
|
.project-item.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* Visible items */
|
|
.project-item:not(.hidden) {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
animation: fadeIn 0.5s ease forwards;
|
|
}
|
|
|
|
/* Animation for items appearing */
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* Responsive grid adjustments */
|
|
@media (max-width: 992px) {
|
|
#projects-grid-wrapper {
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
#projects-grid-wrapper {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|