theme: Add terrassa theme

1 files changed, 165 insertions, 0 deletions

diff --git a/themes/terrassa/README.md b/themes/terrassa/README.md
new file mode 100644
index 0000000..d74f1db
--- /dev/null
+++ b/themes/terrassa/README.md
@@ -0,0 +1,165 @@
+# Terrassa - Hugo Theme
+
+Terrassa is a simple, fast and responsive theme for Hugo with a strong focus on accessibility made from scratch.
+
+![Hugo Terrassa theme screenshot](https://github.com/danielkvist/hugo-terrassa-theme/blob/master/images/screenshot.png)
+
+## Theme features
+
+- Coherent responsive design.
+- Consistent design throughout the entire site.
+- Classic navigation menu in large screen sizes.
+- Hamburger navigation menu in small screen sizes.
+- Great focus on accessibility.
+- Customizable call to action on the home page.
+- Contact form.
+- Ready for blogging.
+
+And much more.
+
+## Installation
+
+To install Terrassa run the followings command inside your Hugo site:
+
+```bash
+$ cd themes
+$ git clone https://github.com/danielkvist/hugo-terrassa-theme.git terrassa
+```
+
+Or
+
+```bash
+$ cd themes
+$ git submodule add https://github.com/danielkvist/hugo-terrassa-theme.git terrassa
+```
+
+> You can also download the last release [here](https://github.com/danielkvist/hugo-terrassa-theme/releases).
+
+Back to your Hugo site directory open the *config.toml* file and add the following line:
+
+```toml
+theme = "terrassa"
+```
+
+And that's it.
+
+## Archetypes
+
+Terrassa includes three base archetypes:
+* *default*: for content such as blogs posts.
+* *section*: for the sections on your Home page.
+* *page*: for pages like the About page.
+
+So be careful. Creating a new site with Hugo also creates a default archetype that replaces the one provided by Terrassa.
+
+### Home and Single pages
+
+To create your home page run the following command inside your Hugo site:
+
+```bash
+$ hugo new _index.md -k page
+```
+
+Or to create another page:
+
+```bash
+$ hugo new example.md -k page
+```
+
+You'll get something like this:
+
+```markdown
+---
+title: ""
+description: ""
+images: []
+draft: true
+menu: main
+weight: 0
+---
+```
+
+Some properties are used as follows:
+* *title*: is the name that will be displayed in the menu. In the rest of the single pages the main title of the content.
+* *description*: in the case of the home page the description is not shown. In the rest of the single pages it is shown as a subtitle.
+* *images*: in the case of the home page the first image is used as the background image for the hero and to share on social networks (with [Twitter Cards](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards.html) and [Facebook Graph](https://developers.facebook.com/docs/graph-api/)). In every other page or post is used only for share on social networks.
+* *weight*: sets the order of the items in the menu.
+
+## Home page Sections
+
+To create a new section in your Home page follow the next steps:
+
+```bash
+$ hugo new sections/example.md -k section
+```
+
+You'll come across something like this:
+
+```markdown
+---
+title: "Example"
+description: ""
+draft: true
+weight: 0
+---
+```
+
+The *title* is used as the title of your new section and the content is the body. At this moment the *description* is not used for anything.
+
+The *weight* defines the order in case of having more than one section.
+
+### Blog or List pages
+
+To create a Blog or a page with a similar structure follow these steps:
+
+```bash
+$ hugo new posts/_index.md -k page
+```
+
+> In this case it is only necessary to set, if wanted, the *title* and the *weight* in the *_index.md*.
+
+To add a new posts run the following command:
+
+```bash
+$ hugo new posts/bad-example.md
+```
+
+Inside this file you'll find something like this:
+
+```markdown
+---
+title: "Bad example"
+description: ""
+date: 2018-12-27T21:09:45+01:00
+publishDate: 2018-12-27T21:09:45+01:00
+author: "John Doe"
+images: []
+draft: true
+tags: []
+---
+```
+The *title* and *description* are used as the main title and subtitle respectively.
+
+> You can find more information about each parameter in the [official documentation](https://gohugo.io/content-management/front-matter/).
+
+Then, the corresponding section will show a list of cards with the *title*, the *date*, a *summary of the content* (truncated to 480 words) and a list of *tags* if any.
+
+![Hugo Terrassa theme Blog section screenshot](https://github.com/danielkvist/hugo-terrassa-theme/blob/master/images/blog-screenshot.png)
+
+### Contact
+
+For the contact page follow these instructions:
+
+```bash
+$ hugo new contact/_index.md -k page
+```
+
+The *title* and *description* will be used as the main title and subtitle respectively with a contact form. The rest of the options are defined in the [config.toml](https://github.com/danielkvist/hugo-terrassa-theme/blob/master/exampleSite/config.toml).
+
+## Config
+
+For the configuration check the [config.toml](https://github.com/danielkvist/hugo-terrassa-theme/blob/master/exampleSite/config.toml) of the *exampleSite* and the [official documentation](https://gohugo.io/getting-started/configuration/) to see all the options.
+
+## Font Awesome
+
+Terrassa uses the [Font Awesome](https://fontawesome.com/) icons through a CDN. Something that for the moment affects the performance.