Style home page
This commit is contained in:
Chester How
parent
6273da517e
commit
a0208bbb1c
12 changed files with 152 additions and 41 deletions
|
|
@ -3,7 +3,7 @@ permalink: pretty
|
|||
|
||||
# Setup
|
||||
title: Tale
|
||||
tagline: What's your story?
|
||||
subtitle: by Chester
|
||||
paginate: 1
|
||||
baseurl: ""
|
||||
url: ""
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
<title>
|
||||
{% 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>
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
---
|
||||
layout: default
|
||||
---
|
||||
16
_posts/2017-03-09-welcome-to-jekyll.markdown
Normal file
16
_posts/2017-03-09-welcome-to-jekyll.markdown
Normal 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/
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
39
_sass/_home.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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
25
_sass/_variables.scss
Normal 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);
|
||||
}
|
||||
13
index.html
13
index.html
|
|
@ -3,11 +3,16 @@ layout: default
|
|||
title: Home
|
||||
---
|
||||
|
||||
<div>
|
||||
{% for post in site.posts %}
|
||||
<h1>{{ post.title }}</h1>
|
||||
<div class="post-preview">
|
||||
<time datetime="{{ post.date }}">{{ post.date | date_to_string }}</time>
|
||||
<h1>{{ post.title }}</h1>
|
||||
|
||||
{{ post.content }}
|
||||
{% endfor %}
|
||||
<p>{{ post.content | truncatewords: 70 | strip_html }}</p>
|
||||
|
||||
|
||||
<div class="post-link">
|
||||
<a href="{{ post.url }}">continue reading</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -3,5 +3,6 @@
|
|||
# only main files contain this front matter, not partials.
|
||||
---
|
||||
|
||||
@import 'base';
|
||||
@import 'variables';
|
||||
@import 'layout';
|
||||
@import 'home';
|
||||
|
|
|
|||
Loading…
Reference in a new issue