├── .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 | 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 |

22 |

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 | 15 | 16 | 17 | 18 | 22 | 23 | 24 | 25 | 29 | 30 | 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 | 15 | Twitter 16 | 17 | 18 | 22 | Google+ 23 | 24 | 25 | 29 | Facebook 30 | 31 |

32 |

33 | -------------------------------------------------------------------------------- /index.hbs: -------------------------------------------------------------------------------- 1 | {{!< default }} 2 | 3 | 4 | 5 | {{! Blog navbar }} 6 | 18 | 19 | 20 | {{! Blog header }} 21 | 32 | 33 | 34 | {{! Blog content }} 35 |

36 |

37 | 38 | {{#foreach posts}} 39 | {{#if feature_image}} 40 |

41 | 42 |

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 | 51 | 52 | 53 | 54 |

55 |

56 | {{> "sharefab"}} 57 |

58 |

59 | 60 | 61 | {{! Post Main }} 62 |

63 |

64 | 65 | {{! Content }} 66 |

67 |

68 | 69 | {{! Tags }} 70 |

71 | {{#foreach tags}} 72 | {{name}} 73 | {{/foreach}} 74 |

75 | 76 | {{! Share }} 77 | 80 | 81 | {{! Author }} 82 |

83 | {{#author}}{{> "author"}}{{/author}} 84 |

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 ``,`

{{title}}

{{name}}

{{@blog.title}}

{{@blog.description}}

{{title}}

{{title}}

37 | 38 | 40 | {{date format='DD MMM YYYY'}} 41 | 42 |