feat: landing optimizations

Author: piotrpdev

landing/index.html

@@ -15,6 +15,7 @@
             src: url('assets/geist.woff2') format('woff2');
             font-style: normal;
             font-weight: 100 900;
+            font-display: swap;
         }
 
         :root {
@@ -25,12 +26,13 @@
         }
 
         body {
-            font-family: Geist, serif;
+            font-family: Geist, sans-serif;
             font-optical-sizing: auto;
             font-feature-settings: normal;
             font-variation-settings: normal;
             text-rendering: optimizeLegibility;
             -webkit-font-smoothing: antialiased;
+            line-height: 1.3rem;
 
             background-color: var(--background-color);
             color: var(--text-color);
@@ -105,10 +107,12 @@
             border-radius: 5px;
             border: solid 1px var(--border-color);
             width: 100%;
+            height: 100%;
         }
 
         #poster-img {
             width: auto;
+            height: 100%;
         }
 
         header {
@@ -136,7 +140,7 @@
 
         #subtitle {
             transform: translateX(-0.1rem);
-            margin: 0 0 1.5rem 0;
+            margin: 0rem 0 1.5rem 0;
             color: var(--muted-text-color);
         }
 
@@ -253,8 +257,8 @@ <h5>("eye" in Polish)</h5>
         </div>
         <div id="img-col">
             <!-- TODO: Replace placeholder images -->
-            <img id="demo-img" src="assets/demo_placeholder.webp" alt="Oko demo">
-            <img id="poster-img" src="assets/poster_placeholder.webp" alt="Oko poster" style="display: none;">
+            <img id="demo-img" src="assets/demo_placeholder.webp" width="3284" height="2016" alt="Oko demo">
+            <img id="poster-img" src="assets/poster_placeholder.webp" width="1357" height="1920" alt="Oko poster" style="display: none;">
         </div>
     </div>
     <script>