Injector 82: Masthead tweaks for responsive

/******MAIN SITE TWEAKS******/

@media (max-width: 1200px) {
  /*size of Stanford logo*/
  #header #logo.logo-mobile img,
  #header #logo img {
    max-width: 130px;
  }
  /*padding above logo*/
  #header.header {
    padding: 24px 0 0;
  }
  /*tweak space below the logo to the top of the navigation*/
  .header {
    min-height: 42px;
  }
  /*padding below main nav links, to reduce overall height of white masthead*/
  .navbar .nav > li > a {
      padding-bottom: 24px;
  }
  /*Size of ENGINEERING*/
  #header.header #site-title-first-line.site-title-uppercase a {
    font-size: 28px;
  }
  /*getting "Stanford" and "ENGINEERING" to align on the same baseline*/
  #site-title-first-line {
    line-height: 1em;
  }
}

@media (max-width: 767px) {
  /*size of Stanford logo*/
  #header #logo.logo-mobile img,
  #header #logo img {
    max-width: 100px;
  }
  /*killing unnecessary margin below logo and hamburger*/
  #main-menu .container {
    margin-bottom: 0px;
  }
  /*height of white masthead*/
  #header.header {
    min-height: 45px;    
    padding: 15px 0 0;
  }
  /*vertical position of hamburger*/
  .navbar .btn.btn-navbar {
    margin-top: -43px;
  }
  /*Size of ENGINEERING*/
  #header.header #site-title-first-line.site-title-uppercase a {
    font-size: 22px;
  }
  /*getting "Stanford" and "ENGINEERING" to align on the same baseline*/
  #site-title-first-line {
    line-height: .9em;
  }
}

@media (max-width: 480px) {
  /*size of Stanford logo*/
  #header #logo.logo-mobile img,
  #header #logo img {
    max-width: 100px;
  }
  /*height of white masthead*/
  #header.header {
    min-height: 30px;    
    padding: 12px 0 0;
  }
  /*vertical position of hamburger*/
  .navbar .btn.btn-navbar {
    margin-top: -32px;
  }
  /*adding margin back in below logo and hamburger*/
  #main-menu .container {
    margin-bottom: 10px;
  }
  /*Size of ENGINEERING*/
  #header.header #site-title-first-line.site-title-uppercase a {
    font-size: 22px;
  }
  /*getting "Stanford" and "ENGINEERING" to align on the same baseline*/
  #site-title-first-line {
    line-height: 1em;
  }
  /*fixing padding to the right of the logo*/
  #header #logo.logo-mobile {
    padding: 0 6px 0 0;
  }
  /*fixing padding to the left of "ENGINEERING"*/
  #header #name-and-slogan.with-logo {
    padding: 0 0 0 6px;
  }
}

@media (max-width: 380px) {
/*Logo tweaks*/
  #site-title-first-line {
    line-height: 1em;
  }
  #header.header {
    min-height: 31px;
  }
  /*vertical alignment of hamburger*/
  .navbar .btn.btn-navbar {
    margin-top: -32px;
  }
  /*tweaking margin below logo and hamburger*/
  #main-menu .container {
    margin-bottom: 6px;
  }
  #header #logo.logo-mobile img, 
  #header #logo img {
    max-width: 80px;
  }
  #header.header #site-title-first-line.site-title-uppercase a {
    font-size: 17px;
  }
}

/******MAGAZING TWEAKS******/

@media (max-width: 1200px) {
  /*Size of Stanford Logo*/
  .page-magazine #header #logo.logo-mobile img, #header #logo img{
    max-width: 86px;
  }
}

@media (max-width: 767px) {
  /*tweak padding above Stanford Logo*/
  .page-magazine #header.header {
    padding: 4px 0 0 ;
  }
  .page-magazine #header.header {
    min-height: 32px;
  }
  /*Logo tweaks*/
  .page-magazine #site-title-first-line {
    line-height: 1.1em;
  }
  /*vertical align hamburger*/
  .page-magazine .navbar .btn.btn-navbar {
    margin-top: -33px;
  }
}

@media (max-width: 380px) and (max-height: 479px) {
  /*height of white masthead*/
  .page-magazine #header.header {
    min-height: 26px;
  }
}

@media (max-width: 480px) {
  /*height of white masthead*/
  .page-magazine #header.header {
    min-height: 26px;
  }
  /*font-size of "ENGINEERING"*/
  .page-magazine #header.header #site-title-first-line.site-title-uppercase a {
    font-size: 18px;
  }
  /*vertical align hamburger*/
  .page-magazine .navbar .btn.btn-navbar {
    margin-top: -27px;
  }
}

@media (max-width: 380px) {
  /*height of white masthead*/
  .page-magazine #header.header {
    min-height: 30px;
  }
    /*vertical align hamburger*/
  .page-magazine .navbar .btn.btn-navbar {
    margin-top: -30px;
  }
}