From b6efc125f87687244637514e00c6b3f836ca0eb0 Mon Sep 17 00:00:00 2001 From: Zhe Zhang Date: Sun, 3 May 2015 04:05:59 +0800 Subject: add pagination & remove normalize.css --- layouts/_default/single.html | 15 +- layouts/index.html | 9 +- layouts/partials/footer.html | 6 +- layouts/partials/head.html | 3 +- layouts/partials/header.html | 14 +- layouts/partials/pagination.html | 5 + layouts/post/single.html | 32 +++ static/css/normalize.css | 424 ----------------------------------- static/css/slim.css | 472 ++++++++++++++++++++------------------- 9 files changed, 304 insertions(+), 676 deletions(-) create mode 100644 layouts/partials/pagination.html create mode 100644 layouts/post/single.html delete mode 100644 static/css/normalize.css diff --git a/layouts/_default/single.html b/layouts/_default/single.html index c265df6..fa8d589 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,5 +1,5 @@ - + {{ partial "head.html" . }} @@ -9,13 +9,10 @@
{{ partial "header.html" . }}
-
-
-

{{ .Title }}

- {{ .Date.Format "Jan 2, 2006" }} -
- {{ .Content }} -
+
+

{{ .Title }}

+
+ {{ .Content }}
@@ -26,4 +23,4 @@ - + \ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html index 4a74f8f..da5754c 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,5 +1,5 @@ - + {{ partial "head.html" . }} @@ -10,19 +10,20 @@ {{ partial "header.html" . }}
- {{ range .Data.Pages }} + {{ $paginator := .Paginate (where .Data.Pages "Type" "post") }} {{ range $paginator.Pages }}

{{ .Title }}

{{ .Date.Format "Jan 2, 2006" }}
{{ end }}
+ {{ partial "pagination.html" . }}
{{ partial "footer.html" . }}
- + {{ with .Site.Params.AnalyticsID }}{{ partial "analytics.html" . }}{{ end }} - + \ No newline at end of file diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index b73607f..b186f8c 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,3 +1,3 @@ -
-

Powered by Hugo. This theme—Slim—is open sourced on Github.

-
+
+

Powered by Hugo. This theme—Slim—is open sourced on Github.

+
diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 9be08bb..7cdc461 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -3,7 +3,6 @@ {{ .Title }} · {{ .Site.Title }} - @@ -12,4 +11,4 @@ - + \ No newline at end of file diff --git a/layouts/partials/header.html b/layouts/partials/header.html index eecb26f..57204a7 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,17 +1,17 @@

{{ .Site.Title }}

-

{{ .Site.Params.Subtitle }}

+

{{ .Site.Params.Subtitle }}

    - {{ with .Site.Params.GithubID }} -
  • Github
    • {{ end }} - {{ with .Site.Params.TwitterID }} -
  • Twitter
    • {{ end }} - {{ with .Site.Params.LinkedInID }} + {{ range .Site.Menus.main }} +
  • {{ .Name }}
    • + {{end}} {{ with .Site.Params.GithubID }} +
  • Github
    • {{ end }} {{ with .Site.Params.TwitterID }} +
  • Twitter
    • {{ end }} {{ with .Site.Params.LinkedInID }}
  • LinkedIn
    • {{ end }}
-
+
\ No newline at end of file diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html new file mode 100644 index 0000000..c779702 --- /dev/null +++ b/layouts/partials/pagination.html @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/layouts/post/single.html b/layouts/post/single.html new file mode 100644 index 0000000..3dae753 --- /dev/null +++ b/layouts/post/single.html @@ -0,0 +1,32 @@ + + + + + {{ partial "head.html" . }} + + + +
+ {{ partial "header.html" . }} +
+
+
+

{{ .Title }}

+ {{ .Date.Format "Jan 2, 2006 " }} +
+ {{ .Content }} +
+
+ +
+
+ {{ partial "footer.html " . }} +
+ + {{ with .Site.Params.AnalyticsID }}{{ partial "analytics.html" . }}{{ end }} + + + \ No newline at end of file diff --git a/static/css/normalize.css b/static/css/normalize.css deleted file mode 100644 index 5e5e3c8..0000000 --- a/static/css/normalize.css +++ /dev/null @@ -1,424 +0,0 @@ -/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ - -/** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device orientation change, - * without disabling user zoom. - */ - -html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/** - * Remove default margin. - */ - -body { - margin: 0; -} - -/* HTML5 display definitions - ========================================================================== */ - -/** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. - */ - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -menu, -nav, -section, -summary { - display: block; -} - -/** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. - */ - -audio, -canvas, -progress, -video { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ -} - -/** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Address `[hidden]` styling not present in IE 8/9/10. - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. - */ - -[hidden], -template { - display: none; -} - -/* Links - ========================================================================== */ - -/** - * Remove the gray background color from active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * Improve readability of focused elements when they are also in an - * active/hover state. - */ - -a:active, -a:hover { - outline: 0; -} - -/* Text-level semantics - ========================================================================== */ - -/** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. - */ - -abbr[title] { - border-bottom: 1px dotted; -} - -/** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. - */ - -b, -strong { - font-weight: bold; -} - -/** - * Address styling not present in Safari and Chrome. - */ - -dfn { - font-style: italic; -} - -/** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/** - * Address styling not present in IE 8/9. - */ - -mark { - background: #ff0; - color: #000; -} - -/** - * Address inconsistent and variable font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove border when inside `a` element in IE 8/9/10. - */ - -img { - border: 0; -} - -/** - * Correct overflow not hidden in IE 9/10/11. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* Grouping content - ========================================================================== */ - -/** - * Address margin not present in IE 8/9 and Safari. - */ - -figure { - margin: 1em 40px; -} - -/** - * Address differences between Firefox and other browsers. - */ - -hr { - box-sizing: content-box; - height: 0; -} - -/** - * Contain overflow in all browsers. - */ - -pre { - overflow: auto; -} - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; -} - -/* Forms - ========================================================================== */ - -/** - * Known limitation: by default, Chrome and Safari on OS X allow very limited - * styling of `select`, unless a `border` property is set. - */ - -/** - * 1. Correct color not being inherited. - * Known issue: affects color of disabled elements. - * 2. Correct font properties not being inherited. - * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. - */ - -button, -input, -optgroup, -select, -textarea { - color: inherit; /* 1 */ - font: inherit; /* 2 */ - margin: 0; /* 3 */ -} - -/** - * Address `overflow` set to `hidden` in IE 8/9/10/11. - */ - -button { - overflow: visible; -} - -/** - * Address inconsistent `text-transform` inheritance for `button` and `select`. - * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. - */ - -button, -select { - text-transform: none; -} - -/** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - */ - -button, -html input[type="button"], /* 1 */ -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ -} - -/** - * Re-set default cursor for disabled elements. - */ - -button[disabled], -html input[disabled] { - cursor: default; -} - -/** - * Remove inner padding and border in Firefox 4+. - */ - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. - */ - -input { - line-height: normal; -} - -/** - * It's recommended that you don't attempt to style these elements. - * Firefox's implementation doesn't respect box-sizing, padding, or width. - * - * 1. Address box sizing set to `content-box` in IE 8/9/10. - * 2. Remove excess padding in IE 8/9/10. - */ - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Fix the cursor style for Chrome's increment/decrement buttons. For certain - * `font-size` values of the `input`, it causes the cursor style of the - * decrement button to change from `default` to `text`. - */ - -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. - */ - -input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - box-sizing: content-box; /* 2 */ -} - -/** - * Remove inner padding and search cancel button in Safari and Chrome on OS X. - * Safari (but not Chrome) clips the cancel button when the search input has - * padding (and `textfield` appearance). - */ - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * Define consistent border, margin, and padding. - */ - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - */ - -legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ - -textarea { - overflow: auto; -} - -/** - * Don't inherit the `font-weight` (applied by a rule above). - * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. - */ - -optgroup { - font-weight: bold; -} - -/* Tables - ========================================================================== */ - -/** - * Remove most spacing between table cells. - */ - -table { - border-collapse: collapse; - border-spacing: 0; -} - -td, -th { - padding: 0; -} diff --git a/static/css/slim.css b/static/css/slim.css index 79903b1..1e28750 100644 --- a/static/css/slim.css +++ b/static/css/slim.css @@ -1,198 +1,208 @@ +html { + box-sizing: border-box; } + +*, +*:before, +*:after { + box-sizing: inherit; } + body { + margin: 0; } + +a { + background-color: transparent; } + +img { + max-width: 100%; + margin: 0 0 1rem; + border: 0; + border-radius: 5px; } + +button, +input, +select, +textarea { + font: inherit; + margin: 0; } + +table { + border-collapse: collapse; + border-spacing: 0; + width: 100%; + margin-bottom: 1.75rem; } + +td, +th { + padding: 0.25rem 0.5rem; } + +tbody tr:nth-child(odd) td, +tbody tr:nth-child(odd) th { + background-color: #f9f9f9; } + +body { + color: #333; font-family: Merriweather, 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', Serif; font-size: 100%; - line-height: 1.65; - letter-spacing: 0.01rem; -} -a { - color: #0074d9; - text-decoration: none; -} -ahover, -afocus { - text-decoration: underline; -} + line-height: 1.85; + letter-spacing: 0.01rem; } + h1, h2, h3, h4, h5, h6 { - margin-bottom: 0.5rem; font-weight: bold; line-height: 1.25; - color: #333; - margin-top: 1rem; - margin-bottom: 0.5rem; -} + margin-bottom: 0.75rem; } + h1 { - font-size: 2rem; -} + font-size: 1.8rem; } + h2 { - font-size: 1.5rem; -} + font-size: 1.5rem; } + h3 { - font-size: 1.25rem; -} + font-size: 1.25rem; } + h4, h5, h6 { - font-size: 1rem; -} + font-size: 1rem; } + p, -ul, +dl, ol, -dl { +ul { margin-top: 0; - margin-bottom: 1rem; -} -strong { - color: #303030; -} -dt { - font-weight: bold; -} -dd { - margin-bottom: 0.5rem; -} -hr { - border: 0; - border-top: 1px solid rgba(0,0,0,0.2); - display: block; - width: 150px; - margin: 1.5rem 0; -} -abbr { - font-size: 85%; - font-weight: bold; - color: #555; - text-transform: uppercase; -} -abbr[title] { - cursor: help; - border-bottom: 1px dotted #e5e5e5; -} + margin-bottom: 1.75rem; } + +a { + color: #2980b9; + text-decoration: none; } + a:hover, a:focus { + text-decoration: underline; } + +em { + text-emphasis-style: circle; + text-emphasis-position: under; } + code { font-family: Monaco, Courier, monospace; - padding: 0.25em 0.5em; - color: #bf616a; - background-color: #f9f9f9; + font-size: 0.85rem; + color: #555; + background-color: #f5f5f5; + border: 1px solid #eef; border-radius: 3px; - font-size: 0.9rem; -} + padding: 0.2em 0.5em; } + pre { display: block; margin-top: 0; margin-bottom: 1rem; padding: 1rem; + font-size: 0.8rem; line-height: 1.4; white-space: pre; white-space: pre-wrap; word-break: break-all; word-wrap: break-word; - background-color: #f9f9f9; -} + background-color: #f9f9f9; } + pre code { font-family: Menlo, Monaco, Courier, monospace; + font-size: 0.8rem; padding: 0; - font-size: 1rem; - color: rgba(0,0,0,0.7); + color: inherit; background-color: transparent; -} + border: none; } + blockquote { padding: 0.5rem 1rem; margin: 0.8rem 0 0.8rem -1.5rem; color: #7a7a7a; - border-left: 0.3rem solid #e5e5e5; -} -blockquote p:last-child { - margin-bottom: 0; -} -@media (min-width: 30rem) { - blockquote { - padding-right: 5rem; - padding-left: 1.25rem; - } -} -img { + border-left: 0.3rem solid #e5e5e5; } + blockquote p:last-child { + margin-bottom: 0; } + +hr { + border: 0; + border-top: 1px solid rgba(0, 0, 0, 0.2); display: block; - margin: 0 0 1rem; + width: 150px; + margin: 1.5rem 0; } + +button, +.btn { + background-image: none; + border: 1px solid #ccc; border-radius: 5px; - max-width: 100%; -} -/* Tables */ -table { - margin-bottom: 1rem; - width: 100%; - border: 1px solid #e5e5e5; - border-collapse: collapse; -} -td, -th { - padding: 0.25rem 0.5rem; - border: 1px solid #e5e5e5; -} -tbody tr:nth-child(odd) td, -tbody tr:nth-child(odd) th { - background-color: #f9f9f9; -} -.container { - *zoom: 1; - width: auto; - max-width: 700px; - float: none; - display: block; - margin-right: auto; - margin-left: auto; - padding-left: 0; - padding-right: 0; -} -.container:before, -.container:after { - content: ''; - display: table; -} -.container:after { - clear: both; -} + color: #ccc; + cursor: pointer; + display: inline-block; + font-family: inherit; + font-size: 85%; + line-height: normal; + padding: 0.5rem 0.75rem; + text-align: center; + text-transform: uppercase; + text-decoration: none; + vertical-align: middle; + white-space: nowrap; + -webkit-transition: all 0.3s; + transition: all 0.3s; } + button::-moz-focus-inner, + .btn::-moz-focus-inner { + padding: 0; + border: 0; } + button:hover, button:focus, + .btn:hover, + .btn:focus { + color: #7fdbff; + border: 1px solid #7fdbff; + -webkit-transition: all 0.3s; + transition: all 0.3s; + text-decoration: none; } + button:active, + .btn:active { + color: #0074d9; + border: 1px solid #0074d9; + -webkit-transition: all 0.3s; + transition: all 0.3s; } + .header { position: relative; - margin: 3rem auto; -} + margin: 3rem auto; } + .site-title { - font-size: 1.5rem; -} -.site-title a { - color: #333; -} + font-size: 1.5rem; } + .site-title a { + color: #333; } + .nav { position: absolute; top: 0; left: -70px; - text-align: right; -} + text-align: right; } + .nav-btn { display: inline-block; - line-height: 16px; -} -.nav-btn.is-on .ci-burger { - background: transparent; -} -.nav-btn.is-on .ci-burger::before { - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - top: 0; -} -.nav-btn.is-on .ci-burger::after { - -webkit-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); - bottom: 0; -} -.nav-btn.is-on + .nav-list { - opacity: 1; -} + line-height: 16px; } + .nav-btn.is-on .ci-burger { + background: transparent; } + .nav-btn.is-on .ci-burger::before { + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + top: 0; } + .nav-btn.is-on .ci-burger::after { + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + bottom: 0; } + .nav-btn.is-on + .nav-list { + opacity: 1; } + .nav-list { list-style: none; font-size: 0.8rem; @@ -200,25 +210,21 @@ tbody tr:nth-child(odd) th { padding: 0; opacity: 0; -webkit-transition: all 0.2s; - transition: all 0.2s; -} + transition: all 0.2s; } + .ci { - box-sizing: border-box; display: inline-block; font-size: inherit; font-style: normal; font-weight: normal; line-height: 1; position: relative; - vertical-align: top; -} -.ci::before, -.ci::after { - content: ''; - display: block; - position: absolute; - box-sizing: inherit; -} + vertical-align: top; } + .ci:before, .ci:after { + content: ""; + display: block; + position: absolute; } + .ci-burger { width: 16px; height: 3px; @@ -226,31 +232,61 @@ tbody tr:nth-child(odd) th { left: 0; background: #333; -webkit-transition: all 0.3s; - transition: all 0.3s; -} -.ci-burger::after, -.ci-burger::before { - width: 100%; - height: 3px; - background: #333; - left: 0; - -webkit-transition: all 0.3s; - transition: all 0.3s; -} -.ci-burger::before { - top: -6px; -} -.ci-burger::after { - bottom: -6px; -} -.content { - margin-bottom: 7rem; -} + transition: all 0.3s; } + .ci-burger:before, .ci-burger:after { + width: 100%; + height: 3px; + background: #333; + left: 0; + -webkit-transition: all 0.3s; + transition: all 0.3s; } + .ci-burger:before { + top: -6px; } + .ci-burger:after { + bottom: -6px; } + +.container { + *zoom: 1; + width: auto; + max-width: 42em; + float: none; + display: block; + margin-right: auto; + margin-left: auto; + padding-left: 0; + padding-right: 0; } + .container:before, .container:after { + content: ''; + display: table; } + .container:after { + clear: both; } + +.pagination { + position: relative; + margin-top: 5em; } + .pagination:before, .pagination:after { + content: ''; + display: table; } + .pagination:after { + clear: both; } + .pagination .previous { + float: left; } + .pagination .next { + float: right; } + +.footer { + color: #95a5a6; + font-size: 14px; + text-align: center; + margin: 2rem 0 1rem; } + .footer a { + color: #333; } + .post { position: relative; - margin-bottom: 2rem; -} -.post-title::after { + margin-bottom: 2rem; } + +.post-title:after { content: ''; display: block; border-top: 1px solid #ccc; @@ -258,65 +294,47 @@ tbody tr:nth-child(odd) th { position: absolute; top: 30px; left: -30px; - z-index: -1; -} + z-index: -1; } + .post-title a { color: #333; background: #fff; line-height: 60px; - background: #fff; position: relative; padding: 0 14px; margin-left: -14px; -webkit-transition: all 0.3s; - transition: all 0.3s; -} -.post-title a::after, -.post-title a::before { - content: ''; - position: absolute; - border: 3px solid transparent; - top: 13px; - -webkit-transition: all 0.3s; - transition: all 0.3s; -} -.post-title a::before { - left: -23px; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); -} -.post-title a::after { - -webkit-transform: rotate(225deg); - -ms-transform: rotate(225deg); - transform: rotate(225deg); - right: -23px; -} -.post-title a:hover::before { - border-top-color: #ccc; - border-right-color: #ccc; - left: -3px; -} -.post-title a:hover::after { - border-top-color: #ccc; - border-right-color: #ccc; - right: -3px; -} + transition: all 0.3s; } + .post-title a:after, .post-title a:before { + content: ''; + position: absolute; + border: 3px solid transparent; + top: 13px; + -webkit-transition: all 0.3s; + transition: all 0.3s; } + .post-title a:before { + left: -23px; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); } + .post-title a:after { + -webkit-transform: rotate(225deg); + -ms-transform: rotate(225deg); + transform: rotate(225deg); + right: -23px; } + .post-title a:hover:before, .post-title a:hover:after { + border-top-color: #ccc; + border-right-color: #ccc; } + .post-title a:hover:before { + left: -3px; } + .post-title a:hover:after { + right: -3px; } + .post-date { color: #ccc; font-size: 14px; position: absolute; - top: 45px; -} + top: 45px; } + .post-content { - margin: 2rem auto; -} -footer { - color: #ccc; - font-size: 14px; - text-align: center; - margin: 2rem auto 1rem; -} -footer a { - color: #666; -} + margin: 2rem 0; } -- cgit v1.2.3