Add super neat styling to home page
This commit is contained in:
Chester How
parent
915198a746
commit
6f19f76f95
|
|
@ -3,7 +3,6 @@ permalink: /:categories/:title
|
|||
|
||||
# Setup
|
||||
title: Tale
|
||||
subtitle: by Chester
|
||||
paginate: 5
|
||||
baseurl: ""
|
||||
url: "https://chesterhow.github.io/tale"
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
<title>
|
||||
{% if page.title == "Home" %}
|
||||
{{ site.title }} · {{ site.subtitle }}
|
||||
{{ site.title }}
|
||||
{% else %}
|
||||
{{ page.title }} · {{ site.title }}
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
layout: post
|
||||
title: "Empty Post"
|
||||
title: "Pagination Post"
|
||||
author: "Chester"
|
||||
---
|
||||
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
---
|
||||
layout: post
|
||||
title: "Empty Post"
|
||||
title: "Empty Post with Image"
|
||||
author: "Chester"
|
||||
---
|
||||
|
||||
|
||||
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.
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
layout: post
|
||||
title: "Introducing Tale 2"
|
||||
title: "Introducing Tale"
|
||||
author: "Chester"
|
||||
---
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
15
index.html
15
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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue