From 6f19f76f95127157d9d7ab16457cb83ad06fd8c6 Mon Sep 17 00:00:00 2001 From: Chester How Date: Fri, 24 Mar 2017 11:10:58 +0800 Subject: [PATCH] Add super neat styling to home page --- _config.yml | 1 - _includes/head.html | 2 +- _layouts/default.html | 1 - ...-post.md => 2017-03-05-pagination-post.md} | 2 +- ...md => 2017-03-07-empty-post-with-image.md} | 3 ++- ...kyll.md => 2017-03-08-introducing-tale.md} | 2 +- _sass/_catalogue.scss | 27 ++++++++++--------- _sass/_layout.scss | 11 +------- _sass/_pagination.scss | 12 ++++----- _sass/_variables.scss | 1 + index.html | 15 +++++++---- 11 files changed, 37 insertions(+), 40 deletions(-) rename _posts/{2017-03-05-empty-post.md => 2017-03-05-pagination-post.md} (97%) rename _posts/{2017-03-07-empty-post.md => 2017-03-07-empty-post-with-image.md} (89%) rename _posts/{2017-03-08-welcome-to-jekyll.md => 2017-03-08-introducing-tale.md} (97%) diff --git a/_config.yml b/_config.yml index 94806b8..5813741 100644 --- a/_config.yml +++ b/_config.yml @@ -3,7 +3,6 @@ permalink: /:categories/:title # Setup title: Tale -subtitle: by Chester paginate: 5 baseurl: "" url: "https://chesterhow.github.io/tale" diff --git a/_includes/head.html b/_includes/head.html index 0db5b09..892dcf7 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -4,7 +4,7 @@ {% if page.title == "Home" %} - {{ site.title }} · {{ site.subtitle }} + {{ site.title }} {% else %} {{ page.title }} · {{ site.title }} {% endif %} diff --git a/_layouts/default.html b/_layouts/default.html index 7315bbd..8154cc0 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -9,7 +9,6 @@ <a href="{{ site.baseurl }}/"> <h2 class="nav-title">{{ site.title }}</h2> </a> - <h4 class="nav-subtitle">{{ site.subtitle }}</h4> <ul> <li><a href="#">About</a></li> <li><a href="#">Posts</a></li> diff --git a/_posts/2017-03-05-empty-post.md b/_posts/2017-03-05-pagination-post.md similarity index 97% rename from _posts/2017-03-05-empty-post.md rename to _posts/2017-03-05-pagination-post.md index 21af484..956c154 100644 --- a/_posts/2017-03-05-empty-post.md +++ b/_posts/2017-03-05-pagination-post.md @@ -1,6 +1,6 @@ --- layout: post -title: "Empty Post" +title: "Pagination Post" author: "Chester" --- diff --git a/_posts/2017-03-07-empty-post.md b/_posts/2017-03-07-empty-post-with-image.md similarity index 89% rename from _posts/2017-03-07-empty-post.md rename to _posts/2017-03-07-empty-post-with-image.md index 21af484..c25c97b 100644 --- a/_posts/2017-03-07-empty-post.md +++ b/_posts/2017-03-07-empty-post-with-image.md @@ -1,7 +1,8 @@ --- layout: post -title: "Empty Post" +title: "Empty Post with Image" author: "Chester" --- +![placeholder](https://placehold.it/800x400 "Large example image") Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu ipsum feugiat, condimentum est et, faucibus nulla. Praesent libero lectus, volutpat sed quam eget, volutpat viverra dui. Duis sapien nisi, posuere sit amet eros ac, blandit egestas odio. Sed elementum arcu ac ante sodales, ut molestie velit tempor. Nulla ultricies, tortor eu laoreet pharetra, velit turpis tempor lectus, nec cursus leo dui vel leo. Quisque vulputate eget dui et dapibus. Sed eu ornare leo, in mollis leo. Mauris sapien nisl, congue et diam eget, pretium iaculis nisl. In non ex posuere, volutpat neque ac, ultrices urna. Sed bibendum ipsum eget quam pellentesque, ut lacinia tortor placerat. Duis condimentum et ante nec tincidunt. Fusce interdum suscipit ipsum, sit amet mattis sem consequat quis. diff --git a/_posts/2017-03-08-welcome-to-jekyll.md b/_posts/2017-03-08-introducing-tale.md similarity index 97% rename from _posts/2017-03-08-welcome-to-jekyll.md rename to _posts/2017-03-08-introducing-tale.md index 49adc73..cf0861b 100644 --- a/_posts/2017-03-08-welcome-to-jekyll.md +++ b/_posts/2017-03-08-introducing-tale.md @@ -1,6 +1,6 @@ --- layout: post -title: "Introducing Tale 2" +title: "Introducing Tale" author: "Chester" --- diff --git a/_sass/_catalogue.scss b/_sass/_catalogue.scss index 176030c..1e7a9eb 100644 --- a/_sass/_catalogue.scss +++ b/_sass/_catalogue.scss @@ -1,22 +1,24 @@ .catalogue { - text-align: center; - &-item { + border-bottom: 1px solid $grey-2; + color: $default-color; display: inline-block; - padding: 1.5rem 0; - - &:first-child { - padding-top: 2.5rem; - } - - &:last-child { - padding-bottom: 2.5rem; - } + padding: 2rem 0; &:hover .catalogue-line, &:focus .catalogue-line { - width: 6rem; + width: 5rem; } + + &:last-child { + border: 0; + } + } + + &-time { + color: $default-tint; + font-family: $palatino; + letter-spacing: .5px; } &-title { @@ -32,7 +34,6 @@ @include transition(all .3s ease-out); border-top: .2rem solid $default-shade; display: block; - margin: 0 auto; width: 2rem; } } diff --git a/_sass/_layout.scss b/_sass/_layout.scss index 30a8cdc..8117ec8 100644 --- a/_sass/_layout.scss +++ b/_sass/_layout.scss @@ -13,7 +13,7 @@ footer, } .nav { - box-shadow: 0 2px 2px -2px rgba(0, 0, 0, .1); + box-shadow: 0 2px 2px -2px $shadow-color; overflow: auto; &-container { @@ -35,14 +35,6 @@ footer, } } - &-subtitle { - color: $default-tint; - display: inline-block; - font-family: $palatino; - font-weight: 400; - margin: 0; - } - ul { list-style-type: none; margin: 1rem 0 0; @@ -87,7 +79,6 @@ footer, } } - footer { font-family: $palatino; padding: 2rem 0; diff --git a/_sass/_pagination.scss b/_sass/_pagination.scss index a655e11..c693858 100644 --- a/_sass/_pagination.scss +++ b/_sass/_pagination.scss @@ -1,8 +1,7 @@ .pagination { - border-bottom: .5px solid $grey-2; border-top: .5px solid $grey-2; - font-family: $baskerville; - padding: 1rem 0; + font-family: $palatino; + padding-top: 2rem; position: relative; text-align: center; @@ -12,14 +11,15 @@ } .home { + @include transition(all .3s ease-out); color: $default-color; font-family: $sans-font; font-size: 1.1rem; - font-weight: 700; + opacity: .6; &:hover, &:focus, { - text-decoration: underline; + opacity: 1; } } @@ -30,7 +30,7 @@ &:hover, &:focus { - color: $default-tint; + opacity: .6; text-decoration: none; } } diff --git a/_sass/_variables.scss b/_sass/_variables.scss index 9cc00e6..0c8c69a 100644 --- a/_sass/_variables.scss +++ b/_sass/_variables.scss @@ -6,6 +6,7 @@ $grey-2: #e5e5e5; $grey-3: #f9f9f9; $white: #fff; $blue: #4a9ae1; +$shadow-color: rgba(0, 0, 0, .2); $baskerville: 'Libre Baskerville', 'Times New Roman', Times, serif; $palatino: Palatino, 'Palatino LT STD', 'Palatino Linotype', 'Book Antiqua', 'Georgia', serif; diff --git a/index.html b/index.html index 465f387..910f60e 100644 --- a/index.html +++ b/index.html @@ -5,11 +5,16 @@ title: Home <div class="catalogue"> {% for post in paginator.posts %} - <div class="catalogue-item"> - <a href="{{ post.url | prepend: site.url }}" class="catalogue-title">{{ post.title }}</a> - <div class="catalogue-line"></div> - </div> - <br> + <a href="{{ post.url | prepend: site.url }}" class="catalogue-item"> + <div> + <time datetime="{{ post.date }}" class="catalogue-time">{{ post.date | date: "%B %d, %Y" }}</time> + <h1 class="catalogue-title">{{ post.title }}</h1> + <div class="catalogue-line"></div> + + {{ post.content | truncatewords: 30 }} + + </div> + </a> {% endfor %} </div>