peterkrzyzek
/
ghost_leaders_theme
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

Better defaults

This commit is contained in:
John O'Nolan 2019-10-20 17:56:15 +07:00
parent ef2879517e
commit bda02f65a4
8 changed files with 314 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/built/screen.css
View File

File diff suppressed because one or more lines are too long

2
assets/built/screen.css.map
View File

File diff suppressed because one or more lines are too long

115
assets/css/components/ghost.css
View File

@ -106,6 +106,121 @@
margin-top: calc( -7vw + 0.75em ); margin-top: calc( -7vw + 0.75em );
} }
/* Code Cards
/* ---------------------------------------------------------- */
.kg-code-card {
width: 100%;
}
.kg-code-card pre {
margin: 0;
}
/* Bookmark Cards
/* ---------------------------------------------------------- */
.kg-bookmark-card {
width: 100%;
}
.kg-bookmark-container {
display: flex;
min-height: 148px;
color: #131313;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
text-decoration: none;
border-radius: 5px;
box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.kg-bookmark-container:hover {
text-decoration: none;
}
.kg-bookmark-content {
display: flex;
flex-direction: column;
flex-grow: 1;
flex-basis: 100%;
align-items: flex-start;
justify-content: flex-start;
padding: 20px;
}
.kg-bookmark-title {
color: #131313;
font-size: 1.6rem;
line-height: 1.5em;
font-weight: 600;
}
.kg-bookmark-description {
display: -webkit-box;
font-size: 1.4rem;
line-height: 1.5em;
margin-top: 10px;
color: #54666d;
font-weight: 400;
max-height: 44px;
overflow-y: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.kg-bookmark-thumbnail {
position: relative;
flex-grow: 1;
min-width: 33%;
max-height: 100%;
}
.kg-bookmark-thumbnail img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0 3px 3px 0;
object-fit: cover;
}
.kg-bookmark-metadata {
display: flex;
align-items: center;
margin-top: 14px;
color: #343f44;
font-size: 1.4rem;
font-weight: 500;
}
.kg-bookmark-icon {
width: 20px;
height: 20px;
margin-right: 6px;
}
.kg-bookmark-author {
line-height: 1.5em;
}
.kg-bookmark-author:after {
content: "•";
margin: 0 6px;
}
.kg-bookmark-publisher {
display: block;
max-width: 240px;
color: #343f44;
white-space: nowrap;
overflow: hidden;
}
/* Members Forms /* Members Forms
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */

65
assets/css/screen.css
View File

@ -21,4 +21,67 @@ production stylesheet in assets/built/screen.css using gulp dev
/* Main - Theme styles /* Main - Theme styles
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
/* Your styles here */
/* Your styles here! Edit below */
/* Global */
.inner {
width: 100%;
max-width: 1030px;
margin: 0 auto;
}
/* Header */
.site-head {
padding: 20px 4vw;
color: #fff;
background: var(--color-base);
}
.site-head a {
color: #fff;
}
.site-head-container {
display: flex;
align-items: center;
justify-content: space-between;
}
.site-head-left .nav {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
.site-head-left .nav li {
margin: 0 10px 0 0;
padding: 0;
}
.site-head-logo img {
height: 30px;
width: auto;
}
/* Main */
.site-main {
margin: 5vw 4vw;
}
/* Footer */
.site-foot {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 4vw;
color: #fff;
background: var(--color-base);
}
.site-foot a {
color: #fff;
}

106
default.hbs
View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{@site.lang}}"> <html lang="{{@site.lang}}">
<head> <head>
{{!-- Document Settings --}} {{!-- Document Settings --}}
@ -18,71 +19,74 @@
{{ghost_head}} {{ghost_head}}
</head> </head>
<body class="{{body_class}}"> <body class="{{body_class}}">
<div class="site-wrapper"> <div class="site-wrapper">
<header class="site-head"> <header class="site-head">
<div class="site-head-container"> <div class="site-head-container inner">
<nav id="swup" class="site-head-left"> <nav class="site-head-left">
{{navigation}} {{navigation}}
</nav> </nav>
<div class="site-head-center"> <div class="site-head-center">
{{#if @site.logo}} {{#if @site.logo}}
<a class="site-head-logo" href="{{@site.url}}"><img src="{{@site.logo}}" alt="{{@site.title}}" /></a> <a class="site-head-logo" href="{{@site.url}}"><img src="{{@site.logo}}" alt="{{@site.title}}" /></a>
{{else}} {{else}}
<a class="site-head-logo" href="{{@site.url}}">{{@site.title}}</a> <a class="site-head-logo" href="{{@site.url}}">{{@site.title}}</a>
{{/if}}
</div>
<div class="site-head-right">
<div class="social-links">
{{#if @site.facebook}}
<a href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">Facebook</a>
{{/if}} {{/if}}
{{#if @site.twitter}} </div>
<a href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">Twitter</a> <div class="site-head-right">
{{/if}} <div class="social-links">
<a href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/" title="RSS" target="_blank" rel="noopener">RSS</a> {{#if @site.facebook}}
<a href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">Facebook</a>
{{/if}}
{{#if @site.twitter}}
<a href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">Twitter</a>
{{/if}}
<a href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/" title="RSS" target="_blank" rel="noopener">RSS</a>
</div>
</div> </div>
</div> </div>
</div> </header>
</header>
<main id="site-main" class="site-main"> <main class="site-main">
<div class="site-main-container inner">
{{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}} {{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}}
{{{body}}} {{{body}}}
</main> </div>
</main>
{{!-- The footer at the very bottom of the screen --}} {{!-- The footer at the very bottom of the screen --}}
<footer class="site-foot"> <footer class="site-foot">
&copy; {{date format="YYYY"}} <a href="{{@site.url}}">{{@site.title}}</a> &mdash; Published with <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a> <div class="site-foot-container inner">
</footer> &copy; {{date format="YYYY"}} <a href="{{@site.url}}">{{@site.title}}</a> &mdash; Published with <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a>
</div>
</footer>
</div> </div>
<script <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
src="https://code.jquery.com/jquery-3.2.1.min.js" </script>
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">
</script>
{{#if pagination.pages}} {{#if pagination.pages}}
<script> <script>
// maxPages is a global variable that is needed to determine // maxPages is a global variable that is needed to determine
// if we need to load more pages for the infinitescroll, or if // if we need to load more pages for the infinitescroll, or if
// we reached the last page already. // we reached the last page already.
var maxPages = parseInt('{{pagination.pages}}'); var maxPages = parseInt('{{pagination.pages}}');
</script> </script>
<script src="{{asset "built/infinitescroll.js"}}"></script> <script src="{{asset "built/infinitescroll.js"}}"></script>
{{/if}} {{/if}}
{{!-- 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. --}} {{!-- 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"}}} {{{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 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}}
</body> </body>
</html>
</html>

2
error-404.hbs
View File

@ -34,7 +34,7 @@ It's a good idea to keep this template as minimal as possible in terms of both f
<div class="inner"> <div class="inner">
<section class="error-message"> <section class="error-message">
<h1 class="error-code">{{code}}</h1> <h1 class="error-code">{{statusCode}}</h1>
<p class="error-description">{{message}}</p> <p class="error-description">{{message}}</p>
<a class="error-link" href="{{@site.url}}">Go to the front page →</a> <a class="error-link" href="{{@site.url}}">Go to the front page →</a>
</section> </section>

87
error.hbs
View File

@ -1,27 +1,66 @@
{{!< default}} {{!--
This error template is used for all 400/500 errors, except 404, which might occur on your site.
It's a good idea to keep this template as minimal as possible in terms of both file size and complexity.
You'll notice that we *don't* use any JavsScript, or ghost_head / ghost_foot in this file.
--}}
<header class="page-head error-head"> <!DOCTYPE html>
<h1 class="page-head-title">{{code}}</h1> <html>
<p class="page-head-description">{{message}}</p>
<a class="error-link" href="{{@site.url}}">Go to the front page →</a>
</header>
{{#if errorDetails}} <head>
<div class="post-content-body"> <meta charset="utf-8" />
<section class="error-stack"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<h3>Theme errors</h3> <title>{{meta_title}}</title>
<ul class="error-stack-list"> <meta name="HandheldFriendly" content="True" />
{{#each errorDetails}} <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<li> <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
<em class="error-stack-function">{{{rule}}}</em> </head>
{{#each failures}} <body class="error-template">
<p><span class="error-stack-file">Ref: {{ref}}</span></p> <div class="site-wrapper">
<p><span class="error-stack-file">Message: {{message}}</span></p>
{{/each}} <header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-image{{/if}}">
</li> <div class="inner">
{{/each}} <nav class="site-nav-center">
</ul> {{#if @site.logo}}
</section> <a class="site-nav-logo" href="{{@site.url}}"><img src="{{img_url @site.logo size="xs"}}" alt="{{@site.title}}" /></a>
</div> {{else}}
{{/if}} <a class="site-nav-logo" href="{{@site.url}}">{{@site.title}}</a>
{{/if}}
</nav>
</div>
</header>
<main id="site-main" class="site-main outer">
<div class="inner">
<section class="error-message">
<h1 class="error-code">{{statusCode}}</h1>
<p class="error-description">{{message}}</p>
<a class="error-link" href="{{@site.url}}">Go to the front page →</a>
</section>
{{#if errorDetails}}
<section class="error-stack">
<h3>Theme errors</h3>
<ul class="error-stack-list">
{{#foreach errorDetails}}
<li>
<em class="error-stack-function">{{{rule}}}</em>
{{#foreach failures}}
<p><span class="error-stack-file">Ref: {{ref}}</span></p>
<p><span class="error-stack-file">Message: {{message}}</span></p>
{{/foreach}}
</li>
{{/foreach}}
</ul>
</section>
{{/if}}
</div>
</main>
</div>
</body>
</html>

16
partials/post-card.hbs
View File

@ -2,10 +2,22 @@
Re-usable card for linking to posts Re-usable card for linking to posts
--}} --}}
<article class="post-card {{post_class}} {{#if feature_image}}with-image" style="background-image: url({{img_url feature_image size="l"}}){{else}}no-image{{/if}}"> <article class="post-card {{post_class}} {{#if feature_image}}with-image{{else}}no-image{{/if}}">
<a class="post-card-link" href="{{url}}"> <a class="post-card-link" href="{{url}}">
<div class="post-card-content"> <div class="post-card-content">
{{#if feature_image}}
<img class="post-card-image"
srcset="{{img_url feature_image size="s"}} 300w,
{{img_url feature_image size="m"}} 600w,
{{img_url feature_image size="l"}} 1000w,
{{img_url feature_image size="xl"}} 2000w"
sizes="(max-width: 1000px) 400px, 700px"
src="{{img_url feature_image size="m"}}"
alt="{{title}}"
/>
{{/if}}
<h2 class="post-card-title">{{title}}</h2> <h2 class="post-card-title">{{title}}</h2>
<p>{{excerpt}}</p>
</div> </div>
</a> </a>
</article> </article>