adapt to smaller screen with smaller fonts

2 files changed, 37 insertions, 35 deletions

diff --git a/static/css/component.css b/static/css/component.css
index 297a6f5..ed9ecf3 100644
--- a/static/css/component.css
+++ b/static/css/component.css
@@ -165,6 +165,37 @@
 	animation: loader 0.5s infinite ease-in-out both;
 }
 
+.stamp {
+	color: #555;
+	font-size: 1em;
+	font-weight: 700;
+	border: 0.5rem double #555;
+	display: inline-block;
+	padding: 0.25rem 1rem;
+	text-transform: uppercase;
+	border-radius: 1rem;
+}
+
+ul.exif {
+  list-style-type: square;
+  -webkit-column-width: 180px;
+  -moz-column-width: 180px;
+  column-width: 180px;
+  -webkit-column-count: 2; /* max count */
+  -moz-column-count: 2;
+  column-count: 2;
+	text-align: left;
+	padding: 10px;
+	margin: 0;
+	
+}
+
+ul.exif > li {
+	height: auto;
+	display: list-item;
+	margin: 0;
+}
+
 @-webkit-keyframes loader {
 	0% { background: #ddd; }
 	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
@@ -185,10 +216,12 @@
 
 @media screen and (max-width: 830px) {
 
-	.og-expander h3 { font-size: 32px; }
-	.og-expander p { font-size: 13px; }
+	.stamp { font-size: 0.8em; border: 0.3rem double #555; }
+	.og-expander-inner { padding: 30px; }
+	.og-expander h3 { font-size: 30px; padding: 10px 0px; }
+	.og-expander p, ul.exif { font-size: 13px; }
 	.og-expander a { font-size: 12px; }
-
+	
 }
 
 @media screen and (max-width: 650px) {
@@ -196,35 +229,4 @@
 	.og-fullimg { display: none; }
 	.og-details { float: none; width: 100%; }
 	
-}
-
-ul.exif {
-  list-style-type: square;
-  -webkit-column-width: 180px;
-  -moz-column-width: 180px;
-  column-width: 180px;
-  -webkit-column-count: 2; /* max count */
-  -moz-column-count: 2;
-  column-count: 2;
-	text-align: left;
-	padding: 10px;
-	margin: 0;
-	
-}
-
-ul.exif > li {
-	height: auto;
-	display: list-item;
-	margin: 0;
-}
-
-.stamp {
-	color: #555;
-	font-size: 1em;
-	font-weight: 700;
-	border: 0.5rem double #555;
-	display: inline-block;
-	padding: 0.25rem 1rem;
-	text-transform: uppercase;
-	border-radius: 1rem;
 }
\ No newline at end of file
diff --git a/static/js/main.js b/static/js/main.js
index b8f41bb..5cd7662 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -284,7 +284,7 @@ var Grid = (function() {
       this.$loading = $( '<div class="og-loading"></div>' );
       this.$fullimage = $( '<div class="og-fullimg"></div>' ).append( this.$loading );
       this.$closePreview = $( '<span class="og-close"></span>' );
-      this.$previewInner = $( '<div class="og-expander-inner"></div>' ).append( this.$closePreview, this.$fullimage, this.$details );
+      this.$previewInner = $( '<div class="og-expander-inner"></div>' ).append( this.$fullimage, this.$details, this.$closePreview );
       this.$previewEl = $( '<div class="og-expander"></div>' ).append( this.$previewInner );
       this.$item.append( this.getEl() );
       if( support ) {