Better support larger and smaller screens

Cargo.lock

@@ -1196,7 +1196,7 @@ checksum = "d4fd5641d01c8f18a23da7b6fe29298ff4b55afcccdf78973b24cf3175fee32e"
 
 [[package]]
 name = "pict-rs-proxy"
-version = "0.1.4"
+version = "0.1.5"
 dependencies = [
  "actix-rt",
  "actix-web",

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "pict-rs-proxy"
-version = "0.1.4"
+version = "0.1.5"
 authors = ["asonix <asonix@asonix.dog>"]
 license = "AGPL-3.0"
 readme = "README.md"

scss/images.scss

@@ -12,9 +12,19 @@ ul {
     margin-bottom: 0;
 }
 
+.imagebox {
+    display: flex;
+    justify-content: center;
+    align-items: middle;
+    max-width: 400px;
+    max-height: 400px;
+}
+
 img {
     background-color: #f5f5f5;
     border: 1px solid #e5e5e5;
     border-radius: 3px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    margin-right: auto;
+    max-height: 400px;
 }

templates/images.rs.html

@@ -21,9 +21,11 @@
                 @for image in images {
                     <li>
                         <article>
-                            <img src="@image.thumb(400)" alt="@image.filename()" title="@image.filename()" />
-                            <p>Link: <a href="@image.link()">@image.link()</a></p>
-                            <p>Delete link: <a href="@image.delete()">@image.delete()</a></p>
+                            <div class="imagebox">
+                                <img src="@image.thumb(800)" alt="@image.filename()" title="@image.filename()" />
+                            </div>
+                            <p>Link:<br /><a href="@image.link()">@image.link()</a></p>
+                            <p>Delete link:<br /><a href="@image.delete()">@image.delete()</a></p>
                         </article>
                     </li>
                 }