Galleries/PythonGallery
1
0
Fork 0
mirror of https://github.com/Derpy-Leggies/OnlyLegs.git synced 2025-06-29 19:46:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update to reccommended file structure

Browse source 
Use reccommended database structure
Switch to SQLite and update scheme along with it
This commit is contained in:
Michał Gdula 2023-01-10 12:39:29 +00:00
parent 29d204f95e
commit a499e6c840
41 changed files with 544 additions and 342 deletions
Download patch file Download diff file Expand all files Collapse all files

283
gallery/user/themes/default/style.scss Normal file
View file

@ -0,0 +1,283 @@
@import 'variables/variables';
@import 'variables/fonts';
@import 'ui/reset';
@import 'ui/nav';
@import 'ui/main';
@import 'buttons/btn';
@import 'buttons/up';
.app {
margin: 0 0 0 3.5rem;
padding: 0.5rem;
width: auto;
min-height: 100vh;
position: relative;
display: flex;
flex-direction: column;
gap: 1rem;
background-color: $black100;
color: $white100;
box-sizing: border-box;
z-index: 1;
overflow: unset;
h1 {
margin: 0;
padding: 0;
font-family: $font-header;
font-size: 2.5rem;
font-stretch: ultra-expanded;
font-weight: 600;
color: $green;
}
}
@keyframes imgLoading {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.err-warning {
min-height: 60vh;
gap: 0;
h1 {
margin: 0 auto;
padding: 0;
font-family: $font-header;
font-size: 5rem;
font-weight: 900;
line-height: 1;
color: $green;
}
p {
margin: 0 auto;
padding: 0;
font-family: $font-body;
font-size: 2rem;
font-weight: 600;
line-height: 1;
color: $white100;
}
}
.gallery {
margin: 0;
padding: 0;
width: 100%;
display: grid;
grid-template-columns: auto auto auto auto auto auto;
gap: 0.5rem;
.gallery__item {
margin: 0;
padding: 0;
height: auto;
position: relative;
background: linear-gradient(-45deg, $black100, $black400 40%, $black100);
background-size: 400% 400%;
border-radius: $rad;
animation: imgLoading 10s ease infinite;
box-sizing: border-box;
overflow: hidden;
&:after {
content: "";
display: block;
padding-bottom: 100%;
}
.gallery__item-info {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
position: absolute;
left: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
background-image: linear-gradient(to bottom, #00000000, rgba($black100, 0.8));
z-index: +1;
opacity: 0; // hide
transform: scale(1.05); // scale up
transition: all 0.5s cubic-bezier(.79, .14, .15, .86);
h2 {
margin: 0;
padding: 0 1rem 0.5rem;
font-family: $font-header;
font-size: 1rem;
font-stretch: ultra-expanded;
font-weight: 600;
color: $green;
text-overflow: ellipsis;
overflow: hidden;
opacity: 0; // hide
transition: all 0.2s ease-in-out;
}
p {
margin: 0;
padding: 0 1rem 0.5rem;
font-family: $font-body;
font-size: 0.8rem;
font-weight: 500;
color: $white100;
text-overflow: ellipsis;
overflow: hidden;
opacity: 0; // hide
transition: all 0.2s ease-in-out;
}
&:hover {
opacity: 1;
transform: scale(1);
h2,
p {
opacity: 1;
}
}
}
.gallery__item-image {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
object-position: center;
border-radius: $rad;
}
}
}
.image__container {
margin: 0;
padding: 0;
width: 100%;
height: auto;
position: sticky;
top: 0;
display: flex;
overflow: hidden;
border-radius: $rad;
box-sizing: border-box;
img {
margin: auto;
padding: 0;
max-width: 100%;
max-height: 75vh;
object-fit: contain;
object-position: center;
border-radius: $rad;
}
}
.image__info {
margin: 0;
padding: 0;
width: 100%;
display: flex;
flex-direction: column;
background-color: $black200;
border-radius: calc($rad / 2);
box-sizing: border-box;
h2 {
margin: 0;
padding: 0 1rem 0.5rem;
font-family: $font-header;
font-size: 1rem;
font-stretch: ultra-expanded;
font-weight: 600;
color: $green;
text-overflow: ellipsis;
overflow: hidden;
}
p {
margin: 0;
padding: 0 1rem 0.5rem;
font-family: $font-body;
font-size: 0.8rem;
font-weight: 500;
color: $white100;
text-overflow: ellipsis;
overflow: hidden;
}
}