website updates

Beelink · Beelink · commit 46b9ad26b28c · 2020-12-19T21:08:24.000+02:00
diff --git a/imgs/icons/arrow.png b/imgs/icons/arrow.png
diff --git a/index.css b/index.css
@@ -47,6 +47,7 @@ header a {
 
 header .logo {
     transition: transform var(--animation-speed);
+    padding: 6px 0;
 }
 
 header a:hover .logo {
@@ -70,6 +71,12 @@ header .logo span {
     font: bold 20px/30px "Inter";
 }
 
+header .logo .tagline {
+    font-size: 14px;
+    opacity: 0.5;
+    font-weight: normal;
+}
+
 header .navbar .link {
     font: 16px/24px "Inter";
     border: 2px solid transparent;
@@ -103,7 +110,7 @@ header .navbar a:hover .link {
 .apps .app-row {
     display: flex;
     justify-content: center;
-    margin-bottom: 200px;
+    margin-bottom: 160px;
 }
 
 .apps .column {
@@ -119,7 +126,7 @@ header .navbar a:hover .link {
 }
 
 .apps h1 {
-    font: bold 42px/72px "Inter"; 
+    font: bold 36px/48px "Inter"; 
     color: #000;
     margin: 16px;
 }
@@ -142,7 +149,7 @@ header .navbar a:hover .link {
 .apps a {
     color: var(--module-color-light);
     text-decoration: none;
-    font: 20px/30px "Inter"; 
+    font: 16px/24px "Inter"; 
     display: inline-block;
     vertical-align: middle;
     margin: 0 8px;
@@ -157,7 +164,7 @@ header .navbar a:hover .link {
 }
 
 .apps a span {
-    margin: 0 8px;
+    margin: 0 6px;
     vertical-align: middle;
 }
 
@@ -324,24 +331,13 @@ footer a:hover {
     }
 }
 
-@media screen and (max-width: 900px) {
-    header {
-        padding-bottom: 32px;
-        position: fixed;
-        z-index: 500;
-    }
-
+@media screen and (max-width: 950px) {
     .header-svg {
-        display: none;
-    }
-
-    .apps {
-        padding: 128px 0 0 0;
-        margin-top: 0;
+        padding-top: 64px;
     }
 }
 
-@media screen and (max-width: 480px) {
+@media screen and (max-width: 640px) {
     header {
         justify-content: center;
     }
@@ -361,6 +357,12 @@ footer a:hover {
     }
 }
 
+@media screen and (max-width: 450px) {
+    header .tagline {
+        display: none;
+    }
+}
+
 /* SPECIAL EFFECTS */
 
 .special-effects {
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta name="google-site-verification" content="Rjbi1qg42poZJzh_4IlwTy22cwa7aNoTomk6aXiYnsA" />
     <title>Module Art - Best apps with ❤</title>
     <link rel="stylesheet" href="index.css">
     <script src="js/jquery-3.5.1.min.js"></script>
@@ -17,6 +18,7 @@
             <div class="logo">
                 <img src="imgs/module512.png" />
                 <span>Module Art</span>
+                <span class="tagline">Best apps with ❤</span>
             </div>
         </a>
         <div class="navbar">
@@ -42,24 +44,24 @@
             <div class="column">
                 <img class="icon" src="https://raw.githubusercontent.com/ModuleArt/quick-picture-viewer/master/quick-picture-viewer/resources/imgs/picture512.png" />
                 <h1>Quick Picture Viewer</h1>
-                <h3>Lightweight, versatile desktop image viewer</h3>
-                <a id="quick-picture-viewer" href="#"><img src="imgs/icons/windows.png" /><span>Windows</span></a>
-                <a href="https://moduleart.github.io/quick-picture-viewer"><span>More details</span><img src="imgs/icons/arrow.png" /></a>
+                <h3>Lightweight, versatile desktop image viewer for Windows</h3>
+                <a id="quick-picture-viewer" href="#"><img src="imgs/icons/windows.png" /><span>Download</span></a>
+                <a href="https://moduleart.github.io/quick-picture-viewer"><span>More details ↗</span></a>
             </div>
         </div>
         <div class="app-row">
             <div class="column">
                 <img class="icon" src="imgs/picker512.png" />
                 <h1>Quick Color Picker</h1>
-                <h3>Lightweight desktop color picker and color editor utility</h3>
-                <a id="quick-color-picker" href="#"><img src="imgs/icons/windows.png" /><span>Windows</span></a>
+                <h3>Lightweight desktop color picker and color editor utility for Windows</h3>
+                <a id="quick-color-picker" href="#"><img src="imgs/icons/windows.png" /><span>Download</span></a>
                 <a href="https://github.com/ModuleArt/quick-color-picker"><img src="imgs/icons/github.png" /><span>GitHub</span></a>
             </div>
             <div class="column">
                 <img class="icon" src="imgs/rec512.png" />
                 <h1>Quick Screen Recorder</h1>
-                <h3>Lightweight desktop screen recorder</h3>
-                <a id="quick-screen-recorder" href="#"><img src="imgs/icons/windows.png" /><span>Windows</span></a>
+                <h3>Lightweight desktop screen recorder for Windows</h3>
+                <a id="quick-screen-recorder" href="#"><img src="imgs/icons/windows.png" /><span>Download</span></a>
                 <a href="https://github.com/ModuleArt/quick-screen-recorder"><img src="imgs/icons/github.png" /><span>GitHub</span></a>
             </div>
         </div>
