From 1be364c4ef347b9ffd4e0fc1c6aab286b0eaa6ee Mon Sep 17 00:00:00 2001 From: Fluffy-Bean <michal-gdula@protonmail.com> Date: Sat, 24 Sep 2022 10:18:00 +0000 Subject: [PATCH] Optimising CSS/sAss --- account.php | 10 +- css/main.css | 465 +++++-------------------------------------- css/scss/_body.scss | 127 ++++-------- css/scss/_mixin.scss | 10 +- group.php | 4 +- image.php | 8 +- index.php | 10 +- password-reset.php | 4 +- profile.php | 4 +- upload.php | 2 +- 10 files changed, 117 insertions(+), 527 deletions(-) diff --git a/account.php b/account.php index e8d17b7..c0a5557 100644 --- a/account.php +++ b/account.php @@ -23,7 +23,7 @@ <?php if ($user_info->is_loggedin()) { ?> - <div class="profile-settings"> + <div class="defaultDecoration defaultSpacing defaultFonts"> <h2>Profile</h2> <div class="pfp-upload"> <form id="pfpForm" method="POST" enctype="multipart/form-data"> @@ -79,7 +79,7 @@ <a href="profile.php?user=<?php echo $_SESSION['id']; ?>" class="btn btn-neutral">Go to profile</a> </div> - <div class="account-root"> + <div class="warningDecoration defaultSpacing defaultFonts"> <h2>Account</h2> <a class='btn btn-bad' href='password-reset.php'><img class='svg' src='assets/icons/password.svg'>Reset Password</a> <button class="btn btn-bad" onclick="deleteAccount()"><img class='svg' src='assets/icons/trash.svg'>Delete account</button> @@ -147,7 +147,7 @@ <?php if ($user_info->is_admin($conn, $_SESSION['id'])) { ?> - <div class="admin-root"> + <div class="defaultDecoration defaultSpacing defaultFonts"> <h2>Admin</h2> <h3>Invite Codes</h3> <?php @@ -383,7 +383,7 @@ } } else { ?> - <div class="login-root"> + <div class="login-root defaultDecoration defaultSpacing defaultFonts"> <h2>Login</h2> <p>Passwords are important to keep safe. Don't tell anyone your password, not even Fluffy!</p> <br> @@ -409,7 +409,7 @@ }); </script> - <div class="signup-root"> + <div class="signup-root defaultDecoration defaultSpacing defaultFonts" style="display: none;"> <h2>Make account</h2> <p>And amazing things happened here...</p> <br> diff --git a/css/main.css b/css/main.css index 74c44e7..def1b16 100644 --- a/css/main.css +++ b/css/main.css @@ -30,9 +30,6 @@ |------------------------------------------------------------- */ nav { - margin-bottom: 1rem; - padding: 0.5rem 0.5rem 0 0.5rem; - width: calc(100% - 1.4rem); background-color: #151515; color: #E8E3E3; border-radius: 0.4rem; @@ -53,10 +50,6 @@ nav { align-items: center; vertical-align: middle; } -nav > * { - margin-top: 0; - margin-bottom: 0.5rem; -} nav p { margin: 0; vertical-align: middle; @@ -141,6 +134,53 @@ nav .btn { display: block; } } +/* + |------------------------------------------------------------- + | DEFAULTS + |------------------------------------------------------------- +*/ +.defaultSpacing { + margin-bottom: 1rem; + padding: 0.5rem 0.5rem 0 0.5rem; + width: calc(100% - 1.4rem); +} +.defaultSpacing > * { + margin-top: 0; + margin-bottom: 0.5rem; +} + +.defaultDecoration { + background-color: #151515; + color: #E8E3E3; + border-radius: 0.4rem; + border: 0.2rem solid #8C977D; + box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); +} + +.warningDecoration { + background-color: #151515; + color: #E8E3E3; + border-radius: 0.4rem; + border: 0.2rem solid #B66467; + box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); +} + +.defaultFonts h1, +.defaultFonts h2, +.defaultFonts h3, +.defaultFonts h4, +.defaultFonts h5 { + font-family: "Lexend Deca", sans-serif; + text-rendering: optimizeLegibility; +} +.defaultFonts p, +.defaultFonts a, +.defaultFonts button, +.defaultFonts input { + font-family: "Secular One", sans-serif; + text-rendering: optimizeLegibility; +} + /* |------------------------------------------------------------- | INDEX @@ -151,28 +191,11 @@ nav .btn { 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; - text-rendering: optimizeLegibility; -} -.info-text p, -.info-text a, -.info-text button, -.info-text input { - font-family: "Secular One", sans-serif; - text-rendering: optimizeLegibility; -} .info-text h1 { - font-family: "Lexend Deca", sans-serif; margin-top: 0; margin-bottom: 1rem; } .info-text p { - font-family: "Secular One", sans-serif; margin-top: 0; margin-bottom: 1rem; } @@ -207,14 +230,10 @@ nav .btn { .gallery-root { margin-bottom: 1rem; padding: 0.25rem; - background-color: #151515; - color: #E8E3E3; display: flex; flex-direction: row; flex-wrap: wrap; - border: 0.2rem solid #8C977D; - border-radius: 0.4rem; - box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); + justify-content: none; } .gallery-item { @@ -275,6 +294,10 @@ nav .btn { } .nsfw-warning { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; width: 100%; height: 100%; top: 0; @@ -283,10 +306,6 @@ nav .btn { right: 0; position: absolute; z-index: 5; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; text-decoration: none; font-family: "Secular One", sans-serif; background-color: rgba(21, 21, 21, 0.7333333333); @@ -419,65 +438,6 @@ nav .btn { cursor: pointer; } -.image-description { - margin-bottom: 1rem; - padding: 0.5rem 0.5rem 0 0.5rem; - width: calc(100% - 1.4rem); - background-color: #151515; - color: #E8E3E3; - border-radius: 0.4rem; - border: 0.2rem solid #8C977D; - box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); -} -.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; - text-rendering: optimizeLegibility; -} -.image-description p, -.image-description a, -.image-description button, -.image-description input { - font-family: "Secular One", sans-serif; - text-rendering: optimizeLegibility; -} - -.image-detail { - margin-bottom: 1rem; - padding: 0.5rem 0.5rem 0 0.5rem; - width: calc(100% - 1.4rem); - background-color: #151515; - color: #E8E3E3; - border-radius: 0.4rem; - border: 0.2rem solid #8C977D; - box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); -} -.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; - text-rendering: optimizeLegibility; -} -.image-detail p, -.image-detail a, -.image-detail button, -.image-detail input { - font-family: "Secular One", sans-serif; - text-rendering: optimizeLegibility; -} .image-detail > div { width: 100%; display: flex; @@ -502,36 +462,6 @@ nav .btn { width: auto; } } -.tags-root { - margin-bottom: 1rem; - padding: 0.5rem 0.5rem 0 0.5rem; - width: calc(100% - 1.4rem); - background-color: #151515; - color: #E8E3E3; - border-radius: 0.4rem; - border: 0.2rem solid #8C977D; - box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); -} -.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; - text-rendering: optimizeLegibility; -} -.tags-root p, -.tags-root a, -.tags-root button, -.tags-root input { - font-family: "Secular One", sans-serif; - text-rendering: optimizeLegibility; -} - .tags { display: flex; flex-direction: row; @@ -552,72 +482,11 @@ nav .btn { content: "# "; } -.danger-zone { - margin-bottom: 1rem; - padding: 0.5rem 0.5rem 0 0.5rem; - width: calc(100% - 1.4rem); - background-color: #151515; - color: #E8E3E3; - border-radius: 0.4rem; - border: 0.2rem solid #B66467; - box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); -} -.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; - text-rendering: optimizeLegibility; -} -.danger-zone p, -.danger-zone a, -.danger-zone button, -.danger-zone input { - font-family: "Secular One", sans-serif; - text-rendering: optimizeLegibility; -} - /* |------------------------------------------------------------- | Groups |------------------------------------------------------------- */ -.group-root { - margin-bottom: 1rem; - padding: 0.5rem 0.5rem 0 0.5rem; - width: calc(100% - 1.4rem); - background-color: #151515; - color: #E8E3E3; - border-radius: 0.4rem; - border: 0.2rem solid #8C977D; - box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); - transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1) transform 0.15s cubic-bezier(0.19, 1, 0.22, 1); -} -.group-root > * { - margin-top: 0; - margin-bottom: 0.5rem; -} -.group-root h1, -.group-root h2, -.group-root h3, -.group-root h4, -.group-root h5 { - font-family: "Lexend Deca", sans-serif; - text-rendering: optimizeLegibility; -} -.group-root p, -.group-root a, -.group-root button, -.group-root input { - font-family: "Secular One", sans-serif; - text-rendering: optimizeLegibility; -} - .selectedImage { outline: #8C977D solid 0.3rem; } @@ -632,21 +501,8 @@ nav .btn { z-index: 6; opacity: 0; font-size: 17px; -} -.group-name h1, -.group-name h2, -.group-name h3, -.group-name h4, -.group-name h5 { - font-family: "Lexend Deca", sans-serif; - text-rendering: optimizeLegibility; -} -.group-name p, -.group-name a, -.group-name button, -.group-name input { font-family: "Secular One", sans-serif; - text-rendering: optimizeLegibility; + text-decoration: none; } .gallery-group { @@ -667,7 +523,6 @@ nav .btn { .group-item:hover .nsfw-warning > * { display: none; } - .group-item:hover .group-name { opacity: 1; } @@ -678,38 +533,11 @@ nav .btn { |------------------------------------------------------------- */ .profile-root { - margin-bottom: 1rem; - padding: 0.5rem 0.5rem 0 0.5rem; - width: calc(100% - 1.4rem); - background-color: #151515; - color: #E8E3E3; - border-radius: 0.4rem; - border: 0.2rem solid #8C977D; - box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); margin: 3rem auto 1rem auto; min-height: 7rem; position: relative; text-align: center; } -.profile-root > * { - margin-top: 0; - margin-bottom: 0.5rem; -} -.profile-root h1, -.profile-root h2, -.profile-root h3, -.profile-root h4, -.profile-root h5 { - font-family: "Lexend Deca", sans-serif; - text-rendering: optimizeLegibility; -} -.profile-root p, -.profile-root a, -.profile-root button, -.profile-root input { - font-family: "Secular One", sans-serif; - text-rendering: optimizeLegibility; -} .profile-root img { width: 9rem; height: 9rem; @@ -767,35 +595,6 @@ nav .btn { | UPLOAD |------------------------------------------------------------- */ -.upload-root { - margin-bottom: 1rem; - padding: 0.5rem 0.5rem 0 0.5rem; - width: calc(100% - 1.4rem); - background-color: #151515; - color: #E8E3E3; - border-radius: 0.4rem; - border: 0.2rem solid #8C977D; - box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); -} -.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; - text-rendering: optimizeLegibility; -} -.upload-root p, -.upload-root a, -.upload-root button, -.upload-root input { - font-family: "Secular One", sans-serif; - text-rendering: optimizeLegibility; -} .upload-root > img { margin: 0 auto; max-width: 100%; @@ -810,36 +609,6 @@ nav .btn { | ACCOUNT |------------------------------------------------------------- */ -.profile-settings { - margin-bottom: 1rem; - padding: 0.5rem 0.5rem 0 0.5rem; - width: calc(100% - 1.4rem); - background-color: #151515; - color: #E8E3E3; - border-radius: 0.4rem; - border: 0.2rem solid #8C977D; - box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); -} -.profile-settings > * { - margin-top: 0; - margin-bottom: 0.5rem; -} -.profile-settings h1, -.profile-settings h2, -.profile-settings h3, -.profile-settings h4, -.profile-settings h5 { - font-family: "Lexend Deca", sans-serif; - text-rendering: optimizeLegibility; -} -.profile-settings p, -.profile-settings a, -.profile-settings button, -.profile-settings input { - font-family: "Secular One", sans-serif; - text-rendering: optimizeLegibility; -} - .pfp-upload { display: flex; flex-direction: row; @@ -871,66 +640,6 @@ nav .btn { height: 10rem; } } -.account-root { - margin-bottom: 1rem; - padding: 0.5rem 0.5rem 0 0.5rem; - width: calc(100% - 1.4rem); - background-color: #151515; - color: #E8E3E3; - border-radius: 0.4rem; - border: 0.2rem solid #B66467; - box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); -} -.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; - text-rendering: optimizeLegibility; -} -.account-root p, -.account-root a, -.account-root button, -.account-root input { - font-family: "Secular One", sans-serif; - text-rendering: optimizeLegibility; -} - -.admin-root { - margin-bottom: 1rem; - padding: 0.5rem 0.5rem 0 0.5rem; - width: calc(100% - 1.4rem); - background-color: #151515; - color: #E8E3E3; - border-radius: 0.4rem; - border: 0.2rem solid #8C977D; - box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); -} -.admin-root > * { - margin-top: 0; - margin-bottom: 0.5rem; -} -.admin-root h1, -.admin-root h2, -.admin-root h3, -.admin-root h4, -.admin-root h5 { - font-family: "Lexend Deca", sans-serif; - text-rendering: optimizeLegibility; -} -.admin-root p, -.admin-root a, -.admin-root button, -.admin-root input { - font-family: "Secular One", sans-serif; - text-rendering: optimizeLegibility; -} - .tabs { display: flex; flex-direction: row; @@ -1105,86 +814,18 @@ nav .btn { top: 0; } -.signup-root { - margin-bottom: 1rem; - padding: 0.5rem 0.5rem 0 0.5rem; - width: calc(100% - 1.4rem); - background-color: #151515; - color: #E8E3E3; - border-radius: 0.4rem; - border: 0.2rem solid #8C977D; - box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); - display: none; -} -.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; - text-rendering: optimizeLegibility; -} -.signup-root p, -.signup-root a, -.signup-root button, -.signup-root input { - font-family: "Secular One", sans-serif; - text-rendering: optimizeLegibility; -} - -.login-root { - margin-bottom: 1rem; - padding: 0.5rem 0.5rem 0 0.5rem; - width: calc(100% - 1.4rem); - background-color: #151515; - color: #E8E3E3; - border-radius: 0.4rem; - border: 0.2rem solid #8C977D; - box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); -} -.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; - text-rendering: optimizeLegibility; -} -.login-root p, -.login-root a, -.login-root button, -.login-root input { - font-family: "Secular One", sans-serif; - text-rendering: optimizeLegibility; -} - /* |------------------------------------------------------------- | PASSWORD RESET |------------------------------------------------------------- */ .password-reset-root { - margin-bottom: 1rem; - padding: 0.5rem 0.5rem 0 0.5rem; - width: calc(100% - 1.4rem); background-color: #151515; color: #E8E3E3; border-radius: 0.4rem; border: 0.2rem solid #B66467; box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4); } -.password-reset-root > * { - margin-top: 0; - margin-bottom: 0.5rem; -} .password-reset-root h1, .password-reset-root h2, .password-reset-root h3, diff --git a/css/scss/_body.scss b/css/scss/_body.scss index e62d18d..a4c4448 100644 --- a/css/scss/_body.scss +++ b/css/scss/_body.scss @@ -1,26 +1,40 @@ +/* + |------------------------------------------------------------- + | DEFAULTS + |------------------------------------------------------------- +*/ +.defaultSpacing { + @include defaultSpacing(); +} + +.defaultDecoration { + @include defaultDecoration($page-accent); +} +.warningDecoration { + @include defaultDecoration($red); +} + +.defaultFonts { + @include defaultFont(); +} + /* |------------------------------------------------------------- | INDEX |------------------------------------------------------------- */ .info-text { - @include defaultFont(); - margin: 1rem 0 1rem 0.5rem; padding: 0; text-align: center; h1 { - font-family: $font-header; - margin-top: 0; margin-bottom: 1rem; } p { - font-family: $font-body; - margin-top: 0; margin-bottom: 1rem; } @@ -46,17 +60,7 @@ margin-bottom: 1rem; padding: 0.25rem; - background-color: $bg; - color: $fg; - - display: flex; - flex-direction: row; - flex-wrap: wrap; - - border: 0.2rem solid $page-accent; - - border-radius: $rad; - box-shadow: $shadow; + @include flexLeft(none); } .gallery-item { @@ -130,6 +134,9 @@ } .nsfw-warning { + @include flexDown(center); + align-items: center; + width: 100%; height: 100%; @@ -141,11 +148,6 @@ position: absolute; z-index: 5; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-decoration: none; font-family: $font-body; @@ -322,18 +324,9 @@ } } -// DESCRIPTION -.image-description { - @include defaultDecoration($page-accent); - @include defaultFont(); -} - // DETAILS .image-detail { - @include defaultDecoration($page-accent); - @include defaultFont(); - &>div { width: 100%; display: flex; @@ -364,12 +357,6 @@ } } -// TAGS -.tags-root { - @include defaultDecoration($page-accent); - @include defaultFont(); -} - .tags { @include flexLeft(auto); margin-bottom: 0; @@ -392,29 +379,15 @@ } } -// DANGER ZONE -.danger-zone { - @include defaultDecoration($red); - @include defaultFont(); -} - /* |------------------------------------------------------------- | Groups |------------------------------------------------------------- */ -.group-root { - @include defaultDecoration($page-accent); - @include defaultFont(); - - transition: outline 0.1s cubic-bezier(.19, 1, .22, 1) transform 0.15s cubic-bezier(.19, 1, .22, 1); -} .selectedImage { outline: $page-accent solid 0.3rem; } .group-name { - @include defaultFont(); - margin: 0; position: absolute; @@ -428,6 +401,8 @@ opacity: 0; font-size: 17px; + font-family: $font-body; + text-decoration: none; } .gallery-group { @@ -443,16 +418,18 @@ z-index: 5; } -.group-item:hover { - & .gallery-group { - backdrop-filter: brightness(0.5); +.group-item { + &:hover { + & .gallery-group { + backdrop-filter: brightness(0.5); + } + & .nsfw-warning > * { + display: none; + } + & .group-name { + opacity: 1; + } } - & .nsfw-warning > * { - display: none; - } -} -.group-item:hover .group-name { - opacity: 1; } /* |------------------------------------------------------------- @@ -460,9 +437,6 @@ |------------------------------------------------------------- */ .profile-root { - @include defaultDecoration($page-accent); - @include defaultFont(); - margin: 3rem auto 1rem auto; min-height: 7rem; @@ -536,9 +510,6 @@ |------------------------------------------------------------- */ .upload-root { - @include defaultDecoration($page-accent); - @include defaultFont(); - & > img { margin: 0 auto; @@ -557,10 +528,6 @@ | ACCOUNT |------------------------------------------------------------- */ -.profile-settings { - @include defaultDecoration($page-accent); - @include defaultFont(); -} .pfp-upload { display: flex; flex-direction: row; @@ -599,15 +566,6 @@ } } -.account-root { - @include defaultDecoration($red); - @include defaultFont(); -} -.admin-root { - @include defaultDecoration($page-accent); - @include defaultFont(); -} - .tabs { display: flex; flex-direction: row; @@ -794,17 +752,6 @@ top: 0; } -.signup-root { - @include defaultDecoration($page-accent); - @include defaultFont(); - // By default its hidden, in place is login - display: none; -} -.login-root { - @include defaultDecoration($page-accent); - @include defaultFont(); -} - /* |------------------------------------------------------------- | PASSWORD RESET diff --git a/css/scss/_mixin.scss b/css/scss/_mixin.scss index e61a226..dcc5897 100644 --- a/css/scss/_mixin.scss +++ b/css/scss/_mixin.scss @@ -1,9 +1,4 @@ @mixin defaultDecoration($border) { - margin-bottom: 1rem; - padding: 0.5rem 0.5rem 0 0.5rem; - - width: calc(100% - 1.4rem); - background-color: $bg; color: $fg; @@ -11,8 +6,13 @@ border: 0.2rem solid $border; box-shadow: $shadow; +} +@mixin defaultSpacing() { + margin-bottom: 1rem; + padding: 0.5rem 0.5rem 0 0.5rem; + width: calc(100% - 1.4rem); >* { margin-top: 0; diff --git a/group.php b/group.php index 645a058..48283db 100644 --- a/group.php +++ b/group.php @@ -18,7 +18,7 @@ <body> <?php require_once __DIR__."/assets/ui/nav.php"; ?> - <div class="group-root"> + <div class="defaultDecoration defaultSpacing defaultFonts"> <?php if (!isset($_GET['id']) || empty($_GET['id'])) { header("Location: index.php"); @@ -123,7 +123,7 @@ ?> </div> - <div class="gallery-root"> + <div class="gallery-root defaultDecoration"> <?php if (isset($_GET['mode']) && $_GET['mode'] == "edit") { $image_request = mysqli_query($conn, "SELECT * FROM images ORDER BY id DESC"); diff --git a/image.php b/image.php index 723e5a9..a0ab731 100644 --- a/image.php +++ b/image.php @@ -174,13 +174,13 @@ if ($image_present) { ?> - <div class="image-description default-window"> + <div class="defaultDecoration defaultSpacing defaultFonts"> <h2>Description</h2> <p><?php echo htmlentities($image_alt, ENT_QUOTES); ?></p> </div> - <div class="image-detail"> + <div class="image-detail defaultDecoration defaultSpacing defaultFonts"> <h2>Details</h2> <div> <div> @@ -261,7 +261,7 @@ </script> </div> - <div class="tags-root default-window"> + <div class="defaultDecoration defaultSpacing defaultFonts"> <h2>Tags</h2> <div class="tags"> <?php @@ -294,7 +294,7 @@ if ($privilaged) { ?> <!-- Danger zone --> - <div class='danger-zone'> + <div class='warningDecoration defaultSpacing defaultFonts'> <h2>Danger zone</h2> <!-- diff --git a/index.php b/index.php index f39f6ea..489b93f 100644 --- a/index.php +++ b/index.php @@ -26,7 +26,7 @@ } ?> -<div class="info-text"> +<div class="info-text defaultFonts"> <?php // Set time for message $time = date("H"); @@ -54,7 +54,7 @@ ?> </div> -<div class="gallery-root"> +<div class="gallery-root defaultDecoration"> <?php // Reading images from table $group_list = mysqli_query($conn, "SELECT * FROM groups ORDER BY id DESC"); @@ -75,20 +75,20 @@ echo "<div class='gallery-item group-item'> <a href='group.php?id=".$group['id']."' class='nsfw-warning gallery-group'><img class='svg' src='assets/icons/warning_red.svg'><span>NSFW</span></a> <a href='group.php?id=".$group['id']."'><img class='gallery-image nsfw-blur' loading='lazy' src='".$image_path."' id='".$group['id']."'></a> - <p class='group-name'>".$group['group_name']."</p> + <a href='group.php?id=".$group['id']."' class='group-name'>".$group['group_name']."</a> </div>"; } else { echo "<div class='gallery-item group-item'> <a href='group.php?id=".$group['id']."' class='gallery-group'></a> <a href='group.php?id=".$group['id']."'><img class='gallery-image' loading='lazy' src='".$image_path."' id='".$group['id']."'></a> - <p class='group-name'>".$group['group_name']."</p> + <a href='group.php?id=".$group['id']."' class='group-name'>".$group['group_name']."</a> </div>"; } } ?> </div> -<div class="gallery-root"> +<div class="gallery-root defaultDecoration"> <?php // Reading images from table $image_request = mysqli_query($conn, "SELECT * FROM images ORDER BY id DESC"); diff --git a/password-reset.php b/password-reset.php index fce1e82..679a00e 100644 --- a/password-reset.php +++ b/password-reset.php @@ -22,7 +22,7 @@ } ?> - <div class="password-reset-root"> + <div class="warningDecoration defaultSpacing defaultFonts"> <h2>Reset Password</h2> <p>After reset, you will be kicked out to login again</p> <br> @@ -32,6 +32,8 @@ <br> <button id="passwordSubmit" class="btn btn-bad" type="submit" name="reset"><img class="svg" src="assets/icons/sign-in.svg">Reset</button> </form> + <br> + <a href="account.php" class="btn btn-neutral" ><img class="svg" src="assets/icons/sign-in.svg">Cancel</a> </div> <script> diff --git a/profile.php b/profile.php index cca95d1..89baf0f 100644 --- a/profile.php +++ b/profile.php @@ -25,7 +25,7 @@ $join_date = new DateTime($user['created_at']); ?> - <div class="profile-root"> + <div class="profile-root defaultDecoration defaultSpacing defaultFonts"> <?php if (!empty($user)) { if (is_file("images/pfp/".$user['pfp_path'])) { @@ -49,7 +49,7 @@ ?> </div> - <div id="gallery" class="gallery-root"> + <div id="gallery" class="gallery-root defaultDecoration"> <?php // Reading images from table diff --git a/upload.php b/upload.php index 29c4b2c..440bccf 100644 --- a/upload.php +++ b/upload.php @@ -24,7 +24,7 @@ } ?> - <div class="upload-root"> + <div class="defaultDecoration defaultSpacing defaultFonts"> <h2>Upload image</h2> <p>In this world you have 2 choices, to upload a really cute picture of an animal or fursuit, or something other than those 2 things.</p> <img id="imagePreview" src="">