Improving header styling for small screens #25

octopress · Mar 29, 2015 · b08f1bc · b08f1bc
1 parent b452206
commit b08f1bc
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 16 deletions.
diff --git a/assets/config.yml b/assets/config.yml
@@ -30,4 +30,5 @@ share_with: links # or buttons
 # Embed comments, options: false, facebook, disqus
 comments: false
 
+# Center the text in post and page headings.
 center_headings: true
diff --git a/assets/stylesheets/_header.scss b/assets/stylesheets/_header.scss
@@ -1,38 +1,47 @@
 .site-top-content {
-  display: table;
   width: 100%;
   background-color: $site-header-bg;
+  padding: 1px 0;
 }
 
 .site-header, .site-nav {
-  padding: 1rem 1rem;
   vertical-align: middle;
-  @include at-least($medium) {
-    padding: 1rem 1.5rem;
-  }
-}
-
-.site-header {
-  text-align: left;
-  display: table-cell;
+  text-align: center;
+  margin: .5em 0;
 }
 
 .site-title {
   margin: 0;
-  font-size: 1.8rem;
+  font-size: 1.5rem;
 }
 
+@include at-least($medium) {
+  .site-top-content {
+    display: table;
+  }
+  .site-header, .site-nav {
+    display: table-cell;
+    padding: .7rem 1.4rem;
+  }
+  .site-header {
+    text-align: left;
+  }
+  .site-nav {
+    text-align: right;
+  }
+  .site-title {
+    margin: 0;
+    font-size: 1.8rem;
+  }
+}
+
+
 .site-title-link {
   text-decoration: none;
   color: $site-title-color;
   font-weight: normal;
 }
 
-.site-nav {
-  display: table-cell;
-  text-align: right;
-}
-
 .site-nav-link {
   text-decoration: none;
   color: $site-nav-color;