Optimize responsive design

README.md

@@ -3,7 +3,7 @@ A Simple And Elegant Ghost Theme Derive From Default Theme Casper
 
 # Preview
 
-![img](assets/img/preview.png)
+![img](assets/img/preview_mbp.png)
 
 ## Plan to do
 - [x] 主题基调定为小清新绿色
@@ -64,8 +64,8 @@ Kaldorei提供了简单的归档功能，使用ghost的api来生成归档，预
 > * Navigation > 创建一个`归档`导航，地址为：http://your_blog_url/`archives`;
 > * 去博客首页看看你的归档吧，Have fun.
 
-## 配置喜欢的代码主题风格
-Kaldorei使用[highlight.js](https://github.com/isagalaev/highlight.js)实现代码高亮，默认使用的主题风格为 `monokai-sublime`
+### 配置喜欢的代码主题风格
+Kaldorei使用[highlight.js](https://github.com/isagalaev/highlight.js)实现代码高亮，默认使用的主题风格为 `monokai-sublime`
 
 > 方法：ghost后台 > `Code Injection` > `Blog Header`
 

assets/css/screen.css

@@ -561,6 +561,7 @@ body.nav-opened .site-wrapper {
     text-decoration: none !important;
 }
 .main-nav {
+    display: flex;
     position: relative;
     padding: 35px 40px;
     margin: 0 auto 0 !important;
@@ -570,7 +571,7 @@ body.nav-opened .site-wrapper {
     text-decoration: none;
     font-size: 16px;
     color: #2C3F51;
-    padding: 25px 20px;
+    padding: 1.5em .8em;
 }
 .main-nav a:hover {
     color: #009a61;
@@ -593,6 +594,11 @@ body.nav-opened .site-wrapper {
 
 /* Navigation */
 
+.main-header .nav {
+    display: flex;
+    justify-content: flex-end;
+    flex: 1;
+}
 .nav > ul {
     margin: 0 20px;
     padding: 0;
@@ -1952,6 +1958,14 @@ body.nav-opened .site-wrapper {
     .navigation > ul > li {
         padding: 0;
     }
+    .nav {
+        display: flex;
+        justify-content: flex-end;
+        flex: 1;
+    }
+    .main-nav a {
+        padding: 2rem 1rem;
+    }
 }
 
 /* ==========================================================================
@@ -2006,11 +2020,11 @@ body.nav-opened .site-wrapper {
         border-color: transparent;
     }
     .main-nav-title {
-        padding: 17px 0px;
+        padding: 17px 12px;
     }
     .main-nav-title a {
         font-size: 20px;
-        padding: 18px;
+        padding: 0;
     }
     .nav-title {
         top: 25px;
@@ -2019,9 +2033,14 @@ body.nav-opened .site-wrapper {
         position: absolute;
         top: 18px;
     }
+    .nav {
+        display: flex;
+        justify-content: space-around;
+        flex: 1;
+    }
     .nav > ul {
         height: 64px;
-        margin: 0 15px;
+        margin: 0;
     }
     .nav ul a {
         padding: 25px 6px;
@@ -2034,12 +2053,8 @@ body.nav-opened .site-wrapper {
     }
     .post {
         width: auto;
-        margin-top: 1rem;
-        margin-bottom: 1rem;
-        margin-left: 16px;
-        margin-right: 16px;
-        padding-top: 1rem;
-        padding-bottom: 2rem;
+        margin: 1rem 1.33rem;
+        padding: 1rem 0;
         line-height: 1.65em;
     }
     .post-meta-date {
@@ -2194,6 +2209,9 @@ body.nav-opened .site-wrapper {
     .post-content img {
         max-width: 640px;
     }
+    .main-nav a {
+        padding: 1.5em .4em;
+    }
 }
 
 /* ==========================================================================

index.hbs

@@ -4,7 +4,7 @@
 {{! The big featured header }}
 <header class="main-header">
     <nav class="container main-nav clearfix">
-        <div class="main-nav-title pull-left">
+        <div class="main-nav-title">
             <a class="blog-title" href="{{@blog.url}}">{{@blog.title}}</a>
         </div>
         {{#if @blog.navigation}}

partials/navigation.hbs

@@ -1,5 +1,5 @@
 {{! navigation }}
-<div class="nav pull-right">
+<div class="nav">
     <ul>
         {{#foreach navigation}}
             <li class="nav-{{slug}}{{#if current}} nav-current{{/if}}" role="presentation"><a href="{{url absolute="true"}}">{{label}}</a></li>