Responsive sizing

Signed-off-by: James Ketrenos <james_git@ketrenos.com>

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 {

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;