diff --git a/assets/css/screen.css b/assets/css/screen.css index 615901a..9f12d91 100644 --- a/assets/css/screen.css +++ b/assets/css/screen.css @@ -27,7 +27,7 @@ html { body { height: 100%; max-height: 100%; - font-family: 'Open Sans', sans-serif; + font-family: 'Droid Serif', serif; font-size: 2.0rem; line-height: 1.6em; color: #3A4145; @@ -50,12 +50,13 @@ h4, h5, h6 { text-rendering: optimizeLegibility; line-height: 1; margin-top: 0; + font-family: 'Open Sans', sans-serif; } h1 { font-size: 5rem; line-height: 1.2em; - letter-spacing: -1px; + letter-spacing: -2px; } h2 { @@ -288,120 +289,52 @@ table.plain { #site-head { position: relative; + display: table; width: 100%; - height: 60%; + height: 70%; margin-bottom: 5rem; text-align: center; color: #fff; - background: #303538 url(http://f.cl.ly/items/1N2205280l2u1l0h190o/bg.jpg) no-repeat center center; + background: #303538 url(https://maptia-production.s3.amazonaws.com/posts/1923/full_screen.jpg) no-repeat center center; background-size: cover; } -#ghost { - display: block; - width: 20px; - height: 18px; - padding: 4px; - position: absolute; - top: 43px; - right: 43px; - z-index: 950; - opacity: 0.4; - color: #fff; - text-indent: -9999px; - text-decoration: none; - background: rgba(0,0,0,0.15) url(../img/ghost.png) 4px 4px no-repeat; - border-radius: 2px; - transition: opacity ease 0.5s; -} - -#ghost:hover { - opacity: 1; -} - #blog-icon { position: absolute; - top: 40px; - left: 40px; - z-index: 900; - border: #fff 3px solid; - -webkit-border-radius: 100%; - -moz-border-radius: 100%; - border-radius: 100%; - overflow: hidden; -} - -/* Create dark overlay state for blog icon */ -#blog-icon:before { - display: block; - content: ""; - position: absolute; - z-index: 930; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: transparent; - transition: background ease 0.5s; -} - -/* On the post template, show the dark overlay on hover */ -.post-template #blog-icon:hover:before { - background: rgba(0,0,0,0.4); -} - -/* Create home icon for blog icon overlay */ -#blog-icon:after { - display: block; - position: absolute; - top: 50%; - left: 0; - bottom: 0; - right: 0; - z-index: 950; - margin-top: -10px; - content: "\e004"; - color: #fff; - text-align: center; - opacity:0; - transition: opacity ease 0.5s; -} - -/* On the post template, show the home icon overlay on hover */ -.post-template #blog-icon:hover:after { - opacity: 1; + top: 10px; + left: 10px; } #blog-icon img { - height: 80px; - width: auto; - min-width: 80px; + height: 40px; + width: 40px; display: block; line-height: 0; } -#site-head .wrap { - display: inline-block; - position: absolute; - bottom: 40%; - left: 0; - right: 0; - margin: 0 auto -60px auto; +.vertical { + display: table-cell; + vertical-align: middle; +} + +#site-head .content { width: 80%; max-width: 700px; + margin: 0 auto; } .blog-title { - margin: 0 0 10px 0; - font-size: 7rem; - letter-spacing: -3px; + margin: 0 0 20px 0; + font-size: 5rem; + letter-spacing: -1px; } .blog-description { - font-size: 2rem; + font-size: 1.8rem; line-height: 1.5em; font-weight: 300; - opacity: 0.8; + font-family: 'Droid Serif', serif; + letter-spacing: 0; } .post-template .content { @@ -612,7 +545,7 @@ table.plain { font-style: normal; } -#blog-icon, .icon-feed, .icon-twitter, .icon-google-plus, .icon-facebook { +.icon-feed, .icon-twitter, .icon-google-plus, .icon-facebook { font-family: 'icons'; speak: none; font-style: normal; @@ -640,7 +573,9 @@ table.plain { .icon-home:before { content: "\e004"; } - +.icon-ghost:before { + content: "\e005"; +} @media only screen and (max-width: 900px) { @@ -656,13 +591,9 @@ table.plain { box-sizing: border-box; height: auto; min-height: 240px; - padding-top: 50%; + padding: 25% 0; } - #site-head .wrap { - margin: 0 auto -50px auto; - } - #blog-icon { left: 50%; margin-left: -41px; @@ -674,12 +605,12 @@ table.plain { } .blog-title { - font-size: 5rem; - letter-spacing: -3px; + font-size: 4rem; + letter-spacing: -1px; } .blog-description { - font-size: 1.9rem; + font-size: 1.7rem; line-height: 1.5em; } @@ -727,14 +658,13 @@ table.plain { line-height: 1.6em; } - #site-head .wrap { - margin: 0 16px -40px 16px; + #site-head .content { + margin: 0 16px; width: auto; } .blog-title { font-size: 3rem; - letter-spacing: 0; } .blog-description { @@ -745,7 +675,7 @@ table.plain { h1, h2 { font-size: 3rem; line-height: 1.1em; - letter-spacing: 0; + letter-spacing: -1px; } h3 { diff --git a/assets/fonts/icons.dev.svg b/assets/fonts/icons.dev.svg index 2555a3f..b8975df 100644 --- a/assets/fonts/icons.dev.svg +++ b/assets/fonts/icons.dev.svg @@ -37,5 +37,6 @@ This is a custom SVG font generated by IcoMoon. l0,47.593 C 256,409.546, 283.896,448, 359.935,448l 87.622,0 l0-79.285 l-71.565,0 c-21.241,0.035-23.876-11.076-23.876-31.756L 352,297.282l 96,0 L 435.296,224z" data-tags="facebook, social" /> + \ No newline at end of file diff --git a/assets/fonts/icons.eot b/assets/fonts/icons.eot index 86dfad6..f9d45c9 100644 Binary files a/assets/fonts/icons.eot and b/assets/fonts/icons.eot differ diff --git a/assets/fonts/icons.svg b/assets/fonts/icons.svg index 6e330ac..9d111e7 100644 --- a/assets/fonts/icons.svg +++ b/assets/fonts/icons.svg @@ -37,5 +37,6 @@ This is a custom SVG font generated by IcoMoon. l0,47.593 C 256,409.546, 283.896,448, 359.935,448l 87.622,0 l0-79.285 l-71.565,0 c-21.241,0.035-23.876-11.076-23.876-31.756L 352,297.282l 96,0 L 435.296,224z" /> + \ No newline at end of file diff --git a/assets/fonts/icons.ttf b/assets/fonts/icons.ttf index 7c0ae65..eff116c 100644 Binary files a/assets/fonts/icons.ttf and b/assets/fonts/icons.ttf differ diff --git a/assets/fonts/icons.woff b/assets/fonts/icons.woff index c976673..dc54c4d 100644 Binary files a/assets/fonts/icons.woff and b/assets/fonts/icons.woff differ diff --git a/assets/img/ghost.png b/assets/img/ghost.png index 302c203..036fe4f 100644 Binary files a/assets/img/ghost.png and b/assets/img/ghost.png differ diff --git a/assets/img/user.png b/assets/img/user.png index 320f2fd..1331ac2 100644 Binary files a/assets/img/user.png and b/assets/img/user.png differ diff --git a/default.hbs b/default.hbs index 9bea0b2..f27966e 100644 --- a/default.hbs +++ b/default.hbs @@ -16,19 +16,12 @@ {{! Styles'n'Scripts }} + {{! Ghost outputs important style and meta data with this tag }} {{ghost_head}} - - {{! Your Ghost watermark in the top right corner}} - Ghost - - {{! Your blog icon in the top left corner }} - - John - {{! Everything else gets inserted here }} {{{body}}} diff --git a/index.hbs b/index.hbs index 8d37156..dc6a5df 100644 --- a/index.hbs +++ b/index.hbs @@ -1,9 +1,11 @@ {{!< default}}
-
-

{{settings.title}}

-

A designer, developer and entrepreneur. Spends his time travelling the world with a bag of kites. Likes journalism and publishing platforms.

+
+
+

{{settings.title}}

+

A designer, developer and entrepreneur. Spends his time travelling the world with a bag of kites. Likes journalism and publishing platforms.

+
diff --git a/post.hbs b/post.hbs index 7532a71..54486b6 100644 --- a/post.hbs +++ b/post.hbs @@ -9,7 +9,7 @@

{{title}}

- John O'Nolan, {{date published_at format='DD MMM YYYY'}} on What I Learned Building... + {{date published_at format='DD MMM YYYY'}} on What I Learned Building...