improve aside

Author: Kikobeats

assets/css/uno.css

@@ -20,6 +20,11 @@
     @include font-shadow;
   }
 }
+
+#profile-resume {
+  display: none;
+}
+
 .profile {
   max-width: 38.75rem;
   margin: 0 auto;
@@ -37,6 +42,12 @@
       color: $gray-lightest;
       font-size: 1.6rem;
     }
+
+    > h3 {
+      margin: 0;
+      color: $gray-lightest;
+
+    }
     > img {
       width: 7rem;
       border: 2px solid $primary-color;

assets/scss/components/_aside.scss

@@ -22,6 +22,14 @@
   #back-button {
     display: none;
   }
+  #search-container {
+    display: none !important;
+  }
+
+  /* Enable element special for little devices */
+  #profile-resume {
+    display: inherit;
+  }
 
   /* off canvas */
   #cover-button {
@@ -56,6 +64,8 @@
     }
   }
   .profile {
+    width: 100%;
+    max-width: 100%;
     height: 100%;
     overflow: scroll;
 
@@ -81,45 +91,33 @@
       display: none;
     }
   }
+  .link-item {
+    margin: 0;
+    border-radius: 0;
+
+    &.collapsed {
+      padding: .625rem 1.25rem;
+    }
+    &:hover {
+      background-color: darken($aside-color-mobile, 5%);
+    }
+  }
   #avatar-link {
     display: inline-block;
     margin-top: 1rem;
   }
   .navigation {
     width: 100%;
-  }
-  .links,
-  .social {
-    width: 100%;
 
-    &.item {
-      height: 100%;
-      padding: 0;
+    &.right {
       margin: 0;
-
-      > a {
-        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;
-        }
+    }
+    &.left {
+      .links.item {
+        width: 100%;
       }
     }
   }
-  .social.item:last-child {
-    border-bottom: 1px solid;
-  }
-  #search-container {
-    display: none !important;
-  }
   .main {
     left: 0;
     transition: all $aside-animation-time;
@@ -135,15 +133,25 @@
 // ------------------------------
 
 @media all and (max-width:480px) {
+
+  .profile {
+    > a {
+      > h1 {
+        font-size: 1.25rem;
+      }
+
+      > h3 {
+        font-size: 1rem;
+      }
+    }
+  }
   .btn {
     display: block;
     margin-bottom: .4em;
   }
-
   .main {
     padding: 1rem 0;
   }
-
   .mayday {
     width: auto;
 
@@ -152,22 +160,19 @@
       line-height: 25px;
     }
   }
-
   #cover-button {
     left: 13.5rem;
 
     &.collapsed {
       left: 1rem;
     }
   }
-
   #panic-button {
     margin-bottom: 1rem;
   }
   #post-title {
     margin: 2.5rem 0;
   }
-
   body[data-page='post'] {
     .post.tags {
       > a {
@@ -176,7 +181,6 @@
       }
     }
   }
-
   .post {
     &.newer,
     &.older {
@@ -194,7 +198,6 @@
       display: none;
     }
   }
-
   blockquote {
     > p {
       margin: 2rem -1rem;

assets/scss/components/_media-queries.scss

@@ -8,6 +8,7 @@
     > a {
       > h2 {
         margin-bottom: 1rem;
+        line-height: 3rem;
         transition: all $aside-animation-time;
 
         &:hover {

assets/scss/components/_post.scss

@@ -6,6 +6,7 @@
       <a id="avatar-link" title="link to homepage for {{@blog.title}}" href="{{@blog.url}}/#open">
         <img src="{{@blog.logo}}" alt="{{@blog.title}} avatar" class="profile avatar hvr-buzz-out" />
         <h1>Kiko Beats</h1>
+        <h3 id="profile-resume">Software Engineer</h3>
       </a>
       {{/if}}
 

partials/aside.hbs

@@ -2,9 +2,8 @@
   <ul class="links">
     <li class="links item">
       <a href="/#open" class="link-item" title="link to {{@blog.title}} blog" id="blog-button">Blog</a>
-      <a href="/#open" class="link-item" title="" id="about-button">Articles</a>
-      <a href="/#open" class="link-item" title="" id="tags-button">About</a>
-      <a href="/#open" class="link-item" title="" id="contact-button">Contact</a>
+      <a href="/about" class="link-item" title="" id="tags-button">About</a>
+      <a href="mailto:josefrancisco.verdu@gmail.com?subject=Hello, I saw your web!" class="link-item" title="" id="contact-button">Contact</a>
     </li>
   </ul>
 </nav>