Skip to content

Commit

Permalink
Add super neat styling to home page
Browse files Browse the repository at this point in the history
  • Loading branch information
chesterhow committed Mar 24, 2017
1 parent 915198a commit 6f19f76
Show file tree
Hide file tree
Showing 11 changed files with 35 additions and 38 deletions.
1 change: 0 additions & 1 deletion _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ permalink: /:categories/:title

# Setup
title: Tale
subtitle: by Chester
paginate: 5
baseurl: ""
url: "https://chesterhow.github.io/tale"
Expand Down
2 changes: 1 addition & 1 deletion _includes/head.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

<title>
{% if page.title == "Home" %}
{{ site.title }} &middot; {{ site.subtitle }}
{{ site.title }}
{% else %}
{{ page.title }} &middot; {{ site.title }}
{% endif %}
Expand Down
1 change: 0 additions & 1 deletion _layouts/default.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: "Empty Post"
title: "Pagination Post"
author: "Chester"
---

Expand Down
Original file line number Diff line number Diff line change
@@ -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.
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: "Introducing Tale 2"
title: "Introducing Tale"
author: "Chester"
---

Expand Down
23 changes: 12 additions & 11 deletions _sass/_catalogue.scss
Original file line number Diff line number Diff line change
@@ -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;
padding: 2rem 0;

&:first-child {
padding-top: 2.5rem;
&:hover .catalogue-line,
&:focus .catalogue-line {
width: 5rem;
}

&:last-child {
padding-bottom: 2.5rem;
border: 0;
}
}

&:hover .catalogue-line,
&:focus .catalogue-line {
width: 6rem;
}
&-time {
color: $default-tint;
font-family: $palatino;
letter-spacing: .5px;
}

&-title {
Expand All @@ -32,7 +34,6 @@
@include transition(all .3s ease-out);
border-top: .2rem solid $default-shade;
display: block;
margin: 0 auto;
width: 2rem;
}
}
11 changes: 1 addition & 10 deletions _sass/_layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
Expand Down Expand Up @@ -87,7 +79,6 @@ footer,
}
}


footer {
font-family: $palatino;
padding: 2rem 0;
Expand Down
12 changes: 6 additions & 6 deletions _sass/_pagination.scss
Original file line number Diff line number Diff line change
@@ -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;

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

Expand All @@ -30,7 +30,7 @@

&:hover,
&:focus {
color: $default-tint;
opacity: .6;
text-decoration: none;
}
}
Expand Down
1 change: 1 addition & 0 deletions _sass/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
15 changes: 10 additions & 5 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,16 @@

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

Expand Down

0 comments on commit 6f19f76

Please sign in to comment.