├── .gitignore ├── partials ├── navigation.hbs ├── pagination.hbs ├── navcard.hbs ├── author.hbs ├── sharefab.hbs └── sharedrop.hbs ├── package.json ├── index.hbs ├── post.hbs ├── README.md ├── assets ├── css │ ├── theme.css │ ├── animations.css │ └── screen.css └── js │ └── main.js └── default.hbs /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /partials/navigation.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "material", 3 | "version": "2.0.0", 4 | "author": { 5 | "email": "nauzethc@gmail.com", 6 | "name": "Nauzet Hernandez", 7 | "url": "http://www.nauzethdez.com/" 8 | }, 9 | "engines": { 10 | "ghost": ">=1.0.0" 11 | }, 12 | "license": "MIT", 13 | "config": { 14 | "posts_per_page": 10 15 | }, 16 | "demo": "http://www.nauzethdez.com/" 17 | } 18 | -------------------------------------------------------------------------------- /partials/pagination.hbs: -------------------------------------------------------------------------------- 1 | 26 | -------------------------------------------------------------------------------- /partials/navcard.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
{{title}}
5 | 6 | 7 | 10 | 11 | 12 | {{#if feature_image}} 13 | 14 | {{else}} 15 |
16 | {{/if}} 17 |
18 |
19 |

{{excerpt words="40"}}…

20 | Go 21 |
22 |
23 | -------------------------------------------------------------------------------- /partials/author.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 | 14 | {{#if profile_image}} 15 | 16 | {{else}} 17 | 18 | {{/if}} 19 |
20 |
21 |
{{name}}
22 |

{{bio}}

23 |
24 |
25 | -------------------------------------------------------------------------------- /partials/sharefab.hbs: -------------------------------------------------------------------------------- 1 |
2 | 5 | 6 | {{! Add intents here. 'intent' class opens popup }} 7 | {{! data params set popup width and height }} 8 | 9 |
10 | 11 | 17 | 18 | 22 | 23 | 24 | 25 | 31 |
32 |
33 | -------------------------------------------------------------------------------- /partials/sharedrop.hbs: -------------------------------------------------------------------------------- 1 |
2 | 3 | Share 4 | 5 | 6 | {{! Add intents here. 'intent' class opens popup }} 7 | {{! data params set popup width and height }} 8 | 9 |
10 | 11 | 17 | 18 | 22 | Google+ 23 | 24 | 25 | 31 |
32 |
33 | -------------------------------------------------------------------------------- /index.hbs: -------------------------------------------------------------------------------- 1 | {{!< default }} 2 | 3 | 4 | 5 | {{! Blog navbar }} 6 | 18 | 19 | 20 | {{! Blog header }} 21 |
22 | 23 |
24 |

{{@blog.title}}

25 |
{{@blog.description}}
26 |
27 | 28 | {{#if @blog.cover_image}} 29 | 30 | {{/if}} 31 |
32 | 33 | 34 | {{! Blog content }} 35 |
36 |
37 | 38 | {{#foreach posts}} 39 | {{#if feature_image}} 40 |
41 | 42 |
43 | {{else}} 44 |
45 | 46 |
47 | {{/if}} 48 | 49 |
{{title}}
50 | 51 | 52 | 55 | 56 | 57 | {{#if feature_image}}{{/if}} 58 |
59 | 60 |
61 | 62 | {{excerpt words="50"}}… 63 | 64 |
65 | 66 | 69 |
70 | {{/foreach}} 71 |
72 |
73 | 74 | 75 | {{! Blog pagination }} 76 | {{#if pagination}}{{pagination}}{{/if}} 77 | -------------------------------------------------------------------------------- /post.hbs: -------------------------------------------------------------------------------- 1 | {{!< default }} 2 | {{#post}} 3 | 4 | 5 | {{! Post navbar }} 6 | 18 | 19 | 20 | {{! Post header }} 21 |
22 | 23 | 32 | 33 |
34 | 35 |

{{title}}

36 |
37 | 38 | 42 |
43 |
44 | 45 | {{#if feature_image}} 46 | 47 | {{else}}{{#if @blog.cover_image}} 48 | 49 | {{/if}}{{/if}} 50 |
51 | 52 | 53 | 54 |
55 |
56 | {{> "sharefab"}} 57 |
58 |
59 | 60 | 61 | {{! Post Main }} 62 |
63 |
64 | 65 | {{! Content }} 66 |
{{content}}
67 |
68 | 69 | {{! Tags }} 70 | 75 | 76 | {{! Share }} 77 | 80 | 81 | {{! Author }} 82 | 85 | 86 |
87 |
88 | 89 | 90 | {{! Comments }} 91 |
92 |
93 |
94 | 95 | 96 | {{! Next and previous }} 97 | 109 | 110 | {{/post}} 111 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Ghost Material 2 | 3 | Material Design inspired theme for Ghost blogging platform. Visit my [blog](http://www.nauzethdez.com/) for a demo. 4 | 5 | 6 | ### Features 7 | 8 | * Zero-dependency on CSS frameworks or Javascript libraries 9 | * Mobile-first and adapted to all screens according to Material Design guidelines 10 | * CSS Flexbox for layout structure 11 | * CSS Animations (no jQuery or Javascript) 12 | 13 | 14 | ### Installation 15 | 16 | Go to your Ghost installation path and clone repository under `content/themes` directory. 17 | 18 | ``` 19 | cd /your/ghost/path 20 | cd content/themes/ 21 | git clone https://github.com/nauzethc/ghost-material.git 22 | ``` 23 | 24 | Then restart your Ghost service and select "Material" theme on your blog setup page. 25 | 26 | 27 | ### Customization 28 | 29 | #### Colors 30 | 31 | For color palette customizing you only have to edit the `assets/css/theme.css` file. I recommend to use [Material Palette](https://www.materialpalette.com/) web to generate color palette based on two main colors, one for backgrounds and one for accent (links and buttons). 32 | 33 | #### Animations 34 | 35 | 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. 36 | 37 | #### Components 38 | 39 | Some widgets are customizable via CSS classes. 40 | 41 | * Navigation Bar (`navbar`) 42 | * `shaded`: Add shadow 43 | * `fixed`: Set navbar as fixed on top 44 | * `autohide`: Hide/unhide navbar on scroll (`fixed` is required) 45 | 46 | 47 | * Header (`header`) 48 | * `shaded`: Add shadow 49 | * `bg-darken|bg-lighten`: It draws dark/light gradient on top of background images (for better readability) 50 | 51 | * Header Content (`header--content`) 52 | * `onTop|onMiddle|onBottom`: Align vertically header content 53 | 54 | 55 | * Cards (`card`) 56 | * `image`: Set bigger height on card header to show image 57 | * `slide`: Card is animated when is rendered 58 | 59 | * Card Header (`card--header`) 60 | * `bg-darken|bg-lighten`: It draws dark/light gradient on top of background images (for better readability) 61 | 62 | 63 | * FABs (`fab` class on ``,`