HiDPI site preview images

docs/index.css

@@ -97,7 +97,6 @@ body {
     padding-right: 40px;
     text-align: right;
     width: 45ch;
-    z-index: 1;
 }
 .discription__disclaimer {
     color: var(--text-color-secondary);
@@ -156,26 +155,29 @@ body {
 
 .preview {
     grid-area: preview;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+    z-index: -1;
 }
 
 .preview--bg {
     -webkit-mask-image: linear-gradient(to right, black, transparent);
     mask-image: linear-gradient(to right, black, transparent);
-    max-height: 712px;
+    height: 668px;
-    max-width: 912px;
+    object-fit: cover;
-    object-fit: none;
     object-position: left;
     opacity: 0.65;
     width: 500px;
 }
 
 .preview--fg {
-    margin-left: -60px;
-    max-height: 281px;
-    max-width: 462px;
-    position: relative;
-    grid-row-start: 2;
     align-self: flex-start;
+    grid-row-start: 2;
+    margin-left: -60px;
+    height: 280px;
+    width: 462px;
+    position: relative;
 }
 
 .footer {

docs/index.html

@@ -57,8 +57,8 @@
                 </main>
             </div>
 
-            <img width="884" height="684" src="images/preview_bg_dark_unfocused_wide.png" class="preview preview--bg dark">
+            <img src="images/preview_bg_hidpi.png" class="preview preview--bg dark">
-            <img width="462" height="281" src="images/preview_fg.png" class="preview preview--fg dark">
+            <img src="images/preview_fg_hidpi.png" class="preview preview--fg dark">
 
             <footer class="footer">
                 <div class="links">