changes sidebar styles and positions

layouts/partials/sidebar.html

@@ -2,13 +2,13 @@
 <div class="sidebar">
   <div class="container {{ with .Site.Params.sidebarSticky -}}sidebar-sticky{{- end }}">
     <div class="sidebar-about">
-      <div class="site__title">
+      <span class="site__title">
         <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
-      </div>
+      </span>
       {{ with .Site.Params.authorimage }}
       {{ $strippedSlash := ($.Site.Params.authorimage | replaceRE "^(/)+(.*)" "$2") }}
       {{ $authorImage := (printf "%s%s" $.Site.BaseURL $strippedSlash) }}
-      <div>
+      <div class="author-image">
         <img src="{{$authorImage}}" alt="Author Image" class="img--circle img--headshot element--center"> 
       </div>
       {{ end }}

static-src/scss/hyde-hyde/_responsive.scss

@@ -2,7 +2,9 @@
 // 320px ~ 16rem/16px ~ 18.8235/17px ~ 17.7778/18px
 // 480px ~ 30rem/16px ~ 28.2353rem/17px ~ 26.6667rem/18px
 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
-  // styles
+  .sidebar {
+    padding-top: .5rem;
+  }
 }
 
 // tablet/medium device ~768px+

static-src/scss/hyde-hyde/_sidebar.scss

@@ -17,6 +17,10 @@
   .sidebar-about {
     text-align: center;
   }
+  .author-image {
+    display: block;
+    margin-top: 4px;
+  }
 }
 
 .sidebar-nav {

static/css/hyde-hyde.css

@@ -1,4 +1,6 @@
 * {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
   box-sizing: border-box; }
 
 html,
@@ -295,6 +297,9 @@ a {
       color: #268bd2; }
   .sidebar .sidebar-about {
     text-align: center; }
+  .sidebar .author-image {
+    display: block;
+    margin-top: 4px; }
 
 .sidebar-nav {
   text-align: center;
@@ -422,9 +427,7 @@ a {
   font-size: 0.9rem; }
 
 pre {
-  -moz-tab-size: 2;
-    -o-tab-size: 2;
-       tab-size: 2; }
+  tab-size: 2; }
   pre code {
     white-space: pre-wrap; }
 
@@ -559,6 +562,10 @@ body .gist td {
   max-width: 100%;
   height: auto; }
 
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
+  .sidebar {
+    padding-top: .5rem; } }
+
 @media (min-width: 768px) {
   html,
   body {
@@ -604,10 +611,7 @@ body .gist td {
 @media (min-width: 992px) {
   html,
   body {
-    -webkit-text-size-adjust: none;
-       -moz-text-size-adjust: none;
-        -ms-text-size-adjust: none;
-            text-size-adjust: none;
+    text-size-adjust: none;
     font-size: 17px;
     font-weight: 400;
     line-height: 1.611em; }