From bc7dfb481a5bd537cec745013ae94a1a7df257ff Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Thu, 22 Sep 2022 19:39:15 +0000
Subject: [PATCH] Random fixes

---
 Sniffle/sniffle.css      |  2 +-
 account.php              |  9 ++--
 css/main.css             | 89 +++++++++++++++++++++++-----------------
 css/main.scss            |  4 +-
 css/scss/_body.scss      | 41 ++++++++++++------
 css/scss/_variables.scss |  2 +-
 image.php                |  4 +-
 7 files changed, 91 insertions(+), 60 deletions(-)

diff --git a/Sniffle/sniffle.css b/Sniffle/sniffle.css
index 4bfa591..17e04f9 100644
--- a/Sniffle/sniffle.css
+++ b/Sniffle/sniffle.css
@@ -66,7 +66,7 @@
   z-index: 1;
   transform: scale(1);
   opacity: 1;
-  transition: transform 1s cubic-bezier(.19,1,.22,1), opacity 0.25s cubic-bezier(.19,1,.22,1);
+  transition: transform 1s cubic-bezier(.08,.82,.16,1.01), opacity 0.25s cubic-bezier(.08,.82,.16,1.01);
 }
 .sniffle-notification:nth-of-type(2) {
   z-index: -1;
diff --git a/account.php b/account.php
index e3efe7d..e8d17b7 100644
--- a/account.php
+++ b/account.php
@@ -24,12 +24,11 @@
 		if ($user_info->is_loggedin()) {
 		?>
 			<div class="profile-settings">
-				<h2>Profile Settings</h2>
-				<h3>Profile Picture</h3>
+				<h2>Profile</h2>
 				<div class="pfp-upload">
 					<form id="pfpForm" method="POST" enctype="multipart/form-data">
+						<h3>Profile Picture</h3>
 						<input id="image" class="btn btn-neutral" type="file" placeholder="select image UwU">
-						<br>
 						<button id="pfpSubmit" class="btn btn-good" type="submit"><img class="svg" src="assets/icons/upload.svg">Upload Image</button>
 					</form>
 					<?php
@@ -81,7 +80,7 @@
 			</div>
 
 			<div class="account-root">
-				<h2>Account Settings</h2>
+				<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>
 				<br>
@@ -149,7 +148,7 @@
 				if ($user_info->is_admin($conn, $_SESSION['id'])) {
 				?>
 					<div class="admin-root">
-						<h2>Admin controlls</h2>
+						<h2>Admin</h2>
 						<h3>Invite Codes</h3>
 						<?php
 						$token_request = mysqli_query($conn, "SELECT * FROM tokens WHERE used = 0");
diff --git a/css/main.css b/css/main.css
index b28fcb3..f359cbb 100644
--- a/css/main.css
+++ b/css/main.css
@@ -21,7 +21,7 @@
   --white: #E8E3E3;
   --accent: #8C977D;
   --shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
-  --rad: 0.3rem;
+  --rad: 0.4rem;
 }
 
 /*
@@ -35,7 +35,7 @@ nav {
   width: calc(100% - 1.4rem);
   background-color: #151515;
   color: #E8E3E3;
-  border-radius: 0.3rem;
+  border-radius: 0.4rem;
   border: 0.2rem solid #8C977D;
   box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
   display: flex;
@@ -213,7 +213,7 @@ nav .btn {
   flex-direction: row;
   flex-wrap: wrap;
   border: 0.2rem solid #8C977D;
-  border-radius: 0.3rem;
+  border-radius: 0.4rem;
   box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
 }
 
@@ -224,7 +224,7 @@ nav .btn {
   max-width: calc(20% - 0.5rem);
   min-width: calc(20% - 0.5rem);
   background-color: #151515;
-  border-radius: -0.2rem;
+  border-radius: -0.1rem;
   position: relative;
   overflow: hidden;
   flex: 1 0 150px;
@@ -267,7 +267,7 @@ nav .btn {
      object-fit: cover;
   -o-object-position: center;
      object-position: center;
-  border-radius: -0.2rem;
+  border-radius: -0.1rem;
 }
 
 .nsfw-blur {
@@ -336,11 +336,11 @@ nav .btn {
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
-  border-radius: 0.3rem;
+  border-radius: 0.4rem;
   z-index: 1;
 }
 .fullscreen-image button {
-  padding: 0;
+  padding: 0.25rem;
   width: 2rem;
   height: 2rem;
   position: absolute;
@@ -349,7 +349,7 @@ nav .btn {
   display: block;
   box-sizing: border-box;
   border: none;
-  border-radius: 0.3rem;
+  border-radius: 0.4rem;
   transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
   background-color: #121212;
   z-index: 2;
@@ -375,7 +375,7 @@ nav .btn {
   background-color: rgba(21, 21, 21, 0.7333333333);
   -webkit-backdrop-filter: blur(8px);
           backdrop-filter: blur(8px);
-  border-radius: 0.3rem;
+  border-radius: 0.4rem;
   transition: max-height 0.15s cubic-bezier(0.19, 1, 0.22, 1);
 }
 
@@ -390,11 +390,12 @@ nav .btn {
   width: auto;
   max-height: inherit;
   height: auto;
-  border-radius: 0.3rem;
+  border-radius: 0.4rem;
   transition: opacity 0.5s;
 }
 
 .preview-button {
+  padding: 0.25rem;
   width: 2rem;
   height: 2rem;
   position: absolute;
@@ -403,9 +404,9 @@ nav .btn {
   display: block;
   box-sizing: border-box;
   border: none;
-  border-radius: 0.3rem;
+  border-radius: 0.4rem;
   transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
-  background-color: #121212;
+  background-color: rgba(21, 21, 21, 0.7333333333);
   z-index: 2;
 }
 .preview-button img {
@@ -424,7 +425,7 @@ nav .btn {
   width: calc(100% - 1.4rem);
   background-color: #151515;
   color: #E8E3E3;
-  border-radius: 0.3rem;
+  border-radius: 0.4rem;
   border: 0.2rem solid #8C977D;
   box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
 }
@@ -454,7 +455,7 @@ nav .btn {
   width: calc(100% - 1.4rem);
   background-color: #151515;
   color: #E8E3E3;
-  border-radius: 0.3rem;
+  border-radius: 0.4rem;
   border: 0.2rem solid #8C977D;
   box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
 }
@@ -507,7 +508,7 @@ nav .btn {
   width: calc(100% - 1.4rem);
   background-color: #151515;
   color: #E8E3E3;
-  border-radius: 0.3rem;
+  border-radius: 0.4rem;
   border: 0.2rem solid #8C977D;
   box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
 }
@@ -544,7 +545,7 @@ nav .btn {
   padding: 0.5rem;
   display: block;
   background-color: #8C977D;
-  border-radius: calc(0.3rem - (0.5rem + 3px));
+  border-radius: -0.3rem;
   font-family: "Secular One", sans-serif;
 }
 .tag::before {
@@ -557,7 +558,7 @@ nav .btn {
   width: calc(100% - 1.4rem);
   background-color: #151515;
   color: #E8E3E3;
-  border-radius: 0.3rem;
+  border-radius: 0.4rem;
   border: 0.2rem solid #B66467;
   box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
 }
@@ -592,7 +593,7 @@ nav .btn {
   width: calc(100% - 1.4rem);
   background-color: #151515;
   color: #E8E3E3;
-  border-radius: 0.3rem;
+  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;
@@ -628,7 +629,7 @@ nav .btn {
   left: 6rem;
   top: -3rem;
   transform: translateX(-50%);
-  border-radius: 0.3rem;
+  border-radius: 0.4rem;
   border: #8C977D 0.2rem solid;
   background-color: #151515;
 }
@@ -682,7 +683,7 @@ nav .btn {
   width: calc(100% - 1.4rem);
   background-color: #151515;
   color: #E8E3E3;
-  border-radius: 0.3rem;
+  border-radius: 0.4rem;
   border: 0.2rem solid #8C977D;
   box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
 }
@@ -717,7 +718,7 @@ nav .btn {
   width: calc(100% - 1.4rem);
   background-color: #151515;
   color: #E8E3E3;
-  border-radius: 0.3rem;
+  border-radius: 0.4rem;
   border: 0.2rem solid #8C977D;
   box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
 }
@@ -742,27 +743,41 @@ nav .btn {
 }
 
 .pfp-upload {
-  margin-bottom: 0;
   display: flex;
   flex-direction: row;
 }
 .pfp-upload > img {
-  margin-left: 1rem;
-  width: 7.25rem;
-  height: 7.25rem;
+  margin-left: 0.5rem;
+  width: 7.8rem;
+  height: 7.8rem;
   -o-object-fit: cover;
      object-fit: cover;
-  border-radius: calc(0.3rem - (0.5rem + 3px));
+  border-radius: -0.3rem;
   background-color: #121212;
 }
+.pfp-upload form > * {
+  margin: 0 0 0.5rem 0;
+}
+.pfp-upload form > *:last-child {
+  margin: 0 0 0 0;
+}
 
+@media (max-width: 621px) {
+  .pfp-upload {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+  .pfp-upload > img {
+    margin: 0 auto 1rem;
+  }
+}
 .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.3rem;
+  border-radius: 0.4rem;
   border: 0.2rem solid #8C977D;
   box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
 }
@@ -792,7 +807,7 @@ nav .btn {
   width: calc(100% - 1.4rem);
   background-color: #151515;
   color: #E8E3E3;
-  border-radius: 0.3rem;
+  border-radius: 0.4rem;
   border: 0.2rem solid #8C977D;
   box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
 }
@@ -840,7 +855,7 @@ nav .btn {
   display: none;
   flex-direction: column;
   background-color: #151515;
-  border-radius: calc(0.3rem - (0.5rem + 3px));
+  border-radius: -0.3rem;
 }
 
 .log {
@@ -887,7 +902,7 @@ nav .btn {
   display: none;
   flex-direction: column;
   background-color: #151515;
-  border-radius: calc(0.3rem - (0.5rem + 3px));
+  border-radius: -0.3rem;
 }
 
 .ban {
@@ -941,7 +956,7 @@ nav .btn {
   display: none;
   flex-direction: column;
   background-color: #151515;
-  border-radius: calc(0.3rem - (0.5rem + 3px));
+  border-radius: -0.3rem;
 }
 
 .user {
@@ -996,7 +1011,7 @@ nav .btn {
   width: calc(100% - 1.4rem);
   background-color: #151515;
   color: #E8E3E3;
-  border-radius: 0.3rem;
+  border-radius: 0.4rem;
   border: 0.2rem solid #8C977D;
   box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
   display: none;
@@ -1027,7 +1042,7 @@ nav .btn {
   width: calc(100% - 1.4rem);
   background-color: #151515;
   color: #E8E3E3;
-  border-radius: 0.3rem;
+  border-radius: 0.4rem;
   border: 0.2rem solid #8C977D;
   box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
 }
@@ -1062,7 +1077,7 @@ nav .btn {
   width: calc(100% - 1.4rem);
   background-color: #151515;
   color: #E8E3E3;
-  border-radius: 0.3rem;
+  border-radius: 0.4rem;
   border: 0.2rem solid #B66467;
   box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
 }
@@ -1166,7 +1181,7 @@ body * {
   font-family: "Secular One", sans-serif;
   text-decoration: none;
   border: none;
-  border-radius: calc(0.3rem - (0.5rem + 3px));
+  border-radius: -0.3rem;
   transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
 }
 .btn:hover {
@@ -1182,7 +1197,7 @@ body * {
   text-decoration: none;
   background-color: #E8E3E3;
   border: none;
-  border-radius: calc(0.3rem - (0.5rem + 3px));
+  border-radius: -0.3rem;
 }
 .btn:where(input[type=file])::file-selector-button {
   margin: -0.25rem 0.5rem -0.25rem -0.25rem;
@@ -1192,7 +1207,7 @@ body * {
   text-decoration: none;
   background-color: #E8E3E3;
   border: none;
-  border-radius: calc(0.3rem - (0.5rem + 3px));
+  border-radius: -0.3rem;
 }
 
 a.btn {
diff --git a/css/main.scss b/css/main.scss
index bf58976..6ab093d 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -78,7 +78,7 @@ body {
     text-decoration: none;
 
     border: none;
-    border-radius: calc($rad - (0.5rem + 3px));
+    border-radius: calc($rad - 0.7rem);
 
     transition: outline 0.1s cubic-bezier(.19, 1, .22, 1);
 
@@ -102,7 +102,7 @@ body {
         background-color: $white;
 
         border: none;
-        border-radius: calc($rad - (0.5rem + 3px));
+        border-radius: calc($rad - 0.7rem);
     }
 }
 
diff --git a/css/scss/_body.scss b/css/scss/_body.scss
index 5f81035..73b707d 100644
--- a/css/scss/_body.scss
+++ b/css/scss/_body.scss
@@ -214,7 +214,7 @@
     }
 
     button {
-        padding: 0;
+        padding: 0.25rem;
 
         width: 2rem; height: 2rem;
     
@@ -288,6 +288,8 @@
 }
 
 .preview-button {
+    padding: 0.25rem;
+
     width: 2rem; height: 2rem;
 
     position: absolute;
@@ -302,7 +304,7 @@
 
     transition: outline 0.1s cubic-bezier(.19, 1, .22, 1);
 
-    background-color: $black;
+    background-color: $bg-alt;
 
     z-index: +2;
 
@@ -381,7 +383,7 @@
 
     background-color: $page-accent;
 
-    border-radius: calc($rad - (0.5rem + 3px));
+    border-radius: calc($rad - 0.7rem);
 
     font-family: $font-body;
 
@@ -492,23 +494,38 @@
     @include defaultFont();
 }
 .pfp-upload {
-    margin-bottom: 0;
-    
     display: flex;
     flex-direction: row;
 
     & > img {
-        margin-left: 1rem;
+        margin-left: 0.5rem;
 
-        width: 7.25rem;
-        height: 7.25rem;
+        width: 7.8rem;
+        height: 7.8rem;
 
         object-fit: cover;
 
-        border-radius: calc($rad - (0.5rem + 3px));
+        border-radius: calc($rad - 0.7rem);
 
         background-color: $black;
     }
+
+    form > * {
+        margin: 0 0 0.5rem 0;
+    }
+    form > *:last-child {
+        margin: 0 0 0 0;
+    }
+}
+@media (max-width: 621px) {
+    .pfp-upload {
+        display: flex;
+        flex-direction: column-reverse;
+    
+        & > img {
+            margin: 0 auto 1rem;
+        }
+    }
 }
 
 .account-root {
@@ -546,7 +563,7 @@
     display: none; flex-direction: column;
 
     background-color: $bg;
-    border-radius: calc($rad - (0.5rem + 3px));
+    border-radius: calc($rad - 0.7rem);
 }
 .log {
     min-width: 769px;
@@ -598,7 +615,7 @@
     display: none; flex-direction: column;
 
     background-color: $bg;
-    border-radius: calc($rad - (0.5rem + 3px));
+    border-radius: calc($rad - 0.7rem);
 }
 .ban {
     min-width: 769px;
@@ -656,7 +673,7 @@
     display: none; flex-direction: column;
 
     background-color: $bg;
-    border-radius: calc($rad - (0.5rem + 3px));
+    border-radius: calc($rad - 0.7rem);
 }
 .user {
     min-width: 769px;
diff --git a/css/scss/_variables.scss b/css/scss/_variables.scss
index c717ce7..1104a3c 100644
--- a/css/scss/_variables.scss
+++ b/css/scss/_variables.scss
@@ -13,7 +13,7 @@ $white: #E8E3E3;
 $page-accent: #8C977D;
 
 $shadow: 6px 6px 2px #15151566;
-$rad: 0.3rem;
+$rad: 0.4rem;
 
 $weight-bold: 621;
 $weight-normal: 400;
diff --git a/image.php b/image.php
index d49c821..70a7184 100644
--- a/image.php
+++ b/image.php
@@ -184,8 +184,8 @@
 				<div>
 					<?php
 						// User
-						if ($user_info->is_admin($conn, $image['author'])) {
-							echo "<p>Author: <a href='profile.php?user=".$image['author']."' class='link'>".$image_author."</a><img class='svg' style='margin: 0 0 0.1rem 0.2rem;' src='assets/icons/crown-simple.svg'></p>";
+						if (empty($image['author'])) {
+							echo "<p>Author: ".$image_author."</p>";
 						} else {
 							echo "<p>Author: <a href='profile.php?user=".$image['author']."' class='link'>".$image_author."</a></p>";
 						}