Galleries/PHPGallery
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/image-gallery.git synced 2025-05-28 06:13:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Something something switching to sass

Browse source
This commit is contained in:
Michał Gdula 2022-08-11 18:28:52 +00:00
parent 85afe70daa
commit 4007f47e49
13 changed files with 991 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

182
css/main.scss Normal file
View file

@ -0,0 +1,182 @@
/*
|-------------------------------------------------------------
| Sass stylesheet
|-------------------------------------------------------------
| This is all written by me! Fluffy! This is intended to be
| compiled before use, I want to make this autocompile for
| ease of use, but you may suffer along with me for now :3
|-------------------------------------------------------------
*/
@import "scss/mixin";
@import "scss/variables";
@import "scss/navigation";
@import "scss/body";
@import "scss/footer";
/*
|-------------------------------------------------------------
| BODY COMPONENTS
|-------------------------------------------------------------
*/
html {
margin: 0; padding: 0;
min-height: 100vh; max-width: 100vw;
position: relative;
background-color: $bg;
background-image: url("../assets/bg.svg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
scroll-behavior: smooth;
overflow: auto;
}
body {
margin: 0 auto; padding: 1rem;
max-width: 1000px;
min-height: calc(100vh - 2rem);
@include flexDown(space-between);
position: relative;
* {
color: $fg;
}
}
/*
|-------------------------------------------------------------
| BUTTONS
|-------------------------------------------------------------
*/
.btn {
padding: 0.5rem;
display: block;
font-size: 16px;
font-weight: 500;
text-decoration: none;
border: none;
border-radius: $rad;
transition: outline 0.1s cubic-bezier(.19,1,.22,1);
&:hover {
outline: $white 3px solid;
color: $fg;
}
&:where(input[type="file"])::file-selector-button {
margin: -0.5rem 0.5rem -0.5rem -0.5rem;
padding: 0.5rem;
display: inline-block;
font-size: 16px;
text-decoration: none;
background-color: $white;
border: none;
border-radius: $rad;
}
a {
margin-bottom: 0;
text-align: center;
}
}
/*
|-------------------------------------------------------------
| FORM
|-------------------------------------------------------------
*/
form {
width: 100%;
box-sizing: border-box;
* {
width: 100%;
box-sizing: border-box;
}
}
/*
|-------------------------------------------------------------
| IMAGES
|-------------------------------------------------------------
*/
.image-container {
width: 100%;
max-height: 69vh; height: auto;
@include flexDown(space-between);
background-color: $bg-alt;
backdrop-filter: blur(8px);
border-radius: $rad;
transition: max-height 0.15s cubic-bezier(.19,1,.22,1);
}
.svg {
margin: 0 0.2rem 0.1rem 0;
width: 19px; height: 18px;
vertical-align: middle;
display: inline;
}
/*
|-------------------------------------------------------------
| BACK TO TOP
|-------------------------------------------------------------
*/
#back-to-top {
margin: 0; padding: 0.5rem;
position: fixed; z-index: 99;
right: -2.5rem; bottom: 1rem;
object-position: center;
background-color: $bg;
backdrop-filter: blur(8px);
border-radius: 50%;
box-shadow: $shadow;
transition: right 0.15s cubic-bezier(.19,1,.22,1);
&:hover {
outline: 0.2rem solid $green;
}
* {
margin: 0; padding: 0;
width: 1.5rem; height: 1.5rem;
display: block;
object-position: center;
}
}