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

Global styles

This commit is contained in:
John O'Nolan 2019-11-05 15:19:16 +07:00
parent ca28e89a61
commit 4a6047adbb
5 changed files with 104 additions and 319 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

343
assets/css/components/global.css
View File

@ -1,283 +1,64 @@
/* Reset /* Reset
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
img {
max-width: 100%;
}
html {
box-sizing: border-box;
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
*, *,
*:before, *::before,
*:after { *::after {
box-sizing: inherit;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
b,
strong {
font-weight: bold;
}
i,
em,
dfn {
font-style: italic;
}
h1 {
margin: 0.67em 0;
font-size: 2em;
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
mark {
background-color: #fdffb6;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
margin: 0;
color: inherit;
font: inherit;
}
button {
overflow: visible;
border: none;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
-webkit-appearance: button;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
padding: 0;
border: 0;
}
input {
line-height: normal;
}
input:focus {
outline: none;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; box-sizing: border-box;
padding: 0;
} }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
box-sizing: content-box;
-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
legend {
padding: 0;
border: 0;
}
textarea {
overflow: auto;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
td,
th {
padding: 0;
}
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html { html {
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
font-size: 62.5%; font-size: 62.5%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
body { body {
overflow-x: hidden; min-height: 100vh;
margin: 0;
padding: 0;
color: color(var(--color-base) l(+20%)); color: color(var(--color-base) l(+20%));
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1.6em; line-height: 1.6em;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
letter-spacing: 0;
text-rendering: optimizeLegibility;
background: #fff; background: #fff;
scroll-behavior: smooth;
overflow-x: hidden;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: "liga" on;
} }
::selection { p,
text-shadow: none; ul,
background: #cbeafb; ol,
li,
dl,
dd,
figure,
figcaption,
blockquote {
margin: 0;
}
ul[class],
ol[class] {
padding: 0;
list-style: none;
}
img {
display: block;
max-width: 100%;
}
input,
button,
textarea,
select {
font: inherit;
} }
hr { hr {
@ -291,20 +72,6 @@ hr {
border-top: 1px solid color(var(--color-border) l(+10%)); border-top: 1px solid color(var(--color-border) l(+10%));
} }
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
p,
blockquote {
margin: 0 0 1.5em 0;
}
blockquote { blockquote {
margin: 1.5em 0; margin: 1.5em 0;
padding: 0 1.6em 0 1.6em; padding: 0 1.6em 0 1.6em;
@ -323,26 +90,28 @@ blockquote small {
font-size: 0.9em; font-size: 0.9em;
opacity: 0.8; opacity: 0.8;
} }
/* Quotation marks */
blockquote small:before { ::selection {
content: "\2014 \00A0"; text-shadow: none;
background: #cbeafb;
} }
blockquote cite { mark {
font-weight: bold; background-color: #fdffb6;
}
blockquote cite a {
font-weight: normal;
} }
a { a:not([class]) {
color: color(var(--color-primary) l(-5%)); color: color(var(--color-primary) l(-5%));
text-decoration-skip-ink: auto;
}
a[class] {
color: inherit;
text-decoration: none; text-decoration: none;
transition: 0.4s ease; transition: 0.4s ease;
} }
a:hover { a[class]:hover {
text-decoration: underline;
transition: 0.2s ease; transition: 0.2s ease;
} }
@ -352,10 +121,9 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin-top: 0; margin: 0;
line-height: 1.4; line-height: 1.1em;
font-weight: 700; font-weight: 700;
text-rendering: optimizeLegibility;
} }
h1 { h1 {
@ -404,3 +172,12 @@ h6 {
font-size: 2.2rem; font-size: 2.2rem;
} }
/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}

6
assets/css/screen.css
View File

@ -85,3 +85,9 @@ production stylesheet in assets/built/screen.css using: gulp dev
.site-foot a { .site-foot a {
color: #fff; color: #fff;
} }
/* Natural flow and rhythm in articles by default */
.post-body > * + * {
margin-top: 1em;
}

70
default.hbs
View File

@ -14,57 +14,59 @@
{{!-- 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="site-wrapper"> <div class="viewport">
<header class="site-head"> <header class="site-head">
<div class="site-head-container inner"> <div class="site-head-container inner">
<nav 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}}
</div> {{#if @site.twitter}}
<div class="site-head-right"> <a href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">Twitter</a>
<div class="social-links"> {{/if}}
{{#if @site.facebook}} <a href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/" title="RSS" target="_blank" rel="noopener">RSS</a>
<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>
</header> </div>
</header>
<main class="site-main"> <main class="site-main">
<div class="site-main-container inner"> <div class="site-main-container inner">
{{{body}}} {{{body}}}
{{!-- All content gets inserted here, index.hbs, post.hbs, etc --}} {{!-- All content gets inserted here, index.hbs, post.hbs, etc --}}
</div> </div>
</main> </main>
<footer class="site-foot"> <footer class="site-foot">
<div class="site-foot-container inner"> <div class="site-foot-container inner">
&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.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
{{#if pagination.pages}}
<script> <script>
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}}
{{{block "scripts"}}} {{{block "scripts"}}}