Next pass 2.0
This commit is contained in:
John O'Nolan
parent
938eaaf7a6
commit
d55446f2ca
7 changed files with 184 additions and 44 deletions
|
|
@ -151,6 +151,8 @@ b,
|
|||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
i,
|
||||
em,
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
@ -180,6 +182,9 @@ img {
|
|||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
mark {
|
||||
background-color: #fdffb6;
|
||||
}
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
|
|
@ -297,12 +302,14 @@ body {
|
|||
}
|
||||
|
||||
hr {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 2em 0;
|
||||
width: 100%;
|
||||
margin: 2.5em 0 3.5em;
|
||||
padding: 0;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--whitegrey);
|
||||
border-top: 1px solid color(var(--lightgrey) l(+10%));
|
||||
}
|
||||
|
||||
audio,
|
||||
|
|
@ -334,7 +341,8 @@ blockquote {
|
|||
|
||||
ol,
|
||||
ul {
|
||||
padding-left: 2.5em;
|
||||
padding-left: 1em;
|
||||
padding-right: 1.5em;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
|
|
@ -342,7 +350,6 @@ ul ul,
|
|||
ul ol,
|
||||
ol ul {
|
||||
margin: 0.5em 0 1em;
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
@ -355,6 +362,7 @@ ol {
|
|||
|
||||
li {
|
||||
margin: 0.5em 0;
|
||||
padding-left: 0.5em;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
|
|
@ -436,7 +444,7 @@ h1 {
|
|||
|
||||
h2 {
|
||||
margin: 1.5em 0 0.5em 0;
|
||||
font-size: 1.8rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
h2 {
|
||||
|
|
|
|||
|
|
@ -300,6 +300,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
|
|||
order: unset;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 300px;
|
||||
margin: 0 20px 40px;
|
||||
background: #fff center center;
|
||||
background-size: cover;
|
||||
|
|
@ -337,6 +338,17 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
.post-card-tags {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
color: var(--midgrey);
|
||||
text-transform: uppercase;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.15em;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.post-card-title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -406,11 +418,11 @@ 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-content-link {
|
||||
padding: 30px 30px 0;
|
||||
padding: 30px 40px 0;
|
||||
}
|
||||
|
||||
.home-template .post-feed .post-card:nth-child(6n+1) .post-card-meta {
|
||||
padding: 0 30px 30px;
|
||||
padding: 0 40px 30px;
|
||||
}
|
||||
|
||||
/* Special Styling for Subscribe box
|
||||
|
|
@ -470,7 +482,7 @@ The first (most recent) post in the list is styled to be bigger than the others
|
|||
}
|
||||
|
||||
.post-full-title {
|
||||
color: var(--darkgrey);
|
||||
color: color(var(--darkgrey) l(-5%));
|
||||
}
|
||||
|
||||
.date-divider {
|
||||
|
|
@ -556,7 +568,17 @@ The first (most recent) post in the list is styled to be bigger than the others
|
|||
max-width: 920px;
|
||||
}
|
||||
|
||||
.post-full-content p {
|
||||
.post-full-content p,
|
||||
.post-full-content ul,
|
||||
.post-full-content ol,
|
||||
.post-full-content dl,
|
||||
.post-full-content pre,
|
||||
.post-full-content h1,
|
||||
.post-full-content h2,
|
||||
.post-full-content h3,
|
||||
.post-full-content h4,
|
||||
.post-full-content h5,
|
||||
.post-full-content h6 {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -575,6 +597,11 @@ The first (most recent) post in the list is styled to be bigger than the others
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
.post-full-content strong,
|
||||
.post-full-content em {
|
||||
color: color(var(--darkgrey) l(-5%));
|
||||
}
|
||||
|
||||
.post-full-content img {
|
||||
width: 100vw;
|
||||
max-width: 1040px;
|
||||
|
|
@ -618,32 +645,126 @@ Super neat trick courtesy of @JoelDrapper
|
|||
padding-top: 0;
|
||||
}
|
||||
|
||||
.post-full-content code {
|
||||
padding: 0 5px 2px;
|
||||
font-size: 0.8em;
|
||||
line-height: 1em;
|
||||
font-weight: 400!important;
|
||||
background: var(--whitegrey);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.post-full-content pre {
|
||||
margin: 1.5em 0 3em;
|
||||
padding: 20px;
|
||||
border: color(var(--darkgrey) l(-10%)) 1px solid;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.5em;
|
||||
color: var(--whitegrey);
|
||||
background: color(var(--darkgrey) l(-3%));
|
||||
border-radius: 5px;
|
||||
overflow-x: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.post-full-content pre code {
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.post-full-content .fluid-width-video-wrapper {
|
||||
margin: 1.5em 0 3em;
|
||||
}
|
||||
|
||||
.post-full-content hr:after {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
left: 50%;
|
||||
margin-left: -10px;
|
||||
height: 30px;
|
||||
width: 1px;
|
||||
background: color(var(--lightgrey) l(+10%));
|
||||
box-shadow: #fff 0 0 0 5px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.post-full-content h1,
|
||||
.post-full-content h2,
|
||||
.post-full-content h3,
|
||||
.post-full-content h4,
|
||||
.post-full-content h5,
|
||||
.post-full-content h6 {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
color: color(var(--darkgrey) l(-5%));
|
||||
}
|
||||
|
||||
.post-full-content h1 {
|
||||
font-size: 5rem;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
.post-full-content h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.post-full-content h2 {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
.post-full-content h2 {
|
||||
font-size: 2.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.post-full-content h3 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
.post-full-content h3 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.post-full-content h4 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.post-full-content h5 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.post-full-content h6 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
|
||||
/* Subscribe Form
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.subscribe-form {
|
||||
margin: 1.5em 0;
|
||||
padding: 6vw 0 6.5vw;
|
||||
padding: 6.5vw 7vw 7vw;
|
||||
border: color(var(--whitegrey) l(+2%)) 1px solid;
|
||||
text-align: center;
|
||||
background: color(var(--whitegrey) l(+4%));
|
||||
border-radius: 5px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.subscribe-form-title {
|
||||
margin: 0 0 3px 0;
|
||||
padding: 0;
|
||||
font-size: 3.2rem;
|
||||
font-size: 3.5rem;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
color: var(--darkgrey)
|
||||
}
|
||||
|
||||
.subscribe-form p {
|
||||
margin-bottom: 1em;
|
||||
font-size: 2.2rem;
|
||||
line-height: 1.55em;
|
||||
letter-spacing: 0.2px;
|
||||
|
|
@ -816,6 +937,7 @@ Super neat trick courtesy of @JoelDrapper
|
|||
line-height: 1.2em;
|
||||
font-weight: 200;
|
||||
letter-spacing: 1px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.read-next-card-content {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
27
default.hbs
27
default.hbs
|
|
@ -41,29 +41,14 @@
|
|||
</div>
|
||||
|
||||
{{!-- jQuery + Fitvids, which makes all video embeds responsive --}}
|
||||
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
|
||||
<script
|
||||
src="//code.jquery.com/jquery-3.2.1.slim.min.js"
|
||||
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
|
||||
crossorigin="anonymous"></script>
|
||||
<script type="text/javascript" src="{{asset "js/jquery.fitvids.js"}}"></script>
|
||||
<script>
|
||||
|
||||
// TODO: Only include this on post.hbs - preferably put in floating-header.hbs and pass up to ghost_foot via block helper or similar.
|
||||
$(function() {
|
||||
var $postContent = $(".post-full-content");
|
||||
$postContent.fitVids();
|
||||
|
||||
$(window).scroll(function() {
|
||||
var header = $(".floating-header");
|
||||
var title = $(".post-full-title");
|
||||
var trigger = title.offset().top;
|
||||
var scroll = $(window).scrollTop();
|
||||
|
||||
if (scroll >= trigger + title.height() + 35 ) {
|
||||
header.addClass("floating-active");
|
||||
} else {
|
||||
header.removeClass("floating-active");
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{{!-- The #block helper will pull in data from the #contentFor other template files. In this case, there's some JavaScript which we only want to use in post.hbs, but it needs to be included down here, after jQuery has already loaded. --}}
|
||||
{{{block "scripts"}}}
|
||||
|
||||
{{!-- Ghost outputs important scripts and data with this tag - it should always be the very last thing before the closing body tag --}}
|
||||
{{ghost_foot}}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,9 @@
|
|||
<div class="post-card-content">
|
||||
<a class="post-card-content-link" href="{{url}}">
|
||||
<header class="post-card-header">
|
||||
{{#if tags}}
|
||||
<span class="post-card-tags">{{tags.[0].name}}</span>
|
||||
{{/if}}
|
||||
<h2 class="post-card-title">{{title}}</h2>
|
||||
</header>
|
||||
<section class="post-card-excerpt">
|
||||
|
|
@ -26,9 +29,6 @@
|
|||
<img class="author-profile-image" src="{{author.profile_image}}" alt="{{author.name}}" nopin="nopin" />
|
||||
{{/if}}
|
||||
<span class="post-card-author">{{author}}</span>
|
||||
{{#if tags}}
|
||||
<span class="poar-card-tags"> in <a href="{{@blog.url}}tag/{{tags.[0].slug}}">{{tags.[0].name}}</a></span>
|
||||
{{/if}}
|
||||
</footer>
|
||||
</div>
|
||||
</article>
|
||||
|
|
|
|||
25
post.hbs
25
post.hbs
|
|
@ -108,6 +108,7 @@ into the {body} of the default.hbs template --}}
|
|||
|
||||
</footer>
|
||||
|
||||
{{!--
|
||||
<section class="post-full-comments">
|
||||
<div id="disqus_thread"></div>
|
||||
<script>
|
||||
|
|
@ -123,6 +124,7 @@ into the {body} of the default.hbs template --}}
|
|||
})();
|
||||
</script>
|
||||
</section>
|
||||
--}}
|
||||
|
||||
</article>
|
||||
|
||||
|
|
@ -213,3 +215,26 @@ into the {body} of the default.hbs template --}}
|
|||
</aside>
|
||||
|
||||
{{/post}}
|
||||
|
||||
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
|
||||
{{#contentFor "scripts"}}
|
||||
<script>
|
||||
$(function() {
|
||||
var $postContent = $(".post-full-content");
|
||||
$postContent.fitVids();
|
||||
|
||||
$(window).scroll(function() {
|
||||
var header = $(".floating-header");
|
||||
var title = $(".post-full-title");
|
||||
var trigger = title.offset().top;
|
||||
var scroll = $(window).scrollTop();
|
||||
|
||||
if (scroll >= trigger + title.height() + 35 ) {
|
||||
header.addClass("floating-active");
|
||||
} else {
|
||||
header.removeClass("floating-active");
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{{/contentFor}}
|
||||
|
|
|
|||
Loading…
Reference in a new issue