mirrors/tale
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Style home page

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
_config.yml
View file

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

3
_includes/head.html
View file

@ -4,7 +4,7 @@
<title> <title>
{% if page.title == "Home" %} {% if page.title == "Home" %}
{{ site.title }} &middot; {{ site.tagline }} {{ site.title }} &middot; {{ site.subtitle }}
{% else %} {% else %}
{{ page.title }} &middot; {{ site.title }} {{ page.title }} &middot; {{ site.title }}
{% endif %} {% endif %}
@ -12,4 +12,5 @@
<!-- CSS --> <!-- CSS -->
<link rel="stylesheet" href="{{ site.baseurl }}/styles.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> </head>

10
_layouts/default.html
View file

@ -6,10 +6,12 @@
<body> <body>
<div class="container"> <div class="container">
<h3> <header>
<a href="{{ site.baseurl }}/" title="Home">{{ site.title }}</a> <a href="{{ site.baseurl }}/" title="Home">
<small>{{ site.tagline }}</small> <h2>{{ site.title }}</h2>
</h3> </a>
<h4>{{ site.subtitle }}</h4>
</header>
<main> <main>
{{ content }} {{ content }}

3
_layouts/post.html
View file

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

16
_posts/2017-03-09-welcome-to-jekyll.markdown Normal file
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."
---
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/

13
_posts/2017-03-10-welcome-to-jekyll.markdown
View file

@ -1,23 +1,14 @@
--- ---
layout: post layout: post
title: "Welcome to Jekyll!" title: "Introducing Tale"
date: 2017-03-10 12:32:48 +0800 date: 2017-03-10 12:32:48 +0800
categories: jekyll update 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. 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. 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]. 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-docs]: https://jekyllrb.com/docs/home

17
_sass/_base.scss
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;
}
}

45
_sass/_layout.scss
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 { .container {
margin: 0 auto; margin: 0 auto;
max-width: 1200px; max-width: 1200px;
width: 80%; 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);
}

17
index.html
View file

@ -3,11 +3,16 @@ layout: default
title: Home title: Home
--- ---
<div> {% for post in site.posts %}
{% for post in site.posts %} <div class="post-preview">
<h1>{{ post.title }}</h1>
<time datetime="{{ post.date }}">{{ post.date | date_to_string }}</time> <time datetime="{{ post.date }}">{{ post.date | date_to_string }}</time>
<h1>{{ post.title }}</h1>
{{ post.content }} <p>{{ post.content | truncatewords: 70 | strip_html }}</p>
{% endfor %}
</div>
<div class="post-link">
<a href="{{ post.url }}">continue reading</a>
</div>
</div>
{% endfor %}

3
styles.scss
View file

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