quick-whiteboard

Author: Beelink

imgs/screenshots/quick-whiteboard.png

@@ -26,6 +26,17 @@ body {
     background: #f1f1f1;  
 }
 
+body::after {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 256px;
+    content: "";
+    background: linear-gradient(to bottom, transparent, #f1f1f1);
+    pointer-events: none;
+}
+
 /* HEADER */
 
 header {
@@ -95,6 +106,7 @@ header .navbar a:hover .link {
 .header-svg {
     position: relative;
     pointer-events: none;
+    transform: translateY(-2vw);
 }
 
 .header-svg svg {
@@ -104,7 +116,7 @@ header .navbar a:hover .link {
 /* APPS */
 
 .apps {
-    margin-top: -5vw;
+    margin-top: -9vw;
 }
 
 .apps .app-row {
@@ -134,7 +146,7 @@ header .navbar a:hover .link {
 .apps h3 {
     font: 20px/30px "Inter"; 
     color: #000;
-    margin: 20px 16px;
+    margin: 20px 32px;
 }
 
 .apps .screenshot {
@@ -175,15 +187,6 @@ main {
     padding: 0 16px;
 }
 
-main .screenshot {
-    filter: var(--filter-shadow-extra-black);
-    border-radius: 8px;
-    margin-top: -21vw;
-    background: #333;
-    border: 2px solid rgba(0, 0, 0, 0.25);
-    max-width: 100%;
-}
-
 main h2 {
     font: bold 28px/42px "Inter";
     margin-top: 96px;
@@ -275,6 +278,8 @@ footer {
     justify-content: space-between;
     box-sizing: border-box;
     margin-top: 128px;
+    position: relative;
+    z-index: 1;
 }
 
 footer span,
@@ -329,9 +334,7 @@ footer a:hover {
     .apps .screenshot {
         display: none;
     }
-}
 
-@media screen and (max-width: 950px) {
     .header-svg {
         padding-top: 64px;
     }
@@ -346,13 +349,20 @@ footer a:hover {
         display: none;
     }
 
+    .apps .column h3 {
+        margin: 16px 0;
+    }
+
     main .donate a {
         width: 100%;
     }
+	
+	footer span {
+		margin-bottom: 8px;
+	}
 
     footer {
         flex-direction: column;
-        gap: 8px;
         text-align: center;
     }
 }

index.css

@@ -44,11 +44,23 @@
             <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 for Windows</h3>
+                <h3>Lightweight, versatile desktop image viewer for Windows. The best replacement for the default Windows photo viewer.</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="https://raw.githubusercontent.com/ModuleArt/quick-whiteboard/master/quick-whiteboard/resources/imgs/whiteboard512.png" />
+                <h1>Quick Whiteboard</h1>
+                <h3>Lightweight tool to draw or keep notes on your desktop background for Windows.</h3>
+                <a id="quick-whiteboard" href="#"><img src="imgs/icons/windows.png" /><span>Download</span></a>
+                <a href="https://github.com/ModuleArt/quick-whiteboard"><img src="imgs/icons/github.png" /><span>GitHub</span></a>
+            </div>
+            <div class="column">
+                <img class="screenshot" src="imgs/screenshots/quick-whiteboard.png" />
+            </div>
+        </div>
         <div class="app-row">
             <div class="column">
                 <img class="icon" src="imgs/picker512.png" />