Style home page

This commit is contained in:
Chester How 2017-03-11 13:09:18 +08:00
parent 6273da517e
commit a0208bbb1c
12 changed files with 152 additions and 41 deletions

View file

@ -3,7 +3,7 @@ permalink: pretty
# Setup
title: Tale
tagline: What's your story?
subtitle: by Chester
paginate: 1
baseurl: ""
url: ""

View file

@ -4,7 +4,7 @@
<title>
{% if page.title == "Home" %}
{{ site.title }} &middot; {{ site.tagline }}
{{ site.title }} &middot; {{ site.subtitle }}
{% else %}
{{ page.title }} &middot; {{ 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>

View file

@ -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 }}

View file

@ -0,0 +1,3 @@
---
layout: default
---

View file

@ -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."
---
Youll 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 [Jekylls 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/

View file

@ -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."
---
Youll 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 [Jekylls GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk].
[jekyll-docs]: https://jekyllrb.com/docs/home

View file

@ -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;
}

39
_sass/_home.scss Normal file
View file

@ -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;
}
}

View file

@ -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;
}
}

25
_sass/_variables.scss Normal file
View file

@ -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);
}

View file

@ -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 %}

View file

@ -3,5 +3,6 @@
# only main files contain this front matter, not partials.
---
@import 'base';
@import 'variables';
@import 'layout';
@import 'home';