From 2a2311ea3fb1b89a266668bfd16aa96475fc183e Mon Sep 17 00:00:00 2001 From: Dimitri Staessens Date: Wed, 19 Jun 2019 20:30:25 +0200 Subject: theme: Update terrassa theme to newest version This updates the terrassa theme to the latest version. --- themes/terrassa/README.md | 195 ++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 180 insertions(+), 15 deletions(-) (limited to 'themes/terrassa/README.md') diff --git a/themes/terrassa/README.md b/themes/terrassa/README.md index d74f1db..f7aa266 100644 --- a/themes/terrassa/README.md +++ b/themes/terrassa/README.md @@ -4,24 +4,30 @@ Terrassa is a simple, fast and responsive theme for Hugo with a strong focus on ![Hugo Terrassa theme screenshot](https://github.com/danielkvist/hugo-terrassa-theme/blob/master/images/screenshot.png) -## Theme features +## 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. +- Hamburger menu in mobile devices. +- Focus on accessibility. - Customizable call to action on the home page. - Contact form. - Ready for blogging. -And much more. +## Some things that will be added in the future + +- A better hamburger menu. +- Service Workers. +- Easier ways to customize fonts and colors. +- Support for comments. ## Installation To install Terrassa run the followings command inside your Hugo site: ```bash +$ mkdir themes $ cd themes $ git clone https://github.com/danielkvist/hugo-terrassa-theme.git terrassa ``` @@ -29,19 +35,186 @@ $ git clone https://github.com/danielkvist/hugo-terrassa-theme.git terrassa Or ```bash +$ mkdir themes $ 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: +Back to your Hugo site directory open the *config.toml* file and add or change the following line: ```toml theme = "terrassa" ``` -And that's it. +## Configuration + +> You can find an example of the final configuration [here](https://github.com/danielkvist/hugo-terrassa-theme/blob/master/exampleSite/config.toml). + +### Basic + +```toml +baseurl = "/" # The base URL of your Hugo site +title = "titlehere" # The title of your Hugo site +author = "authorhere" # The author name +googleAnalytics = "" # Your Google Analytics tracking ID +enableRobotsTXT = true +language = "en-US" +paginate = 7 # The numbers of posts per page +theme = "terrassa" # Your Hugo theme +``` + +There's a lot more information about the basic configuration of an Hugo site [here](https://gohugo.io/getting-started/configuration/). + +### Description, favicon and logo params + +```toml +[params] + description = "" # Description for the meta description tag + favicon = "" # Relative URL for your favicon + logo = "" # Absolute URL for your logo +``` + +### Hero + +```toml +[params.hero] + textColor = "" # Empty for default color +``` + +### Call To Action + +```toml +[params.cta] # Call To Action + show = true + cta = "Contact" # Text message of the CTA + link = "contact" # Relative URL +``` + +### Separators between Home sections + +```toml +[params.separator] + show = false +``` + +### Contact information + +```toml +[params.contact] + email = "" + phone = "" + skype = "" + address = "" +``` + +### Social Networks + +```toml +[params.social] + twitter = "" + facebook = "" + github = "" + gitlab = "" + codepen = "" + instagram = "" + pinterest = "" + youtube = "" + linkedin = "" + weibo = "" + mastodon = "" + tumblr = "" + flickr = "" + "500px" = "" +``` + +> Icons for social networks depend on Font Awesome. + +### Font Awesome + +```toml +[params.fa] + version = "" # Font Awesome version + integrity = "" # Font Awesome integrity for the Font Awesome script +``` + +### Copyright message + +```toml +[params.copy] + message = "" +``` + +### Agreements + +```toml +[params.agreement] + message = "" # You can use HTML tags +``` + +### Posts + +```toml +[params.posts] + showAuthor = true + showDate = true + showTags = true + dateFormat = "Monday, Jan, 2006" +``` + +### Form + +```toml +[params.form] + netlify = true # Only if you are using Netlify + action = "" + method = "" + inputNameName = "" + inputNameLabel = "" + inputNamePlaceholder = "" + inputEmailName = "" + inputEmailLabel = "" + inputEmailPlaceholder = "" + inputMsgName = "" + inputMsgLabel = "" + inputMsgLength = 750 + inputSubmitValue = "" +``` + +### Privacy + +```toml +[privacy] + [privacy.googleAnalytics] + anonymizeIP = true + disable = false + respectDoNotTrack = true + useSessionStorage = false + [privacy.instagram] + disable = false + simple = false + [privacy.twitter] + disable = false + enableDNT = true + simple = false + [privacy.vimeo] + disable = false + simple = false + [privacy.youtube] + disable = false + privacyEnhanced = true +``` + +To learn more about privacy configuration check the [official documentation](https://gohugo.io/about/hugo-and-gdpr/). + +### Custom CSS + +To add custom CSS you have to create a folder called ```assets``` in the root of your project. Then, create another folder called ```css``` inside ```assets```. And finally, a file called ```custom.css``` inside ```css``` with your styles. + +```bash +$ mkdir -p ./assets/css/ +``` ## Archetypes @@ -154,12 +327,4 @@ For the contact page follow these instructions: $ 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. +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). \ No newline at end of file -- cgit v1.2.3