improve look and feel

6 years ago · 4e22a7601e
4 changed files with 24 additions and 21 deletions
--- a/web/album.html.template
+++ b/web/album.html.template
@ -3,7 +3,7 @@
 <head>
    <title>{{ .Title }}</title>
    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=contain">
    <link rel="stylesheet" href="/css/main.css">
    <script type="text/javascript" src="/js/main.js"></script>
 </head>
@ -18,7 +18,7 @@
 {{ else if eq .Type "video" }}
 <li>
 <a href="media/{{ .ID }}/">
-<video loop muted poster="raw/{{ .Files|photo }}">
+<video loop muted poster="raw/{{ .Files|photo }}" preload="none">
 <source src="raw/{{ .Files|video }}" type="video/mp4">
 </video>
 </a>
--- a/web/css/main.css
+++ b/web/css/main.css
@ -6,6 +6,11 @@ h1 {
    font-family: sans-serif;
 }

+html {
+    height: 100%;
+    width: 100%;
+}
+
 /* Album */

 body.album {
@ -38,30 +43,29 @@ body.album {
    flex-grow: 10;
 }

-/* Album */
+/* Media */

-.media div {
+body.media {
    height: 100%;
    width: 100%;
+    margin: 0;
    display: flex;
-    justify-content: center
-}
-
-html, body.media {
-    height: 100%;
-    margin: 0
+    flex-direction: column-reverse;
+    justify-content: space-between;
 }

 body.media h1 {
-    position: fixed;
-    bottom: 0px;
-    left: 10%;
-    right: 10%;
    background-color: #888888AA;
    padding: 1vh;
-    
+    margin-left: 3vh;
+    margin-right: 3vh;
 }

-.media div img, .media div video {
+.media img, .media video {
    object-fit: contain;
+    max-height: 80%;
+    max-width: 100%;
+    margin-top: 3vh;
+    margin-left: 3vh;
+    margin-right: 3vh;
 }
--- a/web/index.html.template
+++ b/web/index.html.template
@ -3,7 +3,7 @@
 <head>
    <title>{{ .Title }}</title>
    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=contain">
    <link rel="stylesheet" href="/css/main.css">
 </head>
 <body class="index">
--- a/web/media.html.template
+++ b/web/media.html.template
@ -3,14 +3,13 @@
 <head>
    <title>{{ .Caption }}</title>
    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=contain">
    <link rel="stylesheet" href="/css/main.css">
 </head>
 <body class="media">
 {{ if ne .Caption "" }}
 <h1>{{ .Caption }}</h1>
 {{ end }}
-<div>
 {{ if eq .Type "photo" }}
 <img src="../../raw/{{ .Files|photo }}" />
 {{ else if eq .Type "video" }}
@ -18,6 +17,6 @@
 <source src="../../raw/{{ .Files|video }}" type="video/mp4">
 </video>
 {{ end }}
-</div>
+<div><!-- Empty Flex element so that "justify-content: space-between" work as expected --></div>
 </body>
 </html>