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="">