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 );
|
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
|
||||||
/* ---------------------------------------------------------- */
|
/* ---------------------------------------------------------- */
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
||||||
18
default.hbs
18
default.hbs
|
|
@ -1,5 +1,6 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="{{@site.lang}}">
|
<html lang="{{@site.lang}}">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
|
|
||||||
{{!-- Document Settings --}}
|
{{!-- Document Settings --}}
|
||||||
|
|
@ -18,13 +19,14 @@
|
||||||
{{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">
|
||||||
|
|
@ -48,24 +50,25 @@
|
||||||
</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}}}
|
||||||
|
|
||||||
|
</div>
|
||||||
</main>
|
</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">
|
||||||
|
<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>
|
© {{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>
|
</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"
|
|
||||||
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
|
|
||||||
crossorigin="anonymous">
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{{#if pagination.pages}}
|
{{#if pagination.pages}}
|
||||||
|
|
@ -85,4 +88,5 @@
|
||||||
{{ghost_foot}}
|
{{ghost_foot}}
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</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">
|
<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>
|
||||||
|
|
|
||||||
61
error.hbs
61
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">
|
<!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>
|
<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>
|
</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}}
|
{{#if errorDetails}}
|
||||||
<div class="post-content-body">
|
|
||||||
<section class="error-stack">
|
<section class="error-stack">
|
||||||
<h3>Theme errors</h3>
|
<h3>Theme errors</h3>
|
||||||
<ul class="error-stack-list">
|
<ul class="error-stack-list">
|
||||||
{{#each errorDetails}}
|
{{#foreach errorDetails}}
|
||||||
<li>
|
<li>
|
||||||
<em class="error-stack-function">{{{rule}}}</em>
|
<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">Ref: {{ref}}</span></p>
|
||||||
<p><span class="error-stack-file">Message: {{message}}</span></p>
|
<p><span class="error-stack-file">Message: {{message}}</span></p>
|
||||||
{{/each}}
|
{{/foreach}}
|
||||||
</li>
|
</li>
|
||||||
{{/each}}
|
{{/foreach}}
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue