From 74284024c81ad809746d4bd594e4c66d15ff5e44 Mon Sep 17 00:00:00 2001
From: Dan Barber <github@danbarber.me>
Date: Sat, 25 Aug 2018 19:36:29 -0400
Subject: [PATCH] Add layout for narrow screens

---
 app/assets/stylesheets/images/show.css.scss | 31 +++++++++++++++++----
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/images/show.css.scss b/app/assets/stylesheets/images/show.css.scss
index fc0f52d..02a3a97 100644
--- a/app/assets/stylesheets/images/show.css.scss
+++ b/app/assets/stylesheets/images/show.css.scss
@@ -5,12 +5,6 @@
   margin-top: 2rem;
   margin-bottom: 2rem;
 
-  grid-template-areas:
-    "image-container image-info"
-    "image-container image-info";
-  grid-template-columns: 4fr 1fr;
-  grid-template-rows: 4fr 1fr;
-
   .image-container {
     align-items: center;
     display: flex;
@@ -28,6 +22,7 @@
   }
 
   .image-tag {
+    font-size: 0.8rem;
     border-radius: 0.25rem;
     display: inline-block;
     background: white;
@@ -45,3 +40,27 @@
     padding: 0.5rem;
   }
 }
+
+@media (max-width: 799px) {
+  .show-image {
+    grid-template-areas:
+      "image-container"
+      "image-info";
+    grid-template-rows: min-content min-content;
+  }
+
+  .image-tags {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+@media (min-width: 800px) {
+  .show-image {
+    grid-template-areas:
+      "image-container image-info"
+      "image-container image-info";
+    grid-template-columns: 4fr 1fr;
+    grid-template-rows: 4fr 1fr;
+  }
+}