add animation to the header

containers/rust-dev.Dockerfile

@@ -7,6 +7,6 @@ RUN cargo install cargo-watch && \
 
 RUN apt update && \
     apt install nodejs npm -y --no-install-recommends && \
-    npm i -g uglify-js
+    npm i -g uglify-js html-minifier
 
 CMD [ "/opt/code/dev-entry.sh" ]

filed/static/assets/dragndrop-form.js

@@ -8,8 +8,24 @@
         const root_drag_rop = document.getElementsByClassName('file-drag-n-drop')[0];
 
         // make the root drag&drop element an ideal circle
-        root_drag_rop.style.width   = root_drag_rop.offsetWidth + 'px';
+
-        root_drag_rop.style.height  = root_drag_rop.offsetWidth + 'px';
+        function updateDragNDrop() {
+            
+            if (document.body.scrollWidth < 667) {
+                // mobile
+                delete root_drag_rop.style.width;
+                delete root_drag_rop.style.height;
+                return
+            }
+
+            const width = root_drag_rop.offsetWidth;
+
+            root_drag_rop.style.width   = width + 'px';
+            root_drag_rop.style.height  = width + 'px';
+        }
+
+        updateDragNDrop();
+        document.onresize = updateDragNDrop();
 
         /** @type {HTMLElement} */
         const drag_rop = document.getElementsByClassName('file-drag-n-drop-inside')[0];

filed/templates/source/base.html

@@ -16,6 +16,22 @@
         <title>{{ conf.brand.instance_name }}</title>
 
         <style> .footer svg { height: 32px; margin: 10px 0 } </style>
+        <style>
+        .header .header-text, .header .header-home, .header .header-bg { transition: 250ms ease; }
+        @media (max-width:667px) {
+
+            .header .header-text { text-align: center }
+            .header .header-home { width: 100% }
+            .header .header-bg   { left: 50% !important; transform: translateX(-50%); -webkit-mask-image: linear-gradient(90deg, #0000, #000, #0000); }
+
+            {%- if conf.brand.instance_motto.len() != 0 -%}
+                .header .header-home-motto {
+                    display:none
+                }
+            {%- endif -%}
+
+        }
+        </style>
 
         {%- if cfg!(debug_assertions) -%}
             <link rel="stylesheet" href="/alert.css" />
@@ -33,7 +49,7 @@
                     {{- conf.brand.instance_name -}}
                     {%- if conf.brand.instance_motto.len() != 0 -%}
                         {#- Whitespace control is stupid -#}
-                        {{- " - " -}}{{- conf.brand.instance_motto -}}
+                        <span class="header-home-motto">{{- " - " -}}{{- conf.brand.instance_motto -}}</span>
                     {%- endif -%}
                 </a>
             </div>