Update to reccommended file structure

Use reccommended database structure
Switch to SQLite and update scheme along with it

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

@@ -0,0 +1,15 @@
+.btn {    
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+
+    border: 1px solid rgba($white100, 0.3);
+    background-color: rgba($white100, 0);
+    color: $white100;
+
+    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
+
+    &:active {
+        border-color: rgba($white100, 1);
+        color: $white100;
+    }
+}

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

@@ -0,0 +1,29 @@
+#topButton {
+    margin: 0;
+    padding: 0.25rem;
+
+    position: fixed;
+    bottom: 0.75rem;
+    right: -3rem;
+
+    font-size: 3rem;
+
+    display: flex; // hidden
+    justify-content: center;
+    align-items: center;
+
+    border-radius: 50%;
+    background-color: $black300;
+    opacity: 0; // hidden
+
+    z-index: 2;
+
+    cursor: pointer;
+
+    transition: all 0.2s cubic-bezier(.86, 0, .07, 1);
+
+    &:hover {
+        background-color: $black200;
+        color: $green;
+    }
+}

gallery/user/themes/default/style.scss

@@ -0,0 +1,283 @@
+@import 'variables/variables';
+@import 'variables/fonts';
+
+@import 'ui/reset';
+@import 'ui/nav';
+@import 'ui/main';
+
+@import 'buttons/btn';
+@import 'buttons/up';
+
+.app {
+    margin: 0 0 0 3.5rem;
+    padding: 0.5rem;
+
+    width: auto;
+    min-height: 100vh;
+
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    background-color: $black100;
+    color: $white100;
+
+    box-sizing: border-box;
+    z-index: 1;
+    overflow: unset;
+
+    h1 {
+        margin: 0;
+        padding: 0;
+
+        font-family: $font-header;
+        font-size: 2.5rem;
+        font-stretch: ultra-expanded;
+        font-weight: 600;
+
+        color: $green;
+    }
+}
+
+@keyframes imgLoading {
+    0% {
+        background-position: 0% 50%;
+    }
+
+    50% {
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+.err-warning {
+    min-height: 60vh;
+
+    gap: 0;
+
+    h1 {
+        margin: 0 auto;
+        padding: 0;
+
+        font-family: $font-header;
+        font-size: 5rem;
+        font-weight: 900;
+        line-height: 1;
+
+        color: $green;
+    }
+    p {
+        margin: 0 auto;
+        padding: 0;
+
+        font-family: $font-body;
+        font-size: 2rem;
+        font-weight: 600;
+        line-height: 1;
+
+        color: $white100;
+    }
+}
+
+.gallery {
+    margin: 0;
+    padding: 0;
+
+    width: 100%;
+
+    display: grid;
+    grid-template-columns: auto auto auto auto auto auto;
+    gap: 0.5rem;
+
+    .gallery__item {
+        margin: 0;
+        padding: 0;
+
+        height: auto;
+
+        position: relative;
+
+        background: linear-gradient(-45deg, $black100, $black400 40%, $black100);
+        background-size: 400% 400%;
+        border-radius: $rad;
+        animation: imgLoading 10s ease infinite;
+
+        box-sizing: border-box;
+        overflow: hidden;
+
+        &:after {
+            content: "";
+            display: block;
+            padding-bottom: 100%;
+        }
+
+        .gallery__item-info {
+            margin: 0;
+            padding: 0;
+
+            width: 100%;
+            height: 100%;
+
+            position: absolute;
+            left: 0;
+            bottom: 0;
+
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
+
+            background-image: linear-gradient(to bottom, #00000000, rgba($black100, 0.8));
+
+            z-index: +1;
+
+            opacity: 0; // hide
+            transform: scale(1.05); // scale up
+            transition: all 0.5s cubic-bezier(.79, .14, .15, .86);
+
+            h2 {
+                margin: 0;
+                padding: 0 1rem 0.5rem;
+
+                font-family: $font-header;
+                font-size: 1rem;
+                font-stretch: ultra-expanded;
+                font-weight: 600;
+
+                color: $green;
+
+                text-overflow: ellipsis;
+                overflow: hidden;
+
+                opacity: 0; // hide
+                transition: all 0.2s ease-in-out;
+            }
+
+            p {
+                margin: 0;
+                padding: 0 1rem 0.5rem;
+
+                font-family: $font-body;
+                font-size: 0.8rem;
+                font-weight: 500;
+
+                color: $white100;
+
+                text-overflow: ellipsis;
+                overflow: hidden;
+
+                opacity: 0; // hide
+                transition: all 0.2s ease-in-out;
+            }
+
+            &:hover {
+                opacity: 1;
+                transform: scale(1);
+
+                h2,
+                p {
+                    opacity: 1;
+                }
+            }
+        }
+
+        .gallery__item-image {
+            margin: 0;
+            padding: 0;
+
+            width: 100%;
+            height: 100%;
+
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+
+            object-fit: cover;
+            object-position: center;
+
+            border-radius: $rad;
+        }
+    }
+
+}
+
+.image__container {
+    margin: 0;
+    padding: 0;
+
+    width: 100%;
+    height: auto;
+
+    position: sticky;
+    top: 0;
+
+    display: flex;
+    overflow: hidden;
+
+    border-radius: $rad;
+
+    box-sizing: border-box;
+
+    img {
+        margin: auto;
+        padding: 0;
+
+        max-width: 100%;
+        max-height: 75vh;
+
+        object-fit: contain;
+        object-position: center;
+
+        border-radius: $rad;
+    }
+}
+
+.image__info {
+    margin: 0;
+    padding: 0;
+
+    width: 100%;
+
+    display: flex;
+    flex-direction: column;
+
+    background-color: $black200;
+    border-radius: calc($rad / 2);
+
+    box-sizing: border-box;
+
+    h2 {
+        margin: 0;
+        padding: 0 1rem 0.5rem;
+
+        font-family: $font-header;
+        font-size: 1rem;
+        font-stretch: ultra-expanded;
+        font-weight: 600;
+
+        color: $green;
+
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    p {
+        margin: 0;
+        padding: 0 1rem 0.5rem;
+
+        font-family: $font-body;
+        font-size: 0.8rem;
+        font-weight: 500;
+
+        color: $white100;
+
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+}

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

@@ -0,0 +1,54 @@
+main {
+    margin: 0;
+    padding: 0;
+
+    background-color: $black100;
+    color: $white100;
+
+    min-height: 100vh;
+
+    overflow-y: auto;
+    box-sizing: border-box;
+
+    header {
+        margin: 0;
+        padding: 0;
+
+        width: 100%;
+        height: 40vh;
+
+        position: relative;
+
+        background-color: $black200;
+        border-radius: $rad;
+
+        box-sizing: border-box;
+
+        img {
+            position: absolute;
+            top: 0;
+            left: 0;
+
+            width: 100%;
+            height: 100%;
+
+            filter: blur(0.5rem);
+
+            object-fit: cover;
+            object-position: center 0px;
+        }
+
+        span {
+            position: absolute;
+            top: 0;
+            left: 0;
+
+            width: 100%;
+            height: 100%;
+
+            background-image: linear-gradient(to bottom, #00000000, rgba($black100, 1));
+
+            z-index: +1;
+        }
+    }
+}

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

@@ -0,0 +1,95 @@
+nav {
+    margin: 0;
+    padding: 0;
+
+    max-width: 100vw;
+    width: 3.5rem;
+    height: 100dvh;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    position: fixed;
+    top: 0;
+    left: 0;
+
+    background-color: $black300;
+    color: $white100;
+
+    box-sizing: border-box;
+    z-index: 2;
+    transition: width 0.4s cubic-bezier(.76,0,.17,1), background-color 0.3s ease-in-out;
+
+    div {
+        display: flex;
+        flex-direction: column;
+        //gap: 0.25rem;
+
+        a {
+            margin: 0;
+            padding: 1rem;
+
+            width: 3.5rem;
+            height: 3.5rem;
+
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            //gap: 0.5rem;
+
+            position: relative;
+
+            text-decoration: none;
+            color: $white100;
+
+            box-sizing: border-box;
+
+            i, svg {
+                margin: 0;
+                font-size: 1.5rem;
+                color: $white100;
+                transition: color 0.2s ease-out;
+            }
+
+            span {
+                margin: 0;
+                padding: 0.5rem 0.75rem;
+
+                display: block;
+
+                position: absolute;
+                top: 50%;
+                left: 3rem;
+                transform: translateY(-50%);
+
+                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), left 0.2s cubic-bezier(.76,0,.17,1);
+
+                pointer-events: none;
+            }
+
+            &:hover {
+                //background-color: $black200;
+
+                i, svg {
+                    color: $green;
+                }
+
+                span {
+                    opacity: 1;
+                    left: 3.8rem;
+                    //transition-delay: 0.5s;
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,16 @@
+* {
+    box-sizing: border-box;
+    line-height: 1;
+}
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+    
+    min-height: 100vh;
+    
+    background-color: $black100;
+    
+    scroll-behavior: smooth;
+}

gallery/user/themes/default/variables/fonts.scss

@@ -0,0 +1,35 @@
+@font-face {
+    font-family: "Mona-Sans";
+    src: url("fonts/Mona-Sans.woff2") format("woff2 supports variations"),
+        url("fonts/Mona-Sans.woff2") format("woff2-variations");
+    font-weight: 200 900;
+    font-stretch: 75% 125%;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Hubot-Sans";
+    src: url("fonts/Hubot-Sans.woff2") format("woff2 supports variations"),
+        url("fonts/Hubot-Sans.woff2") format("woff2-variations");
+    font-weight: 200 900;
+    font-stretch: 75% 125%;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('fonts/worksans-regular.woff2');
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('fonts/worksans-bold.woff2');
+    font-weight: 600;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('fonts/worksans-black.woff2');
+    font-weight: 900;
+}

gallery/user/themes/default/variables/variables.scss

@@ -0,0 +1,18 @@
+$black100: #151515;
+$black200: #121212;
+$black300: #101010;
+$black400: #0e0e0e;
+
+$white100: #e8e3e3;
+
+$red: #B66467;
+$orange: #D8A657;
+$yellow: #D9BC8C;
+$green: #8C977D;
+$blue: #8DA3B9;
+$purple: #A988B0;
+
+$rad: 3px;
+
+$font-header: "Work Sans", sans-serif;
+$font-body: "Work Sans", sans-serif;