Restyle read-next card

This commit is contained in:
John O'Nolan 2017-06-13 18:51:08 +01:00
parent 655c35b53c
commit 7f4d581caf
5 changed files with 69 additions and 20 deletions

View file

@ -377,10 +377,10 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
}
.post-card-content {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.post-card-excerpt {
@ -419,10 +419,12 @@ The first (most recent) post in the list is styled to be bigger than the others
}
.home-template .post-feed .post-card:nth-child(6n+1) .post-card-image-link {
position: relative;
flex: 1 1 auto;
}
.home-template .post-feed .post-card:nth-child(6n+1) .post-card-image {
position: absolute;
width: 100%;
height: 100%;
}
@ -474,7 +476,7 @@ The first (most recent) post in the list is styled to be bigger than the others
.post-full-header {
max-width: 1040px;
margin: 0 auto;
padding: 10vw 3vw 6vw;
padding: 6vw 3vw 3vw;
text-align: center;
}
@ -519,6 +521,12 @@ The first (most recent) post in the list is styled to be bigger than the others
}
}
@media (max-width: 800px) {
.post-full-image {
height: 400px;
}
}
.post-full-content {
position: relative;
min-height: 230px;
@ -936,7 +944,7 @@ Super neat trick courtesy of @JoelDrapper
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(135deg, rgba(0,40,60,0.60) 0%,rgba(0,20,40,0.50) 100%);
background: linear-gradient(135deg, rgba(0,40,60,0.8) 0%,rgba(0,20,40,0.7) 100%);
border-radius: 5px;
backdrop-filter: blur(2px);
}
@ -944,19 +952,36 @@ Super neat trick courtesy of @JoelDrapper
.read-next-card-header {
position: relative;
z-index: 50;
padding-top: 20px;
text-align: center;
}
.read-next-card-header-sitetitle {
display: block;
font-size: 1.3rem;
line-height: 1.3em;
opacity: 0.8;
}
.read-next-card-header-title {
padding: 10px 20px;
padding: 0 20px;
margin: 0;
font-size: 3rem;
line-height: 1.2em;
font-weight: 300;
letter-spacing: 1px;
color: #fff;
}
.read-next-card-header-title a {
color: #fff;
font-weight: 300;
text-decoration: none;
}
.read-next-card-header-title a:hover {
text-decoration: none;
}
.read-next-divider {
position: relative;
display: flex;
@ -965,8 +990,9 @@ Super neat trick courtesy of @JoelDrapper
}
.read-next-divider svg {
width: 50px;
width: 40px;
stroke: #fff;
stroke-width: 0.5px;
stroke-opacity: 0.65;
fill: transparent;
}
@ -979,34 +1005,53 @@ Super neat trick courtesy of @JoelDrapper
font-size: 1.7rem;
}
.read-next-card-content ol {
.read-next-card-content ul {
display: flex;
flex-direction: column;
margin: 0 auto;
padding: 0 1em 0 2em;
padding: 0;
list-style: none;
text-align: center;
}
.read-next-card-content li {
padding-left: 5px;
margin: 20px 0;
font-size: 1.8rem;
margin: 0;
padding: 0;
font-size: 1.6rem;
line-height: 1.25em;
letter-spacing: -0.5px;
font-weight: 200;
}
.read-next-card-content li a {
display: inline-block;
display: block;
padding: 20px 0;
border-bottom: rgba(255,255,255,0.3) 1px solid;
vertical-align: top;
font-weight: 600;
font-weight: 500;
color: #fff;
opacity: 0.8;
transition: opacity 0.3s ease;
}
.read-next-card-content li:first-of-type a {
padding-top: 10px;
}
.read-next-card-content li a:hover {
opacity: 1;
}
.read-next-card-footer {
position: relative;
margin: 15px 0 3px 0;
text-align: center;
}
.read-next-card-footer a {
color: #fff;
}
/* Site Footer
/* ---------------------------------------------------------- */

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -148,16 +148,20 @@ into the {body} of the default.hbs template --}}
{{/if}}
>
<header class="read-next-card-header">
<h3 class="read-next-card-header-title">Read more posts like this</h3>
<small class="read-next-card-header-sitetitle">&mdash; {{@blog.title}} &mdash;</small>
<h3 class="read-next-card-header-title"><a href="{{@blog.url}}tag/{{../tags.[0].slug}}/">{{../tags.[0].name}}</a></h3>
</header>
<div class="read-next-divider">{{> "icons/infinity"}}</div>
<div class="read-next-card-content">
<ol>
<ul>
{{#foreach posts}}
<li><a href="{{url}}">{{title}}</a></li>
{{/foreach}}
</ol>
</ul>
</div>
<footer class="read-next-card-footer">
<a href="{{@blog.url}}tag/{{../tags.[0].slug}}/">{{plural meta.pagination.total empty='No posts' singular='% post' plural='See all % posts'}} →</a>
</footer>
</article>
{{/get}}

View file

@ -37,7 +37,7 @@
{{#if description}}
{{description}}
{{else}}
A {{../pagination.total}}-post collection
A collection of {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}
{{/if}}
</h2>
</div>