Better defaults
This commit is contained in:
John O'Nolan
parent
ef2879517e
commit
bda02f65a4
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -106,6 +106,121 @@
|
|||
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
|
||||
/* ---------------------------------------------------------- */
|
||||
|
|
|
|||
|
|
@ -21,4 +21,67 @@ production stylesheet in assets/built/screen.css using gulp dev
|
|||
/* 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;
|
||||
}
|
||||
|
|
|
|||
42
default.hbs
42
default.hbs
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{@site.lang}}">
|
||||
|
||||
<head>
|
||||
|
||||
{{!-- Document Settings --}}
|
||||
|
|
@ -18,13 +19,14 @@
|
|||
{{ghost_head}}
|
||||
|
||||
</head>
|
||||
|
||||
<body class="{{body_class}}">
|
||||
|
||||
<div class="site-wrapper">
|
||||
<div class="site-wrapper">
|
||||
|
||||
<header class="site-head">
|
||||
<div class="site-head-container">
|
||||
<nav id="swup" class="site-head-left">
|
||||
<div class="site-head-container inner">
|
||||
<nav class="site-head-left">
|
||||
{{navigation}}
|
||||
</nav>
|
||||
<div class="site-head-center">
|
||||
|
|
@ -48,41 +50,43 @@
|
|||
</div>
|
||||
</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 --}}
|
||||
{{{body}}}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{{!-- The footer at the very bottom of the screen --}}
|
||||
<footer class="site-foot">
|
||||
<div class="site-foot-container inner">
|
||||
© {{date format="YYYY"}} <a href="{{@site.url}}">{{@site.title}}</a> — Published with <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a>
|
||||
</div>
|
||||
</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.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
|
||||
</script>
|
||||
|
||||
{{#if pagination.pages}}
|
||||
<script>
|
||||
{{#if pagination.pages}}
|
||||
<script>
|
||||
// maxPages is a global variable that is needed to determine
|
||||
// if we need to load more pages for the infinitescroll, or if
|
||||
// we reached the last page already.
|
||||
var maxPages = parseInt('{{pagination.pages}}');
|
||||
</script>
|
||||
<script src="{{asset "built/infinitescroll.js"}}"></script>
|
||||
{{/if}}
|
||||
</script>
|
||||
<script src="{{asset "built/infinitescroll.js"}}"></script>
|
||||
{{/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. --}}
|
||||
{{{block "scripts"}}}
|
||||
{{!-- 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"}}}
|
||||
|
||||
{{!-- 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 outputs important scripts and data with this tag - it should always be the very last thing before the closing body tag --}}
|
||||
{{ghost_foot}}
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -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">
|
||||
|
||||
<section class="error-message">
|
||||
<h1 class="error-code">{{code}}</h1>
|
||||
<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>
|
||||
|
|
|
|||
65
error.hbs
65
error.hbs
|
|
@ -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">
|
||||
<h1 class="page-head-title">{{code}}</h1>
|
||||
<p class="page-head-description">{{message}}</p>
|
||||
<!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 "built/screen.css"}}" />
|
||||
</head>
|
||||
|
||||
<body class="error-template">
|
||||
<div class="site-wrapper">
|
||||
|
||||
<header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-image{{/if}}">
|
||||
<div class="inner">
|
||||
<nav class="site-nav-center">
|
||||
{{#if @site.logo}}
|
||||
<a class="site-nav-logo" href="{{@site.url}}"><img src="{{img_url @site.logo size="xs"}}" alt="{{@site.title}}" /></a>
|
||||
{{else}}
|
||||
<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>
|
||||
</header>
|
||||
</section>
|
||||
|
||||
{{#if errorDetails}}
|
||||
<div class="post-content-body">
|
||||
{{#if errorDetails}}
|
||||
<section class="error-stack">
|
||||
<h3>Theme errors</h3>
|
||||
<ul class="error-stack-list">
|
||||
{{#each errorDetails}}
|
||||
{{#foreach errorDetails}}
|
||||
<li>
|
||||
<em class="error-stack-function">{{{rule}}}</em>
|
||||
|
||||
{{#each failures}}
|
||||
{{#foreach failures}}
|
||||
<p><span class="error-stack-file">Ref: {{ref}}</span></p>
|
||||
<p><span class="error-stack-file">Message: {{message}}</span></p>
|
||||
{{/each}}
|
||||
{{/foreach}}
|
||||
</li>
|
||||
{{/each}}
|
||||
{{/foreach}}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -2,10 +2,22 @@
|
|||
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}}">
|
||||
<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>
|
||||
<p>{{excerpt}}</p>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
Loading…
Reference in New Issue