feat(website): improve hero download buttons on mobile

apps/website/src/components/DownloadButton.css

@@ -1,7 +1,3 @@
-.download-button {
-    display: none;
-}
-
 .download-button .platform {
     font-size: 0.75em;
     opacity: 0.75;
@@ -14,6 +10,6 @@
 
 @media (min-width: 720px) {
     .download-button {
-        display: inline-block;
+        display: inline-block !important;
     }
 }

apps/website/src/components/DownloadButton.tsx

@@ -12,7 +12,7 @@ const { name, url } = getRecommendedDownload();
 export default function DownloadButton({ big }: DownloadButtonProps) {
     return (
         <Button
-           className={`download-button ${big ? "big" : ""}`}
+           className={`download-button desktop-only ${big ? "big" : ""}`}
            href={url}
            iconSvg={downloadIcon}
            text={<>

apps/website/src/pages/Home/index.css

@@ -80,8 +80,9 @@ section.hero-section .screenshot {
 }
 
 section.hero-section .download-wrapper {    
-    display: inline-flex;
+    display: flex;
     flex-direction: column;
+    align-content: center;
 }
 
 section.hero-section .download-button {
@@ -130,6 +131,10 @@ section.hero-section .additional-options a {
         flex-direction: row;
         padding: 3em;
     }
+
+    section.hero-section .download-wrapper {
+        display: inline-flex;
+    }
 }
 
 section:nth-of-type(2n+1) {

apps/website/src/pages/Home/index.tsx

@@ -31,7 +31,8 @@ function HeroSection() {
 
                 <div className="download-wrapper">
                     <DownloadButton big />
-                    <a class="more-download-options" href="./download">See all download options</a>
+                    <a class="more-download-options desktop-only" href="./download">See all download options</a>
+                    <Button href="./download" className="mobile-only" text="See download options" />
                     <div className="additional-options">
                         <Button iconSvg={gitHubIcon} outline text="GitHub" href="https://github.com/TriliumNext/Trilium/" openExternally />
                         <Button iconSvg={dockerIcon} outline text="Docker Hub" href="https://hub.docker.com/r/triliumnext/trilium" openExternally />

apps/website/src/style.css

@@ -112,12 +112,15 @@ img {
     fill: currentColor;
 }
 
-
 @media (max-width: 719px) {
     .grid-3-cols > *,
     .grid-2-cols > * {
         margin-bottom: 1em;
     }
+
+    .desktop-only {
+        display: none !important;
+    }
 }
 
 @media (min-width: 720px) {
@@ -140,4 +143,8 @@ img {
         grid-template-columns: 1fr 1fr;
         gap: 1em;
     }
+
+    .mobile-only {
+        display: none !important;
+    }
 }