From b70d872859ec161a24a31f6753f6006272be09ec Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_git@ketrenos.com>
Date: Sat, 8 Sep 2018 15:10:45 -0700
Subject: [PATCH] Responsive sizing

Signed-off-by: James Ketrenos <james_git@ketrenos.com>
---
 frontend/elements/photo-thumbnail.html    |  3 ++-
 frontend/src/ketr-photos/ketr-photos.html | 26 +++++++++++++----------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/frontend/elements/photo-thumbnail.html b/frontend/elements/photo-thumbnail.html
index 20dbf91..8c8ca88 100755
--- a/frontend/elements/photo-thumbnail.html
+++ b/frontend/elements/photo-thumbnail.html
@@ -11,7 +11,6 @@
 <template>
   <style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">
     :host {
-        @apply --photo-thumbnail;
         display: inline-block;
         position: relative;
         background-color: #ccc;
@@ -25,6 +24,8 @@
         box-sizing: border-box;
         width: 200px;
         height: 200px;
+
+        @apply --photo-thumbnail;
     }
 
       :host > div {
diff --git a/frontend/src/ketr-photos/ketr-photos.html b/frontend/src/ketr-photos/ketr-photos.html
index 8e83129..4d60c4e 100755
--- a/frontend/src/ketr-photos/ketr-photos.html
+++ b/frontend/src/ketr-photos/ketr-photos.html
@@ -95,20 +95,13 @@
         --paper-toast-color: white;
       }
 
-      #thumbnails {
-/*        justify-content: space-between;*/
-      }
-
       app-header {
         background-color: yellow;
       }
 
-/*      app-header-layout {
-        --layout-fit: {
-          overflow-y: hidden !important;
-        };
+      #thumbnails {
+/*        justify-content: space-between;*/
       }
-*/
 
       .date-line {
         display: inline-block;
@@ -137,13 +130,24 @@
       }
 
       .date-line {
-        margin-left: 2em;
+/*        margin-left: 2em;*/
       }
 
       .date-line .header {
         padding: 0.25em 3px;
       }
-      
+    
+      @media (max-width: 800px) {
+        .date-line {
+          font-size: 8pt;
+        }
+
+        photo-thumbnail {
+          width: 25vw;
+          height: 25vw;
+        }
+      }
+
       photo-thumbnail {
         --photo-thumbnail: {
           border: 3px solid white;