very nice?

Compress JS and Sass files
remove useless Span for notifications and switch to after
Go back to 400x400px thumbnails
Add link for group creator

gallery/static/sass/animations.sass

@@ -4,20 +4,6 @@
     100%
         background-position: 468px 0
 
-@keyframes notificationTimeout
-    0%
-        left: -100%
-        height: 3px
-    90%
-        left: 0%
-        height: 3px
-    95%
-        left: 0%
-        height: 0
-    100%
-        left: 0%
-        height: 0
-
 @keyframes uploadingLoop
     0%
         left: -100%

gallery/static/sass/components/banner.sass

@@ -4,6 +4,15 @@
     position: relative
     color: RGB($fg-white)
 
+    .link
+        color: inherit
+
+        cursor: pointer
+        text-decoration: underline
+
+        &:hover
+            text-decoration: none
+
     &::after
         content: ''
 
@@ -73,9 +82,6 @@
         .banner-header
             grid-area: header
 
-            white-space: nowrap
-            text-overflow: ellipsis
-            overflow: hidden
             text-align: left
             font-size: 6.9rem
             font-weight: 800
@@ -164,14 +170,16 @@
             gap: 0.25rem
 
             .banner-header
-                font-size: 3rem
                 text-align: center
+                font-size: 2.5rem
 
-            .banner-info,
-            .banner-subtitle
+            .banner-info
                 font-size: 1.1rem
                 text-align: center
 
+            .banner-subtitle
+                display: none
+
             .pill-row
                 margin-top: 1rem
 

gallery/static/sass/components/elements/notification.sass

@@ -1,7 +1,21 @@
+@keyframes notificationTimeout
+    0%
+        left: -100%
+        height: 3px
+    90%
+        left: 0%
+        height: 3px
+    95%
+        left: 0%
+        height: 0
+    100%
+        left: 0%
+        height: 0
+    
 @mixin notification($color)
     color: RGB($color)
 
-    .sniffle__notification-time
+    &::after
         background-color: RGB($color)
     
 .notifications
@@ -44,6 +58,21 @@
 
     transition: all 0.25s ease-in-out, opacity 0.2s ease-in-out, transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
 
+    &::after
+        content: ""
+
+        width: 450px
+        height: 3px
+
+        position: absolute
+        bottom: 0px
+        left: 0px
+
+        background-color: RGB($fg-white)
+
+        z-index: +2
+        animation: notificationTimeout 5.1s linear
+
     &.success
         @include notification($success)
     &.warning
@@ -100,21 +129,6 @@
     line-height: 1
     text-align: left
 
-.sniffle__notification-time
-    margin: 0
-    padding: 0
-
-    width: 450px
-    height: 3px
-
-    position: absolute
-    bottom: 0px
-    left: 0px
-
-    background-color: RGB($fg-white)
-
-    animation: notificationTimeout 5.1s linear
-
 @media (max-width: $breakpoint)
     .notifications
         width: calc(100vw - 0.6rem)

gallery/static/sass/components/gallery.sass

@@ -1,12 +1,12 @@
 .gallery-grid
     margin: 0
-    padding: 0.5rem
+    padding: 0.65rem
 
     width: 100%
 
     display: grid
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
-    gap: 0.5rem
+    gap: 0.65rem
 
 .gallery-item
     margin: 0
@@ -17,9 +17,11 @@
     position: relative
 
     border-radius: $rad-inner
+    box-shadow: 0 0.15rem 0.4rem 0.1rem RGBA($bg-100, 0.4)
 
     box-sizing: border-box
     overflow: hidden
+    transition: box-shadow 0.2s cubic-bezier(.79, .14, .15, .86)
 
     .image-filter
         margin: 0
@@ -37,11 +39,11 @@
         flex-direction: column
         justify-content: flex-end
 
-        background-image: linear-gradient(to top, rgba($bg-100, 0.5), transparent)
+        background-image: linear-gradient(to top, rgba($bg-100, 0.69), transparent)
         opacity: 0 // hide
 
         z-index: +4
-        transition: background-image 0.3s cubic-bezier(.79, .14, .15, .86), opacity 0.3s cubic-bezier(.79, .14, .15, .86)
+        transition: opacity 0.2s cubic-bezier(.79, .14, .15, .86)
 
         .image-title,
         .image-subtitle
@@ -72,7 +74,6 @@
 
         object-fit: cover
         object-position: center
-        transform: scale(1.05)
 
         background-color: RGB($bg-bright)
         filter: blur(0.5rem)
@@ -90,12 +91,10 @@
         padding-bottom: 100%
 
     &:hover
-        .image-filter
-            background-image: linear-gradient(to top, rgba($bg-100, 0.69), transparent)
-            opacity: 1
+        box-shadow: 0 0.2rem 0.4rem 0.1rem RGBA($bg-100, 0.6)
 
-        img
-            transform: scale(1)
+        .image-filter
+            opacity: 1
 
 .group-item
     margin: 0

gallery/static/sass/components/image-view/fullscreen.sass

@@ -1,6 +1,6 @@
 .image-fullscreen
     margin: 0
-    padding: 0 0 0 3.5rem
+    padding: 0
 
     width: 100%
     height: 100%
@@ -14,7 +14,7 @@
     opacity: 0 // hide
 
     background-color: $bg-transparent
-    z-index: 21
+    z-index: 100
 
     box-sizing: border-box
 

gallery/static/sass/components/image-view/view.sass

@@ -59,7 +59,4 @@
     .info-tab.collapsed .info-header
         border-radius: $rad
 
-@media (max-width: $breakpoint)
-    .image-fullscreen
-        padding: 0 0 3.5rem 0