diff options
21 files changed, 564 insertions, 368 deletions
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  -## 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 --- /dev/null +++ b/themes/terrassa/assets/css/custom.css 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 <img src="./images/dummy-image.jpg" alt="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" }} <main class="content"> - {{ $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" . }} </main> -{{ 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 }} </header> + {{ if ne .Type "page" }} <main class="post__body"> {{ .Content }} </main> + {{ else }} + <main class="post__body" style="margin-bottom: 3rem;"> + {{ .Content }} + </main> + {{ end }} {{ if ne .Type "page" }} <footer class="post__footer"> diff --git a/themes/terrassa/layouts/partials/cta-btn.html b/themes/terrassa/layouts/partials/cta-btn.html index 1d7b73f..81f63a0 100644 --- a/themes/terrassa/layouts/partials/cta-btn.html +++ b/themes/terrassa/layouts/partials/cta-btn.html @@ -1,4 +1,4 @@ <a href="{{ $.Site.BaseURL }}{{ $.Site.Params.cta.link }}" class="ripple-btn cta__btn" alt="{{ $.Site.Params.cta.cta }}" - aria-label="{{ $.Site.Params.cta.cta }}}"> - {{ .Site.Params.cta.cta }} + aria-label="{{ $.Site.Params.cta.cta }}"> + {{ $.Site.Params.cta.cta }} </a>
\ No newline at end of file diff --git a/themes/terrassa/layouts/partials/fontawesome.html b/themes/terrassa/layouts/partials/fontawesome.html new file mode 100644 index 0000000..6cc5fd5 --- /dev/null +++ b/themes/terrassa/layouts/partials/fontawesome.html @@ -0,0 +1,15 @@ +{{ $version := "5.7.2" }} +{{ $integrity := "sha384-0pzryjIRos8mFBWMzSSZApWtPl/5++eIfzYmTgBBmXYdhvxPc+XcFEk+zJwDgWbP" }} +{{ if and $.Site.Params.fa.version $.Site.Params.fa.integrity }} +{{ $version = $.Site.Params.fa.version }} +{{ $integrity = $.Site.Params.fa.integrity }} +{{ end }} + +{{ $src := printf "%s%s%s" "https://use.fontawesome.com/releases/v" $version "/js/all.js" }} + +<script + defer + src="{{ $src }}" + integrity="{{ $integrity }}" + crossorigin="anonymous" +></script> diff --git a/themes/terrassa/layouts/partials/head.html b/themes/terrassa/layouts/partials/head.html index a2885d2..8d0b97f 100644 --- a/themes/terrassa/layouts/partials/head.html +++ b/themes/terrassa/layouts/partials/head.html @@ -1,21 +1,21 @@ <head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <meta name="robots" content="index, follow"> - <meta name="googlebot" content="index, follow, noarchive"> - <title>{{ .Site.Title }} - {{ .Title }}</title> - <link rel="icon" href="{{ $.Site.BaseURL }}{{ $.Site.Params.favicon }}"> - <meta name="description" content="{{ $.Site.Params.description }}"> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <meta name="robots" content="index, follow" /> + <meta name="googlebot" content="index, follow, noarchive" /> + <title>{{ $.Site.Title }} - {{ .Title }}</title> + <link rel="icon" href="{{ $.Site.BaseURL }}{{ $.Site.Params.favicon }}" /> + <meta name="description" content="{{ $.Site.Params.description }}" /> - {{ .Hugo.Generator }} + {{ hugo.Generator }} - {{ if .Site.GoogleAnalytics }} - {{ template "_internal/google_analytics.html" . }} - {{ end }} + {{ if .Site.GoogleAnalytics }} + {{ template "_internal/google_analytics.html" . }} + {{ end }} - {{ template "_internal/twitter_cards.html" . }} - {{ template "_internal/opengraph.html" . }} + {{ template "_internal/twitter_cards.html" . }} + {{ template "_internal/opengraph.html" . }} - <!-- CSS --> - {{ partial "styles.html" . }} -</head>
\ No newline at end of file + <!-- CSS --> + {{ partial "styles.html" . }} +</head> diff --git a/themes/terrassa/layouts/partials/header.html b/themes/terrassa/layouts/partials/header.html index 8016264..212f470 100644 --- a/themes/terrassa/layouts/partials/header.html +++ b/themes/terrassa/layouts/partials/header.html @@ -11,5 +11,4 @@ {{ partial "menu.html" . }} {{ partial "hamburger-menu.html" . }} - {{ partial "matomo/analytics.html" . }} -</header> +</header>
\ No newline at end of file diff --git a/themes/terrassa/layouts/partials/hero.html b/themes/terrassa/layouts/partials/hero.html index 138d674..d3c2a30 100644 --- a/themes/terrassa/layouts/partials/hero.html +++ b/themes/terrassa/layouts/partials/hero.html @@ -1,9 +1,9 @@ -<main class="hero" {{ if $.Params.images }} style="background-image: url('{{ $.Site.BaseURL }}images/{{ print (index $.Params.images 0) }}');" - {{ end }}> +<main class="hero" {{ if $.Params.images }} + style="background-image: url('{{ $.Site.BaseURL }}images/{{ print (index $.Params.images 0) }}');" {{ end }}> <div class="hero__caption" {{ if $.Site.Params.hero.textColor }} style="color: {{ $.Site.Params.hero.textColor }};" {{ end }}> {{ .Content }} - {{ if .Site.Params.cta.show }} + {{ if $.Site.Params.cta.show }} {{ partial "cta-btn.html" . }} {{ end }} </div> diff --git a/themes/terrassa/layouts/partials/scripts.html b/themes/terrassa/layouts/partials/scripts.html index 46beb79..63e20b1 100644 --- a/themes/terrassa/layouts/partials/scripts.html +++ b/themes/terrassa/layouts/partials/scripts.html @@ -4,5 +4,5 @@ {{ $js := $bundle | resources.Minify | resources.Fingerprint "sha512" }} <script src="{{ $js.Permalink }}"></script> -<script defer src="https://use.fontawesome.com/releases/v5.6.1/js/all.js" integrity="sha384-R5JkiUweZpJjELPWqttAYmYM1P3SNEJRM6ecTQF05pFFtxmCO+Y1CiUhvuDzgSVZ" - crossorigin="anonymous"></script>
\ No newline at end of file + +{{ partial "fontawesome.html" . }} diff --git a/themes/terrassa/layouts/partials/sections.html b/themes/terrassa/layouts/partials/sections.html index 6d4cfc3..eda7fd2 100644 --- a/themes/terrassa/layouts/partials/sections.html +++ b/themes/terrassa/layouts/partials/sections.html @@ -2,9 +2,13 @@ {{ $len := (len $items) }} {{ range $i, $e := $items }} -{{ partial "section.html" .}} +{{ partial "section.html" . }} {{ if ne (add $i 1) $len }} + +{{ if $.Site.Params.separator.show }} {{ partial "separator.html" . }} +{{ end }} + {{ end }} {{ end}}
\ No newline at end of file diff --git a/themes/terrassa/layouts/partials/styles.html b/themes/terrassa/layouts/partials/styles.html index 4dd5827..cf06c3a 100644 --- a/themes/terrassa/layouts/partials/styles.html +++ b/themes/terrassa/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 diff --git a/themes/terrassa/makefile b/themes/terrassa/makefile index 6f35a8a..c021139 100644 --- a/themes/terrassa/makefile +++ b/themes/terrassa/makefile @@ -5,25 +5,29 @@ HOST_PORT=80 HUGO_SITE=exampleSite HUGO_BASE_URL=https://danielkvist.github.io/terrassa/ -build: +hugo-build: cd ./$(HUGO_SITE) && hugo -build-min: +hugo-build-min: cd ./$(HUGO_SITE) && hugo --minify -build-deploy: +hugo-build-deploy: cd ./$(HUGO_SITE) && hugo --minify --baseURL="$(HUGO_BASE_URL)" -server: +hugo-server: cd ./$(HUGO_SITE) && hugo server -w -server-draft: +hugo-server-draft: cd ./$(HUGO_SITE) && hugo server -w -D +hugo-clean: + cd ./$(HUGO_SITE) && rm -rf ./public docker: docker image build --build-arg HUGO_SITE=$(HUGO_SITE) --build-arg EXPOSE=$(IMAGE_PORT) -t $(IMAGE_NAME) . docker-nc: docker image build --build-arg HUGO_SITE=$(HUGO_SITE) --build-arg EXPOSE=$(IMAGE_PORT) --no-cache -t $(IMAGE_NAME) . -run: +docker-run: docker container run -d -p $(IMAGE_PORT):$(HOST_PORT) --name $(APP_NAME) $(IMAGE_NAME) -stop: +docker-stop: docker container stop $(APP_NAME) -rm: +docker-rm: docker container rm $(APP_NAME) -clean: - docker container stop $(APP_NAME) && docker container rm $(APP_NAME) && docker image rm $(IMAGE_NAME) && cd ./$(HUGO_SITE) && rm -rf ./public +dev: hugo-server-draft +build: huo-build-deploy +check: hugo-build-min docker-nc docker-run +clean: docker-stop docker-rm hugo-clean
\ No newline at end of file diff --git a/themes/terrassa/theme.toml b/themes/terrassa/theme.toml index 5ef4ccc..53eb037 100644 --- a/themes/terrassa/theme.toml +++ b/themes/terrassa/theme.toml @@ -2,7 +2,7 @@ name = "Terrassa" license = "MIT" licenselink = "https://github.com/danielkvist/hugo-terrassa-theme/blob/master/LICENSE" description = "A simple, fast and responsive theme for Hugo with a strong focus on accessibility." -homepage = "http://github.com/danielkvist/hugo-terrassa-theme" +homepage = "https://github.com/danielkvist/hugo-terrassa-theme" tags = ["blog", "clean", "personal", "company", "google analytics", "contact form","mobile", "modern", "accessibility", "font awesome"] features = [ "responsive design", |