Conditional rendering, pages updated

assets/styles/main.css

@@ -15696,10 +15696,6 @@ body {
   background: radial-gradient(circle at left, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
 }
 
-#pogger {
-  transition: min-height 0.5s linear;
-}
-
 .scrollbar {
   min-height: 128px;
   scrollbar-width: thin;
@@ -15747,6 +15743,16 @@ body {
     background: radial-gradient(circle at left, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
   }
 }
+.floaty {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: fit-content;
+  height: fit-content;
+  margin: auto;
+}
+
 @media (min-width: 601px) {
   #ender-app {
     height: 100%;
@@ -15759,7 +15765,7 @@ body {
     min-height: fit-content;
     max-height: 90%;
   }
-  .fade-mask {
+  .fade-mask-sm {
     mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgb(0, 0, 0) 5%, rgb(0, 0, 0) 95%, rgba(0, 0, 0, 0));
   }
   .rounded-1 {

assets/styles/main.scss

@@ -138,10 +138,6 @@ body {
   );
 }
 
-#pogger {
-  transition: min-height 0.5s linear;
-}
-
 .scrollbar {
   min-height: 128px;
 
@@ -176,9 +172,9 @@ body {
     }
 
     &::-webkit-scrollbar-thumb {
-    border-radius: 8px;
-    background-color: rgba(0, 0, 0, 0.2);
-  }
+      border-radius: 8px;
+      background-color: rgba(0, 0, 0, 0.2);
+    }
   }
 
   .background {
@@ -209,6 +205,19 @@ body {
   }
 }
 
+.floaty {
+  position: fixed;
+
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  width: fit-content;
+  height: fit-content;
+
+  margin: auto;
+}
+
 // Dynamic classes.
 @include media-breakpoint-up(sm) {
   #ender-app {
@@ -226,7 +235,7 @@ body {
     max-height: 90%;
   }
 
-  .fade-mask {
+  .fade-mask-sm {
     mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0));
   }