mirror of
https://github.com/Fluffy-Bean/image-gallery.git
synced 2024-12-28 02:16:17 +00:00
Something something switching to sass
This commit is contained in:
parent
85afe70daa
commit
4007f47e49
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
images/
|
||||
400
css/main.css
Normal file
400
css/main.css
Normal file
|
|
@ -0,0 +1,400 @@
|
|||
/*
|
||||
|-------------------------------------------------------------
|
||||
| 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
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
: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%;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: calc(100% - 2.4rem);
|
||||
padding: 0.5rem;
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto 1rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
height: 2.5rem;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
z-index: 99;
|
||||
top: 1rem;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
nav p {
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
nav hr {
|
||||
margin: 0.5rem 0.2rem;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.nav-name {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
margin: 0;
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
font-size: 22px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
font-family: "Secular One", sans-serif;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.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: #151515;
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
backdrop-filter: blur(8px);
|
||||
border: none;
|
||||
border-top: 3px solid #8C977D;
|
||||
border-radius: 0;
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
.nav-hide {
|
||||
display: none;
|
||||
}
|
||||
.info-text {
|
||||
text-align: left !important;
|
||||
}
|
||||
footer {
|
||||
margin-bottom: calc(5rem + 3px) !important;
|
||||
}
|
||||
#back-to-top {
|
||||
bottom: 5rem !important;
|
||||
}
|
||||
}
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| INDEX
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.info-text {
|
||||
margin: 1rem 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.info-text h1 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.info-text p {
|
||||
font-family: "Secular One", sans-serif;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.gallery-root {
|
||||
padding: 0.25rem;
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
border: 0.2rem solid #8C977D;
|
||||
border-radius: 0;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
margin: 0.25rem;
|
||||
padding: 0;
|
||||
height: auto;
|
||||
max-width: calc(33.33% - 0.5rem);
|
||||
background-color: #151515;
|
||||
border-radius: 0;
|
||||
position: relative;
|
||||
flex: 1 0 150px;
|
||||
transition: transform 0.15s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
.gallery-item:hover {
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||
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;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
-o-object-position: center;
|
||||
object-position: center;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| IMAGE
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.image-container {
|
||||
margin: 1rem 0 2rem 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
max-height: 69vh;
|
||||
height: auto;
|
||||
display: flex;
|
||||
background-color: #151515;
|
||||
-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);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.image-container {
|
||||
max-height: 42vh !important;
|
||||
}
|
||||
}
|
||||
.image {
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
max-height: inherit;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
width: calc(100% - 2.4rem);
|
||||
padding: 0.5rem;
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
margin: 0 auto !important;
|
||||
bottom: 0;
|
||||
width: calc(100% - 1.4rem);
|
||||
}
|
||||
footer a {
|
||||
margin: 0.5rem;
|
||||
text-decoration: none;
|
||||
font-family: "Secular One", sans-serif;
|
||||
}
|
||||
footer a:hover {
|
||||
color: #FF7700;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| BODY COMPONENTS
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
max-width: 100vw;
|
||||
position: relative;
|
||||
background-color: #151515;
|
||||
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);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
body * {
|
||||
color: #E8E3E3;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| BUTTONS
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.btn {
|
||||
padding: 0.5rem;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
.btn:hover {
|
||||
outline: #E8E3E3 3px solid;
|
||||
color: #E8E3E3;
|
||||
}
|
||||
.btn:where(input[type=file])::-webkit-file-upload-button {
|
||||
margin: -0.5rem 0.5rem -0.5rem -0.5rem;
|
||||
padding: 0.5rem;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
background-color: #E8E3E3;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
.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: #E8E3E3;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
.btn a {
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| FORM
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
form {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
form * {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| IMAGES
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.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;
|
||||
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;
|
||||
-o-object-position: center;
|
||||
object-position: center;
|
||||
background-color: #151515;
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: 50%;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||
transition: right 0.15s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
#back-to-top:hover {
|
||||
outline: 0.2rem solid #8C977D;
|
||||
}
|
||||
#back-to-top * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
display: block;
|
||||
-o-object-position: center;
|
||||
object-position: center;
|
||||
}/*# sourceMappingURL=main.css.map */
|
||||
1
css/main.css.map
Normal file
1
css/main.css.map
Normal file
|
|
@ -0,0 +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"}
|
||||
182
css/main.scss
Normal file
182
css/main.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -106,7 +106,7 @@ body {
|
|||
-=-=-= DIV DECORATIONS =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
||||
*/
|
||||
.default-window {
|
||||
margin: 0 0 2rem; padding: 0.5rem;
|
||||
margin: 0 0 1rem; padding: 0.5rem;
|
||||
|
||||
width: auto;
|
||||
|
||||
|
|
|
|||
|
|
@ -31,7 +31,9 @@ nav hr {
|
|||
opacity: 0;
|
||||
}
|
||||
|
||||
.nav-name p, .nav-name {
|
||||
.nav-name *, .nav-name {
|
||||
margin: 0;
|
||||
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
|
||||
font-size: 22px;
|
||||
|
|
@ -78,10 +80,10 @@ nav hr {
|
|||
}
|
||||
|
||||
footer {
|
||||
margin-bottom: 5.5rem !important;
|
||||
margin-bottom: calc(4rem + 3px) !important;
|
||||
}
|
||||
#back-to-top {
|
||||
bottom: 5.5rem !important;
|
||||
bottom: 5rem !important;
|
||||
}
|
||||
nav .svg {
|
||||
padding: 0.35rem !important;
|
||||
|
|
|
|||
117
css/scss/_body.scss
Normal file
117
css/scss/_body.scss
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
/*
|
||||
|-------------------------------------------------------------
|
||||
| INDEX
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.info-text {
|
||||
margin: 1rem 0; padding: 0;
|
||||
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
font-family: $font-header;
|
||||
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
p {
|
||||
font-family: $font-body;
|
||||
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-root {
|
||||
padding: 0.25rem;
|
||||
|
||||
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);
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
box-shadow: $shadow;
|
||||
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
&: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;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| IMAGE
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.image-container {
|
||||
margin: 1rem 0 2rem 0; padding: 0;
|
||||
|
||||
width: 100%;
|
||||
max-height: 69vh; height: auto;
|
||||
|
||||
display: flex;
|
||||
|
||||
background-color: $bg;
|
||||
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 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
margin: 0 auto;
|
||||
|
||||
max-width: 100%; width: auto;
|
||||
max-height: inherit; height: auto;
|
||||
|
||||
border-radius: $rad;
|
||||
}
|
||||
22
css/scss/_footer.scss
Normal file
22
css/scss/_footer.scss
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
footer {
|
||||
@include defaultDecoration($page-accent);
|
||||
@include flexLeft(space-around);
|
||||
|
||||
margin: 0 auto !important;
|
||||
|
||||
bottom: 0;
|
||||
|
||||
width: calc(100% - 1.4rem);
|
||||
|
||||
a {
|
||||
margin: 0.5rem;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
font-family: $font-body;
|
||||
|
||||
&:hover {
|
||||
color: $orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
30
css/scss/_mixin.scss
Normal file
30
css/scss/_mixin.scss
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
@mixin defaultDecoration($border) {
|
||||
width: calc(100% - 2.4rem);
|
||||
|
||||
padding: 0.5rem;
|
||||
|
||||
background-color: $bg; color: $fg;
|
||||
|
||||
border-radius: $rad;
|
||||
|
||||
border: 0.2rem solid $border;
|
||||
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
|
||||
@mixin flexDown($justify) {
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
justify-content: $justify;
|
||||
}
|
||||
@mixin flexLeft($justify) {
|
||||
display: flex;
|
||||
|
||||
flex-direction: row;
|
||||
|
||||
flex-wrap: wrap;
|
||||
|
||||
justify-content: $justify;
|
||||
}
|
||||
84
css/scss/_navigation.scss
Normal file
84
css/scss/_navigation.scss
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
nav {
|
||||
@include defaultDecoration($page-accent);
|
||||
@include flexLeft(space-between);
|
||||
|
||||
margin: 0 auto 1rem;
|
||||
|
||||
width: calc(100% - 1.4rem); height: 2.5rem;
|
||||
|
||||
position: sticky; z-index: 99;
|
||||
top: 1rem;
|
||||
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
hr {
|
||||
margin: 0.5rem 0.2rem; padding: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-name {
|
||||
@include flexLeft(space-around);
|
||||
|
||||
margin: 0;
|
||||
|
||||
font-family: $font-header;
|
||||
|
||||
font-size: 22px;
|
||||
|
||||
display: block;
|
||||
}
|
||||
.nav-links {
|
||||
@include flexLeft(space-around);
|
||||
|
||||
font-family: $font-body;
|
||||
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.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;
|
||||
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: calc(5rem + 3px) !important;
|
||||
}
|
||||
#back-to-top {
|
||||
bottom: 5rem !important;
|
||||
}
|
||||
}
|
||||
44
css/scss/_variables.scss
Normal file
44
css/scss/_variables.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
$bg: #151515;
|
||||
$bg-alt: #151515bb;
|
||||
|
||||
$fg: #E8E3E3;
|
||||
$fg-alt: #151515;
|
||||
|
||||
$red: #B66467;
|
||||
$orange: #FF7700;
|
||||
$green: #8C977D;
|
||||
$black: #151515;
|
||||
$white: #E8E3E3;
|
||||
|
||||
$page-accent: #8C977D;
|
||||
|
||||
$shadow: 6px 6px 2px #15151588;
|
||||
$rad: 0;
|
||||
|
||||
$weight-bold: 621;
|
||||
$weight-normal: 400;
|
||||
|
||||
$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%;
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<title>Lynx Gallery</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link rel="stylesheet" href="css/master.css">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<link rel="stylesheet" href="css/normalise.css">
|
||||
|
||||
<!-- Google Fonts -->
|
||||
|
|
@ -147,7 +147,7 @@
|
|||
}
|
||||
?>
|
||||
|
||||
<div class="image-container space-bottom-large">
|
||||
<div class="image-container">
|
||||
<img class='image' id='<?php echo $image['id']; ?>' src='<?php echo $image_path; ?>' alt='<?php echo $image_alt; ?>'>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
201
index.php
201
index.php
|
|
@ -1,121 +1,124 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lynx Gallery</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lynx Gallery</title>
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link rel="stylesheet" href="css/master.css">
|
||||
<link rel="stylesheet" href="css/normalise.css">
|
||||
<!-- Stylesheets -->
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<link rel="stylesheet" href="css/normalise.css">
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Secular+One&display=swap">
|
||||
|
||||
<!-- JQuery -->
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.6.0.min.js"
|
||||
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
|
||||
crossorigin="anonymous">
|
||||
</script>
|
||||
<!-- Google Fonts -->
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Secular+One&display=swap">
|
||||
|
||||
<!-- Sniffle script! -->
|
||||
<script src="Sniffle/sniffle.js"></script>
|
||||
<link rel='stylesheet' href='Sniffle/sniffle.css'>
|
||||
<!-- JQuery -->
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.6.0.min.js"
|
||||
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
|
||||
crossorigin="anonymous">
|
||||
</script>
|
||||
|
||||
<!-- Flyout script! -->
|
||||
<script src="Flyout/flyout.js"></script>
|
||||
<link rel='stylesheet' href='Flyout/flyout.css'>
|
||||
<!-- Sniffle script! -->
|
||||
<script src="Sniffle/sniffle.js"></script>
|
||||
<link rel='stylesheet' href='Sniffle/sniffle.css'>
|
||||
|
||||
<?php include "ui/required.php"; ?>
|
||||
<!-- Flyout script! -->
|
||||
<script src="Flyout/flyout.js"></script>
|
||||
<link rel='stylesheet' href='Flyout/flyout.css'>
|
||||
|
||||
<?php include "ui/required.php"; ?>
|
||||
</head>
|
||||
<body>
|
||||
<?php
|
||||
include "ui/nav.php";
|
||||
?>
|
||||
<?php
|
||||
include "ui/nav.php";
|
||||
?>
|
||||
|
||||
<script>
|
||||
sniffleAdd("Warning", "The website is currently being worked on, some functionality has been restored, but tread carefully as errors may occur", "var(--red)", "<?php echo $root_dir ?>assets/icons/warning.svg");
|
||||
|
||||
if (params.del == "true") {
|
||||
sniffleAdd("Image Deleted", "Successfully deleted image: <?php echo $_GET['id']; ?>", "var(--green)", "<?php echo $root_dir ?>assets/icons/trash.svg");
|
||||
}
|
||||
if (params.login == "success") {
|
||||
sniffleAdd("Logged in", "O hi <?php echo $_SESSION['username']; ?>", "var(--green)", "<?php echo $root_dir ?>assets/icons/hand-waving.svg");
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
sniffleAdd("Warning", "The website is currently being worked on, some functionality has been restored, but tread carefully as errors may occur", "var(--red)", "<?php echo $root_dir ?>assets/icons/warning.svg");
|
||||
|
||||
<div class="info-text center">
|
||||
<?php
|
||||
// Set time for message
|
||||
$time = date("H");
|
||||
$timezone = date("e");
|
||||
if ($time < "12") {
|
||||
$time_welc = "Good morning";
|
||||
} else if ($time >= "12" && $time < "17") {
|
||||
$time_welc = "Good afternoon";
|
||||
} else if ($time >= "17" && $time < "19") {
|
||||
$time_welc = "Good evening";
|
||||
} else if ($time >= "19") {
|
||||
$time_welc = "Good night";
|
||||
}
|
||||
if (params.del == "true") {
|
||||
sniffleAdd("Image Deleted", "Successfully deleted image: <?php echo $_GET['id']; ?>", "var(--green)", "<?php echo $root_dir ?>assets/icons/trash.svg");
|
||||
}
|
||||
if (params.login == "success") {
|
||||
sniffleAdd("Logged in", "O hi <?php echo $_SESSION['username']; ?>", "var(--green)", "<?php echo $root_dir ?>assets/icons/hand-waving.svg");
|
||||
}
|
||||
</script>
|
||||
|
||||
// Welcome depending on if user is logged in or not
|
||||
if (isset($_SESSION["username"])) {
|
||||
echo "<h1>".$time_welc." ".$_SESSION['username']."!</h1>";
|
||||
} else {
|
||||
echo "<h1>".$time_welc."!</h1>";
|
||||
}
|
||||
<div class="info-text">
|
||||
<?php
|
||||
// Set time for message
|
||||
$time = date("H");
|
||||
$timezone = date("e");
|
||||
if ($time < "12") {
|
||||
$time_welc = "Good morning";
|
||||
} else if ($time >= "12" && $time < "17") {
|
||||
$time_welc = "Good afternoon";
|
||||
} else if ($time >= "17" && $time < "19") {
|
||||
$time_welc = "Good evening";
|
||||
} else if ($time >= "19") {
|
||||
$time_welc = "Good night";
|
||||
}
|
||||
|
||||
// Random welcome message
|
||||
$welcome_message = array("*internal screaming*",
|
||||
"Sussy Wussy",
|
||||
"What is this world?",
|
||||
"Don't forget to drink water!",
|
||||
"Bruh",
|
||||
"This is so poorly programmed",
|
||||
"Sorry",
|
||||
"Fluffy made this!",
|
||||
"maybe",
|
||||
"I'm gay",
|
||||
"I wish we were better strangers.",
|
||||
"<span style='color:#ffff00;'>Just like Minecraft!</span>",
|
||||
"If I were you, I'd run now",
|
||||
"This is the part where I kill you",
|
||||
"SILICA GEL \"DO NOT EAT\".",
|
||||
"This was supposed to be a simple project",
|
||||
"AAAAAAAAAAAAAAAAAAAA",
|
||||
"Let me out",
|
||||
"nice",
|
||||
"Thank you that you're here",
|
||||
"The weather is dry",
|
||||
"Need me a man 👀");
|
||||
echo "<p>".$welcome_message[array_rand($welcome_message, 1)]."</p>";
|
||||
?>
|
||||
</div>
|
||||
// Welcome depending on if user is logged in or not
|
||||
if (isset($_SESSION["username"])) {
|
||||
echo "<h1>".$time_welc." ".$_SESSION['username']."!</h1>";
|
||||
} else {
|
||||
echo "<h1>".$time_welc."!</h1>";
|
||||
}
|
||||
|
||||
<div class="gallery-root flex-left">
|
||||
<?php
|
||||
// Reading images from table
|
||||
$image_request = mysqli_query($conn, "SELECT * FROM swag_table ORDER BY id DESC");
|
||||
// Random welcome message
|
||||
$welcome_message = array("*internal screaming*",
|
||||
"Sussy Wussy",
|
||||
"What is this world?",
|
||||
"Don't forget to drink water!",
|
||||
"Bruh",
|
||||
"This is so poorly programmed",
|
||||
"Sorry",
|
||||
"Fluffy made this!",
|
||||
"maybe",
|
||||
"I'm gay",
|
||||
"I wish we were better strangers.",
|
||||
"<span style='color:#ffff00;'>Just like Minecraft!</span>",
|
||||
"If I were you, I'd run now",
|
||||
"This is the part where I kill you",
|
||||
"SILICA GEL \"DO NOT EAT\".",
|
||||
"This was supposed to be a simple project",
|
||||
"AAAAAAAAAAAAAAAAAAAA",
|
||||
"Let me out",
|
||||
"nice",
|
||||
"Thank you that you're here",
|
||||
"The weather is dry",
|
||||
"Need me a man 👀");
|
||||
echo "<p>".$welcome_message[array_rand($welcome_message, 1)]."</p>";
|
||||
?>
|
||||
</div>
|
||||
|
||||
while ($image = mysqli_fetch_array($image_request)) {
|
||||
// Getting thumbnail
|
||||
if (file_exists("images/thumbnails/".$image['imagename'])) {
|
||||
$image_path = "images/thumbnails/".$image['imagename'];
|
||||
} else {
|
||||
$image_path = "images/".$image['imagename'];
|
||||
}
|
||||
<div class="gallery-root flex-left">
|
||||
<?php
|
||||
// Reading images from table
|
||||
$image_request = mysqli_query($conn, "SELECT * FROM swag_table ORDER BY id DESC");
|
||||
|
||||
// Image loading
|
||||
echo "<div class='gallery-item'>";
|
||||
echo "<a href='image.php?id=".$image['id']."'><img class='gallery-image' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>";
|
||||
echo "</div>";
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
while ($image = mysqli_fetch_array($image_request)) {
|
||||
// Getting thumbnail
|
||||
if (file_exists("images/thumbnails/".$image['imagename'])) {
|
||||
$image_path = "images/thumbnails/".$image['imagename'];
|
||||
} else {
|
||||
$image_path = "images/".$image['imagename'];
|
||||
}
|
||||
|
||||
<?php include "ui/footer.php"; ?>
|
||||
// Image loading
|
||||
echo "<div class='gallery-item'>";
|
||||
echo "<a href='image.php?id=".$image['id']."'><img class='gallery-image' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>";
|
||||
echo "</div>";
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
||||
|
||||
<?php include "ui/footer.php"; ?>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue