From 2eb9d5c7a55b601c11577ff8f7edc6f41b60119a Mon Sep 17 00:00:00 2001
From: Herwin Bozet <herwin.bozet@gmail.com>
Date: Sat, 13 Sep 2025 16:19:20 +0200
Subject: [PATCH] Updated file input, Updated heading spacing globally, Fixed
 lscom downloads, Updated contact info Update .gitignore, home.yml, and 13
 more files...

---
 .gitignore                                    |   1 +
 data/strings/en/home.yml                      |  27 ++--
 static/resources/NibblePoker/css/extra.css    |  38 ++++-
 .../applets/excel-password-remover.jinja      |  59 ++++----
 templates/elements/file-input.jinja           | 108 ++++++-------
 templates/elements/heading.jinja              |   4 +-
 templates/pages/contact.jinja                 |  33 ++--
 templates/pages/links.jinja                   |  82 +++++-----
 templates/pages/privacy.jinja                 |  16 +-
 templates/pages/root.jinja                    |   4 +-
 templates/projects/_project.jinja             |   2 +-
 .../projects/circuitpython-ebyte-e32.jinja    |  18 +--
 templates/projects/docker-mini-cctv-nvr.jinja |  22 +--
 templates/projects/lscom-cli-dotnet.jinja     | 142 +++++++++++++++---
 website/renderers/file_input.py               |   4 +-
 15 files changed, 343 insertions(+), 217 deletions(-)

diff --git a/.gitignore b/.gitignore
index a2e3c7b..b756e26 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,7 @@ __pycache__/
 
 # NodeJS' BS
 node_modules/
+scripts/package-lock.json
 
 # Internal stuff
 *.pdn
diff --git a/data/strings/en/home.yml b/data/strings/en/home.yml
index 7c9e738..ea2eb39 100644
--- a/data/strings/en/home.yml
+++ b/data/strings/en/home.yml
@@ -10,22 +10,25 @@ og:
   description: Collection of free and open-source handmade utilities and libraries
     ranging from a simple COM port lister to password remover and autonomous video archivers.
 
-header.title: Homepage
+header:
+  title: Homepage
 
-intro.title: Welcome to %0
-intro.text.1: This website contains a collection of my personal work through
-  blog posts, software releases and other forms of media, all of which is accessible
-  for free and under open-source friendly licenses.
-intro.text.2: If you wish to contact me, you can do so through the contact form
-  linked in the sidebar or via the email address present on that page.
+intro:
+  title: Welcome to %0
+  text:
+    1: This website contains a collection of my personal work through
+      blog posts, software releases and other forms of media, all of which is accessible
+      for free and under open-source friendly licenses.
+    2: If you wish to contact me, you can do so through the contact form
+      linked in the sidebar or via the email address present on that page.
 
-showcase.title: Showcase
-
-updates.title: Updates
-
-updates.text.privacy: Updated our privacy policy.
+showcase:
+  title: Showcase
 
 updates:
+  title: Updates
+  text:
+    privacy: Updated our privacy policy.
   5:
     date: March 30 2025
     text:
diff --git a/static/resources/NibblePoker/css/extra.css b/static/resources/NibblePoker/css/extra.css
index 03668e9..f9f69fb 100644
--- a/static/resources/NibblePoker/css/extra.css
+++ b/static/resources/NibblePoker/css/extra.css
@@ -1,23 +1,43 @@
 /* File inputs with drop thingy */
+
 .np-file-input-drop-container {
     position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    overflow: hidden;
 }
 
-.np-file-drop-text {
+input.np-file-input-drop {
     position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-
-input[type=file].np-file-input-drop {
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
     opacity: 0;
     cursor: pointer;
 }
 
+.np-file-drop-text {
+    text-align: center;
+    pointer-events: none;
+}
+
+.np-file-drop-buttons {
+    display: flex;
+    gap: 10px;
+    z-index: 10;
+}
+
 /* Top margin trimmer for heading renderer */
 
 
+.t-v-center {
+    vertical-align: middle;
+}
+
 /* Copy of the m*-xs classes */
 /* Accommodates the paragraph renderer that has a hard-coded .mt-xs */
 .content-spacer {
@@ -37,3 +57,7 @@ input[type=file].np-file-input-drop {
 .hide-if-first:first-child {
     display: none;
 }
+
+.mt-0-if-first:first-child {
+    margin-top: 0;
+}
diff --git a/templates/applets/excel-password-remover.jinja b/templates/applets/excel-password-remover.jinja
index 5cc35aa..76024b7 100644
--- a/templates/applets/excel-password-remover.jinja
+++ b/templates/applets/excel-password-remover.jinja
@@ -1,41 +1,48 @@
-<section id="{{ applet_data.id }}-eula">
+<section id="{{ applet_data.id }}-eula" class="mt-l mt-0-if-first">
     {{ render_h2(l10n("disclaimer.warning", "commons", user_lang)) }}
-    {{ render_paragraph(l10n("eula.1", applet_data.id, user_lang)) }}
-    {{ render_paragraph(l10n("eula.2", applet_data.id, user_lang)) }}
-    {{ render_paragraph(l10n("eula.3", applet_data.id, user_lang)) }}
+
+    <div class="content-spacer">
+        {{ render_paragraph(l10n("eula.1", applet_data.id, user_lang)) }}
+        {{ render_paragraph(l10n("eula.2", applet_data.id, user_lang)) }}
+        {{ render_paragraph(l10n("eula.3", applet_data.id, user_lang)) }}
+    </div>
 </section>
 
-<section id="{{ applet_data.id }}-input">
+<section id="{{ applet_data.id }}-input" class="mt-l mt-0-if-first">
     {{ render_h2(l10n("file.selection.title", applet_data.id, user_lang)) }}
 
-    {{ render_paragraph(l10n("file.selection.1", applet_data.id, user_lang)) }}
-
-    {{ render_file_input(applet_data.id + "-input-file", true, ".xlsx, .xlsm", true, true, user_lang) }}
+    <div class="content-spacer mt-s">
+        {{ render_file_input(
+            applet_data.id + "-input-file", true, ".xlsx, .xlsm", true, false, user_lang,
+            l10n("file.selection.1", applet_data.id, user_lang)) }}
+    </div>
 </section>
 
-<section id="{{ applet_data.id }}-details">
+<section id="{{ applet_data.id }}-details" class="mt-l mt-0-if-first">
     {{ render_h2(l10n("details.title", applet_data.id, user_lang)) }}
 
-    <div id="{{ applet_data.id }}-details-empty">
-        {{ render_paragraph(l10n("details.empty.1", applet_data.id, user_lang)) }}
-    </div>
+    <div class="content-spacer mt-s">
+        <div id="{{ applet_data.id }}-details-empty">
+            {{ render_paragraph(l10n("details.empty.1", applet_data.id, user_lang)) }}
+        </div>
 
-    <div id="{{ applet_data.id }}-details-populated" hidden>
-        {{ render_button(
-            "<i class=\"fa-duotone fa-solid fa-floppy-disks mr-xs\"></i>" +
-                l10n("download.action.all", "commons", user_lang),
-            false, applet_data.id + "-files-download-all", "bkgd-green") }}
-        {{ render_button(
-            "<i class=\"fa-duotone fa-solid fa-trash mr-xs\"></i>" +
-                l10n("clear.all.files", "commons", user_lang),
-            false, applet_data.id + "-files-clear", "bkgd-orange") }}
-    </div>
+        <div id="{{ applet_data.id }}-details-populated" hidden>
+            {{ render_button(
+                "<i class=\"fa-duotone fa-solid fa-floppy-disks mr-xs\"></i>" +
+                    l10n("download.action.all", "commons", user_lang),
+                false, applet_data.id + "-files-download-all", "bkgd-green") }}
+            {{ render_button(
+                "<i class=\"fa-duotone fa-solid fa-trash mr-xs\"></i>" +
+                    l10n("clear.all.files", "commons", user_lang),
+                false, applet_data.id + "-files-clear", "bkgd-orange") }}
+        </div>
 
-    <div id="{{ applet_data.id }}-result-container"></div>
+        <div id="{{ applet_data.id }}-result-container" class="mt-s"></div>
+    </div>
 </section>
 
 <template id="tmpl-success-root">
-    <div class="bkgd-grid10 w-full r-l border cursor-pointer epr-download-all-click">
+    <div class="bkgd-grid10 w-full r-l border cursor-pointer epr-download-all-click mt-xs">
         <table class="table-p-xxs table-v-center">
             <tr>
                 <td rowspan="2" class="br bkgd-green bkgd-grid30 rl-l">
@@ -56,7 +63,7 @@
 </template>
 
 <template id="tmpl-warning-root">
-    <div class="bkgd-grid10 w-full r-l border">
+    <div class="bkgd-grid10 w-full r-l border mt-xs">
         <table class="table-p-xxs table-v-center">
             <tr>
                 <td rowspan="2" class="br bkgd-orange bkgd-grid30 rl-l">
@@ -81,7 +88,7 @@
 </template>
 
 <template id="tmpl-error-root">
-    <div class="bkgd-grid10 w-full r-l border">
+    <div class="bkgd-grid10 w-full r-l border mt-xs">
         <table class="table-p-xxs table-v-center">
             <tr>
                 <td rowspan="2" class="br bkgd-red bkgd-grid30 rl-l">
diff --git a/templates/elements/file-input.jinja b/templates/elements/file-input.jinja
index d8d4b8c..cb26552 100644
--- a/templates/elements/file-input.jinja
+++ b/templates/elements/file-input.jinja
@@ -1,63 +1,53 @@
-<div class="np-file-input-root-container">
-    <!-- FIXME: Use the common renderer ! -->
-    {% if file_upload_button %}
-        <button id="{{ file_input_id }}-add" class="p-xs r-s border btn-primary">
-            <i class="fa-duotone fa-solid fa-cloud-arrow-up mr-xxs"></i>
-            {% if file_multiple %}
-                {{ l10n("file.drop.upload.multiple", "commons", user_lang) }}
-            {% else %}
-                {{ l10n("file.drop.upload.single", "commons", user_lang) }}
-            {% endif %}
-        </button>
-    {% endif %}
-
-    {% if file_clear_button %}
-        <button id="{{ file_input_id }}-reset" class="p-xs r-s border btn-warning">
-            {{ "<i class=\"fa-duotone fa-solid fa-trash mr-xs\"></i>" + l10n("file.drop.clear", "commons", user_lang) }}
-        </button>
-    {% endif %}
+<div class="np-file-input-drop-container border r-m">
+    <input type="file"
+           id="{{ file_input_id }}"
+           name="{{ file_input_id }}"
+           {% if file_accept is not none %}accept="{{ file_accept }}"{% endif %}
+           class="np-file-input-drop w-full p-xl"
+           {% if file_multiple %}multiple{% endif %}>
 
     {% if file_upload_button or file_clear_button %}
-        <br>
+        <p class="np-file-drop-text pt-s mb-s">
+            {% if text_override == "" %}
+                {% if file_multiple %}
+                    {{ l10n("file.drop.select.multiple", "commons", user_lang) }}
+                {% else %}
+                    {{ l10n("file.drop.select.single", "commons", user_lang) }}
+                {% endif %}
+            {% else %}
+                {{ text_override }}
+            {% endif %}
+        </p>
+
+        <div class="np-file-drop-buttons pb-s">
+            {% if file_upload_button %}
+                <button id="{{ file_input_id }}-add" class="p-xs r-s border btn-primary np-file-drop-button">
+                    <i class="fa-duotone fa-solid fa-cloud-arrow-up mr-xxs"></i>
+                    {% if file_multiple %}
+                        {{ l10n("file.drop.upload.multiple", "commons", user_lang) }}
+                    {% else %}
+                        {{ l10n("file.drop.upload.single", "commons", user_lang) }}
+                    {% endif %}
+                </button>
+            {% endif %}
+
+            {% if file_clear_button %}
+                <button id="{{ file_input_id }}-reset" class="p-xs r-s border btn-warning np-file-drop-button">
+                    {{ "<i class=\"fa-duotone fa-solid fa-trash mr-xs\"></i>" + l10n("file.drop.clear", "commons", user_lang) }}
+                </button>
+            {% endif %}
+        </div>
+    {% else %}
+        <p class="np-file-drop-text py-l">
+            {% if text_override == "" %}
+                {% if file_multiple %}
+                    {{ l10n("file.drop.select.multiple", "commons", user_lang) }}
+                {% else %}
+                    {{ l10n("file.drop.select.single", "commons", user_lang) }}
+                {% endif %}
+            {% else %}
+                {{ text_override }}
+            {% endif %}
+        </p>
     {% endif %}
-
-    <div class="np-file-input-drop-container border r-s bkgd-blank">
-        <p class="np-file-drop-text"
-           id="{{ file_input_id }}-text-drop">
-            {% if file_multiple %}
-                {{ l10n("file.drop.select.multiple", "commons", user_lang) }}
-            {% else %}
-                {{ l10n("file.drop.select.single", "commons", user_lang) }}
-            {% endif %}
-        </p>
-
-        <p class="np-file-drop-text"
-           id="{{ file_input_id }}-text-file-single"
-           hidden>
-            {{ l10n("file.drop.selected.single", "commons", user_lang) }}
-        </p>
-
-        <p class="np-file-drop-text"
-           id="{{ file_input_id }}-text-file-multiple"
-           hidden>
-            {{ l10n("file.drop.selected.multiple", "commons", user_lang) }}
-        </p>
-
-        <label for="{{ file_input_id }}"
-               hidden>
-            {% if file_multiple %}
-                {{ l10n("file.drop.label.multiple", "commons", user_lang) }}
-            {% else %}
-                {{ l10n("file.drop.label.single", "commons", user_lang) }}
-            {% endif %}
-        </label>
-
-        <input type="file"
-               id="{{ file_input_id }}"
-               name="{{ file_input_id }}"
-               {% if file_accept is not none %}accept="{{ file_accept }}"{% endif %}
-               class="np-file-input-drop w-full p-l"
-               {% if file_multiple %}multiple{% endif %}
-        />
-    </div>
 </div>
diff --git a/templates/elements/heading.jinja b/templates/elements/heading.jinja
index 0ed9e28..cbf6b91 100644
--- a/templates/elements/heading.jinja
+++ b/templates/elements/heading.jinja
@@ -8,7 +8,7 @@
         {% elif heading_level == 4 %}
             mt-m
         {% endif %}
-        {{ heading_background_class }}">
+        {{ heading_background_class }} mt-0-if-first">
 
     <h{{ heading_level }} class="t-w-500
             {% if heading_level == 2 %}
@@ -28,7 +28,7 @@
         {{ heading_inner_html }}
 
         {% if heading_right_html is not none %}
-        <span class="ml-auto mobile-hide t-size-10 t-muted">{{ heading_right_html }}</span>
+        <!--<span class="ml-auto mobile-hide t-size-10 t-muted">{{ heading_right_html }}</span>-->
         {% endif %}
 
     </h{{ heading_level }}>
diff --git a/templates/pages/contact.jinja b/templates/pages/contact.jinja
index e0e893f..27dbdd5 100644
--- a/templates/pages/contact.jinja
+++ b/templates/pages/contact.jinja
@@ -8,24 +8,23 @@
 {% endblock %}
 
 {% block main_content %}
-    {{ render_h1(l10n("email.title", "contact", user_lang), "fad fa-mail-bulk", "herwin.bozet@gmail.com") }}
-    <p class="m-s">
-		<a href="mailto:Herwin Bozet<herwin.bozet@nibblepoker.lu>?subject=Contact%20via%20NibblePoker.lu" class="a-hidden button-link">
-			<button class="p-xs r-s border b-light success"><i class="fad fa-external-link-alt mr-xs"></i>{{ l10n("email.compose.nibblepoker", "contact", user_lang) }}</button>
-		</a>
-	</p>
-    <!--<p class="m-s">
-		<a href="mailto:Herwin Bozet<herwin.bozet@gmail.com>?subject=Contact%20via%20NibblePoker.lu" class="a-hidden button-link">
-			<button class="p-xs r-s border b-light success"><i class="fad fa-external-link-alt mr-xs"></i>{{ l10n("email.compose", "contact", user_lang) }}</button>
-		</a>
-	</p>-->
+    <section class="mt-l mt-0-if-first">
+        {{ render_h1(l10n("email.title", "contact", user_lang), "fad fa-mail-bulk", "herwin.bozet@nibblepoker.lu") }}
+        <p class="m-s">
+            <a href="mailto:Herwin Bozet<herwin.bozet@nibblepoker.lu>?subject=Contact%20via%20NibblePoker.lu" class="a-hidden button-link">
+                <button class="p-xs r-s border b-light success"><i class="fad fa-external-link-alt mr-xs"></i>{{ l10n("email.compose.nibblepoker", "contact", user_lang) }}</button>
+            </a>
+        </p>
+    </section>
 
-    {{ render_h1(l10n("twitter.title", "contact", user_lang), "fab fa-twitter", "@NibblePoker") }}
-    <p class="m-s">
-		<a href="https://twitter.com/messages/compose?recipient_id=937370791334895616" class="a-hidden button-link">
-			<button class="p-xs r-s border b-light primary"><i class="fad fa-external-link-alt mr-xs"></i>{{ l10n("twitter.compose", "contact", user_lang) }}</button>
-		</a>
-	</p>
+    <section class="mt-l mt-0-if-first">
+        {{ render_h1(l10n("twitter.title", "contact", user_lang), "fab fa-x-twitter", "@NibblePoker") }}
+        <p class="m-s">
+            <a href="https://twitter.com/messages/compose?recipient_id=937370791334895616" class="a-hidden button-link">
+                <button class="p-xs r-s border b-light primary"><i class="fad fa-external-link-alt mr-xs"></i>{{ l10n("twitter.compose", "contact", user_lang) }}</button>
+            </a>
+        </p>
+    </section>
 
 {% endblock %}
 
diff --git a/templates/pages/links.jinja b/templates/pages/links.jinja
index c6f3184..23fe0fa 100644
--- a/templates/pages/links.jinja
+++ b/templates/pages/links.jinja
@@ -12,55 +12,61 @@
 {% endblock %}
 
 {% block main_content %}
-    {{ render_h1(l10n("social.title", "links", user_lang )) }}
+    <section class="mt-l mt-0-if-first">
+        {{ render_h1(l10n("social.title", "links", user_lang )) }}
 
-    <p class="mt-s ml-s t-w-600 t-size-12">
-        <i class="fab fa-twitter mr-xs"></i>
-        <a href="https://twitter.com/NibblePoker">{{ l10n("twitter.title", "links", user_lang ) }}</a>
-    </p>
-    <p class="mt-xxs ml-l">{{ l10n("twitter.text.1", "links", user_lang ) }}</p>
+        <p class="mt-s ml-s t-w-600 t-size-12">
+            <i class="fab fa-twitter mr-xs"></i>
+            <a href="https://twitter.com/NibblePoker">{{ l10n("twitter.title", "links", user_lang ) }}</a>
+        </p>
+        <p class="mt-xxs ml-l">{{ l10n("twitter.text.1", "links", user_lang ) }}</p>
 
-    <p class="mt-s ml-s t-w-600 t-size-12">
-        <i class="fab fa-github mr-xs"></i>
-        <a href="https://github.com/aziascreations">{{ l10n("github.title", "links", user_lang ) }}</a>
-    </p>
-    <p class="mt-xxs ml-l">{{ l10n("github.text.1", "links", user_lang ) }}</p>
+        <p class="mt-s ml-s t-w-600 t-size-12">
+            <i class="fab fa-github mr-xs"></i>
+            <a href="https://github.com/aziascreations">{{ l10n("github.title", "links", user_lang ) }}</a>
+        </p>
+        <p class="mt-xxs ml-l">{{ l10n("github.text.1", "links", user_lang ) }}</p>
 
-    <p class="mt-s ml-s t-w-600 t-size-12">
-        <i class="fab fa-github mr-xs"></i>
-        <a href="https://github.com/NibblePoker">{{ l10n("github_pro.title", "links", user_lang ) }}</a>
-    </p>
-    <p class="mt-xxs ml-l">{{ l10n("github_pro.text.1", "links", user_lang ) }}</p>
+        <p class="mt-s ml-s t-w-600 t-size-12">
+            <i class="fab fa-github mr-xs"></i>
+            <a href="https://github.com/NibblePoker">{{ l10n("github_pro.title", "links", user_lang ) }}</a>
+        </p>
+        <p class="mt-xxs ml-l">{{ l10n("github_pro.text.1", "links", user_lang ) }}</p>
+    </section>
 
 
-    {{ render_h1(l10n("work.title", "links", user_lang )) }}
+    <section class="mt-l mt-0-if-first">
+        {{ render_h1(l10n("work.title", "links", user_lang )) }}
 
-    <p class="mt-s ml-s t-w-600 t-size-12">
-        <i class="fab fa-linkedin mr-xs"></i>
-        <a href="https://www.linkedin.com/in/herwin-bozet/">{{ l10n("linkedin.title", "links", user_lang ) }}</a>
-    </p>
-    <p class="mt-xxs ml-l">{{ l10n("linkedin.text.1", "links", user_lang ) }}</p>
+        <p class="mt-s ml-s t-w-600 t-size-12">
+            <i class="fab fa-linkedin mr-xs"></i>
+            <a href="https://www.linkedin.com/in/herwin-bozet/">{{ l10n("linkedin.title", "links", user_lang ) }}</a>
+        </p>
+        <p class="mt-xxs ml-l">{{ l10n("linkedin.text.1", "links", user_lang ) }}</p>
+    </section>
 
 
-    {{ render_h1(l10n("misc.title", "links", user_lang )) }}
+    <section class="mt-l mt-0-if-first">
+        {{ render_h1(l10n("misc.title", "links", user_lang )) }}
 
-    <p class="mt-s ml-s t-w-600 t-size-12">
-        <i class="fad fa-download mr-xs"></i>
-        <a href="https://files.nibblepoker.lu/">{{ l10n("files.title", "links", user_lang ) }}</a>
-    </p>
-    <p class="mt-xxs ml-l">{{ l10n("files.text.1", "links", user_lang ) }}</p>
+        <p class="mt-s ml-s t-w-600 t-size-12">
+            <i class="fad fa-download mr-xs"></i>
+            <a href="https://files.nibblepoker.lu/">{{ l10n("files.title", "links", user_lang ) }}</a>
+        </p>
+        <p class="mt-xxs ml-l">{{ l10n("files.text.1", "links", user_lang ) }}</p>
 
-    <p class="mt-s ml-s t-w-600 t-size-12">
-        <i class="fad fa-archive mr-xs"></i>
-        <a href="https://archives.nibblepoker.lu/">{{ l10n("archives.title", "links", user_lang ) }}</a>
-    </p>
-    <p class="mt-xxs ml-l">{{ l10n("archives.text.1", "links", user_lang ) }}</p>
+        <p class="mt-s ml-s t-w-600 t-size-12">
+            <i class="fad fa-archive mr-xs"></i>
+            <a href="https://archives.nibblepoker.lu/">{{ l10n("archives.title", "links", user_lang ) }}</a>
+        </p>
+        <p class="mt-xxs ml-l">{{ l10n("archives.text.1", "links", user_lang ) }}</p>
 
-    <p class="mt-s ml-s t-w-600 t-size-12">
-        <i class="fa-duotone fa-code-branch mr-xs"></i>
-        <a href="https://git.nibblepoker.lu/">{{ l10n("gitea.title", "links", user_lang ) }}</a>
-    </p>
-    <p class="mt-xxs ml-l">{{ l10n("gitea.text.1", "links", user_lang ) }}</p>
+        <p class="mt-s ml-s t-w-600 t-size-12">
+            <i class="fa-duotone fa-code-branch mr-xs"></i>
+            <a href="https://git.nibblepoker.lu/">{{ l10n("gitea.title", "links", user_lang ) }}</a>
+        </p>
+        <p class="mt-xxs ml-l">{{ l10n("gitea.text.1", "links", user_lang ) }}</p>
+    </section>
 {% endblock %}
 
 {% block extra_scripts %}
diff --git a/templates/pages/privacy.jinja b/templates/pages/privacy.jinja
index 4f23ff6..b9d7191 100644
--- a/templates/pages/privacy.jinja
+++ b/templates/pages/privacy.jinja
@@ -13,7 +13,7 @@
 
 {% block main_content %}
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h1(l10n("introduction.title", "privacy", user_lang), "fad fa-info") }}
         <div class="content-spacer">
             {{ render_paragraph(l10n("introduction.text.1", "privacy", user_lang)) }}
@@ -26,7 +26,7 @@
     </section>
 
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h1(l10n("v2.data.title", "privacy", user_lang), "fad fa-database") }}
         <div class="content-spacer">
             {{ render_paragraph(l10n("v2.data.intro.1", "privacy", user_lang) +
@@ -51,7 +51,7 @@
     </section>
 
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h1(l10n("v2.data_dns.title", "privacy", user_lang), "fad fa-database") }}
         <div class="content-spacer">
             {{ render_paragraph(l10n("v2.data_dns.intro.1", "privacy", user_lang) +
@@ -73,7 +73,7 @@
     </section>
 
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h1(l10n("v2.third.title", "privacy", user_lang), "fad fa-handshake") }}
         <div class="content-spacer">
             {{ render_paragraph(l10n("v3.third.intro.1", "privacy", user_lang)) }}
@@ -81,7 +81,7 @@
     </section>
 
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h1(l10n("v2.cookies.title", "privacy", user_lang), "fad fa-cookie-bite") }}
         <div class="content-spacer">
             {{ render_paragraph(l10n("v2.cookies.intro.1", "privacy", user_lang)) }}
@@ -89,7 +89,7 @@
     </section>
 
 
-    <section>
+    <section class="mt-l mt-0-if-first">
 	    {{ render_h1(l10n("v2.update.title", "privacy", user_lang), "fad fa-sync-alt") }}
         <div class="content-spacer">
             {{ render_paragraph(l10n("v2.update.intro.1", "privacy", user_lang)) }}
@@ -161,7 +161,7 @@
     </section>
 
 
-    <section>
+    <section class="mt-l mt-0-if-first">
 	    {{ render_h1(l10n("contact.title", "privacy", user_lang), "fad fa-mailbox") }}
         <div class="content-spacer">
         {{ render_paragraph(l10n("contact.text.1", "privacy", user_lang) +
@@ -170,7 +170,7 @@
     </section>
 
 
-    <section>
+    <section class="mt-l mt-0-if-first">
 	    {{ render_h1(l10n("complaint.title", "privacy", user_lang), "fad fa-gavel") }}
         <div class="content-spacer">
             {{ render_paragraph(l10n("complaint.text.1", "privacy", user_lang)) }}
diff --git a/templates/pages/root.jinja b/templates/pages/root.jinja
index f3b132e..5e5f1d7 100644
--- a/templates/pages/root.jinja
+++ b/templates/pages/root.jinja
@@ -12,7 +12,7 @@
 {% endblock %}
 
 {% block main_content %}
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h1(l10n("intro.title", "home", user_lang, ["NibblePoker." + domain_tld] )) }}
 
         <div class="content-spacer">
@@ -21,7 +21,7 @@
         </div>
     </section>
     
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h2(l10n("updates.title", "home", user_lang)) }}
 
         <div class="content-spacer">
diff --git a/templates/projects/_project.jinja b/templates/projects/_project.jinja
index a720d79..869141e 100644
--- a/templates/projects/_project.jinja
+++ b/templates/projects/_project.jinja
@@ -45,7 +45,7 @@
         l10n(project_data.metadata.general.title_key, project_id, user_lang)
     ) }}
 
-    <div class="px-xxs">
+    <div class="px-xxs mt-m">
         {% block project_content %}{% endblock %}
     </div>
 
diff --git a/templates/projects/circuitpython-ebyte-e32.jinja b/templates/projects/circuitpython-ebyte-e32.jinja
index bf543f8..60cba91 100644
--- a/templates/projects/circuitpython-ebyte-e32.jinja
+++ b/templates/projects/circuitpython-ebyte-e32.jinja
@@ -1,14 +1,14 @@
 {% extends "projects/_project.jinja" %}
 
 {% block project_content %}
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h2(l10n("intro.title", project_id, user_lang)) }}
         <div class="content-spacer">
             {{ render_paragraph(l10n("intro.p1", project_id, user_lang)) }}
         </div>
     </section>
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h2(l10n("features.title", project_id, user_lang)) }}
         <div class="content-spacer">
             {{ render_list_ul([
@@ -28,7 +28,7 @@
         </div>
     </section>
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h2(l10n("limitations.title", project_id, user_lang)) }}
         <div class="content-spacer">
             {{ render_list_ul([
@@ -50,14 +50,14 @@
         </div>
     </section>
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h2(l10n("doc.title", project_id, user_lang)) }}
         <div class="content-spacer">
             {{ render_paragraph(l10n("doc.p1", project_id, user_lang)) }}
         </div>
     </section>
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h2(l10n("usage.title", project_id, user_lang)) }}
         <div class="content-spacer">
             {{ render_paragraph(l10n("usage.p1", project_id, user_lang)) }}
@@ -99,7 +99,7 @@
         </div>
     </section>
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h2(l10n("demo.title", project_id, user_lang)) }}
         <div class="content-spacer">
             {{ render_paragraph(l10n("demo.p1", project_id, user_lang)) }}
@@ -114,7 +114,7 @@
         </div>
     </section>
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h2(l10n("downloads.title", project_id, user_lang)) }}
         <div class="content-spacer">
             <table class="table-stylish table-p-xs table-v-center border r-l">
@@ -207,7 +207,7 @@
         </div>
     </section>
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h2(l10n("license.title", project_id, user_lang)) }}
         <div class="content-spacer">
             {{ render_paragraph(
@@ -218,7 +218,7 @@
         </div>
     </section>
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h2(l10n("links.title", project_id, user_lang)) }}
         <div class="content-spacer">
             {{ render_list_ul([
diff --git a/templates/projects/docker-mini-cctv-nvr.jinja b/templates/projects/docker-mini-cctv-nvr.jinja
index b2d715a..b45a081 100644
--- a/templates/projects/docker-mini-cctv-nvr.jinja
+++ b/templates/projects/docker-mini-cctv-nvr.jinja
@@ -1,7 +1,7 @@
 {% extends "projects/_project.jinja" %}
 
 {% block project_content %}
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h2(l10n("intro.title", project_id, user_lang)) }}
         <div class="content-spacer">
             {{ render_paragraph(l10n("intro.1", project_id, user_lang)) }}
@@ -9,7 +9,7 @@
         </div>
     </section>
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h2(l10n("preamble.title", project_id, user_lang)) }}
         <div class="content-spacer">
             {{ render_paragraph(l10n("preamble.1", project_id, user_lang)) }}
@@ -17,7 +17,7 @@
         </div>
     </section>
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h2(l10n("setup.title", project_id, user_lang)) }}
         <div class="content-spacer">
             {{ render_paragraph(l10n("setup.1", project_id, user_lang)) }}
@@ -25,7 +25,7 @@
         </div>
     </section>
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h3(l10n("setup.camera.title", project_id, user_lang)) }}
         <div class="content-spacer">
         {{ render_paragraph(l10n("setup.camera.1", project_id, user_lang)) }}
@@ -51,7 +51,7 @@
         </div>
     </section>
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h3(l10n("setup.cleaner.title", project_id, user_lang)) }}
         <div class="content-spacer">
             {{ render_paragraph(l10n("setup.cleaner.1", project_id, user_lang)) }}
@@ -77,7 +77,7 @@
         </div>
     </section>
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h3(l10n("setup.web.title", project_id, user_lang)) }}
         <div class="content-spacer">
             {{ render_paragraph(l10n("setup.web.1", project_id, user_lang)) }}
@@ -109,7 +109,7 @@
         </div>
     </section>
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h2(l10n("startup.title", project_id, user_lang)) }}
         <div class="content-spacer">
             {{ render_paragraph(l10n("startup.1", project_id, user_lang)) }}
@@ -121,7 +121,7 @@
         </div>
     </section>
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h2(l10n("screenshots.title", project_id, user_lang)) }}
         <div class="content-spacer">
             {{ render_splide([
@@ -131,7 +131,7 @@
         </div>
     </section>
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h2(l10n("statistics.title", project_id, user_lang)) }}
         <div class="content-spacer">
             {{ render_list_ul([
@@ -162,14 +162,14 @@
         </div>
     </section>
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h2(l10n("license.title", project_id, user_lang)) }}
         <div class="content-spacer">
             {{ render_paragraph(l10n("license.1", project_id, user_lang)) }}
         </div>
     </section>
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h2(l10n("links.title", project_id, user_lang)) }}
         <div class="content-spacer">
             {{ render_list_ul([
diff --git a/templates/projects/lscom-cli-dotnet.jinja b/templates/projects/lscom-cli-dotnet.jinja
index 722b08a..d144349 100644
--- a/templates/projects/lscom-cli-dotnet.jinja
+++ b/templates/projects/lscom-cli-dotnet.jinja
@@ -1,7 +1,7 @@
 {% extends "projects/_project.jinja" %}
 
 {% block project_content %}
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h2(l10n("intro.title", project_id, user_lang)) }}
         <div class="content-spacer">
             {{ render_paragraph(l10n("intro.p1", project_id, user_lang)) }}
@@ -10,7 +10,7 @@
         </div>
     </section>
 
-        <section>
+        <section class="mt-l mt-0-if-first">
         {{ render_h2(l10n("requirements.title", project_id, user_lang)) }}
         <div class="content-spacer">
             {{ render_list_ul([
@@ -26,7 +26,7 @@
         </div>
     </section>
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h2(l10n("improvements.title", project_id, user_lang)) }}
         <div class="content-spacer">
             {{ render_list_ul([
@@ -39,7 +39,7 @@
         </div>
     </section>
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h2(l10n("screenshots.title", project_id, user_lang)) }}
         <div class="content-spacer">
             {{ render_splide([
@@ -50,7 +50,7 @@
         </div>
     </section>
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h2(l10n("usage.title", project_id, user_lang)) }}
         <div class="content-spacer">
             {{
@@ -78,7 +78,7 @@
         </div>
     </section>
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h2(l10n("formatting.title", project_id, user_lang)) }}
         <div class="content-spacer">
             {{
@@ -105,7 +105,7 @@
         </div>
     </section>
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h2(l10n("packages.title", project_id, user_lang)) }}
         <div class="content-spacer">
             {{ render_paragraph(l10n("packages.single.title", project_id, user_lang)) }}
@@ -117,10 +117,10 @@
         </div>
     </section>
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h2(l10n("version.current", "commons", user_lang)) }}
         <div class="content-spacer">
-            <table class="table-stylish table-p-s border r-l">
+            <table class="table-stylish table-p-xs table-v-center border r-l">
                 <thead>
                     <tr>
                         <th>{{ l10n("cpu.architecture", "commons", user_lang) }}</th>
@@ -132,53 +132,134 @@
                     <tr>
                         <td>{{ l10n("cpu.any", "commons", user_lang) }}</td>
                         <td>{{ l10n("requirements.text.dotnet", project_id, user_lang) }}</td>
-                        <td>...</td>
+                        <td>
+                            <a href="https://files.nibblepoker.lu/downloads/DotNet-ListComPort/3.0.0/ListComPort_v3.0.0_AnyCPU.zip" class="a-hidden">
+                                {{ render_button(
+                                    "<span class=\"text-monospace\"><i class=\"fad fa-file-archive mr-xs\"></i>ZIP - 120.36 KiB<i class=\"fas fa-download ml-xs\"></i>",
+                                    False, None)
+                                }}
+                            </a>
+                        </td>
                     </tr>
+
                     <tr>
                         <td rowspan="2">{{ l10n("cpu.x64", "commons", user_lang) }}</td>
                         <td>{{ l10n("requirements.text.dotnet", project_id, user_lang) }}</td>
-                        <td>...</td>
+                        <td>
+                            <a href="https://files.nibblepoker.lu/downloads/DotNet-ListComPort/3.0.0/ListComPort_v3.0.0_x64_Single.zip" class="a-hidden">
+                                {{ render_button(
+                                    "<span class=\"text-monospace\"><i class=\"fad fa-file-archive mr-xs\"></i>ZIP - 138.9 KiB<i class=\"fas fa-download ml-xs\"></i>",
+                                    False, None)
+                                }}
+                            </a>
+                        </td>
                     </tr>
                     <tr>
                         <td>{{ l10n("none.fs", "commons", user_lang) }}</td>
-                        <td>...</td>
+                        <td>
+                            <a href="https://files.nibblepoker.lu/downloads/DotNet-ListComPort/3.0.0/ListComPort_v3.0.0_x64_SelfContained.zip" class="a-hidden mr-s">
+                                {{ render_button(
+                                    "<span class=\"text-monospace\"><i class=\"fad fa-file-archive mr-xs\"></i>ZIP - 7.35 MiB<i class=\"fas fa-download ml-xs\"></i>",
+                                    False, None)
+                                }}
+                            </a>
+
+                            <a href="https://files.nibblepoker.lu/downloads/DotNet-ListComPort/3.0.0/ListComPort_v3.0.0_x64.msi" class="a-hidden">
+                                {{ render_button(
+                                    "<span class=\"text-monospace\"><i class=\"fad fa-file-archive mr-xs\"></i>MSI - 10.51 MiB<i class=\"fas fa-download ml-xs\"></i>",
+                                    False, None, "btn-primary")
+                                }}
+                            </a>
+                        </td>
                     </tr>
+
                     <tr>
                         <td rowspan="2">{{ l10n("cpu.x86", "commons", user_lang) }}</td>
                         <td>{{ l10n("requirements.text.dotnet", project_id, user_lang) }}</td>
-                        <td>...</td>
+                        <td>
+                            <a href="https://files.nibblepoker.lu/downloads/DotNet-ListComPort/3.0.0/ListComPort_v3.0.0_x86_Single.zip" class="a-hidden">
+                                {{ render_button(
+                                    "<span class=\"text-monospace\"><i class=\"fad fa-file-archive mr-xs\"></i>ZIP - 123.56 KiB<i class=\"fas fa-download ml-xs\"></i>",
+                                    False, None)
+                                }}
+                            </a>
+                        </td>
                     </tr>
                     <tr>
                         <td>{{ l10n("none.fs", "commons", user_lang) }}</td>
-                        <td>...</td>
+                        <td>
+                            <a href="https://files.nibblepoker.lu/downloads/DotNet-ListComPort/3.0.0/ListComPort_v3.0.0_x86_SelfContained.zip" class="a-hidden mr-s">
+                                {{ render_button(
+                                    "<span class=\"text-monospace\"><i class=\"fad fa-file-archive mr-xs\"></i>ZIP - 6.64 MiB<i class=\"fas fa-download ml-xs\"></i>",
+                                    False, None)
+                                }}
+                            </a>
+
+                            <a href="https://files.nibblepoker.lu/downloads/DotNet-ListComPort/3.0.0/ListComPort_v3.0.0_x86.msi" class="a-hidden mr-s">
+                                {{ render_button(
+                                    "<span class=\"text-monospace\"><i class=\"fad fa-file-archive mr-xs\"></i>MSI - 9.79 MiB<i class=\"fas fa-download ml-xs\"></i>",
+                                    False, None, "btn-primary")
+                                }}
+                            </a>
+                        </td>
                     </tr>
+
                     <tr>
                         <td rowspan="2">{{ l10n("cpu.arm64", "commons", user_lang) }}</td>
                         <td>{{ l10n("requirements.text.dotnet", project_id, user_lang) }}</td>
-                        <td>...</td>
+                        <td>
+                            <a href="https://files.nibblepoker.lu/downloads/DotNet-ListComPort/3.0.0/ListComPort_v3.0.0_arm64_Single.zip" class="a-hidden">
+                                {{ render_button(
+                                    "<span class=\"text-monospace\"><i class=\"fad fa-file-archive mr-xs\"></i>ZIP - 130.34 KiB<i class=\"fas fa-download ml-xs\"></i>",
+                                    False, None)
+                                }}
+                            </a>
+                        </td>
                     </tr>
                     <tr>
                         <td>{{ l10n("none.fs", "commons", user_lang) }}</td>
-                        <td>...</td>
+                        <td>
+                            <a href="https://files.nibblepoker.lu/downloads/DotNet-ListComPort/3.0.0/ListComPort_v3.0.0_arm64_SelfContained.zip" class="a-hidden">
+                                {{ render_button(
+                                    "<span class=\"text-monospace\"><i class=\"fad fa-file-archive mr-xs\"></i>ZIP - 7.04 MiB<i class=\"fas fa-download ml-xs\"></i>",
+                                    False, None)
+                                }}
+                            </a>
+                        </td>
                     </tr>
-                    <tr>
+
+                    <!--<tr>
                         <td rowspan="2">{{ l10n("cpu.arm32", "commons", user_lang) }}</td>
                         <td>{{ l10n("requirements.text.dotnet", project_id, user_lang) }}</td>
-                        <td>...</td>
+                        <td>
+                            <a href="https://files.nibblepoker.lu/downloads/DotNet-ListComPort/3.0.0/ListComPort_v3.0.0_arm_Single.zip" class="a-hidden">
+                                {{ render_button(
+                                    "<span class=\"text-monospace\"><i class=\"fad fa-file-archive mr-xs\"></i>ZIP - 127.57 KiB<i class=\"fas fa-download ml-xs\"></i>",
+                                    False, None)
+                                }}
+                            </a>
+                        </td>
                     </tr>
                     <tr>
                         <td>{{ l10n("none.fs", "commons", user_lang) }}</td>
-                        <td>...</td>
-                    </tr>
+                        <td>
+                            <a href="https://files.nibblepoker.lu/downloads/DotNet-ListComPort/3.0.0/ListComPort_v3.0.0_arm_SelfContained.zip" class="a-hidden">
+                                {{ render_button(
+                                    "<span class=\"text-monospace\"><i class=\"fad fa-file-archive mr-xs\"></i>ZIP - 6.68 MiB<i class=\"fas fa-download ml-xs\"></i>",
+                                    False, None)
+                                }}
+                            </a>
+                        </td>
+                    </tr>-->
                 </tbody>
             </table>
         </div>
     </section>
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h2(l10n("source.code", "commons", user_lang)) }}
         <div class="content-spacer">
-            <table class="table-stylish table-p-s border r-l">
+            <table class="table-stylish table-p-xs table-v-center border r-l">
                 <thead>
                     <tr>
                         <th>{{ l10n("version", "commons", user_lang) }}</th>
@@ -188,14 +269,27 @@
                 <tbody>
                     <tr>
                         <td>v3.0.0</td>
-                        <td>...</td>
+                        <td>
+                            <a href="https://files.nibblepoker.lu/downloads/DotNet-ListComPort/3.0.0/DotNet-ListComPort-3.0.0.tar.gz" class="a-hidden mr-s">
+                                {{ render_button(
+                                    "<span class=\"text-monospace\"><i class=\"fad fa-file-archive mr-xs\"></i>TAR.GZ - 4.22 MiB<i class=\"fas fa-download ml-xs\"></i>",
+                                    False, None)
+                                }}
+                            </a>
+                            <a href="https://files.nibblepoker.lu/downloads/DotNet-ListComPort/3.0.0/DotNet-ListComPort-3.0.0.zip" class="a-hidden">
+                                {{ render_button(
+                                    "<span class=\"text-monospace\"><i class=\"fad fa-file-archive mr-xs\"></i>ZIP - 4.23 MiB<i class=\"fas fa-download ml-xs\"></i>",
+                                    False, None)
+                                }}
+                            </a>
+                        </td>
                     </tr>
                 </tbody>
             </table>
         </div>
     </section>
 
-    <section>
+    <section class="mt-l mt-0-if-first">
         {{ render_h2(l10n("links.title", project_id, user_lang)) }}
         <div class="content-spacer">
             {{ render_list_ul([
diff --git a/website/renderers/file_input.py b/website/renderers/file_input.py
index 681f0c4..0885482 100644
--- a/website/renderers/file_input.py
+++ b/website/renderers/file_input.py
@@ -2,7 +2,8 @@ from flask import render_template
 
 
 def render_file_input(input_id: str, multiple: bool, accept: str = None,
-                      upload_button: bool = False, clear_button: bool = False, user_lang: str = "") -> str:
+                      upload_button: bool = False, clear_button: bool = False,
+                      user_lang: str = "", text_override: str = "") -> str:
     return render_template(
         "elements/file-input.jinja",
         file_input_id=input_id,
@@ -11,4 +12,5 @@ def render_file_input(input_id: str, multiple: bool, accept: str = None,
         file_upload_button=upload_button,
         file_clear_button=clear_button,
         user_lang=user_lang,
+        text_override=text_override,
     )