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

Refactor global layout

This commit is contained in:
John O'Nolan 2019-11-05 17:17:19 +07:00
parent f3d9c582be
commit 20f98afdbe
6 changed files with 61 additions and 75 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

29
assets/css/screen.css
View File

@ -25,30 +25,30 @@ production stylesheet in assets/built/screen.css using: gulp dev
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
/* Global */ /* Global */
.inner { .gh-container {
width: 100%; width: 100%;
max-width: 1030px; max-width: 1030px;
margin: 0 auto; margin: 0 auto;
} }
/* Header */ /* Header */
.site-head { .gh-head {
padding: 20px 4vw; padding: 20px 4vw;
color: #fff; color: #fff;
background: var(--color-base); background: var(--color-base);
} }
.site-head a { .gh-head a {
color: #fff; color: #fff;
} }
.site-head-container { .gh-head-container {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.site-head-left .nav { .gh-head-left .nav {
display: flex; display: flex;
align-items: center; align-items: center;
list-style: none; list-style: none;
@ -56,23 +56,18 @@ production stylesheet in assets/built/screen.css using: gulp dev
padding: 0; padding: 0;
} }
.site-head-left .nav li { .gh-head-left .nav li {
margin: 0 10px 0 0; margin: 0 10px 0 0;
padding: 0; padding: 0;
} }
.site-head-logo img { .gh-head-logo img {
height: 30px; height: 30px;
width: auto; width: auto;
} }
/* Main */
.site-main {
margin: 5vw 4vw;
}
/* Footer */ /* Footer */
.site-foot { .gh-foot {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -81,12 +76,6 @@ production stylesheet in assets/built/screen.css using: gulp dev
background: var(--color-base); background: var(--color-base);
} }
.site-foot a { .gh-foot a {
color: #fff; color: #fff;
} }
/* Natural flow and rhythm in articles by default */
.post-body > * + * {
margin-top: 1em;
}

51
default.hbs
View File

@ -3,33 +3,34 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>{{meta_title}}</title>
<meta name="HandheldFriendly" content="True" /> <meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" /> <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
<title>{{meta_title}}</title>
{{ghost_head}} {{ghost_head}}
{{!-- Outputs SEO meta+structured data and important settings, should always be in <head> --}} {{!-- Outputs SEO meta+structured data and important settings, should always be in <head> --}}
</head> </head>
<body class="{{body_class}}"> <body class="{{body_class}}">
<div class="viewport"> <div class="gh-viewport">
<header class="site-head"> <header class="gh-head">
<div class="site-head-container inner"> <nav class="gh-container">
<nav class="site-head-left"> <div class="gh-head-menu">
{{navigation}} {{navigation}}
</nav>
<div class="site-head-center">
{{#if @site.logo}}
<a class="site-head-logo" href="{{@site.url}}"><img src="{{@site.logo}}" alt="{{@site.title}}" /></a>
{{else}}
<a class="site-head-logo" href="{{@site.url}}">{{@site.title}}</a>
{{/if}}
</div> </div>
<div class="site-head-right"> <div class="gh-head-brand">
<div class="social-links"> <a class="gh-head-logo" href="{{@site.url}}">
{{#if @site.logo}}
<img src="{{@site.logo}}" alt="{{@site.title}}" />
{{else}}
{{@site.title}}
{{/if}}
</a>
</div>
<div class="gh-head-actions">
<div class="gh-head-actions-list">
{{#if @site.facebook}} {{#if @site.facebook}}
<a href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">Facebook</a> <a href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">Facebook</a>
{{/if}} {{/if}}
@ -39,27 +40,23 @@
<a href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/" title="RSS" target="_blank" rel="noopener">RSS</a> <a href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/" title="RSS" target="_blank" rel="noopener">RSS</a>
</div> </div>
</div> </div>
</div> </nav>
</header> </header>
<main class="site-main"> <main class="gh-main">
<div class="site-main-container inner"> {{{body}}}
{{!-- All content gets inserted here, index.hbs, post.hbs, etc --}}
{{{body}}}
{{!-- All content gets inserted here, index.hbs, post.hbs, etc --}}
</div>
</main> </main>
<footer class="site-foot"> <footer class="gh-foot">
<div class="site-foot-container inner"> <div class="gh-container">
&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> &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> </div>
</footer> </footer>
</div> </div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
{{#if pagination.pages}} {{#if pagination.pages}}
<script> <script>

31
index.hbs
View File

@ -1,21 +1,22 @@
{{!< default}} {{!< default}}
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}
{{#is "home"}} <div class="gh-container">
{{#if @site.description}}
<header class="page-head">
<h2 class="page-head-title">{{@site.description}}</h2>
</header>
{{/if}}
{{/is}}
<div class="post-feed"> {{#is "home"}}
{{#foreach posts}} {{#if @site.description}}
<header class="page-head">
<h2 class="page-head-title">{{@site.description}}</h2>
</header>
{{/if}}
{{/is}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}} <div class="post-feed">
{{> "post-card"}} {{#foreach posts}}
{{> "post-card"}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
{{/foreach}}
</div>
{{/foreach}}
</div> </div>

21
post.hbs
View File

@ -1,23 +1,23 @@
{{!< default}} {{!< default}}
{{#post}} {{#post}}
<article class="post-content {{post_class}} {{#unless feature_image}}no-image{{/unless}}"> <article class="gh-post {{post_class}}">
<header class="post-content-header"> <header class="gh-post-header">
<h1 class="post-content-title">{{title}}</h1> <h1 class="gh-post-title">{{title}}</h1>
</header> </header>
{{#if custom_excerpt}} {{#if custom_excerpt}}
<p class="post-content-excerpt">{{custom_excerpt}}</p> <p class="gh-post-excerpt">{{custom_excerpt}}</p>
{{/if}} {{/if}}
{{#if feature_image}} {{#if feature_image}}
<div class="post-content-image"> <div class="gh-post-image">
<img class="kg-image" src="{{feature_image}}" alt="{{title}}" /> <img class="kg-image" src="{{feature_image}}" alt="{{title}}" />
</div> </div>
{{/if}} {{/if}}
<div class="post-content-body"> <div class="gh-post-body">
{{content}} {{content}}
</div> </div>
@ -26,9 +26,9 @@
{{> subscribe-form}} {{> subscribe-form}}
{{/if}} {{/if}}
<footer class="post-content-footer"> <footer class="gh-post-footer">
<div class="post-authors"> <div class="gh-post-authors">
Written by Written by
{{#foreach authors}} {{#foreach authors}}
<a href="{{url}}">{{name}}</a> <a href="{{url}}">{{name}}</a>
@ -38,7 +38,7 @@
</footer> </footer>
{{!-- {{!--
<section class="post-content-comments"> <section class="gh-post-comments">
If you want to embed comments, this is a good place to do it! If you want to embed comments, this is a good place to do it!
</section> </section>
--}} --}}
@ -46,10 +46,9 @@
</article> </article>
{{/post}} {{/post}}
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}} {{!-- The #contentFor helper here will send everything in it to the matching #block helper in default.hbs --}}
{{#contentFor "scripts"}} {{#contentFor "scripts"}}
<script> <script>
// Layout Script for Ghost Gallery Cards
var images = document.querySelectorAll('.kg-gallery-image img'); var images = document.querySelectorAll('.kg-gallery-image img');
images.forEach(function (image) { images.forEach(function (image) {
var container = image.closest('.kg-gallery-image'); var container = image.closest('.kg-gallery-image');