Next pass 2.0

This commit is contained in:
John O'Nolan 2017-06-08 09:19:22 +02:00
parent 938eaaf7a6
commit d55446f2ca
7 changed files with 184 additions and 44 deletions

View File

@ -151,6 +151,8 @@ b,
strong { strong {
font-weight: bold; font-weight: bold;
} }
i,
em,
dfn { dfn {
font-style: italic; font-style: italic;
} }
@ -180,6 +182,9 @@ img {
svg:not(:root) { svg:not(:root) {
overflow: hidden; overflow: hidden;
} }
mark {
background-color: #fdffb6;
}
code, code,
kbd, kbd,
pre, pre,
@ -297,12 +302,14 @@ body {
} }
hr { hr {
position: relative;
display: block; display: block;
margin: 2em 0; width: 100%;
margin: 2.5em 0 3.5em;
padding: 0; padding: 0;
height: 1px; height: 1px;
border: 0; border: 0;
border-top: 1px solid var(--whitegrey); border-top: 1px solid color(var(--lightgrey) l(+10%));
} }
audio, audio,
@ -334,7 +341,8 @@ blockquote {
ol, ol,
ul { ul {
padding-left: 2.5em; padding-left: 1em;
padding-right: 1.5em;
} }
ol ol, ol ol,
@ -342,7 +350,6 @@ ul ul,
ul ol, ul ol,
ol ul { ol ul {
margin: 0.5em 0 1em; margin: 0.5em 0 1em;
padding-left: 2em;
} }
ul { ul {
@ -355,6 +362,7 @@ ol {
li { li {
margin: 0.5em 0; margin: 0.5em 0;
padding-left: 0.5em;
line-height: 1.6em; line-height: 1.6em;
} }
@ -436,7 +444,7 @@ h1 {
h2 { h2 {
margin: 1.5em 0 0.5em 0; margin: 1.5em 0 0.5em 0;
font-size: 1.8rem; font-size: 2rem;
} }
@media (max-width: 500px) { @media (max-width: 500px) {
h2 { h2 {

View File

@ -300,6 +300,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
order: unset; order: unset;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 300px;
margin: 0 20px 40px; margin: 0 20px 40px;
background: #fff center center; background: #fff center center;
background-size: cover; 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; 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 { .post-card-title {
margin-top: 0; 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 { .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 { .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 /* 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 { .post-full-title {
color: var(--darkgrey); color: color(var(--darkgrey) l(-5%));
} }
.date-divider { .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; 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%; 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; text-decoration: none;
} }
.post-full-content strong,
.post-full-content em {
color: color(var(--darkgrey) l(-5%));
}
.post-full-content img { .post-full-content img {
width: 100vw; width: 100vw;
max-width: 1040px; max-width: 1040px;
@ -618,32 +645,126 @@ Super neat trick courtesy of @JoelDrapper
padding-top: 0; 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 { .post-full-content .fluid-width-video-wrapper {
margin: 1.5em 0 3em; 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
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.subscribe-form { .subscribe-form {
margin: 1.5em 0; 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; text-align: center;
background: color(var(--whitegrey) l(+4%)); background: color(var(--whitegrey) l(+4%));
border-radius: 5px; border-radius: 7px;
} }
.subscribe-form-title { .subscribe-form-title {
margin: 0 0 3px 0; margin: 0 0 3px 0;
padding: 0; padding: 0;
font-size: 3.2rem; font-size: 3.5rem;
line-height: 1; line-height: 1;
font-weight: 700; font-weight: 700;
color: var(--darkgrey) color: var(--darkgrey)
} }
.subscribe-form p { .subscribe-form p {
margin-bottom: 1em;
font-size: 2.2rem; font-size: 2.2rem;
line-height: 1.55em; line-height: 1.55em;
letter-spacing: 0.2px; letter-spacing: 0.2px;
@ -816,6 +937,7 @@ Super neat trick courtesy of @JoelDrapper
line-height: 1.2em; line-height: 1.2em;
font-weight: 200; font-weight: 200;
letter-spacing: 1px; letter-spacing: 1px;
color: #fff;
} }
.read-next-card-content { .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

View File

@ -41,29 +41,14 @@
</div> </div>
{{!-- jQuery + Fitvids, which makes all video embeds responsive --}} {{!-- 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 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. {{!-- 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. --}}
$(function() { {{{block "scripts"}}}
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>
{{!-- Ghost outputs important scripts and data with this tag - it should always be the very last thing before the closing body tag --}} {{!-- Ghost outputs important scripts and data with this tag - it should always be the very last thing before the closing body tag --}}
{{ghost_foot}} {{ghost_foot}}

View File

@ -15,6 +15,9 @@
<div class="post-card-content"> <div class="post-card-content">
<a class="post-card-content-link" href="{{url}}"> <a class="post-card-content-link" href="{{url}}">
<header class="post-card-header"> <header class="post-card-header">
{{#if tags}}
<span class="post-card-tags">{{tags.[0].name}}</span>
{{/if}}
<h2 class="post-card-title">{{title}}</h2> <h2 class="post-card-title">{{title}}</h2>
</header> </header>
<section class="post-card-excerpt"> <section class="post-card-excerpt">
@ -26,9 +29,6 @@
<img class="author-profile-image" src="{{author.profile_image}}" alt="{{author.name}}" nopin="nopin" /> <img class="author-profile-image" src="{{author.profile_image}}" alt="{{author.name}}" nopin="nopin" />
{{/if}} {{/if}}
<span class="post-card-author">{{author}}</span> <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> </footer>
</div> </div>
</article> </article>

View File

@ -108,6 +108,7 @@ into the {body} of the default.hbs template --}}
</footer> </footer>
{{!--
<section class="post-full-comments"> <section class="post-full-comments">
<div id="disqus_thread"></div> <div id="disqus_thread"></div>
<script> <script>
@ -123,6 +124,7 @@ into the {body} of the default.hbs template --}}
})(); })();
</script> </script>
</section> </section>
--}}
</article> </article>
@ -213,3 +215,26 @@ into the {body} of the default.hbs template --}}
</aside> </aside>
{{/post}} {{/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}}