mirror of
https://github.com/Fluffy-Bean/image-gallery.git
synced 2024-12-28 18:36:22 +00:00
183 lines
3.2 KiB
SCSS
183 lines
3.2 KiB
SCSS
/*
|
|
|-------------------------------------------------------------
|
|
| 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;
|
|
}
|
|
}
|