Base styles
This commit is contained in:
John O'Nolan
parent
1d26a6b8dd
commit
f80091d791
5 changed files with 60 additions and 65 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -45,7 +45,7 @@ body {
|
|||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #212427;
|
||||
color: #273033;
|
||||
font-family: var(--font-sans-serif);
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.6em;
|
||||
|
|
@ -172,11 +172,11 @@ h5,
|
|||
h6 {
|
||||
margin: 0;
|
||||
line-height: 1.15em;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4.6rem;
|
||||
font-size: 3.6rem;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
|
|
@ -186,7 +186,7 @@ h1 {
|
|||
}
|
||||
|
||||
h2 {
|
||||
font-size: 3.6rem;
|
||||
font-size: 3rem;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
h2 {
|
||||
|
|
@ -195,7 +195,7 @@ h2 {
|
|||
}
|
||||
|
||||
h3 {
|
||||
font-size: 3.2rem;
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
h3 {
|
||||
|
|
@ -215,6 +215,10 @@ h6 {
|
|||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
a.gh-powered,
|
||||
a.gh-powered:hover {
|
||||
display: inline-flex;
|
||||
|
|
@ -260,7 +264,7 @@ a.gh-powered svg {
|
|||
}
|
||||
|
||||
.gh-head {
|
||||
padding: 6vmin 4vmin;
|
||||
padding: 6vmin 0 4vmin;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
|
|
@ -268,22 +272,33 @@ a.gh-powered svg {
|
|||
}
|
||||
|
||||
.gh-head a {
|
||||
display: inline-block;
|
||||
color: currentColor;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav {
|
||||
ul.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin: 1rem 0 0 0;
|
||||
padding: 0 0 4vmin 0;
|
||||
border-bottom: var(--color-border) 1px solid;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
ul.nav a {
|
||||
margin: 0 1vmin;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
ul.nav a:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
|
||||
/* Index
|
||||
/* ---------------------------------------------------------- */
|
||||
|
|
@ -347,13 +362,22 @@ a.gh-powered svg {
|
|||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0 0 8vmin 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gh-feature-image {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin: 4vmin auto 0;
|
||||
}
|
||||
|
||||
.gh-post-meta {
|
||||
display: block;
|
||||
margin: 1rem 0 0;
|
||||
margin: 0.5rem 0 0;
|
||||
font-size: 1.3rem;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -361,25 +385,6 @@ a.gh-powered svg {
|
|||
font-weight: 500;
|
||||
}
|
||||
|
||||
.gh-post-meta a {
|
||||
text-decoration: none;
|
||||
color: var(--color-grey);
|
||||
}
|
||||
|
||||
.gh-post-meta a:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.gh-feature-image {
|
||||
grid-column: wide-start / wide-end;
|
||||
width: 100%;
|
||||
margin: 8vmin 0 0;
|
||||
}
|
||||
|
||||
.gh-post-footer {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
|
||||
/* Content
|
||||
/* ---------------------------------------------------------- */
|
||||
|
|
@ -461,10 +466,9 @@ a.gh-powered svg {
|
|||
.gh-content > ul,
|
||||
.gh-content > dl,
|
||||
.gh-content > p {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 400;
|
||||
font-size: 1.8rem;
|
||||
line-height: 1.6em;
|
||||
font-weight: 300;
|
||||
font-size: 1.7rem;
|
||||
line-height: 1.55em;
|
||||
-webkit-font-smoothing: auto;
|
||||
-moz-osx-font-smoothing: auto;
|
||||
}
|
||||
|
|
@ -504,7 +508,7 @@ a.gh-powered svg {
|
|||
.gh-content ul,
|
||||
.gh-content dl,
|
||||
.gh-content p {
|
||||
font-size: 1.8rem;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.gh-content blockquote::before {
|
||||
|
|
@ -745,24 +749,10 @@ a.gh-powered svg {
|
|||
/* ---------------------------------------------------------- */
|
||||
|
||||
.page-footer {
|
||||
padding: 60px 5vmin;
|
||||
margin: 60px auto 0;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
padding: 6vmin 4vmin 6vmin;
|
||||
margin: 6vmin auto 0;
|
||||
border-top: var(--color-border) 1px solid;
|
||||
text-align: center;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.page-footer h3 {
|
||||
margin: 0.5rem 0 0 0;
|
||||
}
|
||||
|
||||
.page-footer p {
|
||||
max-width: 500px;
|
||||
margin: 1rem auto 1.5rem;
|
||||
font-size: 1.7rem;
|
||||
line-height: 1.5em;
|
||||
color: rgba(0,0,0,0.6);
|
||||
}
|
||||
|
||||
.page-footer .gh-powered {
|
||||
margin-top: 30px;
|
||||
}
|
||||
12
default.hbs
12
default.hbs
|
|
@ -15,8 +15,8 @@
|
|||
|
||||
<header class="gh-head">
|
||||
<a href="{{@site.url}}">
|
||||
{{#if @site.icon}}
|
||||
<img class="site-icon" src="{{img_url @site.icon absolute="true"}}" width="50" height="50" alt="{{@site.title}}" />
|
||||
{{#if @site.logo}}
|
||||
<img class="site-logo" src="{{img_url @site.logo absolute="true"}}" height="50" alt="{{@site.title}}" />
|
||||
{{else}}
|
||||
<h2>{{@site.title}}</h2>
|
||||
{{/if}}
|
||||
|
|
@ -29,14 +29,6 @@
|
|||
</main>
|
||||
|
||||
<footer class="page-footer">
|
||||
{{#if @site.icon}}
|
||||
<img class="site-icon" src="{{img_url @site.icon absolute="true"}}" width="50" height="50" alt="{{@site.title}}" />
|
||||
{{/if}}
|
||||
<h3>{{@site.title}}</h3>
|
||||
{{#if @site.description}}
|
||||
<p>{{@site.description}}</p>
|
||||
{{/if}}
|
||||
<p><a href="{{@site.url}}">Read more posts →</a></p>
|
||||
<a class="gh-powered" href="https://ghost.org" target="_blank" rel="noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 156 156"><g fill="none" fill-rule="evenodd"><rect fill="#15212B" width="156" height="156" rx="27"></rect><g transform="translate(36 36)" fill="#F6F8FA"><path d="M0 71.007A4.004 4.004 0 014 67h26a4 4 0 014 4.007v8.986A4.004 4.004 0 0130 84H4a4 4 0 01-4-4.007v-8.986zM50 71.007A4.004 4.004 0 0154 67h26a4 4 0 014 4.007v8.986A4.004 4.004 0 0180 84H54a4 4 0 01-4-4.007v-8.986z"></path><rect y="34" width="84" height="17" rx="4"></rect><path d="M0 4.007A4.007 4.007 0 014.007 0h41.986A4.003 4.003 0 0150 4.007v8.986A4.007 4.007 0 0145.993 17H4.007A4.003 4.003 0 010 12.993V4.007z"></path><rect x="67" width="17" height="17" rx="4"></rect></g></g></svg> Publish with Ghost</a>
|
||||
</footer>
|
||||
|
||||
|
|
|
|||
15
post.hbs
15
post.hbs
|
|
@ -3,8 +3,21 @@
|
|||
{{#post}}
|
||||
|
||||
<header class="gh-header">
|
||||
<time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time>
|
||||
<h1>{{title}}</h1>
|
||||
<div class="gh-post-meta">
|
||||
{{primary_author.name}} - <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time>
|
||||
</div>
|
||||
{{#if feature_image}}
|
||||
<img class="gh-feature-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="(min-width: 2000px) 2000px"
|
||||
src="{{img_url feature_image size="xl"}}"
|
||||
alt="{{title}}"
|
||||
/>
|
||||
{{/if}}
|
||||
</header>
|
||||
|
||||
<section class="gh-content">
|
||||
|
|
|
|||
Loading…
Reference in a new issue