mirror of
https://github.com/Fluffy-Bean/image-gallery.git
synced 2025-05-28 14:23:11 +00:00
Finishing up with switching to SASS
This commit is contained in:
parent
302fe6c15e
commit
2ff9d356b2
18 changed files with 828 additions and 1026 deletions
|
|
@ -1,20 +0,0 @@
|
|||
/*
|
||||
-=-=-= FOOTER =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
||||
*/
|
||||
footer {
|
||||
margin: 0; padding: 0.5rem;
|
||||
|
||||
width: calc(100vh - 2rem));
|
||||
|
||||
background-color: var(--bg-3); color: var(--fg);
|
||||
|
||||
border: 0.2rem solid var(--green);
|
||||
/*outline: 0.5rem solid var(--bg);*/
|
||||
|
||||
border-radius: var(--rad);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
footer a {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
351
css/main.css
351
css/main.css
|
|
@ -12,25 +12,27 @@
|
|||
--bg-1: #242621;
|
||||
--bg-2: #1D1E1C;
|
||||
--bg-3: #151515;
|
||||
--fg:#E8E3E3;
|
||||
--fg: #E8E3E3;
|
||||
--fg-dark: #151515;
|
||||
--red: #B66467;
|
||||
--orange: #FF7700;
|
||||
--green: #8C977D;
|
||||
--black: #151515;
|
||||
--white: #E8E3E3;
|
||||
--shadow: 6px 6px 2px #15151588;
|
||||
--rad: 0px;
|
||||
--square: 33.33%;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| NAVIGATION BAR
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
nav {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0;
|
||||
border-radius: 0rem;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||
display: flex;
|
||||
|
|
@ -111,6 +113,10 @@ nav .btn {
|
|||
-webkit-backdrop-filter: blur(16px);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
nav .svg {
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
.nav-hide {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -134,10 +140,17 @@ nav .btn {
|
|||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.info-text h1, .info-text h2, .info-text h3, .info-text h4, .info-text h5 {
|
||||
.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 {
|
||||
.info-text p,
|
||||
.info-text a,
|
||||
.info-text button,
|
||||
.info-text input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
}
|
||||
.info-text h1 {
|
||||
|
|
@ -160,7 +173,7 @@ nav .btn {
|
|||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
border: 0.2rem solid #8C977D;
|
||||
border-radius: 0;
|
||||
border-radius: 0rem;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||
}
|
||||
|
||||
|
|
@ -170,7 +183,7 @@ nav .btn {
|
|||
height: auto;
|
||||
max-width: calc(33.33% - 0.5rem);
|
||||
background-color: #151515;
|
||||
border-radius: 0;
|
||||
border-radius: -0.5rem;
|
||||
position: relative;
|
||||
flex: 1 0 150px;
|
||||
transition: transform 0.15s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
|
|
@ -178,7 +191,7 @@ nav .btn {
|
|||
.gallery-item:hover {
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||
z-index: 999;
|
||||
z-index: 9;
|
||||
}
|
||||
.gallery-item:after {
|
||||
content: "";
|
||||
|
|
@ -200,7 +213,7 @@ nav .btn {
|
|||
object-fit: cover;
|
||||
-o-object-position: center;
|
||||
object-position: center;
|
||||
border-radius: 0;
|
||||
border-radius: -0.5rem;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -218,7 +231,7 @@ nav .btn {
|
|||
background-color: rgba(21, 21, 21, 0.7333333333);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: 0;
|
||||
border-radius: 0rem;
|
||||
transition: max-height 0.15s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
|
||||
|
|
@ -233,21 +246,16 @@ nav .btn {
|
|||
width: auto;
|
||||
max-height: inherit;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
border-radius: 0rem;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| DESCRIPTION
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.image-description {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0;
|
||||
border-radius: 0rem;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||
}
|
||||
|
|
@ -255,25 +263,27 @@ nav .btn {
|
|||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.image-description h1, .image-description h2, .image-description h3, .image-description h4, .image-description h5 {
|
||||
.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 {
|
||||
.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-radius: 0rem;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||
}
|
||||
|
|
@ -281,25 +291,27 @@ nav .btn {
|
|||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.image-detail h1, .image-detail h2, .image-detail h3, .image-detail h4, .image-detail h5 {
|
||||
.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 {
|
||||
.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-radius: 0rem;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||
}
|
||||
|
|
@ -307,10 +319,17 @@ nav .btn {
|
|||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.tags-root h1, .tags-root h2, .tags-root h3, .tags-root h4, .tags-root h5 {
|
||||
.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 {
|
||||
.tags-root p,
|
||||
.tags-root a,
|
||||
.tags-root button,
|
||||
.tags-root input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
}
|
||||
|
||||
|
|
@ -326,22 +345,17 @@ nav .btn {
|
|||
padding: 0.5rem;
|
||||
display: block;
|
||||
background-color: #8C977D;
|
||||
border-radius: 0;
|
||||
border-radius: 0rem;
|
||||
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-radius: 0rem;
|
||||
border: 0.2rem solid #B66467;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||
}
|
||||
|
|
@ -349,20 +363,235 @@ nav .btn {
|
|||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.danger-zone h1, .danger-zone h2, .danger-zone h3, .danger-zone h4, .danger-zone h5 {
|
||||
.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 {
|
||||
.danger-zone p,
|
||||
.danger-zone a,
|
||||
.danger-zone button,
|
||||
.danger-zone input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| ABOUT
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.about-root {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0rem;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||
}
|
||||
.about-root > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.about-root h1,
|
||||
.about-root h2,
|
||||
.about-root h3,
|
||||
.about-root h4,
|
||||
.about-root h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
}
|
||||
.about-root p,
|
||||
.about-root a,
|
||||
.about-root button,
|
||||
.about-root input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| UPLOAD
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.upload-root {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0rem;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||
}
|
||||
.upload-root > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.upload-root h1,
|
||||
.upload-root h2,
|
||||
.upload-root h3,
|
||||
.upload-root h4,
|
||||
.upload-root h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
}
|
||||
.upload-root p,
|
||||
.upload-root a,
|
||||
.upload-root button,
|
||||
.upload-root input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| ACCOUNT
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.account-root {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0rem;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||
}
|
||||
.account-root > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.account-root h1,
|
||||
.account-root h2,
|
||||
.account-root h3,
|
||||
.account-root h4,
|
||||
.account-root h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
}
|
||||
.account-root p,
|
||||
.account-root a,
|
||||
.account-root button,
|
||||
.account-root input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
}
|
||||
.account-root p:first-of-type {
|
||||
padding: 0.5rem;
|
||||
background-color: #151515;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| SIGNUP
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.signup-root {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0rem;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||
}
|
||||
.signup-root > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.signup-root h1,
|
||||
.signup-root h2,
|
||||
.signup-root h3,
|
||||
.signup-root h4,
|
||||
.signup-root h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
}
|
||||
.signup-root p,
|
||||
.signup-root a,
|
||||
.signup-root button,
|
||||
.signup-root input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| LOGIN
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.login-root {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0rem;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||
}
|
||||
.login-root > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.login-root h1,
|
||||
.login-root h2,
|
||||
.login-root h3,
|
||||
.login-root h4,
|
||||
.login-root h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
}
|
||||
.login-root p,
|
||||
.login-root a,
|
||||
.login-root button,
|
||||
.login-root input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| PASSWORD RESET
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.password-reset-root {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0rem;
|
||||
border: 0.2rem solid #B66467;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||
}
|
||||
.password-reset-root > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.password-reset-root h1,
|
||||
.password-reset-root h2,
|
||||
.password-reset-root h3,
|
||||
.password-reset-root h4,
|
||||
.password-reset-root h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
}
|
||||
.password-reset-root p,
|
||||
.password-reset-root a,
|
||||
.password-reset-root button,
|
||||
.password-reset-root input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| FOOTER
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
footer {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0;
|
||||
border-radius: 0rem;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||
display: flex;
|
||||
|
|
@ -435,9 +664,8 @@ body * {
|
|||
font-weight: 500;
|
||||
font-family: "Secular One", sans-serif;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
border-radius: calc(0rem - (0.5rem + 3px));
|
||||
transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
.btn:hover {
|
||||
|
|
@ -445,24 +673,28 @@ body * {
|
|||
color: #E8E3E3;
|
||||
}
|
||||
.btn:where(input[type=file])::-webkit-file-upload-button {
|
||||
margin: -0.5rem 0.5rem -0.5rem -0.5rem;
|
||||
margin: -0.25rem 0.5rem -0.25rem -0.25rem;
|
||||
padding: 0.5rem;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
background-color: #E8E3E3;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
border-radius: 0rem;
|
||||
}
|
||||
.btn:where(input[type=file])::file-selector-button {
|
||||
margin: -0.5rem 0.5rem -0.5rem -0.5rem;
|
||||
margin: -0.25rem 0.5rem -0.25rem -0.25rem;
|
||||
padding: 0.5rem;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
background-color: #E8E3E3;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
border-radius: 0rem;
|
||||
}
|
||||
|
||||
a.btn {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-good {
|
||||
|
|
@ -486,6 +718,9 @@ form {
|
|||
width: 100%;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
form > * {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
|
|
@ -500,6 +735,16 @@ form {
|
|||
display: inline;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| BR / BREAK
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
br {
|
||||
margin: 0;
|
||||
line-height: 0.25rem;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| BACK TO TOP
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
198
css/main.scss
198
css/main.scss
|
|
@ -20,39 +20,42 @@
|
|||
|-------------------------------------------------------------
|
||||
*/
|
||||
html {
|
||||
margin: 0; padding: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
min-height: 100vh; max-width: 100vw;
|
||||
min-height: 100vh;
|
||||
max-width: 100vw;
|
||||
|
||||
position: relative;
|
||||
position: relative;
|
||||
|
||||
background-color: $bg;
|
||||
background-image: url("../assets/bg.svg");
|
||||
background-color: $bg;
|
||||
background-image: url("../assets/bg.svg");
|
||||
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
|
||||
scroll-behavior: smooth;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
overflow: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0 auto; padding: 1rem;
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
|
||||
max-width: 1000px;
|
||||
max-width: 1000px;
|
||||
|
||||
min-height: calc(100vh - 2rem);
|
||||
min-height: calc(100vh - 2rem);
|
||||
|
||||
@include flexDown(space-between);
|
||||
@include flexDown(space-between);
|
||||
|
||||
position: relative;
|
||||
position: relative;
|
||||
|
||||
* {
|
||||
color: $fg;
|
||||
}
|
||||
* {
|
||||
color: $fg;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -61,54 +64,60 @@ body {
|
|||
|-------------------------------------------------------------
|
||||
*/
|
||||
.btn {
|
||||
padding: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
font-family: $font-body;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
font-family: $font-body;
|
||||
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
|
||||
border: none;
|
||||
border-radius: $rad;
|
||||
border: none;
|
||||
border-radius: calc($rad - (0.5rem + 3px));
|
||||
|
||||
transition: outline 0.1s cubic-bezier(.19,1,.22,1);
|
||||
transition: outline 0.1s cubic-bezier(.19, 1, .22, 1);
|
||||
|
||||
&:hover {
|
||||
outline: $white 3px solid;
|
||||
color: $fg;
|
||||
}
|
||||
&: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;
|
||||
}
|
||||
&:where(input[type="file"])::file-selector-button {
|
||||
margin: -0.25rem 0.5rem -0.25rem -0.25rem;
|
||||
padding: 0.5rem;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
font-size: 16px;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
background-color: $white;
|
||||
|
||||
border: none;
|
||||
border-radius: $rad;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-good {
|
||||
background-color: $green;
|
||||
background-color: $green;
|
||||
}
|
||||
|
||||
.btn-bad {
|
||||
background-color: $red;
|
||||
background-color: $red;
|
||||
}
|
||||
|
||||
.btn-neutral {
|
||||
background-color: $black;
|
||||
background-color: $black;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -117,8 +126,12 @@ body {
|
|||
|-------------------------------------------------------------
|
||||
*/
|
||||
form {
|
||||
width: 100%;
|
||||
box-sizing: content-box;
|
||||
width: 100%;
|
||||
box-sizing: content-box;
|
||||
|
||||
>* {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -127,13 +140,25 @@ form {
|
|||
|-------------------------------------------------------------
|
||||
*/
|
||||
.svg {
|
||||
margin: 0 0.2rem 0.1rem 0;
|
||||
margin: 0 0.2rem 0.1rem 0;
|
||||
|
||||
width: 19px; height: 18px;
|
||||
width: 19px;
|
||||
height: 18px;
|
||||
|
||||
vertical-align: middle;
|
||||
vertical-align: middle;
|
||||
|
||||
display: inline;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| BR / BREAK
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
br {
|
||||
margin: 0;
|
||||
|
||||
line-height: 0.25rem;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -142,31 +167,36 @@ form {
|
|||
|-------------------------------------------------------------
|
||||
*/
|
||||
#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);
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
|
||||
&:hover {
|
||||
outline: 0.2rem solid $green;
|
||||
}
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
right: -2.5rem;
|
||||
bottom: 1rem;
|
||||
|
||||
* {
|
||||
margin: 0; padding: 0;
|
||||
width: 1.5rem; height: 1.5rem;
|
||||
|
||||
display: block;
|
||||
|
||||
object-position: center;
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
447
css/master.css
447
css/master.css
|
|
@ -1,447 +0,0 @@
|
|||
/*
|
||||
Normalize CSS
|
||||
|
||||
This ensures that the website looks the same across all devices
|
||||
and browsers, regardless if I waisted my time making a tag look
|
||||
good or not
|
||||
|
||||
@import "normalize.css";
|
||||
*/
|
||||
|
||||
|
||||
@import "nav.css";
|
||||
@import "footer.css";
|
||||
|
||||
:root {
|
||||
--bg: #151515bb;
|
||||
--bg-1: #242621;
|
||||
--bg-2: #1D1E1C;
|
||||
--bg-3: #151515;
|
||||
|
||||
--fg:#E8E3E3;
|
||||
--fg-dark: #151515;
|
||||
|
||||
--red: #B66467;
|
||||
--orange: #FF7700;
|
||||
--green: #8C977D;
|
||||
--black: #151515;
|
||||
--white: #E8E3E3;
|
||||
|
||||
--shadow: 6px 6px 2px #15151588;
|
||||
--rad: 0px;
|
||||
|
||||
--square: 33.33%;
|
||||
}
|
||||
|
||||
* {
|
||||
font-weight: 500;
|
||||
color: var(--fg);
|
||||
font-family: 'Secular One', sans-serif;
|
||||
}
|
||||
html {
|
||||
margin: 0; padding: 0;
|
||||
|
||||
min-height: 100vh; max-width: 100vw;
|
||||
|
||||
position: relative;
|
||||
|
||||
background-color: var(--bg-3);
|
||||
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;
|
||||
|
||||
min-height: calc(100vh - 2rem); max-width: 1000px;
|
||||
|
||||
display: flex;
|
||||
|
||||
position: relative;
|
||||
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/*
|
||||
-=-=-= BACK TO TOP BUTTON =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
||||
*/
|
||||
#back-to-top {
|
||||
margin: 0; padding: 0.5rem;
|
||||
|
||||
position: fixed; z-index: 99;
|
||||
right: -2.5rem; bottom: 1rem;
|
||||
|
||||
object-position: center;
|
||||
|
||||
background-color: var(--bg);
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
border-radius: 50%;
|
||||
box-shadow: var(--shadow);
|
||||
|
||||
transition: right 0.15s cubic-bezier(.19,1,.22,1);
|
||||
}
|
||||
#back-to-top:hover {
|
||||
outline: 0.2rem solid var(--green);
|
||||
}
|
||||
|
||||
#back-to-top * {
|
||||
margin: 0; padding: 0;
|
||||
width: 1.5rem; height: 1.5rem;
|
||||
|
||||
display: block;
|
||||
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
/*
|
||||
-=-=-= DIV DECORATIONS =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
||||
*/
|
||||
.default-window {
|
||||
margin: 0 0 1rem; padding: 0.5rem;
|
||||
|
||||
width: auto;
|
||||
|
||||
background-color: var(--bg-3);
|
||||
|
||||
/*outline: 0.5rem solid var(--bg);*/
|
||||
|
||||
border-radius: var(--rad);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.password-reset-root {
|
||||
border: 0.2rem solid var(--red);
|
||||
}
|
||||
.edit-root {
|
||||
border: 0.2rem solid var(--red);
|
||||
}
|
||||
|
||||
.upload-root {
|
||||
border: 0.2rem solid var(--green);
|
||||
}
|
||||
.signup-root {
|
||||
border: 0.2rem solid var(--green);
|
||||
}
|
||||
.account-root {
|
||||
border: 0.2rem solid var(--green);
|
||||
}
|
||||
.login-root {
|
||||
border: 0.2rem solid var(--green);
|
||||
}
|
||||
.about-root {
|
||||
border: 0.2rem solid var(--green);
|
||||
}
|
||||
|
||||
/*
|
||||
-=-=-= GALLERY =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
||||
*/
|
||||
.info-text {
|
||||
margin: 0 0 2rem;
|
||||
}
|
||||
|
||||
.gallery-root {
|
||||
margin: 0 0 2rem; padding: 0.25rem;
|
||||
|
||||
background-color: var(--bg-3); color: var(--fg);
|
||||
|
||||
border: 0.2rem solid var(--green);
|
||||
/*outline: 0.5rem solid var(--bg);*/
|
||||
|
||||
border-radius: var(--rad);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
margin: 0.25rem; padding: 0;
|
||||
|
||||
height: auto; max-width: calc(33.33% - 0.5rem); /*max-width: 350px;*/
|
||||
|
||||
background-color: var(--bg-2);
|
||||
border-radius: var(--rad);
|
||||
|
||||
position: relative;
|
||||
|
||||
flex: 1 0 150px;
|
||||
|
||||
transition: transform 0.15s cubic-bezier(.19,1,.22,1);
|
||||
}
|
||||
.gallery-item:hover {
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
box-shadow: var(--shadow);
|
||||
|
||||
z-index: 999;
|
||||
}
|
||||
.gallery-item:after {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
|
||||
.gallery-image {
|
||||
margin: 0; padding: 0;
|
||||
|
||||
width: 100%; height: 100%;
|
||||
|
||||
top: 0; bottom: 0; left: 0; right: 0;
|
||||
|
||||
position: absolute;
|
||||
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
|
||||
border-radius: var(--rad);
|
||||
}
|
||||
|
||||
/*
|
||||
-=-=-= IMAGE FULLSCREEN =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
||||
*/
|
||||
.image-container {
|
||||
/*padding: 0.5rem;*/
|
||||
width: calc(100vw - var(--space-medium));
|
||||
max-height: 69vh; height: auto;
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
background-color: var(--bg);
|
||||
backdrop-filter: blur(8px);
|
||||
/*outline: 0.5rem solid var(--bg);*/
|
||||
|
||||
border-radius: var(--rad);
|
||||
|
||||
transition: max-height 0.15s cubic-bezier(.19,1,.22,1);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.image-container {
|
||||
max-height: 35vh;
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
margin: 0 auto;
|
||||
|
||||
max-width: 100%; width: auto;
|
||||
max-height: inherit; height: auto;
|
||||
|
||||
border-radius: var(--rad);
|
||||
}
|
||||
|
||||
.image-description {
|
||||
border: 0.2rem solid var(--green);
|
||||
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.image-detail {
|
||||
border: 0.2rem solid var(--green);
|
||||
}
|
||||
.danger-zone {
|
||||
border: 0.2rem solid var(--red);
|
||||
}
|
||||
|
||||
.tags-root {
|
||||
border: 0.2rem solid var(--green);
|
||||
}
|
||||
.tag {
|
||||
margin: 0.25rem; padding: 0.5rem;
|
||||
|
||||
display: block;
|
||||
|
||||
border-radius: var(--rad);
|
||||
}
|
||||
|
||||
/*
|
||||
-=-=-= UNIVERSAL =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
||||
*/
|
||||
.flex-left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.flex-down {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.space-bottom-small {
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
.space-top-small {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.space-bottom {
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
.space-top {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.space-bottom-large {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.space-top-large {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.svg {
|
||||
margin: 0 0.2rem 0.1rem 0;
|
||||
width: 19px; height: 18px;
|
||||
|
||||
vertical-align: middle;
|
||||
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.text-box {
|
||||
padding: 0.5rem;
|
||||
|
||||
display: block;
|
||||
|
||||
font-size: 16px;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
border: none;
|
||||
border-radius: var(--rad);
|
||||
}
|
||||
|
||||
/*
|
||||
-=-=-= ALERT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
||||
*/
|
||||
.alert {
|
||||
padding: 0.69rem;
|
||||
|
||||
width: auto;
|
||||
|
||||
text-align: center;
|
||||
|
||||
display: block;
|
||||
|
||||
border-radius: var(--rad);
|
||||
|
||||
outline: 0.5rem solid var(--bg);
|
||||
|
||||
transition: transform 1s cubic-bezier(.19,1,.22,1), opacity 0.2s cubic-bezier(.19,1,.22,1);
|
||||
}
|
||||
.alert:hover {
|
||||
transform: scale(1.05);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.alert-high {
|
||||
background-color: var(--green);
|
||||
}
|
||||
.alert-low {
|
||||
background-color: var(--red);
|
||||
}
|
||||
.alert-default {
|
||||
background-color: var(--black);
|
||||
}
|
||||
|
||||
/*
|
||||
-=-=-= FORM =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
||||
*/
|
||||
form {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
form * {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*
|
||||
-=-=-= BUTTONS =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
||||
*/
|
||||
.btn {
|
||||
padding: 0.5rem;
|
||||
|
||||
display: block;
|
||||
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
border: none;
|
||||
border-radius: var(--rad);
|
||||
|
||||
transition: outline 0.1s cubic-bezier(.19,1,.22,1);
|
||||
}
|
||||
.btn:hover {
|
||||
outline: var(--white) 3px solid;
|
||||
color: var(--fg);
|
||||
}
|
||||
a.btn {
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn: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: var(--white);
|
||||
|
||||
border: none;
|
||||
border-radius: var(--rad);
|
||||
}
|
||||
|
||||
/*
|
||||
-=-=-= FONT SIZES =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
||||
*/
|
||||
h1, h2, h3, h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 27px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
p, a {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-family: 'Secular One', sans-serif;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: var(--orange);
|
||||
}
|
||||
91
css/nav.css
91
css/nav.css
|
|
@ -1,91 +0,0 @@
|
|||
/*
|
||||
-=-=-= NAV =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
||||
*/
|
||||
nav {
|
||||
margin: 0 0 2rem; padding: 0.5rem;
|
||||
|
||||
width: calc(100vh - 2rem)); height: 2.5rem;
|
||||
|
||||
position: static; z-index: 99;
|
||||
top: 1rem;
|
||||
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
|
||||
background-color: var(--bg-3); color: var(--fg);
|
||||
|
||||
border: 0.2rem solid var(--green);
|
||||
/*outline: 0.5rem solid var(--bg);*/
|
||||
|
||||
border-radius: var(--rad);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
nav p {
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
nav hr {
|
||||
margin: 0.5rem 0.2rem; padding: 0;
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.nav-name *, .nav-name {
|
||||
margin: 0;
|
||||
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
|
||||
font-size: 22px;
|
||||
|
||||
display: block;
|
||||
}
|
||||
.nav-links {
|
||||
width: auto;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.nav-name p, .nav-name hr, .nav-name {
|
||||
display: none;
|
||||
}
|
||||
.nav-links {
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
nav {
|
||||
margin: 0;
|
||||
|
||||
width: calc(100vw - 2rem)); height: 3rem;
|
||||
|
||||
position: fixed;
|
||||
top: auto; bottom: 0; left: 0; right: 0;
|
||||
|
||||
background-color: var(--bg);
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
border: none;
|
||||
border-top: 3px solid var(--green);
|
||||
border-radius: 0;
|
||||
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
.nav-hide {
|
||||
display: none;
|
||||
}
|
||||
.nav-links a .svg {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-bottom: calc(4rem + 3px) !important;
|
||||
}
|
||||
#back-to-top {
|
||||
bottom: 5rem !important;
|
||||
}
|
||||
nav .svg {
|
||||
padding: 0.35rem !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -4,82 +4,93 @@
|
|||
|-------------------------------------------------------------
|
||||
*/
|
||||
.info-text {
|
||||
@include defaultFont();
|
||||
@include defaultFont();
|
||||
|
||||
margin: 1rem 0 1rem 0.5rem; padding: 0;
|
||||
margin: 1rem 0 1rem 0.5rem;
|
||||
padding: 0;
|
||||
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
font-family: $font-header;
|
||||
h1 {
|
||||
font-family: $font-header;
|
||||
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
p {
|
||||
font-family: $font-body;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
p {
|
||||
font-family: $font-body;
|
||||
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-root {
|
||||
margin-bottom: 1rem; padding: 0.25rem;
|
||||
|
||||
background-color: $bg; color: $fg;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.25rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
border: 0.2rem solid $green;
|
||||
|
||||
border-radius: $rad;
|
||||
box-shadow: $shadow;
|
||||
background-color: $bg;
|
||||
color: $fg;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
border: 0.2rem solid $green;
|
||||
|
||||
border-radius: $rad;
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
margin: 0.25rem; padding: 0;
|
||||
|
||||
height: auto; max-width: calc(33.33% - 0.5rem);
|
||||
|
||||
background-color: $bg;
|
||||
border-radius: $rad;
|
||||
|
||||
position: relative;
|
||||
|
||||
flex: 1 0 150px;
|
||||
|
||||
transition: transform 0.15s cubic-bezier(.19,1,.22,1);
|
||||
margin: 0.25rem;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
box-shadow: $shadow;
|
||||
|
||||
z-index: 999;
|
||||
}
|
||||
height: auto;
|
||||
max-width: calc(33.33% - 0.5rem);
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
background-color: $bg;
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
|
||||
position: relative;
|
||||
|
||||
flex: 1 0 150px;
|
||||
|
||||
transition: transform 0.15s cubic-bezier(.19, 1, .22, 1);
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
box-shadow: $shadow;
|
||||
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-image {
|
||||
margin: 0; padding: 0;
|
||||
|
||||
width: 100%; height: 100%;
|
||||
|
||||
top: 0; bottom: 0; left: 0; right: 0;
|
||||
|
||||
position: absolute;
|
||||
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
|
||||
border-radius: $rad;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
position: absolute;
|
||||
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -88,87 +99,146 @@
|
|||
|-------------------------------------------------------------
|
||||
*/
|
||||
.image-container {
|
||||
margin: 1rem 0 2rem 0; padding: 0;
|
||||
margin: 1rem 0 2rem 0;
|
||||
padding: 0;
|
||||
|
||||
width: 100%;
|
||||
max-height: 69vh; height: auto;
|
||||
width: 100%;
|
||||
max-height: 69vh;
|
||||
height: auto;
|
||||
|
||||
display: flex;
|
||||
|
||||
background-color: $bg-alt;
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
border-radius: $rad;
|
||||
|
||||
transition: max-height 0.15s cubic-bezier(.19,1,.22,1);
|
||||
display: flex;
|
||||
|
||||
background-color: $bg-alt;
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
border-radius: $rad;
|
||||
|
||||
transition: max-height 0.15s cubic-bezier(.19, 1, .22, 1);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.image-container {
|
||||
max-height: 42vh;
|
||||
}
|
||||
.image-container {
|
||||
max-height: 42vh;
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
margin: 0 auto;
|
||||
margin: 0 auto;
|
||||
|
||||
max-width: 100%; width: auto;
|
||||
max-height: inherit; height: auto;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
max-height: inherit;
|
||||
height: auto;
|
||||
|
||||
border-radius: $rad;
|
||||
border-radius: $rad;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| DESCRIPTION
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
// DESCRIPTION
|
||||
.image-description {
|
||||
@include defaultDecoration($green);
|
||||
@include defaultFont();
|
||||
@include defaultDecoration($green);
|
||||
@include defaultFont();
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| DETAILS
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
// DETAILS
|
||||
.image-detail {
|
||||
@include defaultDecoration($green);
|
||||
@include defaultFont();
|
||||
@include defaultDecoration($green);
|
||||
@include defaultFont();
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| TAGS
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
// TAGS
|
||||
.tags-root {
|
||||
@include defaultDecoration($green);
|
||||
@include defaultFont();
|
||||
@include defaultDecoration($green);
|
||||
@include defaultFont();
|
||||
}
|
||||
|
||||
.tags {
|
||||
@include flexLeft(auto);
|
||||
@include flexLeft(auto);
|
||||
}
|
||||
|
||||
.tag {
|
||||
margin: 0.25rem; padding: 0.5rem;
|
||||
margin: 0.25rem;
|
||||
padding: 0.5rem;
|
||||
|
||||
display: block;
|
||||
display: block;
|
||||
|
||||
background-color: $page-accent;
|
||||
background-color: $page-accent;
|
||||
|
||||
border-radius: $rad;
|
||||
border-radius: $rad;
|
||||
|
||||
font-family: $font-body;
|
||||
font-family: $font-body;
|
||||
}
|
||||
|
||||
// DANGER ZONE
|
||||
.danger-zone {
|
||||
@include defaultDecoration($red);
|
||||
@include defaultFont();
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| DANGER ZONE
|
||||
| ABOUT
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.danger-zone {
|
||||
@include defaultDecoration($red);
|
||||
@include defaultFont();
|
||||
.about-root {
|
||||
@include defaultDecoration($green);
|
||||
@include defaultFont();
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| UPLOAD
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.upload-root {
|
||||
@include defaultDecoration($green);
|
||||
@include defaultFont();
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| ACCOUNT
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.account-root {
|
||||
@include defaultDecoration($green);
|
||||
@include defaultFont();
|
||||
|
||||
p:first-of-type {
|
||||
padding: 0.5rem;
|
||||
|
||||
background-color: $black;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| SIGNUP
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.signup-root {
|
||||
@include defaultDecoration($green);
|
||||
@include defaultFont();
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| LOGIN
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.login-root {
|
||||
@include defaultDecoration($green);
|
||||
@include defaultFont();
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| PASSWORD RESET
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.password-reset-root {
|
||||
@include defaultDecoration($red);
|
||||
@include defaultFont();
|
||||
}
|
||||
|
|
@ -1,22 +1,27 @@
|
|||
/*
|
||||
|-------------------------------------------------------------
|
||||
| FOOTER
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
footer {
|
||||
@include defaultDecoration($page-accent);
|
||||
@include flexLeft(space-around);
|
||||
@include defaultDecoration($page-accent);
|
||||
@include flexLeft(space-around);
|
||||
|
||||
margin: 0 auto;
|
||||
margin: 0 auto;
|
||||
|
||||
bottom: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: calc(100% - 1.4rem);
|
||||
|
||||
a {
|
||||
margin: 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
|
||||
text-decoration: none;
|
||||
a {
|
||||
margin: 0.5rem;
|
||||
|
||||
font-family: $font-body;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
font-family: $font-body;
|
||||
|
||||
&:hover {
|
||||
color: $orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,43 +1,55 @@
|
|||
@mixin defaultDecoration($border) {
|
||||
margin-bottom: 1rem; padding: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
|
||||
width: calc(100% - 1.4rem);
|
||||
width: calc(100% - 1.4rem);
|
||||
|
||||
background-color: $bg; color: $fg;
|
||||
background-color: $bg;
|
||||
color: $fg;
|
||||
|
||||
border-radius: $rad;
|
||||
border-radius: $rad;
|
||||
border: 0.2rem solid $border;
|
||||
|
||||
box-shadow: $shadow;
|
||||
box-shadow: $shadow;
|
||||
|
||||
>* {
|
||||
margin-top: 0; margin-bottom: 0.5rem;
|
||||
}
|
||||
>* {
|
||||
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;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
font-family: $font-header;
|
||||
}
|
||||
|
||||
p,
|
||||
a,
|
||||
button,
|
||||
input {
|
||||
font-family: $font-body;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin flexDown($justify) {
|
||||
display: flex;
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
flex-direction: column;
|
||||
|
||||
justify-content: $justify;
|
||||
justify-content: $justify;
|
||||
}
|
||||
|
||||
@mixin flexLeft($justify) {
|
||||
display: flex;
|
||||
display: flex;
|
||||
|
||||
flex-direction: row;
|
||||
flex-direction: row;
|
||||
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
|
||||
justify-content: $justify;
|
||||
justify-content: $justify;
|
||||
}
|
||||
|
|
@ -1,89 +1,113 @@
|
|||
/*
|
||||
|-------------------------------------------------------------
|
||||
| NAVIGATION BAR
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
nav {
|
||||
@include defaultDecoration($page-accent);
|
||||
@include flexLeft(space-between);
|
||||
@include defaultDecoration($page-accent);
|
||||
@include flexLeft(space-between);
|
||||
|
||||
margin: 0 auto 1rem;
|
||||
margin: 0 auto 1rem;
|
||||
|
||||
width: calc(100% - 1.4rem); height: 2.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
height: 2.5rem;
|
||||
|
||||
position: sticky; z-index: 99;
|
||||
top: 1rem;
|
||||
position: sticky;
|
||||
z-index: 99;
|
||||
top: 1rem;
|
||||
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
hr {
|
||||
margin: 0.5rem 0.2rem; padding: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
.btn {
|
||||
width: auto;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 0.5rem 0.2rem;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-name {
|
||||
@include flexLeft(space-around);
|
||||
@include flexLeft(space-around);
|
||||
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
|
||||
font-family: $font-header;
|
||||
|
||||
font-size: 22px;
|
||||
|
||||
display: block;
|
||||
font-family: $font-header;
|
||||
|
||||
font-size: 22px;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
@include flexLeft(space-around);
|
||||
@include flexLeft(space-around);
|
||||
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
|
||||
font-family: $font-body;
|
||||
font-family: $font-body;
|
||||
|
||||
width: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.nav-name {
|
||||
display: none;
|
||||
}
|
||||
.nav-links {
|
||||
width: 100%;
|
||||
}
|
||||
.nav-name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
nav {
|
||||
margin: 0;
|
||||
|
||||
width: calc(100% - 1rem);
|
||||
|
||||
position: fixed;
|
||||
top: auto; bottom: 0; left: 0; right: 0;
|
||||
|
||||
background-color: $bg-alt;
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
border: none;
|
||||
border-top: 3px solid $green;
|
||||
border-radius: 0;
|
||||
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
.nav-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
text-align: left !important;
|
||||
}
|
||||
footer {
|
||||
margin-bottom: 4rem !important;
|
||||
}
|
||||
#back-to-top {
|
||||
bottom: 5rem !important;
|
||||
}
|
||||
nav {
|
||||
margin: 0;
|
||||
|
||||
width: calc(100% - 1rem);
|
||||
|
||||
position: fixed;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
background-color: $bg-alt;
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
border: none;
|
||||
border-top: 3px solid $green;
|
||||
border-radius: 0;
|
||||
|
||||
backdrop-filter: blur(16px);
|
||||
|
||||
.svg {
|
||||
margin: 0;
|
||||
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-bottom: 4rem !important;
|
||||
}
|
||||
|
||||
#back-to-top {
|
||||
bottom: 5rem !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -13,32 +13,29 @@ $white: #E8E3E3;
|
|||
$page-accent: #8C977D;
|
||||
|
||||
$shadow: 6px 6px 2px #15151588;
|
||||
$rad: 0;
|
||||
$rad: 0rem;
|
||||
|
||||
$weight-bold: 621;
|
||||
$weight-normal: 400;
|
||||
|
||||
$font-header: 'Lexend Deca', sans-serif;
|
||||
$font-body: 'Secular One', sans-serif;
|
||||
$font-header: 'Lexend Deca',
|
||||
sans-serif;
|
||||
$font-body: 'Secular One',
|
||||
sans-serif;
|
||||
|
||||
// Fallback for items that do not yet support the new sass stylesheet system
|
||||
:root {
|
||||
--bg: #151515bb;
|
||||
--bg-1: #242621;
|
||||
--bg-2: #1D1E1C;
|
||||
--bg-3: #151515;
|
||||
|
||||
--fg:#E8E3E3;
|
||||
--fg-dark: #151515;
|
||||
|
||||
--red: #B66467;
|
||||
--orange: #FF7700;
|
||||
--green: #8C977D;
|
||||
--black: #151515;
|
||||
--white: #E8E3E3;
|
||||
|
||||
--shadow: 6px 6px 2px #15151588;
|
||||
--rad: 0px;
|
||||
|
||||
--square: 33.33%;
|
||||
}
|
||||
--bg: #151515bb;
|
||||
--bg-1: #242621;
|
||||
--bg-2: #1D1E1C;
|
||||
--bg-3: #151515;
|
||||
|
||||
--fg: #E8E3E3;
|
||||
--fg-dark: #151515;
|
||||
|
||||
--red: #B66467;
|
||||
--orange: #FF7700;
|
||||
--green: #8C977D;
|
||||
--black: #151515;
|
||||
--white: #E8E3E3;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue