From a0208bbb1c2de78f1ced8618d333c243e1c07e6b Mon Sep 17 00:00:00 2001 From: Chester How Date: Sat, 11 Mar 2017 13:09:18 +0800 Subject: [PATCH] Style home page --- _config.yml | 2 +- _includes/head.html | 3 +- _layouts/default.html | 10 +++-- _layouts/post.html | 3 ++ _posts/2017-03-09-welcome-to-jekyll.markdown | 16 +++++++ _posts/2017-03-10-welcome-to-jekyll.markdown | 13 +----- _sass/_base.scss | 17 -------- _sass/_home.scss | 39 +++++++++++++++++ _sass/_layout.scss | 45 ++++++++++++++++++++ _sass/_variables.scss | 25 +++++++++++ index.html | 17 +++++--- styles.scss | 3 +- 12 files changed, 152 insertions(+), 41 deletions(-) create mode 100644 _posts/2017-03-09-welcome-to-jekyll.markdown delete mode 100644 _sass/_base.scss create mode 100644 _sass/_home.scss create mode 100644 _sass/_variables.scss diff --git a/_config.yml b/_config.yml index 1cb7e63..21ae295 100644 --- a/_config.yml +++ b/_config.yml @@ -3,7 +3,7 @@ permalink: pretty # Setup title: Tale -tagline: What's your story? +subtitle: by Chester paginate: 1 baseurl: "" url: "" diff --git a/_includes/head.html b/_includes/head.html index 4586fa6..0db5b09 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -4,7 +4,7 @@ {% if page.title == "Home" %} - {{ site.title }} · {{ site.tagline }} + {{ site.title }} · {{ site.subtitle }} {% else %} {{ page.title }} · {{ site.title }} {% endif %} @@ -12,4 +12,5 @@ <!-- CSS --> <link rel="stylesheet" href="{{ site.baseurl }}/styles.css"> + <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700"> </head> diff --git a/_layouts/default.html b/_layouts/default.html index b8b999c..70baa30 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -6,10 +6,12 @@ <body> <div class="container"> - <h3> - <a href="{{ site.baseurl }}/" title="Home">{{ site.title }}</a> - <small>{{ site.tagline }}</small> - </h3> + <header> + <a href="{{ site.baseurl }}/" title="Home"> + <h2>{{ site.title }}</h2> + </a> + <h4>{{ site.subtitle }}</h4> + </header> <main> {{ content }} diff --git a/_layouts/post.html b/_layouts/post.html index e69de29..0d6905d 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -0,0 +1,3 @@ +--- +layout: default +--- diff --git a/_posts/2017-03-09-welcome-to-jekyll.markdown b/_posts/2017-03-09-welcome-to-jekyll.markdown new file mode 100644 index 0000000..c7e6641 --- /dev/null +++ b/_posts/2017-03-09-welcome-to-jekyll.markdown @@ -0,0 +1,16 @@ +--- +layout: post +title: "Introducing Tale" +date: 2017-03-09 12:32:48 +0800 +categories: jekyll update +synopsys: "Tale is a minimal Jekyll theme for writers. Find out more here." +--- +You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated. + +To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works. + +Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk]. + +[jekyll-docs]: https://jekyllrb.com/docs/home +[jekyll-gh]: https://github.com/jekyll/jekyll +[jekyll-talk]: https://talk.jekyllrb.com/ diff --git a/_posts/2017-03-10-welcome-to-jekyll.markdown b/_posts/2017-03-10-welcome-to-jekyll.markdown index d2a0766..475484e 100644 --- a/_posts/2017-03-10-welcome-to-jekyll.markdown +++ b/_posts/2017-03-10-welcome-to-jekyll.markdown @@ -1,23 +1,14 @@ --- layout: post -title: "Welcome to Jekyll!" +title: "Introducing Tale" date: 2017-03-10 12:32:48 +0800 categories: jekyll update +synopsys: "Tale is a minimal Jekyll theme for writers. Find out more here." --- You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated. To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works. -Jekyll also offers powerful support for code snippets: - -{% highlight ruby %} -def print_hi(name) - puts "Hi, #{name}" -end -print_hi('Tom') -#=> prints 'Hi, Tom' to STDOUT. -{% endhighlight %} - Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk]. [jekyll-docs]: https://jekyllrb.com/docs/home diff --git a/_sass/_base.scss b/_sass/_base.scss deleted file mode 100644 index b297ec4..0000000 --- a/_sass/_base.scss +++ /dev/null @@ -1,17 +0,0 @@ -* { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -html, -body { - margin: 0; - padding: 0; -} - -html { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 16px; - line-height: 1.5; -} diff --git a/_sass/_home.scss b/_sass/_home.scss new file mode 100644 index 0000000..45fe681 --- /dev/null +++ b/_sass/_home.scss @@ -0,0 +1,39 @@ +.post-preview { + margin-bottom: 30px; + position: relative; + + time { + color: $default-tint; + font-size: 1.3em; + font-weight: 500; + letter-spacing: .3px; + } + + h1 { + color: $default-shade; + font-size: 3.5em; + margin: 5px 0 10px; + } + + p { + color: $default-color; + font-family: $serif-font; + font-size: 1em; + line-height: 1.5em; + margin: 0 0 5px; + text-align: justify; + } + + .post-link { + text-align: right; + } + + a { + color: $default-tint; + display: inline-block; + font-size: 1.3em; + font-weight: 500; + letter-spacing: .3px; + text-decoration: none; + } +} diff --git a/_sass/_layout.scss b/_sass/_layout.scss index 408ab89..a1c8fc4 100644 --- a/_sass/_layout.scss +++ b/_sass/_layout.scss @@ -1,5 +1,50 @@ +* { + @include box-sizing; +} + +html, +body { + margin: 0; + padding: 0; +} + +html { + font-family: $sans-font; + font-size: $default-font-size; +} + .container { margin: 0 auto; max-width: 1200px; width: 80%; } + +header { + margin: 20px 0; + text-align: center; + + * { + margin: 0; + } + + a { + text-decoration: none; + } + + h2 { + @include transition(all .3s ease-out); + color: $default-color; + display: inline-block; + font-size: 3em; + + &:hover { + opacity: .6; + } + } + + h4 { + color: $default-tint; + font-family: $serif-font; + font-weight: 400; + } +} diff --git a/_sass/_variables.scss b/_sass/_variables.scss new file mode 100644 index 0000000..043c19d --- /dev/null +++ b/_sass/_variables.scss @@ -0,0 +1,25 @@ +$default-color: #555555; +$default-shade: #353535; +$default-tint: #AAAAAA; + +$serif-font: 'Libre Baskerville'; +$sans-font: 'Helvetica Neue'; +$default-font-size: 14px; + +@mixin box-sizing($type: border-box) { + -webkit-box-sizing: $type; + -moz-box-sizing: $type; + box-sizing: $type; +} + +@mixin transition($args...) { + -webkit-transition: $args; + -moz-transition: $args; + transition: $args; +} + +@mixin transform-translate($x, $y) { + -webkit-transform: translate($x, $y); + -moz-transform: translate($x, $y); + transform: translate($x, $y); +} diff --git a/index.html b/index.html index 6bee159..b120293 100644 --- a/index.html +++ b/index.html @@ -3,11 +3,16 @@ layout: default title: Home --- -<div> - {% for post in site.posts %} - <h1>{{ post.title }}</h1> +{% for post in site.posts %} + <div class="post-preview"> <time datetime="{{ post.date }}">{{ post.date | date_to_string }}</time> + <h1>{{ post.title }}</h1> - {{ post.content }} - {% endfor %} -</div> + <p>{{ post.content | truncatewords: 70 | strip_html }}</p> + + + <div class="post-link"> + <a href="{{ post.url }}">continue reading</a> + </div> + </div> +{% endfor %} diff --git a/styles.scss b/styles.scss index 2ef4ae6..2250474 100644 --- a/styles.scss +++ b/styles.scss @@ -3,5 +3,6 @@ # only main files contain this front matter, not partials. --- -@import 'base'; +@import 'variables'; @import 'layout'; +@import 'home';