From 56675bc3f98949480bc56b7202ca7de4dff3ff6a Mon Sep 17 00:00:00 2001 From: Chip Senkbeil Date: Tue, 29 Sep 2015 23:33:46 -0500 Subject: Added project screenshots, updated the README with more documentation, updated theme.toml with link to github --- README.md | 145 ++++++++++++++++++++++++++++++++++++++++++++++++++ images/screenshot.png | Bin 0 -> 1291021 bytes images/tn.png | Bin 0 -> 601336 bytes theme.toml | 2 +- 4 files changed, 146 insertions(+), 1 deletion(-) create mode 100644 images/screenshot.png create mode 100644 images/tn.png diff --git a/README.md b/README.md index 0346971..c5bd087 100644 --- a/README.md +++ b/README.md @@ -21,12 +21,21 @@ _project_ for various rendering. - Current lightbox.js version is `2.8.1`. - Current infinitescroll.js version is `2.1.0`. +![GridSide Theme Screenshot](https://raw.githubusercontent.com/chipsenkbeil/grid-side/master/images/screenshot.png) + Contents -------- - [Installation](#installation) - [Getting Started](#getting-started) - [The Config File](#the-config-file) + - [Setting the homepage header](#setting-the-homepage-header) + - [Setting the homepage footer](#setting-the-homepage-footer) + - [Adding homepage cells](#adding-homepage-cells) + - [Specifying the main menu](#specifying-the-main-menu) + - [Creating a post](#creating-a-post) + - [Creating a project page](#creating-a-project-page) + - [Creating a gallery image](#creating-a-gallery-image) - [Adding a custom post section](#adding-a-custom-post-section) - [Adding a custom project section](#adding-a-custom-project-section) - [Adding a custom gallery section](#adding-a-custom-gallery-section) @@ -56,6 +65,142 @@ You'll find a file called [`config.toml`][config.toml]. To use it, copy the file contains detailed explanation of each available property. Feel free to customize this theme as you like. +### Setting the header ### + +The header of the homepage serves as the main attraction for visitors. You +can provide your name, a description, and your email address on top of an +image. + +```toml +[Params.Header] + + name = "Your name" + description = "Your description" + email = "your@email.com" + image = "path/to/your/header/image" +``` + +Each field in the header is optional, meaning that you can choose to not +provide a name, description, or email. There are additional options you can use +in the header section as well! For more information, check out the +example [`config.toml`][config.toml]. + +### Setting the homepage footer ### + +The footer of the homepage serves to provide contact links and other +miscellaneous connections from your main website. Each entry is composed of a +font awesome icon and a url. The icon is specified via `icon_class` and +represents the specific font awesome icon. E.g. `twitter` becomes +`fa fa-twitter`. The url is specified via `icon_link`. + +```toml +[Params.Footer] + + [[Params.Footer.List]] + + icon_class = "twitter" + icon_link = "https://www.twitter.com/..." + + [[Params.Footer.List]] + + icon_class = "github" + icon_link = "https://www.github.com/..." +``` + +Each field in the header is optional, meaning that you can choose to not +provide a name, description, or email. There are additional options you can use +in the header section as well! For more information, check out the +example [`config.toml`][config.toml]. + +### Adding homepage cells ### + +The other main aspect of the homepage is the homepage cells, or the grid of +images below your header. Each cell contains an image depicting its content +along with a title that is visible upon hovering over it. Each cell acts as a +hyperlink to other content on your site. + +```toml +[Params.Cells] + + [[Params.Cells.List]] + + name = "Section name" + link = "/some/path/on/your/site" + image = "/some/image/file" +``` + +There are additional options you can use for each cell as well! For more +information, check out the example [`config.toml`][config.toml]. + +### Specifying the main menu ### + +The main menu used on all list templates is specified via the menu name, +"Main". The fastest way to set your menu is to specify the `SectionPagesMenu` +option at the root of your config. + +```toml +SectionPagesMenu = "Main" +``` + +### Creating a post ### + +Each post in a post section should have the following front matter: + +```toml ++++ +title = "Post title" +date = "YYYY-MM-DD" +tags = [ "tag1", "tag2", ... ] +categories = [ "category1", ... ] ++++ +``` + +Additionally, you can specify an image via the front matter `image = "url"`. + +### Creating a project page ### + +Each project in a project section should have the following front matter: + +```toml ++++ +title = "Project title" +tags = [ "tag1", "tag2", ... ] +categories = [ "category1", ... ] ++++ +``` + +Furthermore, an image should be provided via `image = "url"` for more visual +effect. If one is not provided, a placeholder will be used. + +Additionally, you can provide videos as an alternative to an image, which will +be displayed using the HTML5 video tag. Each of the following is optional: + +```toml ++++ +video_mp4 = "/path/to/mp4" +video_webm = "/path/to/webm" +video_ogv = "/path/to/ogv" +video_3gp = "/path/to/3gp" +video_fallback = "/path/to/image" ++++ +``` + +The video fallback option is used both as the poster of the loading HTML5 video +and as the filler image if HTML5 video is not supported by the browser. + +### Creating a gallery image ### + +Each gallery image needs to be specified through the front matter of an +individual content item. + +```toml ++++ +title = "Image title used in lightbox" +date = "YYYY-MM-DD" +image = "/path/to/image" ++++ +``` + ### Adding a custom post section ### By default, the theme provides a custom view of `post/`. If you would like diff --git a/images/screenshot.png b/images/screenshot.png new file mode 100644 index 0000000..da8ba7f Binary files /dev/null and b/images/screenshot.png differ diff --git a/images/tn.png b/images/tn.png new file mode 100644 index 0000000..7c585df Binary files /dev/null and b/images/tn.png differ diff --git a/theme.toml b/theme.toml index 3eda190..5280301 100644 --- a/theme.toml +++ b/theme.toml @@ -2,7 +2,7 @@ name = "GridSide" license = "MIT" licenselink = "https://github.com/chipsenkbeil/grid-side/blob/master/LICENSE.md" description = "Personal portfolio, blog, and gallery for use by the Hugo generator." -homepage = "http://chipsenkbeil.github.io/grid-side" +homepage = "https://github.com/chipsenkbeil/grid-side" tags = ["blog", "portfolio", "projects"] features = ["blog", "portfolio", "gallery"] min_version = 0.14 -- cgit v1.2.3