World shittest gallery implementation 😳

This commit is contained in:
Michał Gdula 2022-09-23 23:02:59 +00:00
parent 6d3012a4f7
commit e19bab45cd
7 changed files with 273 additions and 19 deletions

View file

@ -622,6 +622,56 @@ nav .btn {
outline: #8C977D solid 0.3rem;
}
.group-name {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
transition: opacity 0.1s cubic-bezier(0.19, 1, 0.22, 1);
z-index: 6;
opacity: 0;
font-size: 17px;
}
.group-name h1,
.group-name h2,
.group-name h3,
.group-name h4,
.group-name h5 {
font-family: "Lexend Deca", sans-serif;
text-rendering: optimizeLegibility;
}
.group-name p,
.group-name a,
.group-name button,
.group-name input {
font-family: "Secular One", sans-serif;
text-rendering: optimizeLegibility;
}
.gallery-group {
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
z-index: 5;
}
.group-item:hover .gallery-group {
-webkit-backdrop-filter: brightness(0.5);
backdrop-filter: brightness(0.5);
}
.group-item:hover .nsfw-warning > * {
display: none;
}
.group-item:hover .group-name {
opacity: 1;
}
/*
|-------------------------------------------------------------
| profile

View file

@ -412,7 +412,48 @@
.selectedImage {
outline: $page-accent solid 0.3rem;
}
.group-name {
@include defaultFont();
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
transition: opacity 0.1s cubic-bezier(.19, 1, .22, 1);
z-index: 6;
opacity: 0;
font-size: 17px;
}
.gallery-group {
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
z-index: 5;
}
.group-item:hover {
& .gallery-group {
backdrop-filter: brightness(0.5);
}
& .nsfw-warning > * {
display: none;
}
}
.group-item:hover .group-name {
opacity: 1;
}
/*
|-------------------------------------------------------------
| profile