feat: larger spacings between elements in navbar on small devices

Author: olivier3lanc

index.html

@@ -63,7 +63,6 @@
         <button type="button"
             class="d-flex | pl-5 pr-5 pt-4 pb-4 fs-1 | bc-primary-700 b-0"
             c-toggle="menu"
-            data-dismiss="true"
             title="Toggle menu"
             style="perspective: 5em; transform-style: preserve-3d;">
             <span class="d-flex fd-column gap-1 __animation_3"
@@ -134,14 +133,18 @@ <h1 class="d-flex | m-0" d-none="xs,sm">
             </form>
             <a  href="./docs/"
                 title="Get help"
-                class="d-flex ai-center gap-1 | fs-2 td-none ff-lead-700 tt-uppercase ws-nowrap | c-primary-100">
+                class="d-flex ai-center gap-1 | fs-2 td-none ff-lead-700 tt-uppercase ws-nowrap | c-primary-100"
+                pt-3="xs,sm"
+                pb-3="xs,sm">
                 How it works<span class="ff-lead-400 c-secondary-500">?</span>          
             </a>
             <!-- Enter Github link or comment/ remove -->
             <a  href="./#your-own-github-link"
                 target="_blank"
                 title="Open Project Name Github on a new tab"
-                class="d-flex ai-center | fs-2 td-none ff-lead-700 tt-uppercase c-primary-100">
+                class="d-flex ai-center | fs-2 td-none ff-lead-700 tt-uppercase c-primary-100"
+                pt-3="xs,sm"
+                pb-3="xs,sm">
                 Github
                 <svg style="height: 1em;" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link" stroke="var(--dsg-colors-secondary-500)">
                     <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>