WhipUps Default Theme
| <!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’t any published posts. Stay tuned… | |
| </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}} | |
| — | |
| <span class="permalink"> | |
| <a href="{{permalink}}">⚓</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>→</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}} | |
| — | |
| <span class="permalink"> | |
| <a href="{{permalink}}">⚓</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> |
| 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