diff --git a/assets/css/screen.css b/assets/css/screen.css index 88fb487..f14857f 100644 --- a/assets/css/screen.css +++ b/assets/css/screen.css @@ -174,90 +174,8 @@ td, th{ padding: 0; } 2. General - Setting up some base styles ========================================================================== */ -html { - height: 100%; - max-height: 100%; - font-size: 62.5%; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - -body { - height: 100%; - max-height: 100%; - font-family: "Merriweather", serif; - letter-spacing: 0.01rem; - font-size: 1.8rem; - line-height: 1.75em; - color: #3A4145; - -webkit-font-feature-settings: 'kern' 1; - -moz-font-feature-settings: 'kern' 1; - -o-font-feature-settings: 'kern' 1; - text-rendering: geometricPrecision; -} - -::-moz-selection { - background: #D6EDFF; -} - -::selection { - background: #D6EDFF; -} - -h1, h2, h3, -h4, h5, h6 { - -webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; - -moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; - -o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; - color: #2E2E2E; - line-height: 1.15em; - margin: 0 0 0.4em 0; - font-family: "Open Sans", sans-serif; - text-rendering: geometricPrecision; -} - -h1 { - font-size: 5rem; - letter-spacing: -2px; - text-indent: -3px; -} - -h2 { - font-size: 3.6rem; - letter-spacing: -1px; -} - -h3 { - font-size: 3rem; - letter-spacing: -0.6px; -} - -h4 { - font-size: 2.5rem; -} - -h5 { - font-size: 2rem; -} - -h6 { - font-size: 2rem; -} - -a { - color: #4A4A4A; - transition: color 0.3s ease; -} - -a:hover { - color: #111; -} - p, ul, ol, dl { - -webkit-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1; - -moz-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1; - -o-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1; margin: 0 0 1.75em 0; - text-rendering: geometricPrecision; } ol, ul { @@ -559,565 +477,7 @@ button { z-index: 10; min-height: 100%; background: #fff; - -webkit-transition: -webkit-transform 0.5s ease; - transition: transform 0.5s ease; -} - -body.nav-opened .site-wrapper { - overflow-x: hidden; - -webkit-transform: translate3D(-240px, 0, 0); - -ms-transform: translate3D(-240px, 0, 0); - transform: translate3D(-240px, 0, 0); - -webkit-transition: -webkit-transform 0.3s ease; - transition: transform 0.3s ease; -} - - -/* ========================================================================== - 4. General - The main styles for the the theme - ========================================================================== */ - -/* Big cover image on the home page */ -.main-header { - position: relative; - display: table; - width: 100%; - height: 100vh; - margin-bottom: 5rem; - text-align: center; - background: #222 no-repeat center center; - background-size: cover; - overflow: hidden; -} - -.main-header .inner { - width: 80%; -} - -.main-nav { - position: relative; - padding: 35px 40px; - margin: 0 0 30px 0; -} - -.main-nav a { - text-decoration: none; - font-family: 'Open Sans', sans-serif; -} - -/* Navigation */ -body.nav-opened .nav-cover { - position: fixed; - top: 0; - left: 0; - right: 240px; - bottom: 0; - z-index: 200; -} - -.nav { - position: fixed; - top: 0; - right: 0; - bottom: 0; - z-index: 5; - width: 240px; - opacity: 0; - background: #111; - margin-bottom: 0; - text-align: left; - overflow-y: auto; - -webkit-transition: -webkit-transform 0.5s ease, - opacity 0.3s ease 0.7s; - transition: transform 0.5s ease, - opacity 0.3s ease 0.7s; -} - -body.nav-closed .nav { - -webkit-transform: translate3D(97px, 0, 0); - -ms-transform: translate3D(97px, 0, 0); - transform: translate3D(97px, 0, 0); -} - -body.nav-opened .nav { - opacity: 1; - -webkit-transition: -webkit-transform 0.3s ease, - opacity 0s ease 0s; - transition: transform 0.3s ease, - opacity 0s ease 0s; - -webkit-transform: translate3D(0, 0, 0); - -ms-transform: translate3D(0, 0, 0); - transform: translate3D(0, 0, 0); -} - -.nav-title { - position: absolute; - top: 45px; - left: 30px; - font-size: 16px; - font-weight: 100; - text-transform: uppercase; - color: #fff; -} - -.nav-close { - position: absolute; - top: 38px; - right: 25px; - width: 20px; - height: 20px; - padding: 0; - font-size: 10px; -} - -.nav-close:focus { - outline: 0; -} - -.nav-close:before, -.nav-close:after { - content: ''; - position: absolute; - top: 0; - width: 20px; - height: 1px; - background: rgb(150,150,150); - top: 15px; - -webkit-transition: background 0.15s ease; - transition: background 0.15s ease; -} - -.nav-close:before { - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); -} - -.nav-close:after { - -webkit-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); -} - -.nav-close:hover:before, -.nav-close:hover:after { - background: rgb(255,255,255); -} - -.nav ul { - padding: 90px 9% 5%; - list-style: none; - counter-reset: item; -} - -.nav li:before { - display: block; - float: right; - padding-right: 4%; - padding-left: 5px; - text-align: right; - font-size: 1.2rem; - vertical-align: bottom; - color: #B8B8B8; - content: counter(item, lower-roman); - counter-increment: item; -} -.nav li { - margin: 0; -} -.nav li a { - text-decoration: none; - line-height: 1.4; - font-size: 1.4rem; - display: block; - padding: 0.6rem 4%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} -.nav li a:after { - display: inline-block; - content: " ......................................................."; - color: rgba(255,255,255,0.2); - margin-left: 5px; -} -.nav .nav-current:before { - color: #fff; -} -.nav .nav-current a:after { - content: " "; - border-bottom: rgba(255,255,255,0.5) 1px solid; - width: 100%; - height: 1px; -} - -.nav a:link, -.nav a:visited { - color: #B8B8B8; -} - -.nav li.nav-current a, -.nav a:hover, -.nav a:active, -.nav a:focus { - color: #fff; -} - -.subscribe-button { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - display: block; - position: absolute; - bottom: 30px; - left: 30px; - right: 30px; - height: 38px; - padding: 0 20px; - color: #111 !important; /* Overides `.nav a:link, .nav a:visited` colour */ - text-align: center; - font-size: 12px; - font-family: "Open Sans", sans-serif; - text-transform: uppercase; - text-decoration: none; - line-height: 35px; - border-radius: 3px; - background: #fff; - transition: all ease 0.3s; -} -.subscribe-button:before { - font-size: 9px; - margin-right: 6px; -} - - -/* Create a bouncing scroll-down arrow on homepage with cover image */ -.scroll-down { - display: block; - position: absolute; - z-index: 100; - bottom: 45px; - left: 50%; - margin-left: -16px; - width: 34px; - height: 34px; - font-size: 34px; - text-align: center; - text-decoration: none; - color: rgba(255,255,255,0.7); - -webkit-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); - -webkit-animation: bounce 4s 2s infinite; - animation: bounce 4s 2s infinite; -} - -/* Stop it bouncing and increase contrast when hovered */ -.scroll-down:hover { - color: #fff; - -webkit-animation: none; - animation: none; -} - -/* Put a semi-opaque radial gradient behind the icon to make it more visible - on photos which happen to have a light background. */ -.home-template .main-header:after { - display: block; - content: " "; - width: 150px; - height: 130px; - border-radius: 100%; - position: absolute; - bottom: 0; - left: 50%; - margin-left: -75px; - background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%); -} - -/* Hide when there's no cover image or on page2+ */ -.no-cover .scroll-down, -.no-cover.main-header:after, -.paged .scroll-down, -.paged .main-header:after { - display: none -} - -/* Appears in the top left corner of your home page */ -.blog-logo { - display: block; - float: left; - background: none !important; /* Makes sure there is never a background */ - border: none !important; /* Makes sure there is never a border */ -} - -.blog-logo img { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - display: block; - height: 38px; - padding: 1px 0 5px 0; - width: auto; -} - -.menu-button { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - display: inline-block; - float: right; - height: 38px; - padding: 0 15px; - border-style: solid; - border-width: 1px; - opacity: 1; - text-align: center; - font-size: 12px; - text-transform: uppercase; - line-height: 35px; - white-space: nowrap; - border-radius: 3px; - transition: all 0.5s ease; -} -.menu-button:before { - font-size: 12px; - font-weight: bold; - margin-right: 6px; - position: relative; - top: 1px; -} -.menu-button:hover { - background: #fff; -} -.menu-button:focus { - outline: 0; -} - -/* When the navigation is closed */ -.nav-closed .menu-button { - color: #fff; - border-color: rgba(255, 255, 255, 0.6); -} -.nav-closed .menu-button:hover { - color: #222; -} - -/* When the navigation is closed and there is no cover image */ -.nav-closed .no-cover .menu-button { - border-color: #BFC8CD; - color: #9EABB3; -} -.nav-closed .no-cover .menu-button:hover { - border-color: #555; - color: #555; -} - -/* When the navigation is opened */ -.nav-opened .menu-button { - padding: 0 12px; - background: #111; - border-color: #111; - color: #fff; - -webkit-transform: translate3D(94px, 0, 0); - -ms-transform: translate3D(94px, 0, 0); - transform: translate3D(94px, 0, 0); - transition: all 0.3s ease; -} - -.nav-opened .menu-button .word { - opacity: 0; - transition: all 0.3s ease; -} - -/* Special styles when overlaid on an image*/ -.main-nav.overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - height: 70px; - border: none; - background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%); -} -.no-cover .main-nav.overlay { - background: none; -} - -/* The details of your blog. Defined in ghost/settings/ */ -.page-title { - margin: 10px 0 10px 0; - font-size: 5rem; - letter-spacing: -1px; - font-weight: 700; - font-family: "Open Sans", sans-serif; - color: #fff; -} - -.page-description { - margin: 0; - font-size: 2rem; - line-height: 1.5em; - font-weight: 400; - font-family: "Merriweather", serif; - letter-spacing: 0.01rem; - color: rgba(255,255,255,0.8); -} - -.no-cover.main-header { - min-height: 160px; - max-height: 40vh; - background: #f5f8fa; -} - -.no-cover .page-title { - color: rgba(0,0,0,0.8); -} - -.no-cover .page-description { - color: rgba(0,0,0,0.5); -} - -/* Add subtle load-in animation for content on the home page */ -.home-template .page-title { - -webkit-animation: fade-in-down 0.6s; - animation: fade-in-down 0.6s both; - -webkit-animation-delay: 0.2s; - animation-delay: 0.2s; -} -.home-template .page-description { - -webkit-animation: fade-in-down 0.9s; - animation: fade-in-down 0.9s both; - -webkit-animation-delay: 0.1s; - animation-delay: 0.1s; -} - -/* Every post, on every page, gets this style on its
tag */ -.post { - position: relative; - width: 80%; - max-width: 710px; - margin: 4rem auto; - padding-bottom: 4rem; - border-bottom: #EBF2F6 1px solid; - word-wrap: break-word; -} - -/* Add a little circle in the middle of the border-bottom on our .post - just for the lolz and stylepoints. */ -.post:after { - display: block; - content: ""; - width: 7px; - height: 7px; - border: #E7EEF2 1px solid; - position: absolute; - bottom: -5px; - left: 50%; - margin-left: -5px; - background: #FFF; - border-radius: 100%; - box-shadow: #FFF 0 0 0 5px; -} - -body:not(.post-template) .post-title { - font-size: 3.6rem; -} - -body.page-template .post-title { - font-size: 5rem; -} - -.post-title a { - text-decoration: none; -} - -.post-excerpt p { - margin: 0; - font-size: 0.9em; - line-height: 1.7em; -} - -.read-more { - text-decoration: none; -} - -.post-meta { - display: block; - margin: 1.75rem 0 0 0; - font-family: "Open Sans", sans-serif; - font-size: 1.5rem; - line-height: 2.2rem; - color: #9EABB3; -} - -.author-thumb { - width: 24px; - height: 24px; - float: left; - margin-right: 9px; - border-radius: 100%; -} - -.post-meta a { - color: #9EABB3; - text-decoration: none; -} - -.post-meta a:hover { - text-decoration: underline; -} - -.user-meta { - position: relative; - padding: 0.3rem 40px 0 100px; - min-height: 77px; -} - -.post-date { - display: inline-block; - margin-left: 8px; - padding-left: 12px; - border-left: #d5dbde 1px solid; - text-transform: uppercase; - font-size: 1.3rem; - white-space: nowrap; -} - -.user-image { - position: absolute; - top: 0; - left: 0; -} - -.user-name { - display: block; - font-weight: 700; -} - -.user-bio { - display: block; - max-width: 440px; - font-size: 1.4rem; - line-height: 1.5em; -} - -.publish-meta { - position: absolute; - top: 0; - right: 0; - padding: 4.3rem 0 4rem 0; - text-align: right; -} - -.publish-heading { - display: block; - font-weight: 700; -} - -.publish-date { - display: block; - font-size: 1.4rem; - line-height: 1.5em; + transition: transform 0.5s ease; } @@ -1400,7 +760,6 @@ body.page-template .post-title { /* Location, website, and link */ .author-profile .author-meta { margin: 2rem 0; - font-family: "Merriweather", serif; letter-spacing: 0.01rem; font-size: 1.7rem; } @@ -1486,7 +845,7 @@ body.page-template .post-title { padding: 4px 10px 5px; text-transform: uppercase; font-size: 1.1rem; - font-family: "Open Sans", sans-serif; + font-family: 'Lato', sans-serif; color: rgba(255,255,255,0.8); border: rgba(255,255,255,0.5) 1px solid; border-radius: 4px; @@ -1578,7 +937,7 @@ body.page-template .post-title { width: 80%; max-width: 710px; margin: 4rem auto; - font-family: "Open Sans", sans-serif; + font-family: 'Lato', sans-serif; font-size: 1.3rem; color: #9EABB3; text-align: center; @@ -1707,48 +1066,11 @@ body.page-template .post-title { } .gh-subscribe-rss { - font-family: 'Open Sans', sans-serif; + font-family: 'Lato', sans-serif; font-size: 1.2rem; line-height: 1.4em; } -/* ========================================================================== - 11. Footer - The bottom of every page - ========================================================================== */ - -.site-footer { - position: relative; - margin: 8rem 0 0 0; - padding: 1rem 15px; - font-family: "Open Sans", sans-serif; - font-size: 1rem; - line-height: 1.75em; - color: #BBC7CC; -} - -.site-footer a { - color: #BBC7CC; - text-decoration: none; - font-weight: bold; -} - -.site-footer a:hover { - border-bottom: #bbc7cc 1px solid; -} - -.poweredby { - display: block; - width: 45%; - float: right; - text-align: right; -} - -.copyright { - display: block; - width: 45%; - float: left; -} - /* ========================================================================== 12. Media Queries - Smaller than 900px diff --git a/assets/scss/main.scss b/assets/scss/main.scss new file mode 100644 index 0000000..257751d --- /dev/null +++ b/assets/scss/main.scss @@ -0,0 +1,242 @@ +$header-color: #2e2e2e; +$text: #3a4145; +$link-text: #4a4a4a; +$highlighted-link-text: #111; +$bg: #3a4145; +$arrow-bg: rgba(255, 255, 255, .7); +$white: #fff; + +html { + font-size: 62.5%; + height: 100%; + max-height: 100%; +} + +body { + color: $text; + font-family: 'Lato', sans-serif; + font-size: 1.8rem; + height: 100%; + letter-spacing: .01rem; + line-height: 1.75em; + max-height: 100%; + + .post-title { + &:not(.post-template) { + font-size: 3.6rem; + } + } + + &.page-template { + .post-title { + font-size: 5rem; + } + } +} + +h1, +h2, +h3, +h4, +h5, +h6 { + color: $header-color; + font-family: 'Oxygen', sans-serif; + line-height: 2em; + margin: 0 0 .4em; +} + +h1 { + font-size: 5rem; +} + +h2 { + font-size: 3.6rem; +} + +h3 { + font-size: 3rem; +} + +h4 { + font-size: 2.5rem; +} + +h5 { + font-size: 2rem; +} + +h6 { + font-size: 2rem; +} + +a { + color: $link-text; + transition: color .3s ease; + + &:hover { + color: $highlighted-link-text; + } +} + + +// Big cover on the frontpage +.main-header { + background: $bg no-repeat center center; + background-size: cover; + + display: table; + height: 100vh; + margin-bottom: 5rem; + overflow: hidden; + + position: relative; + text-align: center; + width: 100%; + + .inner { + width: 80%; + } +} + +// Bouncing arrow +.scroll-down { + animation: bounce 4s 2s infinite; + bottom: 45px; + color: $arrow-bg; + + display: block; + font-size: 34px; + height: 34px; + left: 50%; + margin-left: -16px; + position: absolute; + text-align: center; + text-decoration: none; + transform: rotate(-90deg); + width: 34px; + z-index: 100; + + // Stop the bouncing while hovered + &:hover { + animation: none; + color: $white; + } +} + +$post-bg: $white; +$post-border: #ebf2f6; +$post-after-border: #e7eef2; +$post-meta: #9eabb3; +$post-meta-link: #9eabb3; + +// This class is applied to all posts +.post { + border-bottom: $post-border 1px solid; + margin: 4rem auto; + max-width: 710px; + padding-bottom: 4rem; + position: relative; + width: 80%; + word-wrap: break-word; +} + +.post-title { + a { + text-decoration: none; + } +} + +.post-excerpt { + p { + font-size: .9em; + line-height: 1.7em; + margin: 0; + } +} + +.read-more { + text-decoration: none; +} + +.post-meta { + color: $post-meta; + display: block; + font-family: 'Lato', sans-serif; + font-size: 1.5rem; + line-height: 2.2rem; + margin: 1.75rem 0; + word-spacing: .2rem; + + a { + color: $post-meta-link; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } +} + +$post-date-border: #d5dbde; + +.post-date { + border-left: $post-date-border 1px solid; + display: inline-block; + font-size: 1.3rem; + margin-left: 8px; + padding-left: 12px; + text-transform: uppercase; + white-space: nowrap; +} + +.author-thumb { + border-radius: 100%; + float: left; + height: 24px; + margin-right: 9px; + width: 24px; +} + +.user-meta { + min-height: 77px; + padding: .3rem 40px 0 100px; + position: relative; +} + +.user-image { + left: 0; + position: absolute; + top: 0; +} + +.user-name { + display: block; + font-weight: 700; +} + +.user-bio { + display: block; + font-size: 1.4rem; + line-height: 1.5rem; + max-width: 440px; +} + +.publish-meta { + padding: 4.3rem 0 4rem; + position: absolute; + right: 0; + text-align: right; + top: 0; +} + +.publish-heading { + display: block; + font-weight: 700; +} + +.publish-date { + display: block; + font-size: 1.4rem; + line-height: 1.5rem; +} diff --git a/author.hbs b/author.hbs index eb7b1de..b6e827a 100644 --- a/author.hbs +++ b/author.hbs @@ -6,12 +6,6 @@ {{!-- Everything inside the #author tags pulls data from the author --}} {{#author}}
-
diff --git a/bower.json b/bower.json index 573acd3..7274e2d 100644 --- a/bower.json +++ b/bower.json @@ -2,6 +2,7 @@ "name": "@christiaangoossens/chrg.nl", "description": "The theme for chrg.nl", "dependencies": { - "waypoints": "^4.0.1" + "waypoints": "^4.0.1", + "animate.css": "^3.5.2" } } diff --git a/default.hbs b/default.hbs index d6b1a96..652ea74 100644 --- a/default.hbs +++ b/default.hbs @@ -18,6 +18,8 @@ {{!-- Styles'n'Scripts --}} + + @@ -36,7 +38,7 @@ {{{body}}} - + {{!-- jQuery needs to come before `{{ghost_foot}}` so that jQuery can be used in code injection --}} diff --git a/index.hbs b/index.hbs index 05e9603..6fc13ad 100644 --- a/index.hbs +++ b/index.hbs @@ -3,19 +3,13 @@ {{!-- The big featured header --}}
-

{{@blog.title}}

{{@blog.description}}

- +
{{!-- The main content area on the homepage --}} diff --git a/page.hbs b/page.hbs index 9bea823..64ec36c 100644 --- a/page.hbs +++ b/page.hbs @@ -7,12 +7,6 @@ {{#post}}
-
diff --git a/partials/navigation.hbs b/partials/navigation.hbs index 1cf8d82..8b13789 100644 --- a/partials/navigation.hbs +++ b/partials/navigation.hbs @@ -1,17 +1 @@ -
-

Menu

- - - -
    - {{#foreach navigation}} -
  • {{label}}
    • - {{/foreach}} -
- {{#if @labs.subscribers}} - - {{else}} - - {{/if}} -
- + diff --git a/post.hbs b/post.hbs index 5d85551..c00a69a 100644 --- a/post.hbs +++ b/post.hbs @@ -7,12 +7,6 @@ {{#post}}
-