Adding Blog Description to Blog Header about ghost-caffeine-theme HOT 4 CLOSED

I have solved this for now by adding a blog.description to aside.hbs

<div class="blog-header">
    <a title="Link to homepage for {{@blog.title}}" href="{{@blog.url}}/#open">
        <h1 class="profile-title hvr-float">{{@blog.title}}</h1>
        <h2 class="profile-description">{{@blog.description}}</h2>
    </a>
    {{navigation}}
</div>

…and changing caffeine-theme.css to add an blog-header h2 style and modify h1

h1{color:#F6F4E9;margin:75px 0 10px;font-size:2.75rem}.blog-header h2{color:#F6F4E9;margin:0px 0 25px;font-size:2.00rem}.blog-header

However, I'm not closing this issue because:

1. The style should be added through SCSS build (but I don't have this toolchain set up).
2. I don't understand why this theme completely ignores the ghost native @blog.description and instead uses a header insert of profile_resume. I presume it is some interaction with the cover. But I think a feature supported by the general control panel should function in the theme.

from ghost-caffeine-theme.

HI @ChristopherA,

Thanks for reaching out and for checking out the theme, I hope you're enjoying it so far!

The omittance of the blog.description from the header was an intentional design choice. This theme was designed with "mobile first" in mind. By adding the description to the header, when you open the blog from a mobile device, you'll see that you have less real estate to work with and wind up with the issue below:

You can adjust by editing the text, making it smaller, moving the cards lower in the fold, and you may wind up with something like below.

Sure this can work, but this is assuming that everyone's description is only several words long. The variability in this makes it hard to design and style.

In addition, if you look at the UX side of things, wIth this change, your first card starts around the middle of your screen, and your first post title is already at the bottom of the screen (and potentially even cut off). The intention of a blog is to draw your audience into your first post, and the description at the top potentially distracts them. The header only contains the blog title & links to guide the user with navigation around the blog if needed.

The best thing about open sourced code is that if you truly felt strongly about adding the description, you fork pull the code and you're more than welcome to make the changes yourself! Bonus points if you can also make it an "opt-in" feature that can be easily turned on/off through configuration, I would be more than happy to add it into the project. However, this is not something I will add by default.

from ghost-caffeine-theme.

Thanks for your advice. I recognize the challenge with mobile layout. What were the style changes that you made for the second screenshot? I'd like to incorporate them.

If it is useful, I've added you as a contributor to my fork in case you want to test anything (I still have to manually import the theme to my blog for testing).

from ghost-caffeine-theme.

I made the style changes by playing around in the Chrome developer tools for fast prototyping.

You'll need to add a margin-top to the entire blog post container. So you can add a media query definition to _media-queries.scss with a class selector for .page-index and just add a margin-top. For the description, in _media-queries.scss, add a style for .blog-header and add a different font size for that description.

from ghost-caffeine-theme.