Third pass 2.0
This commit is contained in:
John O'Nolan
parent
bc9e5a0b2e
commit
938eaaf7a6
|
|
@ -174,6 +174,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
|
|||
*/
|
||||
|
||||
.site-nav-logo {
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
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;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 15px 30px;
|
||||
margin: 0 20px 40px;
|
||||
background: #fff center center;
|
||||
background-size: cover;
|
||||
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
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.post-template .site-main {
|
||||
.post-template .site-main,
|
||||
.page-template .site-main {
|
||||
padding-bottom: 4vw;
|
||||
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 {
|
||||
height: 600px;
|
||||
margin: -5vw -4vw -100px;
|
||||
background: var(--lightgrey) center center;
|
||||
background-size: cover;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -503,6 +505,17 @@ The first (most recent) post in the list is styled to be bigger than the others
|
|||
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 {
|
||||
display: block;
|
||||
content: "";
|
||||
|
|
@ -531,6 +544,11 @@ The first (most recent) post in the list is styled to be bigger than the others
|
|||
filter: blur(5px);
|
||||
}
|
||||
|
||||
.no-image .post-full-content:before,
|
||||
.no-image .post-full-content:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.kg-card-markdown {
|
||||
display: flex;
|
||||
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%;
|
||||
}
|
||||
|
||||
.kg-card-markdown > p:first-child {
|
||||
font-size: 2.7rem;
|
||||
line-height: 1.55em;
|
||||
.post-template .kg-card-markdown > p:first-child {
|
||||
font-size: 1.25em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.post-full-content a {
|
||||
color: #000;
|
||||
box-shadow: var(--blue) 0 -1px 0 inset;
|
||||
}
|
||||
|
||||
.post-full-content a:hover {
|
||||
color: var(--blue);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.post-full-content img {
|
||||
width: 100vw;
|
||||
max-width: 1040px;
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -570,7 +591,7 @@ Super neat trick courtesy of @JoelDrapper
|
|||
|
||||
.post-full-content blockquote {
|
||||
margin: 0 0 1.5em 0;
|
||||
padding: 0;
|
||||
padding: 1.5em 0;
|
||||
border: 0;
|
||||
text-align: center;
|
||||
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 {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
|
||||
/* 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;
|
||||
margin: 1.5em 0 3em;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -643,21 +627,27 @@ Super neat trick courtesy of @JoelDrapper
|
|||
/* ---------------------------------------------------------- */
|
||||
|
||||
.subscribe-form {
|
||||
padding: 6vw 0 8vw 0;
|
||||
margin: 1.5em 0;
|
||||
padding: 6vw 0 6.5vw;
|
||||
text-align: center;
|
||||
background: color(var(--whitegrey) l(+4%));
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.subscribe-form-title {
|
||||
margin: 0 0 3px 0;
|
||||
padding: 0;
|
||||
font-size: 2.9rem;
|
||||
font-size: 3.2rem;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
color: var(--darkgrey)
|
||||
}
|
||||
|
||||
.subscribe-form p {
|
||||
font-size: 1.8rem;
|
||||
font-size: 2.2rem;
|
||||
line-height: 1.55em;
|
||||
letter-spacing: 0.2px;
|
||||
color: var(--midgrey);
|
||||
}
|
||||
|
||||
.subscribe-form form {
|
||||
|
|
@ -699,7 +689,7 @@ Super neat trick courtesy of @JoelDrapper
|
|||
margin: 0 0 0 10px;
|
||||
padding: 0 20px;
|
||||
height: 41px;
|
||||
font-size: 1.3rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: 37px;
|
||||
font-weight: 400;
|
||||
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
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
|
|
@ -932,7 +974,7 @@ Super neat trick courtesy of @JoelDrapper
|
|||
margin: 0;
|
||||
font-weight: bold;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.3;
|
||||
line-height: 1.3em;
|
||||
color: #2e2e2e;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -31,9 +31,9 @@
|
|||
<section class="copyright"><a href="{{@blog.url}}">{{@blog.title}}</a> © {{date format="YYYY"}}</section>
|
||||
<nav class="site-footer-nav">
|
||||
<a href="{{@blog.url}}">Latest Posts</a>
|
||||
{{#if @blog.facebook}}<a href="{{facebook_url}}">Facebook</a>{{/if}}
|
||||
{{#if @blog.twitter}}<a href="{{twitter_url}}">Twitter</a>{{/if}}
|
||||
<a href="https://ghost.org" target="_blank">About Ghost</a>
|
||||
{{#if @blog.facebook}}<a href="{{facebook_url}}" target="_blank">Facebook</a>{{/if}}
|
||||
{{#if @blog.twitter}}<a href="{{twitter_url}}" target="_blank">Twitter</a>{{/if}}
|
||||
<a href="https://ghost.org" target="_blank">Ghost</a>
|
||||
</nav>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
2
page.hbs
2
page.hbs
|
|
@ -40,7 +40,7 @@ into the {body} of the default.hbs template --}}
|
|||
<main id="site-main" class="site-main outer" role="main">
|
||||
<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">
|
||||
<h1 class="post-full-title">{{title}}</h1>
|
||||
|
|
|
|||
30
post.hbs
30
post.hbs
|
|
@ -43,7 +43,7 @@ into the {body} of the default.hbs template --}}
|
|||
<main id="site-main" class="site-main outer" role="main">
|
||||
<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">
|
||||
<section class="post-full-meta">
|
||||
|
|
@ -102,20 +102,28 @@ into the {body} of the default.hbs template --}}
|
|||
{{/author}}
|
||||
</section>
|
||||
|
||||
<section class="share">
|
||||
<h4>Share this post</h4>
|
||||
<a class="icon-twitter" href="https://twitter.com/intent/tweet?text={{encode title}}&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 class="post-full-tags">
|
||||
{{tags}}
|
||||
</section>
|
||||
|
||||
</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>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue