Update website and metainfo

- Website updated with better information and layout - Flatpak metainfo no longer includes the first screenshot as it shows an empty window which is against Flathub guidelines.
giantpinkrobots · Nov 29, 2024 · 96a76c6 · 96a76c6
1 parent 1248ceb
commit 96a76c6
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 33 deletions.
diff --git a/data/io.github.giantpinkrobots.varia.metainfo.xml.in b/data/io.github.giantpinkrobots.varia.metainfo.xml.in
@@ -70,9 +70,6 @@ Varia uses GTK4 and Libadwaita for the user interface and utilizes Aria2 for the
 <translation type="gettext">varia</translation>
 <screenshots>
 <screenshot type="default">
-<image>https://raw.githubusercontent.com/giantpinkrobots/varia/main/screenshots/Screenshot-Varia-1.png</image>
-</screenshot>
-<screenshot>
 <image>https://raw.githubusercontent.com/giantpinkrobots/varia/main/screenshots/Screenshot-Varia-2.png</image>
 </screenshot>
 <screenshot>

diff --git a/docs/index.html b/docs/index.html
@@ -3,6 +3,7 @@
 <head>
 <link rel="stylesheet" href="style.css">
 <link rel="icon" type="image/png" href="variaIcon.png" />
+<title>Varia - Quick and efficient download manager</title>
 </head>
 <body>
 
@@ -30,6 +31,7 @@ <h1 style="display: inline-block">Varia</h1>
     </div>
 
     <h2>Quick and efficient download manager</h2>
+    <h3>for regular downloads and torrents</h3>
 
     <br>
 
@@ -94,46 +96,26 @@ <h2>Quick and efficient download manager</h2>
     </div>
 
     <picture>
-        <source srcset="https://raw.githubusercontent.com/giantpinkrobots/varia/main/screenshots/Screenshot-Varia-5.png" alt="Varia screenshot" media="(prefers-color-scheme: dark)" />
-        <img src="https://raw.githubusercontent.com/giantpinkrobots/varia/main/screenshots/Screenshot-Varia-2.png" alt="Varia screenshot">
+        <source style="max-width: 100%; height: auto;" srcset="https://raw.githubusercontent.com/giantpinkrobots/varia/main/screenshots/Screenshot-Varia-5.png" alt="Varia screenshot" media="(prefers-color-scheme: dark)" />
+        <img style="max-width: 100%; height: auto;" src="https://raw.githubusercontent.com/giantpinkrobots/varia/main/screenshots/Screenshot-Varia-2.png" alt="Varia screenshot">
     </picture>
 
     <hr class="solid">
 
     <br>
 
     <h2>Download quickly.</h2>
-    <p>Utilizing the aria2 backend, Varia helps you take advantage of your connection<br>speed to its fullest when it comes to downloading files.</p>
-
-    <br>
-
-    <h2>Pick up where you left off.</h2>
-    <p>With Varia, you can pause your downloads and continue downloading them<br>afterwards, even after rebooting your computer.</p>
+    <p>Download files and torrents quickly - potentially faster than your browser, continue incomplete downloads even after reboots</p>
 
     <br>
 
     <h2>Connect it to your browser.</h2>
-    <p>Varia integrates seamlessly with Firefox and Chrome/ium through<br>an extension. It can route all downloads to itself.</p>
+    <p>Varia integrates seamlessly with Firefox and Chrome/ium through an extension. It can route all downloads to itself.</p>
 
     <br>
 
     <h2>Powerful underneath.</h2>
-    <p>Schedule your downloads with a powerful scheduler function.<br>Use basic authentication and import cookies from a file.<br>Enable remote mode to control a remote aria2c instance.</p>
-
-    <br>
-
-    <h2>Torrent support.</h2>
-    <p>You can use Varia to download torrents easily as well.</p>
-
-    <br>
-
-    <h2>Use it easily.</h2>
-    <p>Varia has a very simple and easy to understand user interface.</p>
-
-    <br>
-
-    <h2>It's all open.</h2>
-    <p>Varia is open source software, which means the building blocks of it are publicly<br>available. You can take a look at it and contribute to it.</p>
+    <p>Schedule downloads with a powerful scheduler allowing for custom timespans for each day of the week. Use basic authentication and import cookies from a file. Adjust the speed and the maximum simultaneous amount of downloads.</p>
 
     <br>
     <br>
@@ -144,7 +126,7 @@ <h2>It's all open.</h2>
     <br>
     <br>
 
-    <h3>
+    <h4>
     The Varia logo / icon and the Flathub logo were made by Jakub Steiner.
     <br>
     <br>
@@ -170,7 +152,7 @@ <h3>
     <br>
     <br>
     The package icon used in the Download for Windows section is part of the Feather icons set, licensed under the MIT license. feathericons.com
-    </h3>
+    </h4>
 
     <br>
     <br>

diff --git a/docs/style.css b/docs/style.css
@@ -31,18 +31,29 @@ h2 {
     font-family: 'Cantarell var';
     font-size: 175%;
     color: #241f31;
+    line-height: 0;
 }
 
 h3 {
+    font-family: 'Cantarell var';
+    font-size: 120%;
+    color: #777188;
+    width: 65%;
+    line-height: 15px;
+}
+
+h4 {
     font-family: 'Cantarell var';
     font-size: 75%;
     color: #241f31;
+    width: 65%;
 }
 
 p {
     font-family: 'Cantarell var';
     font-size: 150%;
     color: #241f31;
+    width: 65%;
 }
 
 .pill-button {
@@ -58,7 +69,7 @@ p {
     filter: drop-shadow(rgba(0, 0, 0, 0.5) 0rem 0rem 8px);
     transition: all 0.25s;
     transition-timing-function: ease-out;
-    display: block;
+    display: inline-block;
 }
 
 .pill-button-linux {
@@ -123,7 +134,7 @@ p {
     background: #EBEBEB;
     padding: 20px;
     filter: drop-shadow(rgba(0, 0, 0, 0.5) 0rem 0.3rem 8px);
-    width: 800px;
+    width: 65%;
     transition: transform 0.25s ease-in-out, padding 0.25s ease-in-out, max-height 0.25s ease-in-out;
     transform: scaleY(1);
     transform-origin: top;
@@ -138,6 +149,11 @@ p {
     padding: 0px;
 }
 
+.screenshot {
+    width: 100%;
+    height: auto;
+}
+
 @media (prefers-color-scheme: dark) {
     div[name='logo'] {
         filter: drop-shadow(rgb(39, 39, 39) 0rem 0rem 0px);
@@ -156,10 +172,14 @@ p {
         color: #62a0ea;
     }
 
-    h2, h3, p {
+    h2, h4, p {
         color: #f6f5f4;
     }
 
+    h3 {
+        color: #858585;
+    }
+
     hr.solid {
         border: 1px solid #3d3846;
     }