WIP – Adjust mobile and refactored

Kikobeats · Feb 25, 2015 · f8d6e19 · f8d6e19
1 parent 5a8aa5f
commit f8d6e19
Show file tree

Hide file tree

Showing 15 changed files with 165 additions and 192 deletions.
diff --git a/assets/css/uno.css b/assets/css/uno.css
diff --git a/assets/scss/components/_aside.scss b/assets/scss/components/_aside.scss
@@ -9,26 +9,24 @@
   &.animated {
     transition: width $aside-animation-time $animation-ease;
   }
-
   &.collapsed {
     width: $aside-width-collapsed;
   }
   &.container {
     font-weight: $font-weight-thin;
-    text-align: center;
     color: $gray-lightest;
+    text-align: center;
     @include center-absolute;
     @include font-shadow;
   }
 }
-
 .profile {
   max-width: 38.75rem;
   margin: 0 auto;
 
   > p {
-    font-size: .9rem;
     margin: 0 2rem;
+    font-size: .9rem;
   }
   > a {
     > img {
@@ -39,11 +37,11 @@
       box-shadow: 0 0 1px 1px rgba(000, 000, 000, .3);
     }
     > h1 {
-    font-family: $sans-font;
-    font-size: $font-size-big;
-    font-weight: $font-weight-bold;
-    margin: 0;
-    color: $gray-lightest;
+      margin: 0;
+      font-family: $sans-font;
+      font-size: $font-size-big;
+      font-weight: $font-weight-bold;
+      color: $gray-lightest;
     }
   }
   &.contact {
@@ -54,7 +52,6 @@
     }
   }
 }
-
 .links,
 .social {
   position: relative;
@@ -63,33 +60,33 @@
   margin: 0;
   list-style-type: none;
 }
-
 .links {
   margin: 0;
 
   &.item {
     display: inline-block;
     margin: 0 1px 0 0;
     line-height: 1em;
+
     a {
-      @include btn-cover;
       padding: .625rem 1.25rem;
+      @include btn-cover;
     }
   }
 }
-
 .social {
   &.expanded {
     margin: 0 0 0 1.5rem;
   }
-
   &.item {
     display: inline-block;
     margin: 0 4px 0 0;
     line-height: 1em;
+
     a {
-      @include btn-cover;
       padding: 6px 8px 6px 9px;
+      @include btn-cover;
+
       .label {
         display: none;
       }

diff --git a/assets/scss/components/_loading.scss b/assets/scss/components/_loading.scss
@@ -1,24 +1,21 @@
 // more in http://github.hubspot.com/pace/docs/welcome/
 
 .pace {
-  -webkit-pointer-events: none;
   pointer-events: none;
-
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
+  -webkit-pointer-events: none;
 }
-
 .pace-inactive {
   display: none;
 }
-
 .pace .pace-progress {
-  background: $primary-color;
   position: fixed;
-  z-index: 2000;
   top: 0;
   right: 100%;
+  z-index: 2000;
   width: 100%;
   height: 2px;
+  background: $primary-color;
 }
diff --git a/assets/scss/components/_media-queries.scss b/assets/scss/components/_media-queries.scss
@@ -2,59 +2,56 @@
 // MEDIA QUERIES
 // ------------------------------
 
-@media only screen and (min-width : 1824px) {
+@media only screen and (min-width:1824px) {
   .main {
     padding: 2.5rem 11rem;
   }
   .content {
     margin: 0 7rem;
   }
 }
-
 // ------------------------------
 // < 1023px (Tablet)
 // ------------------------------
 
 @media all and (max-width:1023px) {
-
   html {
     font-size: 90%;
   }
 
   /* disabling element, too much information*/
-
   .pace,
   .post.reading-time,
   #back-button {
     display: none;
   }
 
   /* off canvas */
-
   #cover-button {
-    display: block;
     position: fixed;
-    z-index: 999;
     top: .5rem;
     left: 14rem;
+    z-index: 999;
+    display: block;
     transition: all $aside-animation-time;
 
     &.collapsed {
       left: 1.5rem;
     }
-
     > a {
       > i {
         color: $hover-color;
       }
     }
   }
-
   .cover {
     width: 16rem;
-    transform: translate3d(0, 0, 0);
     background: $aside-color-mobile;
     transition: all $aside-animation-time;
+    transform: translate3d(0,
+    0,
+    0);
+
     &.collapsed {
       width: 16rem;
       transform: translate3d(-16rem, 0, 0);
@@ -63,141 +60,138 @@
       transition: all $aside-animation-time;
     }
   }
-
   .profile {
-    overflow: scroll;
     height: 100%;
+    overflow: scroll;
+
     &.contact {
       margin-top: 1rem;
 
       > nav {
         padding: 0;
       }
     }
-
     > a {
       > img {
         width: 6rem;
       }
-
       > h1 {
         font-size: 1.5rem;
       }
     }
-
     > p {
       display: none;
     }
-
     .divider {
       display: none;
     }
   }
-
   #avatar-link {
     display: inline-block;
     margin-top: 1rem;
   }
-
   .navigation {
     width: 100%;
   }
-
   .links,
   .social {
     width: 100%;
+
     &.item {
-      margin: 0;
-      padding: 0;
       height: 100%;
+      padding: 0;
+      margin: 0;
+
       > a {
-        border-radius: 0;
-        border-left: 0;
         border-right: 0;
         border-bottom: 0;
+        border-left: 0;
+        border-radius: 0;
 
         > .icon {
           display: inline-block;
           vertical-align: middle;
         }
-
         > .label {
           display: inline-block;
           padding-left: 3px;
         }
       }
     }
   }
-
   .social.item:last-child {
     border-bottom: 1px solid;
   }
-
   #search-container {
     display: none !important;
   }
-
   .main {
     left: 0;
-    transform: translate3d(0, 0, 0);
     transition: all $aside-animation-time;
+    transform: translate3d(0,
+    0,
+    0);
+
     &.collapsed {
       transform: translate3d(14rem, 0, 0);
     }
   }
 }
-
 // ------------------------------
 // < 500px (Mobile)
 // ------------------------------
 
 @media all and (max-width:500px) {
-
   html {
     font-size: 80%;
   }
-
   .main {
     padding: 1rem 0;
   }
-
   #cover-button {
     left: 13.5rem;
+
     &.collapsed {
       left: 1rem;
     }
   }
-
   .mayday {
     width: auto;
+
     > h1 {
       font-size: 20px;
       line-height: 25px;
     }
   }
-
   .btn {
     display: block;
     margin-bottom: .4em;
   }
-
   #panic-button {
     margin-bottom: 1rem;
   }
-
-  .posts.newer,
-  .posts.older {
-    padding: 1rem;
+  #post-title {
+    margin: 2.5rem 0;
+    text-align: left;
   }
-
-  .posts.newer {
-    margin: 0 0 1.2rem;
-  }
-
-  .posts.older {
-    margin: 0 0 10px;
+  .post {
+    &.newer,
+    &.older {
+      padding: 1rem;
+    }
+    &.newer {
+      margin: 0 0 1.2rem;
+    }
+    &.older {
+      margin: 0 0 10px;
+    }
+    &.tags {
+      > a {
+        display: inline-block;
+        margin: .2rem 0;
+      }
+    }
   }
-
   .pagination {
     > span {
       display: none;

diff --git a/assets/scss/components/_page-error.scss b/assets/scss/components/_page-error.scss
@@ -6,13 +6,15 @@ body[data-page='error'] {
   line-height: 25px;
   text-align: center;
   @include background-filter;
+
   > article {
     @include center-absolute;
   }
 }
 .mayday {
   width: 500px;
   margin: 150px auto 20px;
+
   > h1 {
     font-size: 24px;
     line-height: 35px;

diff --git a/assets/scss/components/_pagination.scss b/assets/scss/components/_pagination.scss
@@ -1,10 +1,9 @@
 .pagination {
   margin: 0 0 2.5rem;
 }
-
 .posts.index {
-  margin-left: 1rem;
   margin-right: 1rem;
+  margin-left: 1rem;
   font-size: .8rem;
   color: $gray-dark;
 }