Third pass 2.0

This commit is contained in:
John O'Nolan 2017-06-05 12:19:29 +01:00
parent bc9e5a0b2e
commit 938eaaf7a6
7 changed files with 140 additions and 72 deletions

View file

@ -174,6 +174,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
*/ */
.site-nav-logo { .site-nav-logo {
flex-shrink: 0;
display: block; display: block;
margin-right: 24px; margin-right: 24px;
} }
@ -299,7 +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;
margin: 0 15px 30px; margin: 0 20px 40px;
background: #fff center center; background: #fff center center;
background-size: cover; background-size: cover;
box-shadow: rgba(39,44,49,0.06) 8px 14px 38px, rgba(39, 44, 49, 0.03) 1px 3px 8px; box-shadow: rgba(39,44,49,0.06) 8px 14px 38px, rgba(39, 44, 49, 0.03) 1px 3px 8px;
@ -434,7 +435,9 @@ The first (most recent) post in the list is styled to be bigger than the others
/* Single Post /* Single Post
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.post-template .site-main { .post-template .site-main,
.page-template .site-main {
padding-bottom: 4vw;
background: #fff; background: #fff;
} }
@ -487,8 +490,7 @@ The first (most recent) post in the list is styled to be bigger than the others
.post-full-image { .post-full-image {
height: 600px; height: 600px;
margin: -5vw -4vw -100px; margin: -5vw -4vw -100px;
background: var(--lightgrey) center center; border-radius: 0;
background-size: cover;
} }
} }
@ -503,6 +505,17 @@ The first (most recent) post in the list is styled to be bigger than the others
background: #fff; background: #fff;
} }
@media (max-width: 1170px) {
.post-full-content {
padding: 5vw 7vw 0;
}
}
@media (max-width: 800px) {
.post-full-content {
font-size: 1.9rem;
}
}
.post-full-content:before { .post-full-content:before {
display: block; display: block;
content: ""; content: "";
@ -531,6 +544,11 @@ The first (most recent) post in the list is styled to be bigger than the others
filter: blur(5px); filter: blur(5px);
} }
.no-image .post-full-content:before,
.no-image .post-full-content:after {
display: none;
}
.kg-card-markdown { .kg-card-markdown {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -542,22 +560,25 @@ The first (most recent) post in the list is styled to be bigger than the others
min-width: 100%; min-width: 100%;
} }
.kg-card-markdown > p:first-child { .post-template .kg-card-markdown > p:first-child {
font-size: 2.7rem; font-size: 1.25em;
line-height: 1.55em; line-height: 1.5em;
} }
.post-full-content a { .post-full-content a {
color: #000;
box-shadow: var(--blue) 0 -1px 0 inset; box-shadow: var(--blue) 0 -1px 0 inset;
} }
.post-full-content a:hover { .post-full-content a:hover {
color: var(--blue);
text-decoration: none; text-decoration: none;
} }
.post-full-content img { .post-full-content img {
width: 100vw; width: 100vw;
max-width: 1040px; max-width: 1040px;
margin: 1.5em 0;
} }
/* /*
@ -570,7 +591,7 @@ Super neat trick courtesy of @JoelDrapper
.post-full-content blockquote { .post-full-content blockquote {
margin: 0 0 1.5em 0; margin: 0 0 1.5em 0;
padding: 0; padding: 1.5em 0;
border: 0; border: 0;
text-align: center; text-align: center;
font-size: 3rem; font-size: 3rem;
@ -593,49 +614,12 @@ Super neat trick courtesy of @JoelDrapper
} }
} }
.post-full-content blockquote + blockquote {
padding-top: 0;
}
.post-full-content .fluid-width-video-wrapper { .post-full-content .fluid-width-video-wrapper {
margin-bottom: 1.5em; margin: 1.5em 0 3em;
}
/* Post Footer
/* ---------------------------------------------------------- */
.post-full-footer {
display: flex;
justify-content: space-between;
// max-width: 700px;
margin: 0 auto;
padding: 0 0 6vw 0;
}
.author-card {
display: flex;
align-items: center;
}
.author-card-image {
height: 60px;
width: 60px;
margin-right: 10px;
}
.author-card-content h4 {
margin: 0;
padding: 0;
}
.author-card-content h4 a {
color: var(--darkgrey);
font-weight: 700;
}
.author-card-content h4 a:hover {
text-decoration: none;
}
.author-card-content p {
margin: 0;
} }
@ -643,21 +627,27 @@ Super neat trick courtesy of @JoelDrapper
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.subscribe-form { .subscribe-form {
padding: 6vw 0 8vw 0; margin: 1.5em 0;
padding: 6vw 0 6.5vw;
text-align: center; text-align: center;
background: color(var(--whitegrey) l(+4%));
border-radius: 5px;
} }
.subscribe-form-title { .subscribe-form-title {
margin: 0 0 3px 0; margin: 0 0 3px 0;
padding: 0; padding: 0;
font-size: 2.9rem; font-size: 3.2rem;
line-height: 1;
font-weight: 700; font-weight: 700;
color: var(--darkgrey) color: var(--darkgrey)
} }
.subscribe-form p { .subscribe-form p {
font-size: 1.8rem; font-size: 2.2rem;
line-height: 1.55em; line-height: 1.55em;
letter-spacing: 0.2px;
color: var(--midgrey);
} }
.subscribe-form form { .subscribe-form form {
@ -699,7 +689,7 @@ Super neat trick courtesy of @JoelDrapper
margin: 0 0 0 10px; margin: 0 0 0 10px;
padding: 0 20px; padding: 0 20px;
height: 41px; height: 41px;
font-size: 1.3rem; font-size: 1.5rem;
line-height: 37px; line-height: 37px;
font-weight: 400; font-weight: 400;
color: #fff; color: #fff;
@ -723,6 +713,58 @@ Super neat trick courtesy of @JoelDrapper
} }
/* Post Footer
/* ---------------------------------------------------------- */
.post-full-footer {
display: flex;
justify-content: space-between;
max-width: 840px;
margin: 0 auto;
padding: 3vw 0 6vw 0;
}
.author-card {
display: flex;
align-items: center;
}
.author-card-image {
height: 60px;
width: 60px;
margin-right: 10px;
}
.author-card-content h4 {
margin: 0;
padding: 0;
font-size: 2rem;
}
.author-card-content h4 a {
color: var(--darkgrey);
font-weight: 700;
}
.author-card-content h4 a:hover {
text-decoration: none;
}
.author-card-content p {
margin: 0;
color: var(--midgrey);
}
/* Comments
/* ---------------------------------------------------------- */
.post-full-comments {
max-width: 840px;
margin: 0 auto;
}
/* Related posts /* Related posts
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
@ -932,7 +974,7 @@ Super neat trick courtesy of @JoelDrapper
margin: 0; margin: 0;
font-weight: bold; font-weight: bold;
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1.3; line-height: 1.3em;
color: #2e2e2e; color: #2e2e2e;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -31,9 +31,9 @@
<section class="copyright"><a href="{{@blog.url}}">{{@blog.title}}</a> &copy; {{date format="YYYY"}}</section> <section class="copyright"><a href="{{@blog.url}}">{{@blog.title}}</a> &copy; {{date format="YYYY"}}</section>
<nav class="site-footer-nav"> <nav class="site-footer-nav">
<a href="{{@blog.url}}">Latest Posts</a> <a href="{{@blog.url}}">Latest Posts</a>
{{#if @blog.facebook}}<a href="{{facebook_url}}">Facebook</a>{{/if}} {{#if @blog.facebook}}<a href="{{facebook_url}}" target="_blank">Facebook</a>{{/if}}
{{#if @blog.twitter}}<a href="{{twitter_url}}">Twitter</a>{{/if}} {{#if @blog.twitter}}<a href="{{twitter_url}}" target="_blank">Twitter</a>{{/if}}
<a href="https://ghost.org" target="_blank">About Ghost</a> <a href="https://ghost.org" target="_blank">Ghost</a>
</nav> </nav>
</div> </div>
</footer> </footer>

18
error.hbs Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>{{meta_title}}</title>
<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="{{asset "assets/public/screen.css"}}" />
</head>
<body class="{{body_class}}">
<div class="site-wrapper">
ERROR
</div>
</body>
</html>

View file

@ -40,7 +40,7 @@ into the {body} of the default.hbs template --}}
<main id="site-main" class="site-main outer" role="main"> <main id="site-main" class="site-main outer" role="main">
<div class="inner"> <div class="inner">
<article class="post-full {{post_class}}"> <article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">
<header class="post-full-header"> <header class="post-full-header">
<h1 class="post-full-title">{{title}}</h1> <h1 class="post-full-title">{{title}}</h1>

View file

@ -43,7 +43,7 @@ into the {body} of the default.hbs template --}}
<main id="site-main" class="site-main outer" role="main"> <main id="site-main" class="site-main outer" role="main">
<div class="inner"> <div class="inner">
<article class="post-full {{post_class}}"> <article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">
<header class="post-full-header"> <header class="post-full-header">
<section class="post-full-meta"> <section class="post-full-meta">
@ -102,20 +102,28 @@ into the {body} of the default.hbs template --}}
{{/author}} {{/author}}
</section> </section>
<section class="share"> <section class="post-full-tags">
<h4>Share this post</h4> {{tags}}
<a class="icon-twitter" href="https://twitter.com/intent/tweet?text={{encode title}}&amp;url={{url absolute="true"}}"
onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
<span class="hidden">Twitter</span>
</a>
<a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}"
onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
<span class="hidden">Facebook</span>
</a>
</section> </section>
</footer> </footer>
<section class="post-full-comments">
<div id="disqus_thread"></div>
<script>
var disqus_config = function () {
this.page.url = '{{url absolute="true"}}';
this.page.identifier = 'ghost-{{id}}';
};
(function() {
var d = document, s = d.createElement('script');
s.src = 'https://test-apkdzgmqhj.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
</section>
</article> </article>
</div> </div>