Travel3: Simple image and video display site

Reads the images and videos from filesystem and builds a site in
memroy.

2 files changed, 71 insertions, 0 deletions

diff --git a/example/static/style/base.css b/example/static/style/base.css
new file mode 100644
index 0000000..d77b27b
--- /dev/null
+++ b/example/static/style/base.css
@@ -0,0 +1,34 @@
+body {
+    font-family: Helvetica, Arial, sans-serif;
+}
+
+.trips {
+    margin: auto;
+}
+
+.trip a {
+    font-size: 150%;
+}
+
+a.maps {
+    font-size: 90%;
+}
+
+.subtitle {
+    text-color: lightgrey;
+    font-size: 90%;
+}
+
+img.thumbnail {
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+img.image {
+    background-image: url('../img/placeholder_img.svg');
+}
+
+img.video {
+    background-image: url('../img/placeholder_video.svg');
+}
diff --git a/example/static/style/viewer.css b/example/static/style/viewer.css
new file mode 100644
index 0000000..5881f84
--- /dev/null
+++ b/example/static/style/viewer.css
@@ -0,0 +1,37 @@
+body {
+    background-color: black;
+    color: lightgrey;
+    margin: 0;
+}
+
+#header {
+    height: 3em;
+}
+
+#header a {
+    color: lightgrey;
+    height: 2.5em;
+    font-weight: bold;
+    text-decoration: none;
+    cursor: pointer;
+    margin: 0 0.5em;
+}
+
+#header li {
+    margin: 0 1em;
+}
+
+#header ul {
+    height: 100%;
+    list-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0;
+}
+
+.content {
+    object-fit: scale-down;
+    width: 100%;
+    height: calc(100vh - 3em);
+}