1 files changed, 165 insertions, 0 deletions
diff --git a/syte/static/less/styles-mobile.less b/syte/static/less/styles-mobile.less
new file mode 100644
index 0000000..6ff8003
--- /dev/null
+++ b/syte/static/less/styles-mobile.less
@@ -0,0 +1,165 @@
+@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;
+  }
+
+}