mirror of
https://github.com/Alexander-D-Karpov/about.git
synced 2026-03-16 22:06:08 +03:00
124 lines
2.3 KiB
CSS
124 lines
2.3 KiB
CSS
.photos-section .plugin-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.plugin-header-link {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--muted);
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.plugin-header-link:hover {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.photos-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.photos-card {
|
|
display: block;
|
|
position: relative;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--edge-0);
|
|
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.photos-card:hover {
|
|
transform: translateY(-2px);
|
|
border-color: var(--edge-1);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.photos-cover {
|
|
aspect-ratio: 1;
|
|
width: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: var(--bg-3);
|
|
}
|
|
|
|
.photos-preview-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-rows: repeat(2, 1fr);
|
|
width: 100%;
|
|
height: 100%;
|
|
gap: 2px;
|
|
}
|
|
|
|
.photos-preview-item {
|
|
overflow: hidden;
|
|
background: var(--bg-3);
|
|
}
|
|
|
|
.photos-preview-item img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.photos-card:hover .photos-preview-item img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.photos-no-preview {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.photos-badge {
|
|
position: absolute;
|
|
bottom: 6px;
|
|
right: 6px;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
backdrop-filter: blur(4px);
|
|
color: white;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
padding: 3px 8px;
|
|
border-radius: 4px;
|
|
font-family: var(--mono);
|
|
}
|
|
|
|
.photos-info {
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.photos-name {
|
|
display: block;
|
|
color: var(--ink);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.photos-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 10px;
|
|
}
|
|
|
|
.photos-info {
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.photos-name {
|
|
font-size: 12px;
|
|
}
|
|
} |