Restyle read-next card
This commit is contained in:
John O'Nolan
parent
655c35b53c
commit
7f4d581caf
|
|
@ -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
10
post.hbs
10
post.hbs
|
|
@ -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">— {{@blog.title}} —</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}}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue