enhance typo

Author: aispin

themes/lattice/layout/post.swig

@@ -5,7 +5,7 @@
 {% block main %}
     <div class="mod-container">
         <div class="grid">
-            <div class="mod-main">
+            <div class="mod-main typo">
                 {% set author = page.author|default({github_name:config.github.user, nick:config.author}) %}
                 {{ partial('_partial/post/main', {post:page, author: author}) }}
             </div>

themes/lattice/source/css/_about/about.styl

@@ -34,7 +34,7 @@
             margin-bottom: 15px
         &-tit
             font-size: 20px
-            font-weight: bold
+            font-weight: 300
 
 .contact
     &-item

themes/lattice/source/css/_base/_config.styl

@@ -1,15 +1,13 @@
-
-
-
 // Colors
 color-default = #646464
-color-accent = #2ebaae
+color-accent = #1abc9c
 color-grey = #999
 color-border = #ddd
-color-link = #258fb8
+color-link = #333
+color-dark = #000
 color-background = #eee
 color-sidebar-text = #777
-color-widget-background = #ddd
+color-widget-background = color-border
 color-widget-border = #ccc
 color-footer-background = #262a30
 color-mobile-nav-background = #191919
@@ -19,22 +17,28 @@ color-pinterest = #cb2027
 color-google = #dd4b39
 $color-theme = #6190e8
 $gainsboro    = #eee
+color-primary = $color-theme
 
-bg-primary = #6190e8
+bg-primary = $color-theme
+bg-block = #f8f8f8
+bg-table-th = #fbfbfb
+bg-table-hd = #f1f1f1
 
 // Fonts
 $font-family-monospace = "Input Mono", "PT Mono", Consolas, Monaco, Menlo, monospace
-font-family = Tahoma, Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", sans-serif
-font-family2 = "Lantinghei SC", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", sans-serif
+font-family = "PingFang SC", "Lantinghei SC", "Microsoft Yahei", "Hiragino Sans GB", "Microsoft Sans Serif", "WenQuanYi Micro Hei", sans
+font-family-title = "PingFang SC", Verdana, "Helvetica Neue", "Microsoft Yahei", "Hiragino Sans GB", "Microsoft Sans Serif", "WenQuanYi Micro Hei", sans-serif
 font-sans = "Helvetica Neue", Helvetica, Arial, sans-serif
-font-serif = Georgia, "Times New Roman", serif
-font-mono = "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace
+font-serif = Palatino, Optima, Georgia, serif
+font-mono = $font-family-monospace
 font-icon = FontAwesome
 font-icon-path = "fonts/fontawesome-webfont"
 font-icon-version = "4.0.3"
-font-size = 14px
-line-height = 1.5
-line-height-title = 1.1em
+font-size = 1em
+font-weight = 300
+font-weight-title = 100
+line-height = 1.8
+line-height-title = 1.35
 
 
 $fa-var-twitter = "\f099"

themes/lattice/source/css/_base/_extend.styl

@@ -10,4 +10,6 @@
     color: #fff
     text-align: center
     line-height: 40px
-    font-size: 20px
+    font-size: 20px
+    +mobile()
+      border-radius: 50%

themes/lattice/source/css/_base/_variables.styl renamed to themes/lattice/source/css/_base/_vars.styl

@@ -22,8 +22,4 @@
         margin: 10px 0
         font-size: 12px
         & p
-            margin-bottom: 5px
-        
-    
- 
-
+            margin-bottom: 5px

themes/lattice/source/css/_base/backtop.styl

@@ -39,7 +39,6 @@
             height: 100%
             margin: 0 10px
             line-height: 60px
-            font-size: 16px
         & a 
             padding: 0 15px
             height: 100%
@@ -67,7 +66,6 @@
             width: 30px
             line-height: 30px
             text-align: center
-            font-size: 16px
         &-form
             overflow:hidden
             opacity: 0
@@ -129,7 +127,6 @@
                 float: none
                 height: 30px
                 line-height: 30px
-                font-size: 14px
             }
             & .active:after {
                 height: 100%

themes/lattice/source/css/_base/footer.styl

@@ -0,0 +1,12 @@
+@import "_mixins"
+@import "_vars"
+@import "reset"
+@import "typo"
+@import "layout"
+@import "backtop"
+@import "duoshuo"
+@import "footer"
+@import "header"
+@import "loading"
+@import "pagination"
+@import "sidebar"

themes/lattice/source/css/_base/header.styl

@@ -1,6 +1,15 @@
+/**
+ * aotu.reset inspired by http://typo.sofi.sh/
+ */
+
+*, *:before, *:after
+  box-sizing: border-box
+
 html,body
+  display: block
   height: 100%
 
+/* 内外边距通常让各个浏览器样式的表现位置不同 */
 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td 
   margin: 0
   padding: 0
@@ -11,25 +20,166 @@ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abb
   font-size: 100%
   vertical-align: baseline
 
-ul,li
+/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */
+article, aside, details, figcaption, figure, footer, header, menu, nav, section
+  display: block
+
+/* HTML5 媒体文件跟 img 保持一致 */
+audio, canvas, video
+  display: inline-block
+
+/* 要注意表单元素并不继承父级 font 的问题 */
+body, button, input, select, textarea
+  font: font-weight font-size/line-height font-family
+
+button::-moz-focus-inner,
+input::-moz-focus-inner
+  padding: 0
+  border: 0
+
+/* 去掉各Table cell 的边距并让其边重合 */
+table
+  border-collapse: collapse
+  border-spacing: 0
+
+/* 去除默认边框 */
+fieldset, img
+  border: 0
+
+/* 块/段落引用 */
+blockquote
+  position: relative
+  color: color-grey
+  font-weight: 400
+  border-left: 1px solid color-accent
+  padding-left: 1em
+  margin: 1em 3em 1em 2em
+  & p
+    margin-bottom: 0.3em
+  & *:last-child
+    margin-bottom: 0
+
+@media only screen and ( max-width: 640px )
+  blockquote
+    margin: 1em 0
+
+/* Firefox 以外，元素没有下划线，需添加 */
+acronym, abbr
+  border-bottom: 1px dotted
+  font-variant: normal
+
+/* 添加鼠标问号，进一步确保应用的语义是正确的（要知道，交互他们也有洁癖，如果你不去掉，那得多花点口舌） */
+abbr
+  cursor: help
+
+/* 一致的 del 样式 */
+del
+  text-decoration: line-through
+
+address, caption, cite, code, dfn, em, th, var
+  font-style: normal
+  font-weight: 400
+
+/* 去掉列表前的标识, li 会继承，大部分网站通常用列表来很多内容，所以应该当去 */
+ul, ol
   list-style: none
 
+/* 对齐是排版最重要的因素, 别让什么都居中 */
+caption, th
+  text-align: left
+
+q:before, q:after
+  content: ''
+
+/* 统一上标和下标 */
+sub, sup
+  font-size: 75%
+  line-height: 0
+  position: relative
+
+:root sub, :root sup
+  vertical-align: baseline; /* for ie9 and other modern browsers */
+
+sup
+  top: -0.5em
+
+sub
+  bottom: -0.25em
+
 body
-  font: font-size/line-height font-family
   background: #fff
   color: color-default
   -webkit-font-smoothing: antialiased
   -webkit-text-size-adjust: 100%
+  -ms-text-size-adjust: 100%;
+  text-rendering: optimizelegibility
 
 a
-  color: color-default
+  color: color-link
   text-decoration: none
   &:hover
     color: color-accent
 
-sup 
-  vertical-align: super
-  font-size: smaller  
-  
-.container-bg 
-  background: #fff
+/* 标记，类似于手写的荧光笔的作用 */
+mark
+  background: #fffdd1
+  border-bottom: 1px solid #ffedce
+  padding: 2px
+  margin: 0 5px
+
+/* 代码片断 */
+pre, code, pre tt
+  font-family: font-mono
+  word-break: break-all
+pre
+  background: bg-block
+  border: 1px solid color-border
+  padding: 1em 1.5em
+  display: block
+  -webkit-overflow-scrolling: touch
+code
+  background: bg-block
+  text-shadow: 0 1px #fff
+  padding: 0 0.3em
+
+/* 一致化 horizontal rule */
+hr
+  border: none
+  border-bottom: 1px solid #cfcfcf
+  margin-bottom: 0.8em
+  height: 10px
+
+/* 底部印刷体、版本等标记 */
+small,
+  /* 图片说明 */
+figcaption
+  font-size: 0.9em
+  color: color-grey
+
+strong, b
+  font-weight: bold
+  color: color-dark
+
+/* 可拖动文件添加拖动手势 */
+[draggable]
+  cursor: move
+
+/* clearfix */
+.clearfix
+  zoom: 1
+  &:before, &:after
+    content: ""
+    display: table
+  &:after
+    clear: both
+
+/* basic title styles */
+h1, h2, h3, h4, h5, h6
+  font-weight: font-weight-title
+  line-height: line-height-title
+  font-family: font-family-title
+  color: color-dark
+
+/* responsive img */
+img
+  max-width: 100%