Multitude of Smartphone-Fixes

6 files changed, 65 insertions, 17 deletions

diff --git a/assets/css/_bootstrap-selection.less b/assets/css/_bootstrap-selection.less
index 14cf9eb..2c50792 100644
--- a/assets/css/_bootstrap-selection.less
+++ b/assets/css/_bootstrap-selection.less
@@ -30,7 +30,7 @@
 //@import "bootstrap-3.3.2/badges.less";
 //@import "bootstrap-3.3.2/jumbotron.less";
 //@import "bootstrap-3.3.2/thumbnails.less";
-//@import "bootstrap-3.3.2/alerts.less";
+@import "bootstrap-3.3.2/alerts.less";
 //@import "bootstrap-3.3.2/progress-bars.less";
 //@import "bootstrap-3.3.2/media.less";
 //@import "bootstrap-3.3.2/list-group.less";
diff --git a/assets/css/_mejs_hacks.less b/assets/css/_mejs_hacks.less
index eaca5dd..c3f71a3 100644
--- a/assets/css/_mejs_hacks.less
+++ b/assets/css/_mejs_hacks.less
@@ -29,7 +29,7 @@
 		&.error .error { opacity: 1; display: block; }
 	}
 
-	.mejs-controls {
+	&.mejs-video .mejs-controls {
 		@factor: 1.5;
 		visibility: visible !important;
 
diff --git a/assets/css/_overview.less b/assets/css/_overview.less
index c5d6ea4..5d2f0d1 100644
--- a/assets/css/_overview.less
+++ b/assets/css/_overview.less
@@ -19,6 +19,10 @@
 	.preview {
 		float: left;
 		margin-right: @padding-base-horizontal;
+
+		@media (max-width: @screen-xs-min) {
+			margin-bottom: @padding-base-vertical;
+		}
 	}
 
 	a.title {
@@ -35,6 +39,12 @@
 		.program-schedule .talk {
 			display: block;
 		}
+
+		@media (max-width: @screen-xs-min) {
+			.program-schedule {
+				clear: both;
+			}
+		}
 	}
 
 	&.has-preview {
@@ -47,6 +57,11 @@
 .recordings a {
 	font-size: @jumbo-font-size;
 	line-height: @jumbo-line-height;
+
+	@media (max-width: @screen-xs-min) {
+		font-size: @jumbo-font-size-xs;
+	}
+
 	display: block;
 	text-align: center;
 
diff --git a/assets/css/_program.less b/assets/css/_program.less
index db87d04..fe5b34c 100644
--- a/assets/css/_program.less
+++ b/assets/css/_program.less
@@ -36,33 +36,45 @@
 		height: 100px;
 
 		/* and now for small screens: */
-		@media all and (max-width: @screen-xs-max) {
+		@media (max-width: @screen-xs-max) {
 			height: 75px;
 		}
 
 
 		padding: 10px;
-		border: 1px solid white;
+		border: 1px solid @program-border;
 
 		h3 {
 			margin: 0;
 			padding: 0;
+			font-size: 18px;
 
 			/* and now for small screens: */
-			@media all and (max-width: @screen-xs-max) {
-				font-size: 22px;
+			@media (max-width: @screen-xs-max) {
+				font-size: 16px;
 			}
 		}
 
 		h4 {
+
 			margin: 3px 0;
 			color: @program-room;
+			font-size: 14px;
+
+			@media (max-width: @screen-xs-max) {
+				font-size: 15px;
+			}
+
 			a {
 				color: @program-room;
 			}
 		}
 
 		h5 {
+			@media (max-width: @screen-xs-max) {
+				margin: 0;
+			}
+
 			color: @program-author;
 		}
 
diff --git a/assets/css/_room.less b/assets/css/_room.less
index e7b3af3..728ed9b 100644
--- a/assets/css/_room.less
+++ b/assets/css/_room.less
@@ -1,8 +1,9 @@
-.tab-content {
-	border-left: 1px solid #ddd;
-	border-bottom: 1px solid #ddd;
-	border-right: 1px solid #ddd;
-
+@media (min-width: @screen-sm-min) {
+	.tab-content {
+		border-left: 1px solid #ddd;
+		border-bottom: 1px solid #ddd;
+		border-right: 1px solid #ddd;
+	}
 }
 
 .player-wrap.tab-content {
@@ -51,7 +52,11 @@
 			margin: 25px;
 
 			> a {
-				font-size: @jumbo-font-size;
+				font-size: 18px;
+
+				@media (min-width: @screen-sm-min) {
+					font-size: @jumbo-font-size;
+				}
 			}
 		}
 	}
diff --git a/assets/css/_structure.less b/assets/css/_structure.less
index 3f7c10e..cd6d746 100644
--- a/assets/css/_structure.less
+++ b/assets/css/_structure.less
@@ -5,13 +5,15 @@
 
 @img: '../img/';
 
-@grid-float-breakpoint:     0;
+@grid-float-breakpoint:     @screen-xs-min;
 
-@jumbo-font-size:   52px;
-@jumbo-line-height: 45px;
+@jumbo-font-size:    52px;
+@jumbo-font-size-xs: 2.5em;
+@jumbo-line-height:  45px;
 
 @program-now:       @brand-danger;
 @program-now-bg:    fade(lighten(@brand-danger, 5%), 60%);
+@program-border:    lighten(@brand-primary, 50%);
 
 @program-room:      darken(@brand-primary, 15%);
 @program-author:    #444;
@@ -30,7 +32,7 @@
 
 // website configuration styles
 
-.navbar {
+nav {
 	.navbar-brand > img {
 		float: left;
 		margin-right: @navbar-padding-horizontal;
@@ -42,10 +44,24 @@
 }
 
 body {
-	padding: 50px 0;
+	padding: 50px 0 30px 0;
+
+	@media (max-width: @grid-float-breakpoint) {
+		padding: 120px 0 30px 0;
+	}
 }
 
 
+@media (max-width: @screen-sm-min) {
+	nav {
+		position: absolute !important;
+	}
+
+	footer {
+		display: none;
+	}
+}
+
 body.overview {
 	@import "_overview.less";
 }