Style home page

pyoio · Mar 11, 2017 · a0208bb · a0208bb
1 parent 6273da5
commit a0208bb
Show file tree

Hide file tree

Showing 12 changed files with 152 additions and 41 deletions.
diff --git 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
@@ -4,12 +4,13 @@
 
   <title>
     {% if page.title == "Home" %}
-      {{ site.title }} &middot; {{ site.tagline }}
+      {{ site.title }} &middot; {{ site.subtitle }}
     {% else %}
       {{ page.title }} &middot; {{ site.title }}
     {% endif %}
   </title>
 
   <!-- 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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/_sass/_home.scss 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
@@ -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
@@ -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
@@ -3,11 +3,16 @@
 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>
+
+    <p>{{ post.content | truncatewords: 70 | strip_html }}</p>
+
 
-    {{ post.content }}
-  {% endfor %}
-</div>
+    <div class="post-link">
+      <a href="{{ post.url }}">continue reading</a>
+    </div>
+  </div>
+{% endfor %}
diff --git 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';