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

Sass progress

Browse source
This commit is contained in:
Michał Gdula 2022-08-12 11:28:19 +00:00
parent 4007f47e49
commit 302fe6c15e
9 changed files with 296 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

71
css/scss/_body.scss
View file

@ -4,14 +4,16 @@
|-------------------------------------------------------------
*/
.info-text {
margin: 1rem 0; padding: 0;
@include defaultFont();
margin: 1rem 0 1rem 0.5rem; padding: 0;
text-align: center;
h1 {
font-family: $font-header;
margin-top: 0.5rem;
margin-top: 0;
margin-bottom: 1rem;
}
p {
@ -23,7 +25,7 @@
}
.gallery-root {
padding: 0.25rem;
margin-bottom: 1rem; padding: 0.25rem;
background-color: $bg; color: $fg;
@ -93,7 +95,7 @@
display: flex;
background-color: $bg;
background-color: $bg-alt;
backdrop-filter: blur(8px);
border-radius: $rad;
@ -103,10 +105,10 @@
@media (max-width: 600px) {
.image-container {
max-height: 42vh !important;
max-height: 42vh;
}
}
.image {
margin: 0 auto;
@ -114,4 +116,59 @@
max-height: inherit; height: auto;
border-radius: $rad;
}
}
/*
|-------------------------------------------------------------
| DESCRIPTION
|-------------------------------------------------------------
*/
.image-description {
@include defaultDecoration($green);
@include defaultFont();
}
/*
|-------------------------------------------------------------
| DETAILS
|-------------------------------------------------------------
*/
.image-detail {
@include defaultDecoration($green);
@include defaultFont();
}
/*
|-------------------------------------------------------------
| TAGS
|-------------------------------------------------------------
*/
.tags-root {
@include defaultDecoration($green);
@include defaultFont();
}
.tags {
@include flexLeft(auto);
}
.tag {
margin: 0.25rem; padding: 0.5rem;
display: block;
background-color: $page-accent;
border-radius: $rad;
font-family: $font-body;
}
/*
|-------------------------------------------------------------
| DANGER ZONE
|-------------------------------------------------------------
*/
.danger-zone {
@include defaultDecoration($red);
@include defaultFont();
}

2
css/scss/_footer.scss
View file

@ -2,7 +2,7 @@ footer {
@include defaultDecoration($page-accent);
@include flexLeft(space-around);
margin: 0 auto !important;
margin: 0 auto;
bottom: 0;

21
css/scss/_mixin.scss
View file

@ -1,15 +1,28 @@
@mixin defaultDecoration($border) {
width: calc(100% - 2.4rem);
padding: 0.5rem;
margin-bottom: 1rem; padding: 0.5rem;
width: calc(100% - 1.4rem);
background-color: $bg; color: $fg;
border-radius: $rad;
border: 0.2rem solid $border;
box-shadow: $shadow;
>* {
margin-top: 0; margin-bottom: 0.5rem;
}
}
@mixin defaultFont() {
h1, h2, h3, h4, h5 {
font-family: $font-header;
}
p, a, button, input {
font-family: $font-body;
}
}
@mixin flexDown($justify) {

9
css/scss/_navigation.scss
View file

@ -20,6 +20,9 @@ nav {
margin: 0.5rem 0.2rem; padding: 0;
opacity: 0;
}
.btn {
width: auto;
}
}
.nav-name {
@ -36,6 +39,8 @@ nav {
.nav-links {
@include flexLeft(space-around);
margin: 0;
font-family: $font-body;
width: auto;
@ -59,7 +64,7 @@ nav {
position: fixed;
top: auto; bottom: 0; left: 0; right: 0;
background-color: $bg;
background-color: $bg-alt;
backdrop-filter: blur(8px);
border: none;
@ -76,7 +81,7 @@ nav {
text-align: left !important;
}
footer {
margin-bottom: calc(5rem + 3px) !important;
margin-bottom: 4rem !important;
}
#back-to-top {
bottom: 5rem !important;