Skip to content

Commit

Permalink
SLX: add themes
Browse files Browse the repository at this point in the history
  • Loading branch information
stephanieleroux committed Jun 14, 2024
1 parent 0e8d7d1 commit f364623
Show file tree
Hide file tree
Showing 309 changed files with 18,843 additions and 0 deletions.
Binary file added themes/.DS_Store
Binary file not shown.
5 changes: 5 additions & 0 deletions themes/hugo-hero-theme/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.DS_Store
node_modules
.idea
public
local_git_config.sh
17 changes: 17 additions & 0 deletions themes/hugo-hero-theme/CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# Contributing

I welcome contributions to help improve this theme. Bug reports, feature requests and PR's are all super helpful!

## Bugs

If you find a bug in this template you can:

* Report it as an issue
* Feel free to submit a PR fixing the bug 🤩

## Pull Requests

* Pull requests for new features and improvements are welcome, there doesnt have to be an existing issue.
* Please fork this theme, create a new branch and create a Pull Request when finished
* Be clear and descriptive in your PR
* PR's will be built automatically using Netlify branch deploys, so make sure your PR passes that check
21 changes: 21 additions & 0 deletions themes/hugo-hero-theme/LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
The MIT License (MIT)

Copyright (c) Robert Austin - rob@zerostatic.io - github.com/zerostaticthemes

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 the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
195 changes: 195 additions & 0 deletions themes/hugo-hero-theme/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,195 @@
# Hugo Hero Theme

Hero is a multi-page business theme with fullscreen hero images and fullwidth sections.

[Live Demo](https://hugo-hero.netlify.com/) |
[Installation](#installation) |
[Zerostatic Themes](https://www.zerostatic.io/theme/hugo-hero/)

![Hugo Hero Theme screenshot](https://github.com/JugglerX/hugo-hero-theme/blob/master/images/screenshot-full.jpg)

# Features

### Content Types

- Services (Markdown)
- Work/Portfolio (Markdown)
- Features (Data)
- About (Markdown, Single Page, Shortcodes)
- Homepage (Markdown, Single Page, multiple .md files in one layout)

### Content Management

- This themes content is now all editable via markdown files.
- Includes examples where multiple .md files are sourced in a single layout to create fullwidth sections that have different locations in the HTML.
- The "Home" page uses multiple markdown files for the different homepage sections. It uses **headless bundles**.
- The "About Us" page uses multiple markdown files for its different sections. It uses **leaf bundles** and **shortcodes**.
- "Services" & "Work" use markdown files with layouts for list, single and summary views.

### Features

- Full-width responsive design
- Full-width/full-height hero image partial. Partial arguments include background-image, no background-image, background-image with overlay or just a solid color background.

### SCSS

- SCSS (Hugo Pipelines)
- Responsive design
- Bootstrap 4 grid and media queries
- The rest of the Bootstrap library is commented out by default but is ready to be @imported in the `style.scss`

### Speed

- 100/100 Google Lighthouse speed score
- Vanilla JS only
- Minified CSS under 20KB
- Minified JS under 20KB

### Menu

- Responsive mobile menu managed in `config.toml`

### Content

- Robust example content included
- Royalty free images included

# Installation
### Install Hugo

To use this theme you will need to have Hugo installed. If you don't already have Hugo installed please follow the official [installation guide](https://gohugo.io/getting-started/installing/)

### Check Hugo version (Hugo 0.51+ Extended is required)

This theme uses [Hugo Pipes](https://gohugo.io/hugo-pipes/scss-sass/) to compile SCSS and minify assets. Please make sure you have the **Hugo Extended** version installed. If you are not using the extended version this theme will not not compile.

To check your version of Hugo, run:

```
hugo version
```

This will output the currently installed version of Hugo. Make sure you see `/extended` after the version number, for example `Hugo Static Site Generator v0.51/extended darwin/amd64 BuildDate: unknown` You do not need to use version v0.51 specifically, you can use any version of Hugo above 0.51. It just needs to have the `/extended` part

### Create a new Hugo site

```
hugo new site mynewsite
```

This will create a fresh Hugo site in the folder `mynewsite`.

### Install theme with Git

Clone this repo into the themes folder
```
cd mynewsite
git clone https://github.com/jugglerx/hugo-hero-theme.git themes/hugo-hero-theme
```

### Install theme from .zip file

You can download the .zip file located here https://github.com/JugglerX/hugo-hero-theme/archive/master.zip.

Extract the downloaded .zip inside the `themes` folder. Rename the extracted folder from `hugo-hero-theme-master` -> `hugo-hero-theme`. You should end up with the following folder structure `mynewsite/themes/hugo-hero-theme`

### Copy example content

Copy the entire contents of the `mynewsite/themes/hugo-hero-theme/exampleSite/` folder to root folder of your Hugo site, ie `mynewsite/`

To copy the files using terminal, make sure you are still in the projects root, ie the `mynewsite` folder.

```
cp -a themes/hugo-hero-theme/exampleSite/. .
```

### Update config.toml

After you copy the `config.toml` into the root folder of your Hugo site you will need to update the `baseURL`, `themesDir` and `theme` values in `mynewsite/config.toml`

```
baseURL = "/"
themesDir = "themes"
theme = "hugo-hero-theme"
```

### Run Hugo

After installing the theme for the first time, generate the Hugo site.

You run this command from the root folder of your Hugo site ie `mynewsite/`

```
hugo
```

For local development run Hugo's built-in local server.

```
hugo server
```

Now enter [`localhost:1313`](http://localhost:1313) in the address bar of your browser.

# Configuration

### Homepage meta tags

Often a homepage requires special meta tags such as a meta description or og meta data for twitter, facebook etc. You can configure these values in the `config.toml`

```
// config.toml
...
[params.homepage_meta_tags]
meta_description = "a description of your website."
meta_og_title = "My Theme"
meta_og_type = "website"
meta_og_url = "https://www.mywebsite.com"
meta_og_image = "https://www.mywebsite.com/images/tn.png"
meta_og_description = "a description of your website."
meta_twitter_card = "summary"
meta_twitter_site = "@mytwitterhandle"
meta_twitter_creator = "@mytwitterhandle"
```

### Set meta tags on a per layout basis

You can set meta tags on a per template basis using a block. For example, you might want to write a custom meta description for the `/services` page. You can insert any valid HTML meta data inside the `{{ define "meta_tags }}` block at the top of a template.

```
// layouts/services/list.html
...
{{ define "meta_tags" }}
<meta name="description" content="We offer a variety of services in the finance industry" />
{{ end }}
{{ define main }}
...
```

### Google Analytics

Add you google analytics ID to the `config.toml`

```
// config.toml
[params]
google_analytics_id="UA-132398315-1"
```

### Menu

You can edit and add main menu links in the `config.toml` under `[[menu.main]]`

# Deploying to Netlify

This theme includes a `netlify.toml` which is configured to deploy to Netlify from the `exampleSite` folder. See this discussion on how to deploy your site on Netlify from the `exampleSite` folder - https://discourse.gohugo.io/t/deploy-your-theme-to-netlify/15508

Most likely if you are deploying to Netlify and created a new Hugo site or added this theme to an existing Hugo site then you are not deploying from the `exampleSite` directory and you can delete the `netlify.toml` file.

## License

If you fork or copy this theme the LICENSE file and the copyright notice on line 3 (where I am listed as the author) must not be changed. You cannot just replace the copyright line with your own name. Attribution in your README.md or on your site is also welcome but not required.
2 changes: 2 additions & 0 deletions themes/hugo-hero-theme/archetypes/default.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
+++
+++
1 change: 1 addition & 0 deletions themes/hugo-hero-theme/assets/js/libs/library.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
console.log('Library')
1 change: 1 addition & 0 deletions themes/hugo-hero-theme/assets/js/pages/services.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
console.log('Services')
9 changes: 9 additions & 0 deletions themes/hugo-hero-theme/assets/js/scripts.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
var body = document.querySelector('body')
var menuTrigger = document.querySelector('#toggle-main-menu-mobile');
var menuContainer = document.querySelector('#main-menu-mobile');

menuTrigger.onclick = function() {
menuContainer.classList.toggle('open');
menuTrigger.classList.toggle('is-active')
body.classList.toggle('lock-scroll')
}
70 changes: 70 additions & 0 deletions themes/hugo-hero-theme/assets/scss/_bootstrap-variables.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1300px,
);

$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
);

$grid-gutter-width: 20px;

$white: #ffffff;
$black: #2E2E2E;
$primary: #7a94a5; //8d7f11 953611
$secondary: #6E6E6E; //6E6E6E

// Links
$link-color: $primary;
$link-decoration: none;
$link-hover-color: lighten($primary, 20%);
$link-hover-decoration: underline;

// Fonts
$font-family-base: 'Open Sans', 'Helvetica Neue', Arial, sans-serif,
-apple-system;
$font-family-heading: 'Lato', 'Helvetica Neue', Arial, sans-serif, -apple-system;
$font-size-base: 1rem; // Assumes the browser default, typically `16px`
$font-weight-thin: 200;
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-bold: 700;
$font-weight-base: $font-weight-normal;
$line-height-base: 1.6;

$headings-font-weight: 400;

$spacer: 1rem;
$spacers: ();
$spacers: map-merge(
(
0: 0,
1: 10px,
2: 20px,
3: 30px,
4: 40px,
5: 50px,
6: 60px,
7: 70px,
8: 80px,
9: 90px,
10: 100px,
11: 110px,
12: 120px,
13: 130px,
14: 140px,
15: 150px,
16: 160px,
17: 170px,
18: 180px,
19: 190px,
20: 200px,
),
$spacers
);
49 changes: 49 additions & 0 deletions themes/hugo-hero-theme/assets/scss/_variables.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
// Grid breakpoints
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
);

$container-max-widths: (
sm: 540px,
md: 760px,
lg: 980px,
xl: 1140px,
);

$grid-gutter-width: 30px;

$spacer: 1rem;
$spacers: ();
$spacers: map-merge(
(
0: 0,
1: 10px,
2: 20px,
3: 30px,
4: 40px,
5: 50px,
6: 60px,
7: 70px,
8: 80px,
9: 90px,
10: 100px,
11: 110px,
12: 120px,
13: 130px,
14: 140px,
15: 150px,
16: 160px,
17: 170px,
18: 180px,
19: 190px,
20: 200px,
),
$spacers
);

$strip-padding: 80px;
$header-height: 60px;
Loading

0 comments on commit f364623

Please sign in to comment.