diff options
author | danielkvist <danielkvist@protonmail.com> | 2019-06-04 09:09:56 +0300 |
---|---|---|
committer | danielkvist <danielkvist@protonmail.com> | 2019-06-04 09:26:46 +0300 |
commit | dfebf8b89f9dac854dea8a65e31b51dc43060989 (patch) | |
tree | 470756c6bc416ec4a49ed2f30b9bf057ba6f4480 | |
parent | 88a672aa1600f2f78ec064c5c86a3d5144bb019a (diff) |
add support for custom CSSv2.4
-rw-r--r-- | README.md | 29 | ||||
-rw-r--r-- | assets/css/custom.css | 0 | ||||
-rw-r--r-- | layouts/partials/styles.html | 6 | ||||
-rw-r--r-- | makefile | 2 |
4 files changed, 28 insertions, 9 deletions
@@ -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,30 @@ $ 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). + +### 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 diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/assets/css/custom.css diff --git a/layouts/partials/styles.html b/layouts/partials/styles.html index 4dd5827..cf06c3a 100644 --- a/layouts/partials/styles.html +++ b/layouts/partials/styles.html @@ -3,7 +3,9 @@ {{ $style := resources.Get "css/style.css" }} {{ $media := resources.Get "css/media-queries.css" }} {{ $animations := resources.Get "css/animations.css" }} -{{ $bundle := slice $reset $base $style $media $animations | resources.Concat "css/bundle.css" }} -{{ $css := $bundle | resources.Minify | resources.Fingerprint "sha512" }} +{{ $custom := resources.Get "css/custom.css" }} +{{ $bundle := slice $reset $base $style $media $animations $custom | resources.Concat "css/bundle.css" }} + +{{ $css := $bundle | resources.Minify }} <link rel="stylesheet" href="{{ $css.Permalink }}">
\ No newline at end of file @@ -30,4 +30,4 @@ docker-rm: dev: hugo-server-draft build: huo-build-deploy check: hugo-build-min docker-nc docker-run -clean: docker-stop docker-rm hugo-clean +clean: docker-stop docker-rm hugo-clean
\ No newline at end of file |