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/Dockerfile | 1 - themes/terrassa/LICENSE | 2 +- themes/terrassa/README.md | 195 ++++++- themes/terrassa/assets/css/custom.css | 0 themes/terrassa/assets/css/media-queries.css | 4 - themes/terrassa/assets/css/reset.css | 11 +- themes/terrassa/assets/css/style.css | 574 +++++++++++---------- themes/terrassa/exampleSite/config.toml | 23 +- .../content/posts/game-websites/index.md | 2 +- themes/terrassa/layouts/_default/list.html | 12 +- themes/terrassa/layouts/_default/single.html | 6 + themes/terrassa/layouts/partials/cta-btn.html | 4 +- themes/terrassa/layouts/partials/fontawesome.html | 15 + themes/terrassa/layouts/partials/head.html | 32 +- themes/terrassa/layouts/partials/header.html | 3 +- themes/terrassa/layouts/partials/hero.html | 6 +- themes/terrassa/layouts/partials/scripts.html | 4 +- themes/terrassa/layouts/partials/sections.html | 6 +- themes/terrassa/layouts/partials/styles.html | 6 +- themes/terrassa/makefile | 24 +- themes/terrassa/theme.toml | 2 +- 21 files changed, 564 insertions(+), 368 deletions(-) create mode 100644 themes/terrassa/assets/css/custom.css create mode 100644 themes/terrassa/layouts/partials/fontawesome.html (limited to 'themes/terrassa') diff --git a/themes/terrassa/Dockerfile b/themes/terrassa/Dockerfile index 43a450f..3108893 100644 --- a/themes/terrassa/Dockerfile +++ b/themes/terrassa/Dockerfile @@ -1,5 +1,4 @@ FROM nginx -LABEL maintainer="d94.zaragoza@gmail.com" ARG EXPOSE=80 EXPOSE ${EXPOSE}/tcp EXPOSE ${EXPOSE}/udp diff --git a/themes/terrassa/LICENSE b/themes/terrassa/LICENSE index 47f7640..2465aef 100644 --- a/themes/terrassa/LICENSE +++ b/themes/terrassa/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2018-2019 Daniel Zaragoza "Danielkvist" (d94.zaragoza@gmail.com) +Copyright (c) 2018 Daniel Zaragoza "Danielkvist" (d94.zaragoza@gmail.com) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in 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 diff --git a/themes/terrassa/assets/css/custom.css b/themes/terrassa/assets/css/custom.css new file mode 100644 index 0000000..e69de29 diff --git a/themes/terrassa/assets/css/media-queries.css b/themes/terrassa/assets/css/media-queries.css index 57455d6..d81f470 100644 --- a/themes/terrassa/assets/css/media-queries.css +++ b/themes/terrassa/assets/css/media-queries.css @@ -8,10 +8,6 @@ margin: 2.75rem 19%; } - .card { - margin-bottom: 0.75rem; - } - .post__body { margin: 0 19%; } diff --git a/themes/terrassa/assets/css/reset.css b/themes/terrassa/assets/css/reset.css index b3abac5..dec0fd8 100644 --- a/themes/terrassa/assets/css/reset.css +++ b/themes/terrassa/assets/css/reset.css @@ -57,10 +57,7 @@ table, caption, tbody, tfoot, -thead, -tr, -th, -td { +thead { border: 0; padding: 0; margin: 0; @@ -162,9 +159,11 @@ select { text-transform: none; } -table { +table, td, tr, th { + margin: auto; border-collapse: collapse; - border-spacing: 0; + border: 1px solid var(--primary-text); + padding: 10px; } [hidden] { diff --git a/themes/terrassa/assets/css/style.css b/themes/terrassa/assets/css/style.css index ed94b13..e669447 100644 --- a/themes/terrassa/assets/css/style.css +++ b/themes/terrassa/assets/css/style.css @@ -1,581 +1,585 @@ /* HEADER */ .header { - background-color: var(--white); - box-shadow: 0 1px 5px var(--divider); - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-template-rows: 1fr; - position: fixed; - top: 0; - width: 100%; - z-index: 999; + background-color: var(--white); + box-shadow: 0 1px 5px var(--divider); + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 1fr; + position: fixed; + top: 0; + width: 100%; + z-index: 999; } .header__title { - align-items: center; - display: flex; - font-size: 1.1rem; - justify-content: flex-start; - margin: 1rem 4.5rem; + align-items: center; + display: flex; + font-size: 1.1rem; + justify-content: flex-start; + margin: 1rem 4.5rem; } .header__title__link { - color: var(--primary-dark); + color: var(--primary-dark); } .header__title__logo { - max-width: 7rem; - vertical-align: middle; - width: 100%; + max-width: 7rem; + vertical-align: middle; + width: 100%; } /* MENU */ .menu { - align-items: center; - display: flex; - hyphens: none; - margin-right: 4.5rem; + align-items: center; + display: flex; + hyphens: none; + margin-right: 4.5rem; } .menu__items { - display: flex; - justify-content: space-evenly; - width: 100%; + display: flex; + justify-content: space-evenly; + width: 100%; } .menu__items__item { - margin: 0 1.5rem; + margin: 0 1.5rem; } .menu__items__item__link { - color: var(--primary-text); - padding: 0.5rem 0; - position: relative; + color: var(--primary-text); + padding: 0.5rem 0; + position: relative; } .menu__items__item__link:hover, .menu__items__item__link:focus { - color: var(--primary-text); + color: var(--primary-text); } .menu__items__item__link::before { - bottom: 0; - content: ""; - display: block; - height: 3px; - position: absolute; - transition: all 0.25s ease-in-out; - width: 0%; + bottom: 0; + content: ""; + display: block; + height: 3px; + position: absolute; + transition: all 0.25s ease-in-out; + width: 0%; } .menu__items__item__link::before { - background-color: var(--primary); + background-color: var(--primary); } .menu__items__item__link:hover::before, .menu__items__item__link:focus::before { - opacity: 1; - width: 100%; + opacity: 1; + width: 100%; } .menu__items__item__link.active::before { - opacity: 1; - width: 100%; + opacity: 1; + width: 100%; } /* HAMBURGER MENU */ .hamburger-menu { - display: none; - visibility: hidden; + display: none; + visibility: hidden; } .toggle, .hamburger__toggle { - user-select: none; + user-select: none; } .toggle { - align-self: center; - position: absolute; - right: 4.5rem; + align-self: center; + position: absolute; + right: 4.5rem; } .hamburger__toggle { - height: 32px; - left: -5px; - opacity: 0; - position: absolute; - top: -7px; - width: 40px; + height: 32px; + left: -5px; + opacity: 0; + position: absolute; + top: -7px; + width: 40px; } .hamburger__items { - background-color: var(--white); - box-shadow: -1px 2px 5px var(--divider); - height: 100vh; - position: absolute; - transform: translate(100%, 0); - transform-origin: 0% 0%; - transition: transform 0.15s ease-in-out; - visibility: hidden; - width: 50vw; + background-color: var(--white); + box-shadow: -1px 2px 5px var(--divider); + height: 100vh; + position: absolute; + transform: translate(100%, 0); + transform-origin: 0% 0%; + transition: transform 0.15s ease-in-out; + visibility: hidden; + width: 50vw; } .hamburger__items__item { - margin: 1.75rem 0 0 2.75rem; + margin: 1.75rem 0 0 2.75rem; } .hamburger__items__item__link { - color: var(--primary-text); + color: var(--primary-text); } .hamburger__items__item__link:hover { - color: var(--primary-dark); + color: var(--primary-dark); } .toggle .hamburger__toggle:checked ~ .hamburger__items { - transform: translate(-70%, 0); - visibility: visible; + transform: translate(-70%, 0); + visibility: visible; } /* HERO */ .hero { - align-content: center; - background-attachment: fixed; - background-position: 100% 20%; - background-repeat: no-repeat; - background-size: contain; - display: flex; - height: 90vh; - justify-content: flex-start; - width: 100%; + align-content: center; + background-attachment: fixed; + background-position: 100% 20%; + background-repeat: no-repeat; + background-size: contain; + display: flex; + height: 90vh; + justify-content: flex-start; + width: 100%; } .hero__caption { - align-items: flex-start; - animation: focus 0.95s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; - display: flex; - flex-direction: column; - justify-content: center; - margin-left: 4.5rem; + align-items: flex-start; + animation: focus 0.95s cubic-bezier(0.39, 0.575, 0.565, 1) both; + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 4.5rem; } .hero__caption > h1 { - font-size: var(--title); + font-size: var(--title); } .hero__caption > h2 { - font-size: var(--subheader); - margin-top: 0.45rem; + font-size: var(--subheader); + margin-top: 0.45rem; } /* CTA */ .cta__btn { - margin-top: 4.5rem; + margin-top: 4.5rem; } /* SECTION */ .section { - margin: 2.75rem 24%; - text-justify: distribute; + margin: 2.75rem 24%; + text-justify: distribute; } .section__title { - padding: 0 20%; - margin-bottom: 1.75rem; - text-align: center; + padding: 0 20%; + margin-bottom: 1.75rem; + text-align: center; } /* SEPARATOR */ .separator { - align-items: center; - display: flex; - font-size: 0.45rem; - justify-content: center; + align-items: center; + display: flex; + font-size: 0.45rem; + justify-content: center; } /* CONTENT */ .content { - display: grid; - grid-auto-flow: row; - grid-template-columns: 1fr; - grid-template-rows: 1fr; - justify-items: center; - min-height: 90vh; + align-items: center; + display: flex; + flex-direction: column; + justify-items: center; + min-height: 90vh; } /* CARD */ .card { - margin-bottom: 2.75rem; - max-width: 900px; - text-justify: distribute; - width: 70%; + margin-bottom: 1.75rem; + max-width: 900px; + text-justify: distribute; + width: 70%; } .card__header__link { - color: var(--primary-text); + color: var(--primary-text); } .card__header__link:hover { - color: var(--primary); + color: var(--primary); } .card__header__author { - margin-bottom: 0.75rem; - text-align: left; + margin-bottom: 0.75rem; + text-align: left; } /* POST */ .post { - min-height: 90vh; - text-justify: distribute; + min-height: 90vh; + text-justify: distribute; } .post__header { - display: grid; - grid-template-areas: "title" "date" "subtitle" "author"; - grid-template-rows: auto; - justify-content: center; - padding: 0 20%; + display: grid; + grid-template-areas: "title" "date" "subtitle" "author"; + grid-template-rows: auto; + justify-content: center; + padding: 0 20%; } .post__title { - font-size: var(--header); - grid-area: title; + font-size: var(--header); + grid-area: title; } .post__subtitle { - grid-area: subtitle; - margin-top: 0.75rem; - text-align: center; + grid-area: subtitle; + margin-top: 0.75rem; + text-align: center; } .post__author { - grid-area: author; - text-align: center; + grid-area: author; + text-align: center; } .post__date { - grid-area: date; - margin-bottom: 1.75rem; + grid-area: date; + margin-bottom: 1.75rem; } .post__body { - margin: 1.75rem 24% 0.75rem; + margin: 1.75rem 24% 0.75rem; } .post__body > figure { - margin-bottom: 1.75rem; + margin-bottom: 1.75rem; } .post__body > ol { - list-style-type: decimal; + list-style-type: decimal; } .post__body > ul { - list-style-type: disc; + list-style-type: disc; } .post__body > blockquote > p { - margin: 0.75rem 24%; - text-align: center; + margin: 0.75rem 24%; + text-align: center; } .post__body > blockquote > p::before, .post__body > blockquote > p::after { - background-color: var(--divider); - content: ""; - display: block; - height: 1px; - width: 100%; + background-color: var(--divider); + content: ""; + display: block; + height: 1px; + width: 100%; } .post__body > blockquote > p::before { - margin-bottom: 1rem; + margin-bottom: 1rem; } .post__body > blockquote > p::after { - margin-top: 1rem; + margin-top: 1rem; } .post__body > blockquote > p::after { - margin-bottom: 1.1rem; + margin-bottom: 1.1rem; } .post__body > ul, .post__body > ol { - margin-left: 3.75rem; + margin-left: 3.75rem; } .post__footer { - display: flex; - justify-content: center; - margin: 0 30% 0.75rem; + display: flex; + justify-content: center; + margin: 0 30% 0.75rem; } /* PAGINATION */ .pagination { - display: flex; - justify-content: space-evenly; - margin-bottom: 2.75rem; - width: 20%; + display: flex; + justify-content: space-evenly; + margin-bottom: 2.75rem; + margin-top: auto; + width: 20%; } .page-item.disabled > .page-link { - cursor: not-allowed; - opacity: 0.7; + cursor: not-allowed; + opacity: 0.7; } .page-item.active > .page-link { - color: var(--primary-dark); + color: var(--primary-dark); } .page-link { - color: var(--primary-text); + color: var(--primary-text); } /* CONTACT */ .contact { - align-items: center; - display: flex; - flex-direction: column; - justify-content: flex-start; - min-height: 90vh; + align-items: center; + display: flex; + flex-direction: column; + justify-content: flex-start; + min-height: 90vh; } .contact__content { - text-align: center; + text-align: center; } .contact__form { - display: grid; - grid-template-areas: "name email" "msg msg" "submit submit"; - grid-template-columns: 1fr; - grid-template-rows: repeat(3, auto); - margin-top: 1.75rem; + display: grid; + grid-template-areas: "name email" "msg msg" "submit submit"; + grid-template-columns: 1fr; + grid-template-rows: repeat(3, auto); + margin-top: 1.75rem; } .contact__field { - display: flex; - flex-direction: column; - margin-bottom: 0.75rem; + display: flex; + flex-direction: column; + margin-bottom: 0.75rem; } .contact__field > label { - margin-bottom: 0.45rem; + margin-bottom: 0.45rem; } .contact__field > input { - font-size: 1rem; - height: 1.9rem; - padding: 1rem 0.75rem; - width: 20rem; + font-size: 1rem; + height: 1.9rem; + padding: 1rem 0.75rem; + width: 20rem; } .contact__field > textarea { - font-family: sans-serif; - font-size: 1rem; - height: 12rem; - padding: 0.75rem 0.75rem; - width: 100%; + font-family: sans-serif; + font-size: 1rem; + height: 12rem; + padding: 0.75rem 0.75rem; + width: 100%; } .contact__field--name { - grid-area: name; - margin-right: 1rem; + grid-area: name; + margin-right: 1rem; } .contact__field--email { - grid-area: email; + grid-area: email; } .contact__field--msg { - grid-area: msg; - margin-top: 1.75rem; + grid-area: msg; + margin-top: 1.75rem; } .contact__field--submit { - align-content: center; - display: grid; - grid-area: submit; - justify-content: center; - margin: 1.75rem 0 2.75rem; + align-content: center; + display: grid; + grid-area: submit; + justify-content: center; + margin: 1.75rem 0 2.75rem; } .submit { - font-size: 1rem; + font-size: 1rem; } /* FOOTER */ .footer { - background-color: var(--primary-dark); - display: grid; - grid-auto-flow: row; - grid-template-areas: "social social social" "contact contact copy"; - grid-template-columns: repeat(3, 1fr); - grid-template-rows: repeat(2, auto); + background-color: var(--primary-dark); + display: grid; + grid-auto-flow: row; + grid-template-areas: "social social social" "contact contact copy"; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(2, auto); } .footer__social { - align-items: center; - background-color: var(--white); - border-top: 1px solid var(--divider); - border-bottom: 1px solid var(--divider); - display: flex; - flex-wrap: wrap; - grid-area: social; - justify-content: space-evenly; - padding: 1rem 20%; + align-items: center; + background-color: var(--white); + border-top: 1px solid var(--divider); + border-bottom: 1px solid var(--divider); + display: flex; + flex-wrap: wrap; + grid-area: social; + justify-content: space-evenly; + padding: 1rem 20%; } .footer__social__link { - background-color: var(--primary-text); - border-radius: 50%; - color: var(--white); - font-size: var(--subheader); - height: 35px; - line-height: 35px; - position: relative; - text-align: center; - width: 35px; + background-color: var(--primary-text); + border-radius: 50%; + color: var(--white); + font-size: var(--subheader); + height: 35px; + line-height: 35px; + position: relative; + text-align: center; + width: 35px; } .footer__social__link::after { - background: transparent; - border: 1.5px solid var(--primary-text); - border-radius: 50%; - bottom: 0; - content: ""; - display: block; - left: 0; - position: absolute; - right: 0; - top: 0; - transition: 0.3s all; + background: transparent; + border: 1.5px solid var(--primary-text); + border-radius: 50%; + bottom: 0; + content: ""; + display: block; + left: 0; + position: absolute; + right: 0; + top: 0; + transition: 0.3s all; } .footer__social__link:hover, .footer__social__link:focus { - background-color: transparent; - color: var(--secondary-text); + background-color: transparent; + color: var(--secondary-text); } .footer__social__link:hover::after, .footer__social__link:focus::after { - border-color: var(--secondary-text); - transform: scale(1.5); + border-color: var(--secondary-text); + transform: scale(1.5); } .footer__contact { - align-items: center; - display: flex; - grid-area: contact; - justify-content: space-around; - width: 100%; + align-items: center; + display: flex; + grid-area: contact; + justify-content: space-around; + width: 100%; } .footer__contact__item { - color: var(--white); - margin: 0; + color: var(--white); + margin: 0; } .footer__contact__item > span { - color: var(--primary-text); - margin-right: 0.25rem; + color: var(--primary-text); + margin-right: 0.25rem; } .footer__contact__link, .footer__contact__link:hover { - color: var(--white); + color: var(--white); } /* 404 */ .notfound { - align-items: center; - display: flex; - justify-content: center; - min-height: 90vh; + align-items: center; + display: flex; + justify-content: center; + min-height: 90vh; } .notfound__title { - font-size: var(--title); + font-size: var(--title); } /* COPY */ .copy { - align-items: center; - display: flex; - font-size: 0.95rem; - grid-area: copy; - justify-content: flex-end; - padding: 1.75rem; + align-items: center; + display: flex; + font-size: 0.95rem; + grid-area: copy; + justify-content: flex-end; + padding: 1.75rem; } .copy > p { - margin: 0; + margin: 0; } /* AUTHOR */ .author { - font-size: 0.95rem; - font-weight: 400; + font-size: 0.95rem; + font-weight: 400; } /* DATE */ .date { - font-size: 0.95rem; - font-weight: 400; - margin: 0 0 0.75rem 0; + font-size: 0.95rem; + font-weight: 400; + margin: 0 0 0.75rem 0; } /* TAGS */ .tags { - display: flex; - flex-wrap: wrap; - padding: 0; + display: flex; + flex-wrap: wrap; + padding: 0; } .tags__tag { - margin-right: 0.75rem; + margin-right: 0.75rem; } /* RIPPLE */ .ripple-btn { - background-color: var(--primary-dark); - border: none; - color: var(--white); - overflow: hidden; - padding: 1.15rem 4.5rem; - position: relative; - transform: translate3d(0, 0, 0); - transition: all 0.25s; + background-color: var(--primary-dark); + border: none; + color: var(--white); + overflow: hidden; + padding: 1.15rem 4.5rem; + position: relative; + transform: translate3d(0, 0, 0); + transition: all 0.25s; } .ripple-btn:hover, .ripple-btn:focus { - color: var(--white); - background-color: var(--primary); + background-color: var(--primary); + color: var(--white); } .ripple-btn::after { - background-image: radial-gradient(circle, var(--primary-light) 10%, transparent 10.01%); - background-position: 50%; - background-repeat: no-repeat; - content: ""; - display: block; - height: 100%; - left: 0; - opacity: 0; - position: absolute; - pointer-events: none; - top: 0; - transform: scale(10, 10); - transition: transform .5s, opacity 1s; - width: 100%; + background-image: radial-gradient( + circle, + var(--primary-light) 10%, + transparent 10.01% + ); + background-position: 50%; + background-repeat: no-repeat; + content: ""; + display: block; + height: 100%; + left: 0; + opacity: 0; + position: absolute; + pointer-events: none; + top: 0; + transform: scale(10, 10); + transition: transform 0.5s, opacity 1s; + width: 100%; } .ripple-btn:active::after { - opacity: 0.7; - transform: scale(0, 0); - transition: 0s; -} \ No newline at end of file + opacity: 0.7; + transform: scale(0, 0); + transition: 0s; +} diff --git a/themes/terrassa/exampleSite/config.toml b/themes/terrassa/exampleSite/config.toml index d40ac0d..efde359 100644 --- a/themes/terrassa/exampleSite/config.toml +++ b/themes/terrassa/exampleSite/config.toml @@ -4,19 +4,15 @@ author = "Daniel Zaragoza (Danielkvist)" googleAnalytics = "" defaultContentLanguage = "en" language = "en-US" -paginate = 3 # Number of posts per page +paginate = 3 theme = "hugo-terrassa-theme" themesDir = "../.." # Not necessary on production sites -[outputs] - home = ["HTML", "RSS"] - page = ["HTML", "RSS"] - [params] description = "Terrassa is a simple, fast and responsive theme for Hugo with a strong focus on accessibility made from scratch." - favicon = "favicon.ico" # Relative URL - logo = "" # Absolute URL + favicon = "favicon.ico" + logo = "" [params.hero] textColor = "" # Empty for default color @@ -26,8 +22,15 @@ themesDir = "../.." # Not necessary on production sites cta = "Contact" link = "contact" # Relative URL +[params.separator] # Separators between sections on the home page + show = false + +[params.fa] # Font Awesome options + version = "5.7.2" + integrity = "sha384-0pzryjIRos8mFBWMzSSZApWtPl/5++eIfzYmTgBBmXYdhvxPc+XcFEk+zJwDgWbP" + [params.form] # Contact form - netlify = true # Use only if you are using Netlify + netlify = true action = "https://formspree.io/your@email.com" method = "POST" inputNameName = "name" @@ -53,7 +56,7 @@ themesDir = "../.." # Not necessary on production sites skype = "" address = "419 Creek St. Revere, MA 02151" -[params.social] # Social networks +[params.social] twitter = "https://twitter.com/john" facebook = "https://facebook.com/john" github = "https://github.com/john" @@ -90,4 +93,4 @@ themesDir = "../.." # Not necessary on production sites simple = false [privacy.youtube] disable = false - privacyEnhanced = true \ No newline at end of file + privacyEnhanced = true diff --git a/themes/terrassa/exampleSite/content/posts/game-websites/index.md b/themes/terrassa/exampleSite/content/posts/game-websites/index.md index d8ec181..5f9f9aa 100644 --- a/themes/terrassa/exampleSite/content/posts/game-websites/index.md +++ b/themes/terrassa/exampleSite/content/posts/game-websites/index.md @@ -21,4 +21,4 @@ The unconventional guide to chicken dishes. Why food networks beat peanut butter Dummy image with HTML. -14 ways chef uniforms can make you rich. An expert interview about healthy eating facts. 17 things that won't happen in fast food. The 16 worst songs about food stamps. 20 podcasts about thai restaurants. 12 ways easy meals can make you rich. Why restaurant weeks should be 1 of the 7 deadly sins. 15 ideas you can steal from safe food handling tips. Why mexican food is the new black. Why healthy cooking tips are the new black. \ No newline at end of file +14 ways chef uniforms can make you rich. An expert interview about healthy eating facts. 17 things that won't happen in fast food. The 16 worst songs about food stamps. 20 podcasts about thai restaurants. 12 ways easy meals can make you rich. Why restaurant weeks should be 1 of the 7 deadly sins. 15 ideas you can steal from safe food handling tips. Why mexican food is the new black. Why healthy cooking tips are the new black. diff --git a/themes/terrassa/layouts/_default/list.html b/themes/terrassa/layouts/_default/list.html index c01a3b6..06390f4 100644 --- a/themes/terrassa/layouts/_default/list.html +++ b/themes/terrassa/layouts/_default/list.html @@ -1,11 +1,11 @@ {{ define "main" }}
- {{ $paginator := .Paginate (where .Data.Pages.ByDate.Reverse "Type" "posts") }} + {{ $paginator := .Paginate (where .Data.Pages.ByDate.Reverse "Type" "posts") }} - {{ range $paginator.Pages }} - {{ .Render "card" }} - {{ end }} + {{ range $paginator.Pages }} + {{ .Render "card" }} + {{ end }} - {{ template "_internal/pagination.html" . }} + {{ template "_internal/pagination.html" . }}
-{{ end }} \ No newline at end of file +{{ end }} diff --git a/themes/terrassa/layouts/_default/single.html b/themes/terrassa/layouts/_default/single.html index f6b15ae..9f108f7 100644 --- a/themes/terrassa/layouts/_default/single.html +++ b/themes/terrassa/layouts/_default/single.html @@ -18,9 +18,15 @@ {{ end }} + {{ if ne .Type "page" }}
{{ .Content }}
+ {{ else }} +
+ {{ .Content }} +
+ {{ end }} {{ if ne .Type "page" }}