diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..47241b6 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +images/ diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..6ef7373 --- /dev/null +++ b/css/main.css @@ -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 */ \ No newline at end of file diff --git a/css/main.css.map b/css/main.css.map new file mode 100644 index 0000000..0064a46 --- /dev/null +++ b/css/main.css.map @@ -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"} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss new file mode 100644 index 0000000..76ce477 --- /dev/null +++ b/css/main.scss @@ -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; + } +} diff --git a/css/master.css b/css/master.css index 27b986d..194a98a 100644 --- a/css/master.css +++ b/css/master.css @@ -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; diff --git a/css/nav.css b/css/nav.css index 3614ee4..3c41946 100644 --- a/css/nav.css +++ b/css/nav.css @@ -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; diff --git a/css/scss/_body.scss b/css/scss/_body.scss new file mode 100644 index 0000000..235cd6a --- /dev/null +++ b/css/scss/_body.scss @@ -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; +} \ No newline at end of file diff --git a/css/scss/_footer.scss b/css/scss/_footer.scss new file mode 100644 index 0000000..abac2a6 --- /dev/null +++ b/css/scss/_footer.scss @@ -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; + } + } +} diff --git a/css/scss/_mixin.scss b/css/scss/_mixin.scss new file mode 100644 index 0000000..2c1a6c8 --- /dev/null +++ b/css/scss/_mixin.scss @@ -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; +} \ No newline at end of file diff --git a/css/scss/_navigation.scss b/css/scss/_navigation.scss new file mode 100644 index 0000000..26864ce --- /dev/null +++ b/css/scss/_navigation.scss @@ -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; + } +} \ No newline at end of file diff --git a/css/scss/_variables.scss b/css/scss/_variables.scss new file mode 100644 index 0000000..ee9dd41 --- /dev/null +++ b/css/scss/_variables.scss @@ -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%; + } \ No newline at end of file diff --git a/image.php b/image.php index d4bcc63..0bfbcaf 100644 --- a/image.php +++ b/image.php @@ -6,7 +6,7 @@
".$welcome_message[array_rand($welcome_message, 1)]."
"; - ?> -".$welcome_message[array_rand($welcome_message, 1)]."
"; + ?> +