diff --git a/.gitignore b/.gitignore index 47241b6..abac08b 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ images/ +css/main.css.map \ No newline at end of file diff --git a/css/main.css b/css/main.css index 6ef7373..efd3e3f 100644 --- a/css/main.css +++ b/css/main.css @@ -25,8 +25,9 @@ } nav { - width: calc(100% - 2.4rem); + margin-bottom: 1rem; padding: 0.5rem; + width: calc(100% - 1.4rem); background-color: #151515; color: #E8E3E3; border-radius: 0; @@ -46,6 +47,10 @@ nav { align-items: center; vertical-align: middle; } +nav > * { + margin-top: 0; + margin-bottom: 0.5rem; +} nav p { margin: 0; vertical-align: middle; @@ -55,6 +60,9 @@ nav hr { padding: 0; opacity: 0; } +nav .btn { + width: auto; +} .nav-name { display: flex; @@ -72,6 +80,7 @@ nav hr { flex-direction: row; flex-wrap: wrap; justify-content: space-around; + margin: 0; font-family: "Secular One", sans-serif; width: auto; } @@ -93,7 +102,7 @@ nav hr { bottom: 0; left: 0; right: 0; - background-color: #151515; + background-color: rgba(21, 21, 21, 0.7333333333); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: none; @@ -109,7 +118,7 @@ nav hr { text-align: left !important; } footer { - margin-bottom: calc(5rem + 3px) !important; + margin-bottom: 4rem !important; } #back-to-top { bottom: 5rem !important; @@ -121,13 +130,19 @@ nav hr { |------------------------------------------------------------- */ .info-text { - margin: 1rem 0; + margin: 1rem 0 1rem 0.5rem; padding: 0; text-align: center; } +.info-text h1, .info-text h2, .info-text h3, .info-text h4, .info-text h5 { + font-family: "Lexend Deca", sans-serif; +} +.info-text p, .info-text a, .info-text button, .info-text input { + font-family: "Secular One", sans-serif; +} .info-text h1 { font-family: "Lexend Deca", sans-serif; - margin-top: 0.5rem; + margin-top: 0; margin-bottom: 1rem; } .info-text p { @@ -137,6 +152,7 @@ nav hr { } .gallery-root { + margin-bottom: 1rem; padding: 0.25rem; background-color: #151515; color: #E8E3E3; @@ -199,7 +215,7 @@ nav hr { max-height: 69vh; height: auto; display: flex; - background-color: #151515; + background-color: rgba(21, 21, 21, 0.7333333333); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 0; @@ -208,7 +224,7 @@ nav hr { @media (max-width: 600px) { .image-container { - max-height: 42vh !important; + max-height: 42vh; } } .image { @@ -220,9 +236,130 @@ nav hr { border-radius: 0; } -footer { - width: calc(100% - 2.4rem); +/* + |------------------------------------------------------------- + | DESCRIPTION + |------------------------------------------------------------- +*/ +.image-description { + margin-bottom: 1rem; padding: 0.5rem; + width: calc(100% - 1.4rem); + background-color: #151515; + color: #E8E3E3; + border-radius: 0; + border: 0.2rem solid #8C977D; + box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); +} +.image-description > * { + margin-top: 0; + margin-bottom: 0.5rem; +} +.image-description h1, .image-description h2, .image-description h3, .image-description h4, .image-description h5 { + font-family: "Lexend Deca", sans-serif; +} +.image-description p, .image-description a, .image-description button, .image-description input { + font-family: "Secular One", sans-serif; +} + +/* + |------------------------------------------------------------- + | DETAILS + |------------------------------------------------------------- +*/ +.image-detail { + margin-bottom: 1rem; + padding: 0.5rem; + width: calc(100% - 1.4rem); + background-color: #151515; + color: #E8E3E3; + border-radius: 0; + border: 0.2rem solid #8C977D; + box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); +} +.image-detail > * { + margin-top: 0; + margin-bottom: 0.5rem; +} +.image-detail h1, .image-detail h2, .image-detail h3, .image-detail h4, .image-detail h5 { + font-family: "Lexend Deca", sans-serif; +} +.image-detail p, .image-detail a, .image-detail button, .image-detail input { + font-family: "Secular One", sans-serif; +} + +/* + |------------------------------------------------------------- + | TAGS + |------------------------------------------------------------- +*/ +.tags-root { + margin-bottom: 1rem; + padding: 0.5rem; + width: calc(100% - 1.4rem); + background-color: #151515; + color: #E8E3E3; + border-radius: 0; + border: 0.2rem solid #8C977D; + box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); +} +.tags-root > * { + margin-top: 0; + margin-bottom: 0.5rem; +} +.tags-root h1, .tags-root h2, .tags-root h3, .tags-root h4, .tags-root h5 { + font-family: "Lexend Deca", sans-serif; +} +.tags-root p, .tags-root a, .tags-root button, .tags-root input { + font-family: "Secular One", sans-serif; +} + +.tags { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: auto; +} + +.tag { + margin: 0.25rem; + padding: 0.5rem; + display: block; + background-color: #8C977D; + border-radius: 0; + font-family: "Secular One", sans-serif; +} + +/* + |------------------------------------------------------------- + | DANGER ZONE + |------------------------------------------------------------- +*/ +.danger-zone { + margin-bottom: 1rem; + padding: 0.5rem; + width: calc(100% - 1.4rem); + background-color: #151515; + color: #E8E3E3; + border-radius: 0; + border: 0.2rem solid #B66467; + box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); +} +.danger-zone > * { + margin-top: 0; + margin-bottom: 0.5rem; +} +.danger-zone h1, .danger-zone h2, .danger-zone h3, .danger-zone h4, .danger-zone h5 { + font-family: "Lexend Deca", sans-serif; +} +.danger-zone p, .danger-zone a, .danger-zone button, .danger-zone input { + font-family: "Secular One", sans-serif; +} + +footer { + margin-bottom: 1rem; + padding: 0.5rem; + width: calc(100% - 1.4rem); background-color: #151515; color: #E8E3E3; border-radius: 0; @@ -232,10 +369,14 @@ footer { flex-direction: row; flex-wrap: wrap; justify-content: space-around; - margin: 0 auto !important; + margin: 0 auto; bottom: 0; width: calc(100% - 1.4rem); } +footer > * { + margin-top: 0; + margin-bottom: 0.5rem; +} footer a { margin: 0.5rem; text-decoration: none; @@ -287,10 +428,14 @@ body * { */ .btn { padding: 0.5rem; + width: 100%; display: block; + box-sizing: border-box; font-size: 16px; font-weight: 500; + font-family: "Secular One", sans-serif; text-decoration: none; + text-align: center; border: none; border-radius: 0; transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1); @@ -319,44 +464,34 @@ body * { border: none; border-radius: 0; } -.btn a { - margin-bottom: 0; - text-align: center; + +.btn-good { + background-color: #8C977D; +} + +.btn-bad { + background-color: #B66467; +} + +.btn-neutral { + background-color: #151515; } /* |------------------------------------------------------------- - | FORM + | FORM SIZING |------------------------------------------------------------- */ form { width: 100%; - box-sizing: border-box; -} -form * { - width: 100%; - box-sizing: border-box; + box-sizing: content-box; } /* |------------------------------------------------------------- - | IMAGES + | SVG |------------------------------------------------------------- */ -.image-container { - width: 100%; - max-height: 69vh; - height: auto; - display: flex; - flex-direction: column; - justify-content: space-between; - background-color: rgba(21, 21, 21, 0.7333333333); - -webkit-backdrop-filter: blur(8px); - backdrop-filter: blur(8px); - border-radius: 0; - transition: max-height 0.15s cubic-bezier(0.19, 1, 0.22, 1); -} - .svg { margin: 0 0.2rem 0.1rem 0; width: 19px; diff --git a/css/main.css.map b/css/main.css.map index 0064a46..b9e3e23 100644 --- a/css/main.css.map +++ b/css/main.css.map @@ -1 +1 @@ -{"version":3,"sources":["main.scss","scss/_variables.scss","main.css","scss/_navigation.scss","scss/_mixin.scss","scss/_body.scss","scss/_footer.scss"],"names":[],"mappings":"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","file":"main.css"} \ No newline at end of file +{"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 index 76ce477..aca35b0 100644 --- a/css/main.scss +++ b/css/main.scss @@ -63,12 +63,17 @@ body { .btn { padding: 0.5rem; + width: 100%; + display: block; + box-sizing: border-box; font-size: 16px; font-weight: 500; + font-family: $font-body; text-decoration: none; + text-align: center; border: none; border-radius: $rad; @@ -95,47 +100,32 @@ body { border: none; border-radius: $rad; } - - a { - margin-bottom: 0; - text-align: center; - } +} +.btn-good { + background-color: $green; +} +.btn-bad { + background-color: $red; +} +.btn-neutral { + background-color: $black; } /* |------------------------------------------------------------- - | FORM + | FORM SIZING |------------------------------------------------------------- */ form { width: 100%; - box-sizing: border-box; - - * { - width: 100%; - box-sizing: border-box; - } + box-sizing: content-box; } /* |------------------------------------------------------------- - | IMAGES + | SVG |------------------------------------------------------------- */ -.image-container { - width: 100%; - max-height: 69vh; height: auto; - - @include flexDown(space-between); - - background-color: $bg-alt; - backdrop-filter: blur(8px); - - border-radius: $rad; - - transition: max-height 0.15s cubic-bezier(.19,1,.22,1); -} - .svg { margin: 0 0.2rem 0.1rem 0; @@ -179,4 +169,4 @@ form { object-position: center; } -} +} \ No newline at end of file diff --git a/css/scss/_body.scss b/css/scss/_body.scss index 235cd6a..1cd8e50 100644 --- a/css/scss/_body.scss +++ b/css/scss/_body.scss @@ -4,14 +4,16 @@ |------------------------------------------------------------- */ .info-text { - margin: 1rem 0; padding: 0; + @include defaultFont(); + + margin: 1rem 0 1rem 0.5rem; padding: 0; text-align: center; h1 { font-family: $font-header; - margin-top: 0.5rem; + margin-top: 0; margin-bottom: 1rem; } p { @@ -23,7 +25,7 @@ } .gallery-root { - padding: 0.25rem; + margin-bottom: 1rem; padding: 0.25rem; background-color: $bg; color: $fg; @@ -93,7 +95,7 @@ display: flex; - background-color: $bg; + background-color: $bg-alt; backdrop-filter: blur(8px); border-radius: $rad; @@ -103,10 +105,10 @@ @media (max-width: 600px) { .image-container { - max-height: 42vh !important; + max-height: 42vh; } } - + .image { margin: 0 auto; @@ -114,4 +116,59 @@ max-height: inherit; height: auto; border-radius: $rad; -} \ No newline at end of file +} + +/* + |------------------------------------------------------------- + | DESCRIPTION + |------------------------------------------------------------- +*/ +.image-description { + @include defaultDecoration($green); + @include defaultFont(); +} + + +/* + |------------------------------------------------------------- + | DETAILS + |------------------------------------------------------------- +*/ +.image-detail { + @include defaultDecoration($green); + @include defaultFont(); +} + +/* + |------------------------------------------------------------- + | TAGS + |------------------------------------------------------------- +*/ +.tags-root { + @include defaultDecoration($green); + @include defaultFont(); +} +.tags { + @include flexLeft(auto); +} +.tag { + margin: 0.25rem; padding: 0.5rem; + + display: block; + + background-color: $page-accent; + + border-radius: $rad; + + font-family: $font-body; +} + +/* + |------------------------------------------------------------- + | DANGER ZONE + |------------------------------------------------------------- +*/ +.danger-zone { + @include defaultDecoration($red); + @include defaultFont(); +} diff --git a/css/scss/_footer.scss b/css/scss/_footer.scss index abac2a6..a837ec5 100644 --- a/css/scss/_footer.scss +++ b/css/scss/_footer.scss @@ -2,7 +2,7 @@ footer { @include defaultDecoration($page-accent); @include flexLeft(space-around); - margin: 0 auto !important; + margin: 0 auto; bottom: 0; diff --git a/css/scss/_mixin.scss b/css/scss/_mixin.scss index 2c1a6c8..6ad889a 100644 --- a/css/scss/_mixin.scss +++ b/css/scss/_mixin.scss @@ -1,15 +1,28 @@ @mixin defaultDecoration($border) { - width: calc(100% - 2.4rem); - - padding: 0.5rem; + margin-bottom: 1rem; padding: 0.5rem; + + width: calc(100% - 1.4rem); background-color: $bg; color: $fg; border-radius: $rad; - border: 0.2rem solid $border; box-shadow: $shadow; + + >* { + margin-top: 0; margin-bottom: 0.5rem; + } +} + +@mixin defaultFont() { + h1, h2, h3, h4, h5 { + font-family: $font-header; + } + + p, a, button, input { + font-family: $font-body; + } } @mixin flexDown($justify) { diff --git a/css/scss/_navigation.scss b/css/scss/_navigation.scss index 26864ce..8896e09 100644 --- a/css/scss/_navigation.scss +++ b/css/scss/_navigation.scss @@ -20,6 +20,9 @@ nav { margin: 0.5rem 0.2rem; padding: 0; opacity: 0; } + .btn { + width: auto; + } } .nav-name { @@ -36,6 +39,8 @@ nav { .nav-links { @include flexLeft(space-around); + margin: 0; + font-family: $font-body; width: auto; @@ -59,7 +64,7 @@ nav { position: fixed; top: auto; bottom: 0; left: 0; right: 0; - background-color: $bg; + background-color: $bg-alt; backdrop-filter: blur(8px); border: none; @@ -76,7 +81,7 @@ nav { text-align: left !important; } footer { - margin-bottom: calc(5rem + 3px) !important; + margin-bottom: 4rem !important; } #back-to-top { bottom: 5rem !important; diff --git a/image.php b/image.php index 0bfbcaf..bece92c 100644 --- a/image.php +++ b/image.php @@ -192,8 +192,10 @@ // Image Upload date echo "

Last updated: +0 ".$image['upload']."

"; + echo "
"; + // Image download - echo "Download image"; + echo "Download image"; // Copy image ?> @@ -205,19 +207,19 @@ } Copy image link"; + echo ""; ?>

Tags

-
+
".$tag."

"; + echo "

".$tag."

"; } } else { echo "

No tags present

"; @@ -249,13 +251,13 @@ | I cannot describe the anxiety this gives me. pls help |------------------------------------------------------------- --> - +