Skip to content

Instantly share code, notes, and snippets.

@sausman

sausman/layout.html

Last active December 18, 2015 07:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sausman/5745659 to your computer and use it in GitHub Desktop.
Save sausman/5745659 to your computer and use it in GitHub Desktop.
Download ZIP
WhipUps Default Theme
Raw
layout.html
<!DOCTYPE html>
<html>
<head>
<title>{{#if title}}{{title}} - {{/if}}{{name}}</title>
<meta charset="utf-8">
{{#if avatar}}<link rel="icon" type="image/png" href="{{avatar_url}}">{{/if}}
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="alternate" type="application/atom xml" title="Atom Feed" href="http://{{domain}}/feed">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:500,700' rel='stylesheet' type='text/css'>
<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.min.css" media="all" rel="stylesheet" type="text/css">
{{{style}}}
{{{script}}}
</head>
<body>
<div id="container">
<div id="masthead">
<a href="/">
<header>
{{#if avatar}}<span class="avatar">{{{avatar}}}</span>{{/if}}
<span class="name">{{name}}</span>
</header>
</a>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/feed">Feed</a></li>
</ul>
</nav>
</div><!-- #masthead -->
<div id="main_content">
{{#if index}}{{#unless posts}}
<p style="text-align:center">
Sorry, there aren&rsquo;t any published posts. Stay tuned&hellip;
</p>
{{/unless}}{{/if}}
{{#if posts}}
<section id="posts">
{{#each posts}}
<article class="post">
<div class="meta">
<span class="published">
{{published.month_name}}
{{published.day}},
{{published.year}}
</span><!-- .published -->
{{#if link}}
&mdash;
<span class="permalink">
<a href="{{permalink}}">&#9875;</a>
</span><!-- .permalink -->
{{/if}}
</div><!-- .meta -->
<div class="title">
{{#if link}}
<h2><a href="{{link}}">
{{else}}
<h1><a href="{{permalink}}">
{{/if}}
{{{title}}}
{{#if link}}
<span>&rarr;</span></a></h2>
{{else}}
</a></h1>
{{/if}}
</div><!-- .title -->
<div class="body">
{{{body}}}
</div><!-- .body -->
</article><!-- .post -->
{{/each}}
</section>
{{/if}}
{{#if post}}{{#with post}}
<article class="post">
<div class="meta">
<span class="published">
{{published.month_name}}
{{published.day}},
{{published.year}}
</span><!-- .published -->
{{#if link}}
&mdash;
<span class="permalink">
<a href="{{permalink}}">&#9875;</a>
</span><!-- .permalink -->
{{/if}}
</div><!-- .meta -->
<div class="title">
{{#if link}}
<h2><a href="{{link}}">
{{else}}
<h1><a href="{{permalink}}">
{{/if}}
{{{title}}}
{{#if link}}
</a></h2>
{{else}}
</a></h1>
{{/if}}
</div><!-- .title -->
<div class="body">
{{{body}}}
</div><!-- .body -->
</article><!-- .post -->
{{/with}}{{/if}}
{{#if page}}{{#with page}}
<article class="page">
<div class="title">
<h1>
{{{title}}}
</h1>
</div><!-- .title -->
<div class="body">
{{{body}}}
</div><!-- .body -->
</article><!-- .page -->
{{/with}}{{/if}}
{{#if archives}}
<section id="archives">
<h3>Archives</h3>
<ul>
{{#each archives}}
<li><a href="{{permalink}}">{{month_name}} {{year}}</a></li>
{{/each}}
</ul>
</section>
{{/if}}
</div><!-- #main_content -->
<div id="footer">
<a target="_blank" href="https://www.whipups.com/">Powered by WhipUps</a>
</div><!-- #footer -->
</div><!-- #container -->
</body>
</html>
Raw
style.scss
body {
font-family: 'Open Sans';
}
h1,
h2,
h3 {
font-family: Roboto;
font-weight: 500;
color: #000;
}
h4,
h5,
h6 {
text-transform: uppercase;
color: #666;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li {
text-rendering: optimizeLegibility;
}
p,
ol,
ul {
margin: 1.5rem 0;
line-height: 1.5rem;
}
blockquote {
margin-left: 1rem;
padding-left: 1rem;
border-left: 0.25rem solid #ddd;
color: #666;
}
pre {
padding: 1rem;
margin: 1rem -1rem;
background: #eee;
border-radius: 0.25rem;
}
pre code {
font-size: 0.875rem;
word-break: break-all;
text-wrap: unrestricted;
}
table {
width: 100%;
}
th,
td {
padding: 0.625rem 1rem;
}
td {
border: 0.125rem solid #eee;
}
a {
color: #0066cc;
text-decoration: none;
}
#container {
margin: 2rem auto;
padding: 0 1rem;
max-width: 40rem;
}
.trol {
text-rendering: optimizeLegibility;
}
#masthead {
text-align: center;
padding-bottom: 0.75rem;
border-bottom: 0.25rem double #eee;
> a {
color: inherit;
}
}
header {
> .avatar {
display: block;
> img {
width: 7rem;
height: 7rem;
border-radius: 3.5rem;
}
}
> .name {
font-family: Roboto;
display: block;
margin-top: 0.75rem;
font-size: 2.25rem;
font-weight: 700;
}
}
nav {
margin-top: 0.75rem;
> ul {
margin: 0;
padding: 0;
list-style-type: none;
> li {
display: inline-block;
> a {
text-transform: uppercase;
color: #666;
letter-spacing: 0.125rem;
padding: 0.625rem 1.375rem;
border-radius: 2rem;
display: inline-block;
font-size: 0.875rem;
-webkit-transition: background 0.1s ease-in;
-moz-transition: background 0.1s ease-in;
transition: background 0.1s ease-in;
&:hover {
background: #eee;
}
}
}
}
}
#main_content {
margin-top: 2rem;
}
.post,
.page {
margin-bottom: 4rem;
> .meta {
color: #ccc;
> .published {
color: #999;
}
}
> .title {
> h1,
> h2 {
margin-top: 0;
> a {
color: inherit;
> span {
color: #999;
}
}
}
}
> .body {
color: #333;
a {
text-decoration: underline;
}
* {
max-width: 100%;
}
}
}
#archives {
a:hover {
text-decoration: underline;
}
}
#footer {
margin-top: 4rem;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.125rem;
font-size: 0.75rem;
> a {
color: #999;
display: inline-block;
padding: 0.5rem;
-webkit-transition: color 0.1s ease-in;
-moz-transition: color 0.1s ease-in;
transition: color 0.1s ease-in;
&:hover {
color: #666;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment