From bf449271e60f5ecbc3d8053092c3da167f201416 Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Mon, 8 Aug 2022 19:59:40 +0100
Subject: [PATCH] Fixing up some CSS

---
 Flyout/flyout.css   | 18 ++++++++++++------
 Flyout/flyout.js    |  4 ++++
 Sniffle/sniffle.css |  2 +-
 css/footer.css      |  2 +-
 css/master.css      | 20 +++++++++++---------
 css/nav.css         |  6 +++++-
 6 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/Flyout/flyout.css b/Flyout/flyout.css
index fdd968a..4a60e7a 100644
--- a/Flyout/flyout.css
+++ b/Flyout/flyout.css
@@ -1,13 +1,16 @@
 .flyout-dim {
+  margin: 0; padding: 0;
+
   width: 100vw; height: 100vh;
 
   display: none;
 
-  position: fixed; z-index: 99;
+  top: 0; bottom: 0; left: 0; right: 0;
 
-  object-position: center;
+  position: fixed; z-index: 999;
 
-  background-color: #151515aa;
+  background-color: var(--bg);
+  backdrop-filter: blur(8px);
 
   opacity: 0;
 
@@ -20,18 +23,21 @@
   max-width: 621px; width: calc(100% - 3.5rem);
   max-height: 20rem; height: auto; min-height: 10rem;
 
-  position: fixed; z-index: 999999999;
+  position: fixed; z-index: 9999;
   left: 50%; bottom: -15rem;
   transform: translateX(-50%) scale(0.5);
 
-  background-color: #151515;
+  overflow-y: auto;
+
+  background-color: var(--bg);
+  backdrop-filter: blur(8px);
   color: white;
 
   transition: transform 1s cubic-bezier(.19,1,.22,1), bottom 1s cubic-bezier(.19,1,.22,1);
 
   border-radius: var(--rad);
   border: 0.2rem solid var(--green);
-  outline: 0.5rem solid var(--bg);
+  /*outline: 0.5rem solid var(--bg);*/
 }
 
 .flyout-header {
diff --git a/Flyout/flyout.js b/Flyout/flyout.js
index acf9172..c929271 100644
--- a/Flyout/flyout.js
+++ b/Flyout/flyout.js
@@ -8,6 +8,8 @@ $(document).ready(function() {
 });
 
 function flyoutShow(header, description, actionbox) {
+  // Hide overflow
+  document.querySelector("html").style.overflow = "hidden";
   // Checking if actionbox is set
   if (typeof actionbox === 'undefined') {
     flyoutActionbox.style.display = "none";
@@ -36,6 +38,8 @@ function flyoutShow(header, description, actionbox) {
 };
 
 function flyoutClose() {
+  // Show overflow
+  document.querySelector("html").style.overflow = "auto";
   // Hide the flyout
   flyoutRoot.style.transform = "translateX(-50%) scale(0.5)";
   flyoutRoot.style.bottom = "-20rem";
diff --git a/Sniffle/sniffle.css b/Sniffle/sniffle.css
index f55b256..38a2bf5 100644
--- a/Sniffle/sniffle.css
+++ b/Sniffle/sniffle.css
@@ -41,7 +41,7 @@
 
   background-color: #151515;
 
-  box-shadow: 5px 5px 5px #151515aa;
+  box-shadow: var(--shadow);
 
   transition: transform 1s cubic-bezier(.19,1,.22,1), opacity 0.2s cubic-bezier(.19,1,.22,1);
 
diff --git a/css/footer.css b/css/footer.css
index c9491d3..d409e7c 100644
--- a/css/footer.css
+++ b/css/footer.css
@@ -10,7 +10,7 @@ footer {
   backdrop-filter: blur(8px);
 
   border: 0.2rem solid var(--green);
-  outline: 0.5rem solid var(--bg);
+  /*outline: 0.5rem solid var(--bg);*/
 
   border-radius: var(--rad);
   box-shadow: var(--shadow);
diff --git a/css/master.css b/css/master.css
index cf789b7..01bfeb4 100644
--- a/css/master.css
+++ b/css/master.css
@@ -11,7 +11,7 @@
 @import "footer.css";
 
 :root {
-  --bg: #15151588;
+  --bg: #151515bb;
   --bg-1: #242621;
   --bg-2: #1D1E1C;
   --bg-3: #151515;
@@ -25,8 +25,8 @@
   --black: #151515;
   --white: #E8E3E3;
 
-  --shadow: 6px 6px 10px #15151588;
-  --rad: 5px;
+  --shadow: 6px 6px 2px #15151588;
+  --rad: 2px;
 
   --square: 33.33%;
 }
@@ -62,6 +62,8 @@ body {
 
   display: flex;
 
+  position: relative;
+
   flex-direction: column;
   justify-content: space-between;
 }
@@ -72,7 +74,7 @@ body {
 #back-to-top {
   margin: 0; padding: 0.5rem;
 
-  position: fixed; z-index: 9999999;
+  position: fixed; z-index: 99;
   right: -2.5rem; bottom: 1rem;
 
   object-position: center;
@@ -109,7 +111,7 @@ body {
   background-color: var(--bg);
   backdrop-filter: blur(8px);
 
-  outline: 0.5rem solid var(--bg);
+  /*outline: 0.5rem solid var(--bg);*/
 
   border-radius: var(--rad);
   box-shadow: var(--shadow);
@@ -152,7 +154,7 @@ body {
   backdrop-filter: blur(8px);
 
   border: 0.2rem solid var(--green);
-  outline: 0.5rem solid var(--bg);
+  /*outline: 0.5rem solid var(--bg);*/
 
   border-radius: var(--rad);
   box-shadow: var(--shadow);
@@ -203,7 +205,7 @@ body {
   -=-=-= IMAGE FULLSCREEN =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
 */
 .image-container {
-  padding: 0.5rem;
+  /*padding: 0.5rem;*/
   width: calc(100vw - var(--space-medium));
   max-height: 69vh; height: auto;
 
@@ -212,7 +214,7 @@ body {
 
   background-color: var(--bg);
   backdrop-filter: blur(8px);
-  outline: 0.5rem solid var(--bg);
+  /*outline: 0.5rem solid var(--bg);*/
 
   border-radius: var(--rad);
 
@@ -355,7 +357,7 @@ body {
   display: block;
 
   border-radius: var(--rad);
-  outline: 0.5rem solid var(--bg);
+  /*outline: 0.5rem solid var(--bg);*/
 }
 
 .alert {
diff --git a/css/nav.css b/css/nav.css
index 28526ba..a5cd364 100644
--- a/css/nav.css
+++ b/css/nav.css
@@ -16,7 +16,7 @@ nav {
   backdrop-filter: blur(8px);
 
   border: 0.2rem solid var(--green);
-  outline: 0.5rem solid var(--bg);
+  /*outline: 0.5rem solid var(--bg);*/
 
   border-radius: var(--rad);
   box-shadow: var(--shadow);
@@ -33,6 +33,10 @@ nav hr {
 }
 
 .nav-name p, .nav-name {
+  font-family: "Lexend Deca", sans-serif;
+
+  font-size: 22px;
+
   display: block;
 }
 .nav-links {