decrease image size on small screens

1 files changed, 15 insertions, 2 deletions

diff --git a/share/css/main.css b/share/css/main.css
index 3ee132c..3072929 100644
--- a/share/css/main.css
+++ b/share/css/main.css
@@ -7,9 +7,10 @@ a {
 }
 
 h1 {
+	font-size: 120%;
 	clear: both;
 	padding-top: 1em;
-	margin-left: 1em;
+	margin-left: 0.5em;
 }
 
 .nav {
@@ -42,11 +43,23 @@ div.image-container a {
 }
 
 div.image-container img {
-	height: /* $imgheight */;
+	height: /* $limgheight */;
 	margin: 0;
 	padding: 0;
 }
 
+@media (max-width: 992px) {
+	div.image-container img {
+		height: /* $mimgheight */;
+	}
+}
+
+@media (max-width: 600px) {
+	div.image-container img {
+		height: /* $simgheight */;
+	}
+}
+
 div.image-page {
 	text-align: center;
 }