Yaml config files

Fixed some Sass issues
No image... image
Squished some bugs involving uploading broken files

gallery/user/example.yml

@@ -0,0 +1,21 @@
+# THIS IS AN EXAMPLE CONFIG, RENAME THIS TO conf.yml TO USE
+
+admin:
+  name: Real Person
+  username: User
+  email: real-email@some.place
+
+upload:
+  allowed-extensions: 
+    - png
+    - jpg
+    - jpeg
+    - webp
+  max-size: 69MB
+  rename: GWA_{{username}}_{{time}}
+
+website:
+  name: OnlyLegs
+  motto: Gwa Gwa
+  language: english # Placeholder for future language support endevours
+

gallery/user/themes/default/buttons/img-tool.scss

@@ -5,6 +5,8 @@
     width: 2.5rem;
     height: 2.5rem;
 
+    position: relative;
+
     border: none;
     background-color: transparent;
     color: $white100;
@@ -18,12 +20,49 @@
         cursor: pointer;
 
         color: $green;
+
+        .tool-tip {
+            opacity: 1;
+            top: -2.5rem;
+            //transition-delay: 0.5s;
+        }
     }
 }
 .tool-btn--evil {
     color: $red;
 
+    span {
+        background-color: $red;
+    }
+
     &:hover {
         color: $white100;
     }
+}
+
+.tool-tip {
+    margin: 0;
+    padding: 0.5rem 0.75rem;
+
+    width: auto;
+
+    display: block;
+
+    position: absolute;
+    top: -1.7rem;
+    left: 0;
+    transform: translateX(calc(-50% + 1.25rem ));
+
+    font-family: $font-body;
+    font-size: 1rem;
+    font-weight: 600;
+
+    background-color: $black300;
+    color: $white100;
+    opacity: 0;
+    border-radius: $rad;
+
+    transition: opacity 0.2s cubic-bezier(.76,0,.17,1), top 0.2s cubic-bezier(.76,0,.17,1);
+
+    pointer-events: none;
 }

gallery/user/themes/default/buttons/up.scss

@@ -1,9 +1,9 @@
 #topButton {
     margin: 0;
-    padding: 0.25rem;
+    padding: 0.5rem;
 
-    width: 3rem;
-    height: 3rem;
+    width: 2.5rem;
+    height: 2.5rem;
 
     position: fixed;
     bottom: 0.75rem;

gallery/user/themes/default/style.scss

@@ -236,6 +236,56 @@
 
 }
 
+.image__fullscreen {
+    margin: 0;
+    padding: 0 0 0 3.5rem;
+
+    width: 100%;
+    height: 100dvh;
+
+    position: fixed;
+    top: -100%;
+    left: 0;
+
+    display: flex;
+    opacity: 0; // hide
+
+    background-color: rgba($black100, 0.8);
+    backdrop-filter: blur(1rem);
+    z-index: 21;
+
+    box-sizing: border-box;
+
+    img {
+        margin: auto;
+        padding: 0;
+
+        width: auto;
+        height: auto;
+        max-width: calc(100% - 1rem);
+        max-height: calc(100% - 1rem);
+
+        object-fit: contain;
+        object-position: center;
+
+        transform: scale(0.8);
+
+        border-radius: $rad;
+    }
+}
+.image__fullscreen--active {
+    top: 0;
+
+    opacity: 1; // show
+
+    transition: opacity 0.3s cubic-bezier(.79, .14, .15, .86);
+
+    img {
+        transform: scale(1);
+        transition: transform 0.2s cubic-bezier(.68,-0.55,.27,1.55);
+    }
+}
+
 .image__container {
     margin: 0;
     padding: 0;
@@ -259,15 +309,12 @@
 
         max-width: 100%;
         height: 100%;
-        max-height: 75vh;
-
-        background: linear-gradient(-45deg, $black100, $black400 40%, $black100);
-        background-size: 400% 400%;
-        border-radius: $rad;
-        animation: imgLoading 10s ease infinite;
+        max-height: 69vh;
 
         object-fit: contain;
         object-position: center;
+
+        border-radius: $rad;
     }
 }
 

gallery/user/themes/default/ui/main.scss

@@ -47,7 +47,7 @@ main {
             height: 100%;
 
             background-image: linear-gradient(to bottom, #00000000, rgba($black100, 1));
-            backdrop-filter: blur(0.5rem);
+            backdrop-filter: blur(1rem);
 
             z-index: +1;
         }

gallery/user/themes/default/ui/nav.scss

@@ -18,7 +18,7 @@ nav {
     color: $white100;
 
     box-sizing: border-box;
-    z-index: 2;
+    z-index: 69;
     transition: width 0.4s cubic-bezier(.76,0,.17,1), background-color 0.3s ease-in-out;
 
     div {