path: root/syte/static/less/styles-mobile.less

@media (max-width: 600px) {

  body {
    background: #E9E9E9 url('/static/imgs/b.png');
    overflow-x: hidden;
  }

  .mobile-nav {
     display: block;
     position: fixed;
     top: 0;
     height: 45px;
     width: 100%;
     z-index: 3000;

     background: #E9E9E9 url('/static/imgs/b.png');
     border-top: 3px solid @adjacent-color;
     .box-shadow();

     h3 {
       float: right;
       padding: 10px;

       a {
         border-bottom: 0; 
         font-weight: bold;
         color: @text-color;
         text-shadow: 0 1px 1px #f9f9f9;
       }
     }

     .nav-btn {
       float: left;
       padding: 7px 10px 4px;
       margin: 8px 10px;
       .gradient(#404040, #333);
       .border-radius(4px);
       .box-shadow(0 1px 1px #f9f9f9);
     }

     .nav-btn-bar {
       display: block;
       width: 18px;
       height: 2px;
       margin-bottom: 3px;
       background-color: #f9f9f9;

       .border-radius(1px);
       .box-shadow(0 1px 0 rgba(0, 0, 0, 0.25));
     }
  }

  header.main-header {
    position: absolute;


    hgroup {
      .picture a { margin: 60px 0 10px 10px; }
      h1 {
        font-size: 18px;
        margin: 0 10px;
      }
      h2 {
        margin: 0 10px 10px 10px;
      }
    }

    nav {
      margin: 20px 0;
    }

    .fork-me {
      display: none;
    }
  }

  .main-section {
     margin: 45px 0 0 0;
     position: relative;
     min-height: 500px;
     left: 0;
     z-index: 2000;
     background-color: #fff;

     .box-shadow();
     .transition(e('left .3s ease-out'));

     &.nav-opened {
        left: 240px;
     }
  }

  .blog-section {

    hgroup {
      h2, h1 { .h2; margin: 10px 0 5px 0; }

      h3 a {
         position: static;
         margin: 0;
         padding: 5px 0;
         border: 0;
         font-weight: 300;
      }
    }

    article {
      width: 95%;
      padding: 10px 10px 30px;
      border-bottom: 1px solid #C2C2C2;

      img { max-width: 300px; }
    }

    .loading {
       padding: 15px;
    }
  }

  .modal-backdrop {
    z-index: 3500;
  }

  .modal {
    position: absolute;
    width: 100%;
    height: 1500px;
    z-index: 4000;
    top: 45px;

    &.fade-large { width: 100%; }

    &.fade.in, &.fade-large.in { left: 0; }
  }

  .profile.twitter, .profile.github, .profile.dribbble, .profile.instagram {
    overflow: scroll;
  }

  .profile-info .btn {
     position: static;
     margin-top: 5px;
  }

  .shots-likes-received, .shots-likes-given { display: none; }

  .profile-shots { padding: 10px 0;

    > li {
      margin: 0 0 20px 10px; 
      width: 280px;
    }

    img {
      width: 280px;
      height: 210px;
    }
  }

  .instagram .profile-shot img {
     width: 280px;
     height: 280px;
  }

}