diff --git a/django/website/media/less/internews-variables.less b/django/website/media/less/internews-variables.less index 891afc2f0ed07f54346473800dedabd7bfb51103..cbf8a5f167d76899389f08958927984cfaa8c8be 100644 --- a/django/website/media/less/internews-variables.less +++ b/django/website/media/less/internews-variables.less @@ -286,7 +286,7 @@ // Extra small screen / phone //** Deprecated `@screen-xs` as of v3.0.1 -@screen-xs: 420px; +@screen-xs: 480px; //** Deprecated `@screen-xs-min` as of v3.2.0 @screen-xs-min: @screen-xs; //** Deprecated `@screen-phone` as of v3.0.1 diff --git a/django/website/media/less/internews.less b/django/website/media/less/internews.less index 5e09da3b12a14f3a1dfa1d2d02487029dcdb2edb..5f5bfaf8406f420648d5040af1acf6be2c702836 100644 --- a/django/website/media/less/internews.less +++ b/django/website/media/less/internews.less @@ -11,23 +11,43 @@ body { width: 100%; } - .page-header { - margin-top:0; padding:@padding-base-vertical; } +@media(max-width:@screen-sm) { + .page-header { + margin-left:@padding-base-horizontal; + margin-top:20px; + } +} + @media(min-width:@screen-sm-min) { + .page-header { + margin:0; + } #page-wrapper { position: inherit; margin: 0 0 0 250px; - padding:@padding-large-horizontal; + padding:0 @padding-large-horizontal; min-height: 1000px; background-color: @gray-lighter; .box-shadow-inset(inset, 0px, 0px); } } +@media(min-width:@screen-xs-min) { + #page-wrapper { + margin-top:50px; + } +} + +@media(min-width:@screen-xs)and (max-width:@screen-sm-min){ + #page-wrapper { + margin-top:96px; + } +} + // Branding .navbar-brand { @@ -68,6 +88,7 @@ body { @media(min-width:@screen-sm-min) { .navbar-static-top { position:fixed; + top:0; } } @@ -159,7 +180,6 @@ body { padding-left: 0; padding-right: 0; } - margin-top:50px; margin-bottom:20px; } @@ -219,17 +239,26 @@ body { } } -@media(max-width:@screen-sm) { - .featured-image > img { - width:100%; - display:block; +.featured-image { + background-image:url(../images/rsz_west-african-girl.jpg); + background-repeat:no-repeat; + background-size:cover; + min-height:200px; +} + +@media(max-width:@screen-xs) { + .sidebar { + margin-top:96px; } } @media(min-width:@screen-xs-min) and (max-width:@screen-sm) { - .featured-image > img { + .featured-image { display:none; } + .sidebar { + margin-top:76px; + } } // --Nav Tabs next to page header diff --git a/django/website/templates/base_side.html b/django/website/templates/base_side.html index 73d121d7e0451520b1d19cf2f6c67fee386f63bd..8852ff403096c1d95aabf2d71fb247b3a53c6581 100644 --- a/django/website/templates/base_side.html +++ b/django/website/templates/base_side.html @@ -3,9 +3,7 @@ {% block content %} <!-- Navigation --> <div class="navbar-default sidebar" role="navigation"> - <div class="featured-image"> - <img class="img-responsive" src="{{ STATIC_URL }}images/rsz_west-african-girl.jpg" alt="West African girl" /> - </div> + <div class="col-xs-12 featured-image"></div> <nav class="sidebar-nav navbar-collapse collapse"> <ul class="nav" id="side-menu"> <li><a class="active" href="{% url "dashboard" %}"><span class="fa fa-dashboard fa-fw"></span> Dashboard</a></li>