feat: add brief app description to hero page

libre-tube · Sep 28, 2023 · 95a9c70 · 95a9c70
1 parent c4f77ce
commit 95a9c70
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -7,20 +7,35 @@
     <link rel="stylesheet" href="style.css" />
     <title>LibreTube</title>
 
-    <meta name="description" content="An alternative frontend for YouTube, for Android.">
+    <meta
+      name="description"
+      content="An alternative frontend for YouTube, for Android."
+    />
 
-    <meta property="og:url" content="https://libre-tube.github.io">
-    <meta property="og:type" content="website">
-    <meta property="og:title" content="LibreTube">
-    <meta property="og:description" content="An alternative frontend for YouTube, for Android.">
-    <meta property="og:image" content="https://libre-tube.github.io/assets/banners/gh-banner.png">
+    <meta property="og:url" content="https://libre-tube.github.io" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="LibreTube" />
+    <meta
+      property="og:description"
+      content="An alternative frontend for YouTube, for Android."
+    />
+    <meta
+      property="og:image"
+      content="https://libre-tube.github.io/assets/banners/gh-banner.png"
+    />
 
-    <meta name="twitter:card" content="summary_large_image">
-    <meta property="twitter:domain" content="libre-tube.github.io">
-    <meta property="twitter:url" content="https://libre-tube.github.io">
-    <meta name="twitter:title" content="LibreTube">
-    <meta name="twitter:description" content="An alternative frontend for YouTube, for Android.">
-    <meta name="twitter:image" content="https://libre-tube.github.io/assets/banners/gh-banner.png">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta property="twitter:domain" content="libre-tube.github.io" />
+    <meta property="twitter:url" content="https://libre-tube.github.io" />
+    <meta name="twitter:title" content="LibreTube" />
+    <meta
+      name="twitter:description"
+      content="An alternative frontend for YouTube, for Android."
+    />
+    <meta
+      name="twitter:image"
+      content="https://libre-tube.github.io/assets/banners/gh-banner.png"
+    />
   </head>
 
   <body>
@@ -40,6 +55,8 @@
       <section class="download">
         <h1>GET IT NOW!</h1>
 
+        <h2>An alternative frontend for YouTube, for Android.</h2>
+
         <div class="download-links">
           <a href="https://github.com/libre-tube/LibreTube/releases/latest">
             <img src="assets/badges/ghload.png" alt="GitHub Download" />

diff --git a/style.css b/style.css
@@ -116,10 +116,17 @@ section:not(:last-child) {
 
 .download h1 {
   text-transform: uppercase;
-  margin-bottom: 2rem;
+  text-align: center;
+  margin-bottom: 1rem;
   font-size: 3rem;
 }
 
+.download h2 {
+  text-align: center;
+  margin: 0 1rem;
+  margin-bottom: 1rem;
+}
+
 .download-links img {
   width: 15rem;
 }