nauzethc/ghost-material

Material Design theme for Ghost blogging platform

Ghost Material

Material Design inspired theme for Ghost blogging platform. Visit my blog for a demo.

Features

• Zero-dependency on CSS frameworks or Javascript libraries
• Mobile-first and adapted to all screens according to Material Design guidelines
• CSS Flexbox for layout structure
• CSS Animations (no jQuery or Javascript)

Installation

Go to your Ghost installation path and clone repository under content/themes directory.

cd /your/ghost/path
cd content/themes/
git clone https://github.com/nauzethc/ghost-material.git

Then restart your Ghost service and select "Material" theme on your blog setup page.

Customization

Colors

For color palette customizing you only have to edit the assets/css/theme.css file. I recommend to use Material Palette web to generate color palette based on two main colors, one for backgrounds and one for accent (links and buttons).

Animations

Animation timings, functions and definitions are customizable via assets/css/animations.css. Navbar autohide and cards slide-on events are triggered using Javascript, but animations and transitions are fully CSS based.

Components

Some widgets are customizable via CSS classes.

• Navigation Bar (navbar)

  • shaded: Add shadow
  • fixed: Set navbar as fixed on top
  • autohide: Hide/unhide navbar on scroll (fixed is required)

• Header (header)

  • shaded: Add shadow

  • bg-darken|bg-lighten: It draws dark/light gradient on top of background images (for better readability)

  • Header Content (header--content)

    • onTop|onMiddle|onBottom: Align vertically header content

• Cards (card)

  • image: Set bigger height on card header to show image

  • slide: Card is animated when is rendered

  • Card Header (card--header)

    • bg-darken|bg-lighten: It draws dark/light gradient on top of background images (for better readability)

• FABs (fab class on <a>,<button> elements)

  • large: Display a bigger button (55.5px)
  • disabled: It's rendered as disabled button
  • ripple: Show ripple animation on click

• Buttons (button class on <a>,<button> elements)

  • shaded: Add shadow
  • solid: Add solid color background
  • ripple: Show ripple animation on click

Motivation

Ghost Material is widely motivated by Materialize and Material Design Lite projects. I've tried to use both frameworks with Ghost before but for some reason none of them convinced me, so I wanted to replicate what I like from them without using any heavy library or framework, just vanilla Javascript and CSS3.

License

Creative Commons BY-SA 4.0 http://creativecommons.org/licenses/by-sa/4.0/

ghost-material's Issues

No licence supplied

Would it be possible to specify a licence for this theme? I would like to use this as a base for a company blog, but need to make sure we meet any licence requirements.
Thanks

Card images are not well rendered on smartphone

On a smartphone's screen, card images are not well rendered:

It's ok on landscape mode.

(plus, look at the top, it's cropped when you hit the bottom of the page)

Missing helper

When attempting to load a post directly I get the following page [post.hbs] Missing helper: "image_url"

El texto de los code tag sale del card

El texto de los code tag sale del card. Cuando se carga la página el texto del tag code se ve bien por que se agrega scroll horizontal, pero en la lista de post el texto largo se sale de los cards.

Aquí unas capturas de pantalla:

http://m.imgur.com/z5fh7lW,B4YBm0y

No newlines in blockquotes

This is a blockquote using the material theme:

And this is the same blockquote using the casper theme:

As you can see, all the newlines are missing in the material theme.

Is this theme still being maintained?

Great theme. But is it still being maintained? Material design 2 is already out for a while.

Thanks!

Share button not working on desktop browsers

Two issues:
1.) The share button only works on mobile browser. It doesn't show up the social share buttons when using Desktop browsers.
2.) When clicking share button which works in mobile browser, pressing the button again doesn't close the share buttons. I'm expecting it to close again.

Card image is messy when there is no cover image

When a post has no cover image, the "card image" at the bottom is messy.

It shouldn't be transparent by default when there is no cover image to avoid this issue.

The card length is not same when the content is too short

As the photo showed, when the content is too short,the card length will be not same as others.
I find the issue #6
And that is my url: http://blog.kffuck.com/page/3/

create new navigation section

Hello,

Can you explain me how can I create new sections into my Ghost site ?

For exemple a section tuto or a section french ?

Thanks :)

CSS Markdown

Hello,

comments in a sh code are not colorized. Is that normal ?

$ <command> # comments

Where could I edit to change the personal information?

Like the URLs linked to these buttons(twitter, github, google plus).

how to edit font style

how to change font style?

Question: Why are you not convinced on MDL or Materialize?

As title says, could you elaborate why you are not convinced of just using MDL/Materialize?

这个效果很炫

效果真的很喜欢，但如果文章没有主题图片就会显示有些别扭

highlight js is not in this repo

Hello (again)

I have been verified and there is this line on your blog :

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>

and in files that I have been downloaded here, there is not this line.

How can I do to add it, and have the same color that your blog ?

I tried to add

    {{! Scripts }}
    <script src="{{asset "assets/js/main.js"}}"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>

But it seems do not working. Any solutions ? :)

The card slide's length should be fixed (not variable)

This is an example of the issue:

As you can see, the length of these 2 posts are not the same.
It happens when the title is too short.

Theme is not responsive

When using quotes or code, the text doesn't wrap on its container and extends outside of it.