make splash images look better on small devices

this is really pushing my patience for CSS, but I've always thought this
looked nice, so I'm going to try to retain it

incorporealcms/static/css/dark.css

@@ -50,3 +50,12 @@ blockquote {
     background-color: rgba(120, 120, 120, 0.3);
     border: 1px solid #222;
 }
+
+figure {
+    background: #222;
+    border: 1px solid #333;
+}
+
+figcaption {
+    color: #BBB;
+}

incorporealcms/static/css/light.css

@@ -50,3 +50,12 @@ blockquote {
     background-color: rgba(120, 120, 120, 0.1);
     border: 1px solid #CCC;
 }
+
+figure {
+    background: #EFEFEF;
+    border: 1px solid #CCCCCC;
+}
+
+figcaption {
+    color: #777777;
+}

incorporealcms/static/css/style.css

@@ -109,9 +109,67 @@ blockquote {
 }
 
 .splash {
+    margin-top: 1em;
+    margin-bottom: 1em;
     text-align: center;
 }
 
-.img-50 {
-    max-width: 50%;
+.splash img {
+    max-width: 100%;
+}
+
+.img-50 {
+    max-width: 50% !important;
+}
+
+/* For screens with width smaller than 400px */
+.figure-left .figure-right {
+    max-width: 95%;
+    float: none;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+/* For larger screens */
+@media only screen and (min-width: 400px) {
+    .figure-left {
+        float: left;
+        margin-top: 0;
+        margin-left: 0;
+    }
+
+    .figure-right {
+        float: right;
+        margin-top: 0;
+        margin-right: 0;
+    }
+}
+
+figure {
+    max-width: 400px;
+    padding: 5px;
+    margin: 10px;
+    margin-top: 0;
+    margin-bottom: 5px;
+}
+
+figure img {
+    max-width: 100%;
+    height: auto;
+}
+
+figcaption {
+    font-family: "Times New Roman", serif;
+    color: #777777;
+    text-align: center;
+    font-style: italic;
+    line-height: 1.3em;
+    margin-top: 5px;
+}
+
+.thumbnail-image {
+    width: 150px;
+    height: auto;
+    margin: 5px;
+    display: inline;
 }