diff --git a/amp.hbs b/amp.hbs new file mode 100644 index 0000000..c5876aa --- /dev/null +++ b/amp.hbs @@ -0,0 +1,830 @@ + + + + {{!-- Document Settings --}} + + + {{!-- Page Meta --}} + {{meta_title}} + + + {{!-- Mobile Meta --}} + + + + {{!-- Brand icon --}} + + + {{amp_ghost_head}} + + {{!-- Styles'n'Scripts --}} + + + + {{!-- The AMP boilerplate --}} + + + + {{amp_components}} + + + + + {{#post}} +
+ +
+ +
+
+ +
+

{{title}}

+
+ {{#author}} +

by {{name}}

+ {{/author}} + +
+
+ {{#if image}} +
+ +
+ {{/if}} +
+ + {{amp_content}} + +
+ +
+
+ {{/post}} + + + diff --git a/assets/css/screen.css b/assets/css/screen.css index e4b3ff3..49cf88e 100644 --- a/assets/css/screen.css +++ b/assets/css/screen.css @@ -117,7 +117,7 @@ td, th{ padding: 0; } /* Apply these base styles to all icons */ [class^="icon-"]:before, [class*=" icon-"]:before { - font-family: "casper-icons", "Open Sans", sans-serif; + font-family: "casper-icons", "Lato", sans-serif; speak: none; font-style: normal; font-weight: normal; @@ -369,7 +369,7 @@ textarea, select, input { padding: 6px 9px; margin: 0 0 5px 0; outline: 0; - font-family: 'Open Sans', sans-serif; + font-family: 'Lato', sans-serif; font-size: 1.6rem; font-weight: 100; line-height: 1.4em; @@ -423,7 +423,7 @@ button { outline: none; text-decoration: none; color: #fff; - font-family: 'Open Sans', sans-serif; + font-family: 'Lato', sans-serif; font-size: 11px; /* Hacks targeting Firefox. */ line-height: 13px; /* Hacks targeting Firefox. */ font-weight: 300; diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 92a879a..3c3a72b 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -101,6 +101,11 @@ a { } } +.site-wrapper { + display: flex; + flex-direction: column; +} + /** * =================== @@ -456,7 +461,6 @@ a { display: table; height: 100vh; - margin-bottom: 5rem; overflow: hidden; position: relative; @@ -538,7 +542,8 @@ $button-shadow: rgba(0, 0, 0, .1); text-align: center; } -.content { +.index-content { + margin-top: 0; position: relative; z-index: 52; } @@ -550,16 +555,9 @@ $button-shadow: rgba(0, 0, 0, .1); background: $footer-color; min-height: 5vh; - .footer-content { + .container { @include respond-to(handhelds) { text-align: center; - width: 90vw; - } - @include respond-to(semi-large-screens) { - width: 80vw; - } - @include respond-to(medium-screens) { - width: 80vw; } color: $white; @@ -567,19 +565,7 @@ $button-shadow: rgba(0, 0, 0, .1); font-size: .6em; height: auto; line-height: 1.8em; - margin: auto; - max-width: 1140px; padding: 2vh 0; - width: 60vw; - - .right { - @include respond-to(handhelds) { - display: block; - float: none; - } - - float: right; - } a { color: $white; @@ -597,6 +583,32 @@ $button-shadow: rgba(0, 0, 0, .1); } } +.container { + @include respond-to(handhelds) { + width: 90vw; + } + @include respond-to(semi-large-screens) { + width: 80vw; + } + @include respond-to(medium-screens) { + width: 80vw; + } + + height: auto; + margin: auto; + max-width: 1140px; + width: 60vw; + + .right { + @include respond-to(handhelds) { + display: block; + float: none; + } + + float: right; + } +} + /** * ================= * DEFAULT PAGE DESIGN @@ -609,6 +621,41 @@ $post-after-border: #e7eef2; $post-meta: #9eabb3; $post-meta-link: #9eabb3; +main { + flex-grow: 1; + margin-top: 5rem; +} + +// HEADER +.top-header { + background: $page-bg; + height: auto; + + .container { + @include respond-to(handhelds) { + text-align: center; + } + + color: $white; + font-family: 'Source Sans Pro', sans-serif; + font-size: 1.2em; + font-weight: 600; + line-height: 1.5em; + padding: 2vh 0; + + a { + color: $white; + text-decoration: none; + + &:hover { + border-bottom: 2px solid $white; + } + } + } +} + + + // This class is applied to all posts .post { border-bottom: $post-border 1px solid; @@ -621,6 +668,8 @@ $post-meta-link: #9eabb3; } .post-title { + line-height: 1.2em; + a { text-decoration: none; } @@ -677,6 +726,14 @@ $post-date-border: #d5dbde; width: 24px; } +.author-profile .author-image { + margin-top: 50px; +} + +.author-image-cover { + margin-top: -100px; +} + .user-meta { min-height: 77px; padding: .3rem 40px 0 100px; @@ -719,3 +776,30 @@ $post-date-border: #d5dbde; font-size: 1.4rem; line-height: 1.5rem; } + +.no-cover { + display: none; +} + +.page-title { + line-height: 1.2em; + + .description { + color: $post-meta; + display: block; + font-size: .5em; + font-weight: 300; + } +} + +.main-header-content { + hr { + margin: 2em 0; + } +} + +.extra-pagination { + &:after { + display: none; + } +} diff --git a/author.hbs b/author.hbs index b6e827a..b702983 100644 --- a/author.hbs +++ b/author.hbs @@ -2,6 +2,7 @@ {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}} {{!-- The big featured header --}} +{{> "header" }} {{!-- Everything inside the #author tags pulls data from the author --}} {{#author}} @@ -10,7 +11,7 @@
{{#if image}} -
+
{{/if}} diff --git a/default.hbs b/default.hbs index 5ad0e45..91c3018 100644 --- a/default.hbs +++ b/default.hbs @@ -37,7 +37,7 @@ {{{body}}}