mirror of
https://github.com/Fluffy-Bean/image-gallery.git
synced 2025-05-27 13:53:13 +00:00
Sass progress
This commit is contained in:
parent
4007f47e49
commit
302fe6c15e
9 changed files with 296 additions and 93 deletions
203
css/main.css
203
css/main.css
|
|
@ -25,8 +25,9 @@
|
|||
}
|
||||
|
||||
nav {
|
||||
width: calc(100% - 2.4rem);
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0;
|
||||
|
|
@ -46,6 +47,10 @@ nav {
|
|||
align-items: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
nav > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
nav p {
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
|
|
@ -55,6 +60,9 @@ nav hr {
|
|||
padding: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
nav .btn {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.nav-name {
|
||||
display: flex;
|
||||
|
|
@ -72,6 +80,7 @@ nav hr {
|
|||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
margin: 0;
|
||||
font-family: "Secular One", sans-serif;
|
||||
width: auto;
|
||||
}
|
||||
|
|
@ -93,7 +102,7 @@ nav hr {
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #151515;
|
||||
background-color: rgba(21, 21, 21, 0.7333333333);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
backdrop-filter: blur(8px);
|
||||
border: none;
|
||||
|
|
@ -109,7 +118,7 @@ nav hr {
|
|||
text-align: left !important;
|
||||
}
|
||||
footer {
|
||||
margin-bottom: calc(5rem + 3px) !important;
|
||||
margin-bottom: 4rem !important;
|
||||
}
|
||||
#back-to-top {
|
||||
bottom: 5rem !important;
|
||||
|
|
@ -121,13 +130,19 @@ nav hr {
|
|||
|-------------------------------------------------------------
|
||||
*/
|
||||
.info-text {
|
||||
margin: 1rem 0;
|
||||
margin: 1rem 0 1rem 0.5rem;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.info-text h1, .info-text h2, .info-text h3, .info-text h4, .info-text h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
}
|
||||
.info-text p, .info-text a, .info-text button, .info-text input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
}
|
||||
.info-text h1 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
margin-top: 0.5rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.info-text p {
|
||||
|
|
@ -137,6 +152,7 @@ nav hr {
|
|||
}
|
||||
|
||||
.gallery-root {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.25rem;
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
|
|
@ -199,7 +215,7 @@ nav hr {
|
|||
max-height: 69vh;
|
||||
height: auto;
|
||||
display: flex;
|
||||
background-color: #151515;
|
||||
background-color: rgba(21, 21, 21, 0.7333333333);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: 0;
|
||||
|
|
@ -208,7 +224,7 @@ nav hr {
|
|||
|
||||
@media (max-width: 600px) {
|
||||
.image-container {
|
||||
max-height: 42vh !important;
|
||||
max-height: 42vh;
|
||||
}
|
||||
}
|
||||
.image {
|
||||
|
|
@ -220,9 +236,130 @@ nav hr {
|
|||
border-radius: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
width: calc(100% - 2.4rem);
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| DESCRIPTION
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.image-description {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||
}
|
||||
.image-description > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.image-description h1, .image-description h2, .image-description h3, .image-description h4, .image-description h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
}
|
||||
.image-description p, .image-description a, .image-description button, .image-description input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| DETAILS
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.image-detail {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||
}
|
||||
.image-detail > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.image-detail h1, .image-detail h2, .image-detail h3, .image-detail h4, .image-detail h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
}
|
||||
.image-detail p, .image-detail a, .image-detail button, .image-detail input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| TAGS
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.tags-root {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||
}
|
||||
.tags-root > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.tags-root h1, .tags-root h2, .tags-root h3, .tags-root h4, .tags-root h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
}
|
||||
.tags-root p, .tags-root a, .tags-root button, .tags-root input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: auto;
|
||||
}
|
||||
|
||||
.tag {
|
||||
margin: 0.25rem;
|
||||
padding: 0.5rem;
|
||||
display: block;
|
||||
background-color: #8C977D;
|
||||
border-radius: 0;
|
||||
font-family: "Secular One", sans-serif;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| DANGER ZONE
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.danger-zone {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0;
|
||||
border: 0.2rem solid #B66467;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||
}
|
||||
.danger-zone > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.danger-zone h1, .danger-zone h2, .danger-zone h3, .danger-zone h4, .danger-zone h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
}
|
||||
.danger-zone p, .danger-zone a, .danger-zone button, .danger-zone input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0;
|
||||
|
|
@ -232,10 +369,14 @@ footer {
|
|||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
margin: 0 auto !important;
|
||||
margin: 0 auto;
|
||||
bottom: 0;
|
||||
width: calc(100% - 1.4rem);
|
||||
}
|
||||
footer > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
footer a {
|
||||
margin: 0.5rem;
|
||||
text-decoration: none;
|
||||
|
|
@ -287,10 +428,14 @@ body * {
|
|||
*/
|
||||
.btn {
|
||||
padding: 0.5rem;
|
||||
width: 100%;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
font-family: "Secular One", sans-serif;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
|
|
@ -319,44 +464,34 @@ body * {
|
|||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
.btn a {
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
|
||||
.btn-good {
|
||||
background-color: #8C977D;
|
||||
}
|
||||
|
||||
.btn-bad {
|
||||
background-color: #B66467;
|
||||
}
|
||||
|
||||
.btn-neutral {
|
||||
background-color: #151515;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| FORM
|
||||
| FORM SIZING
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
form {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
form * {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| IMAGES
|
||||
| SVG
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.image-container {
|
||||
width: 100%;
|
||||
max-height: 69vh;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-color: rgba(21, 21, 21, 0.7333333333);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: 0;
|
||||
transition: max-height 0.15s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
|
||||
.svg {
|
||||
margin: 0 0.2rem 0.1rem 0;
|
||||
width: 19px;
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["main.scss","scss/_variables.scss","main.css","scss/_navigation.scss","scss/_mixin.scss","scss/_body.scss","scss/_footer.scss"],"names":[],"mappings":"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","file":"main.css"}
|
||||
{"version":3,"sources":["main.scss","scss/_variables.scss","main.css","scss/_navigation.scss","scss/_mixin.scss","scss/_body.scss","scss/_footer.scss"],"names":[],"mappings":"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","file":"main.css"}
|
||||
|
|
@ -63,12 +63,17 @@ body {
|
|||
.btn {
|
||||
padding: 0.5rem;
|
||||
|
||||
width: 100%;
|
||||
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
font-family: $font-body;
|
||||
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
|
||||
border: none;
|
||||
border-radius: $rad;
|
||||
|
|
@ -95,47 +100,32 @@ body {
|
|||
border: none;
|
||||
border-radius: $rad;
|
||||
}
|
||||
|
||||
a {
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.btn-good {
|
||||
background-color: $green;
|
||||
}
|
||||
.btn-bad {
|
||||
background-color: $red;
|
||||
}
|
||||
.btn-neutral {
|
||||
background-color: $black;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| FORM
|
||||
| FORM SIZING
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
form {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
* {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| IMAGES
|
||||
| SVG
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.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;
|
||||
|
||||
|
|
@ -179,4 +169,4 @@ form {
|
|||
|
||||
object-position: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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,7 +2,7 @@ footer {
|
|||
@include defaultDecoration($page-accent);
|
||||
@include flexLeft(space-around);
|
||||
|
||||
margin: 0 auto !important;
|
||||
margin: 0 auto;
|
||||
|
||||
bottom: 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue