From 3b16385db8037630296947828f47b2c6b8a68cab Mon Sep 17 00:00:00 2001 From: MaZderMind Date: Mon, 2 Mar 2015 14:55:37 +0100 Subject: Multitude of Smartphone-Fixes --- assets/css/_bootstrap-selection.less | 2 +- assets/css/_mejs_hacks.less | 2 +- assets/css/_overview.less | 15 +++++++++++++++ assets/css/_program.less | 20 ++++++++++++++++---- assets/css/_room.less | 17 +++++++++++------ assets/css/_structure.less | 26 +++++++++++++++++++++----- 6 files changed, 65 insertions(+), 17 deletions(-) (limited to 'assets') 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"; } -- cgit v1.2.3