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;
|
||||
}
|
||||
|
|
|
|||
18
default.hbs
18
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">
|
||||
|
||||
<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,24 +50,25 @@
|
|||
</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>
|
||||
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.2.1.min.js"
|
||||
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
|
||||
crossorigin="anonymous">
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
|
||||
</script>
|
||||
|
||||
{{#if pagination.pages}}
|
||||
|
|
@ -85,4 +88,5 @@
|
|||
{{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>
|
||||
|
|
|
|||
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">
|
||||
<h1 class="page-head-title">{{code}}</h1>
|
||||
<p class="page-head-description">{{message}}</p>
|
||||
<a class="error-link" href="{{@site.url}}">Go to the front page →</a>
|
||||
<!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>
|
||||
</section>
|
||||
|
||||
{{#if errorDetails}}
|
||||
<div class="post-content-body">
|
||||
<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}}
|
||||
|
||||
</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