diff --git a/README.md b/README.md index f7ccc454..550c0c03 100644 --- a/README.md +++ b/README.md @@ -91,17 +91,7 @@ Copy the entire contents of the `mynewsite/themes/hugo-hero-theme/exampleSite/` cp -a themes/hugo-hero-theme/exampleSite/. . ``` -**5. 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" -``` - -**6. Run Hugo** +**65. Run Hugo** After installing the theme for the first time, generate the Hugo site. @@ -122,18 +112,18 @@ Now enter [`localhost:1313`](http://localhost:1313) in the address bar of your b ## Deployment ### Netlify -Use Netlify to deploy this theme. This theme contains a valid and tested `netlify.toml` - Feel free to use the 1-click deploy below. - [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/zerostaticthemes/hugo-hero-theme) +This theme includes a `netlify.toml` which is [configured to deploy to Netlify](https://discourse.gohugo.io/t/deploy-your-theme-to-netlify/15508) from the `exampleSite` folder. If you have installed this theme into a new Hugo site and the exampleSite folder was copied or removed, you should delete the `netlify.toml` file. + ## Configuring Theme ### 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 +```toml +# config.toml ... [params.homepage_meta_tags] @@ -169,8 +159,8 @@ You can set meta tags on a per template basis using a block. For example, you mi Add your google analytics ID to the `config.toml` -``` -// config.toml +```toml +# config.toml [params] google_analytics_id="UA-132398315-1" ``` @@ -179,27 +169,28 @@ Add your google analytics ID to the `config.toml` You can edit and add main menu links in the `config.toml` under `[[menu.main]]` -## Extras - -### License +## License - Don't create ports or new versions of this theme without asking me - You can't re-distribute or re-sell this theme as your own template -### Credits +## Credits - Beautiful royalty free Illustrations by Icons8 - https://icons8.com/illustrations/style--pixeltrue - Stock images by Unsplash - https://unsplash.com/ - Feature icons by Noun Project - https://thenounproject.com/ -### Other Hugo Themes by Zerostatic - -- [Hugo Whisper](https://github.com/zerostaticthemes/hugo-whisper-theme) -- [Hugo Serif](https://github.com/zerostaticthemes/hugo-serif-theme) -- [Hugo Winston](https://github.com/zerostaticthemes/hugo-winston-theme) -- [Hugo Advance](https://www.zerostatic.io/theme/hugo-advance/) -- [Hugo Paradigm](https://www.zerostatic.io/theme/hugo-paradigm/) +**More Hugo Themes by Zerostatic** +- [Hugo Hero](https://github.com/zerostaticthemes/hugo-hero-theme) - Open-source business theme +- [Hugo Whisper](https://github.com/zerostaticthemes/hugo-whisper-theme) - Open-source documentation theme +- [Hugo Serif](https://github.com/zerostaticthemes/hugo-serif-theme) - Open-source business theme +- [Hugo Winston](https://github.com/zerostaticthemes/hugo-winston-theme) - Open-source blog theme +- [Hugo Advance](https://www.zerostatic.io/theme/hugo-advance/) - Premium advanced multi page business & marketing theme +- [Hugo Paradigm](https://www.zerostatic.io/theme/hugo-paradigm/) - Premium landing page + site builder theme +- [Hugo Lever](https://www.zerostatic.io/theme/hugo-lever/) - Premium personal / bio theme +- [Hugo Shard](https://www.zerostatic.io/theme/hugo-lever/) - Premium SAAS / landing page theme -🇦🇺 **Made in Australia** by Robert Austin - Support our work - **Star this repo** ⭐ +**Find hundreds more Hugo themes on Built At Lightspeed** +[Built At Lightspeed Hugo themes directory screenshot](https://builtatlightspeed.com/category/hugo) diff --git a/assets/scss/_bootstrap-variables.scss b/assets/scss/_bootstrap-variables.scss index 27b4e419..f2d71c3c 100755 --- a/assets/scss/_bootstrap-variables.scss +++ b/assets/scss/_bootstrap-variables.scss @@ -27,8 +27,7 @@ $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-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; diff --git a/assets/scss/bootstrap/_accordion.scss b/assets/scss/bootstrap/_accordion.scss new file mode 100644 index 00000000..75588a5a --- /dev/null +++ b/assets/scss/bootstrap/_accordion.scss @@ -0,0 +1,158 @@ +// +// Base styles +// + +.accordion { + // scss-docs-start accordion-css-vars + --#{$prefix}accordion-color: #{$accordion-color}; + --#{$prefix}accordion-bg: #{$accordion-bg}; + --#{$prefix}accordion-transition: #{$accordion-transition}; + --#{$prefix}accordion-border-color: #{$accordion-border-color}; + --#{$prefix}accordion-border-width: #{$accordion-border-width}; + --#{$prefix}accordion-border-radius: #{$accordion-border-radius}; + --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius}; + --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x}; + --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y}; + --#{$prefix}accordion-btn-color: #{$accordion-button-color}; + --#{$prefix}accordion-btn-bg: #{$accordion-button-bg}; + --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)}; + --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width}; + --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform}; + --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition}; + --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)}; + --#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color}; + --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow}; + --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x}; + --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y}; + --#{$prefix}accordion-active-color: #{$accordion-button-active-color}; + --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg}; + // scss-docs-end accordion-css-vars +} + +.accordion-button { + position: relative; + display: flex; + align-items: center; + width: 100%; + padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x); + @include font-size($font-size-base); + color: var(--#{$prefix}accordion-btn-color); + text-align: left; // Reset button style + background-color: var(--#{$prefix}accordion-btn-bg); + border: 0; + @include border-radius(0); + overflow-anchor: none; + @include transition(var(--#{$prefix}accordion-transition)); + + &:not(.collapsed) { + color: var(--#{$prefix}accordion-active-color); + background-color: var(--#{$prefix}accordion-active-bg); + box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list + + &::after { + background-image: var(--#{$prefix}accordion-btn-active-icon); + transform: var(--#{$prefix}accordion-btn-icon-transform); + } + } + + // Accordion icon + &::after { + flex-shrink: 0; + width: var(--#{$prefix}accordion-btn-icon-width); + height: var(--#{$prefix}accordion-btn-icon-width); + margin-left: auto; + content: ""; + background-image: var(--#{$prefix}accordion-btn-icon); + background-repeat: no-repeat; + background-size: var(--#{$prefix}accordion-btn-icon-width); + @include transition(var(--#{$prefix}accordion-btn-icon-transition)); + } + + &:hover { + z-index: 2; + } + + &:focus { + z-index: 3; + border-color: var(--#{$prefix}accordion-btn-focus-border-color); + outline: 0; + box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow); + } +} + +.accordion-header { + margin-bottom: 0; +} + +.accordion-item { + color: var(--#{$prefix}accordion-color); + background-color: var(--#{$prefix}accordion-bg); + border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color); + + &:first-of-type { + @include border-top-radius(var(--#{$prefix}accordion-border-radius)); + + .accordion-button { + @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius)); + } + } + + &:not(:first-of-type) { + border-top: 0; + } + + // Only set a border-radius on the last item if the accordion is collapsed + &:last-of-type { + @include border-bottom-radius(var(--#{$prefix}accordion-border-radius)); + + .accordion-button { + &.collapsed { + @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius)); + } + } + + .accordion-collapse { + @include border-bottom-radius(var(--#{$prefix}accordion-border-radius)); + } + } +} + +.accordion-body { + padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x); +} + + +// Flush accordion items +// +// Remove borders and border-radius to keep accordion items edge-to-edge. + +.accordion-flush { + .accordion-collapse { + border-width: 0; + } + + .accordion-item { + border-right: 0; + border-left: 0; + @include border-radius(0); + + &:first-child { border-top: 0; } + &:last-child { border-bottom: 0; } + + .accordion-button { + &, + &.collapsed { + @include border-radius(0); + } + } + } +} + +@if $enable-dark-mode { + @include color-mode(dark) { + .accordion-button::after { + --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)}; + --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)}; + } + } +} diff --git a/assets/scss/bootstrap/_alert.scss b/assets/scss/bootstrap/_alert.scss old mode 100755 new mode 100644 index dd43e237..b8cff9b7 --- a/assets/scss/bootstrap/_alert.scss +++ b/assets/scss/bootstrap/_alert.scss @@ -3,11 +3,25 @@ // .alert { + // scss-docs-start alert-css-vars + --#{$prefix}alert-bg: transparent; + --#{$prefix}alert-padding-x: #{$alert-padding-x}; + --#{$prefix}alert-padding-y: #{$alert-padding-y}; + --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom}; + --#{$prefix}alert-color: inherit; + --#{$prefix}alert-border-color: transparent; + --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color); + --#{$prefix}alert-border-radius: #{$alert-border-radius}; + --#{$prefix}alert-link-color: inherit; + // scss-docs-end alert-css-vars + position: relative; - padding: $alert-padding-y $alert-padding-x; - margin-bottom: $alert-margin-bottom; - border: $alert-border-width solid transparent; - @include border-radius($alert-border-radius); + padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x); + margin-bottom: var(--#{$prefix}alert-margin-bottom); + color: var(--#{$prefix}alert-color); + background-color: var(--#{$prefix}alert-bg); + border: var(--#{$prefix}alert-border); + @include border-radius(var(--#{$prefix}alert-border-radius)); } // Headings for larger alerts @@ -19,6 +33,7 @@ // Provide class for links that match alerts .alert-link { font-weight: $alert-link-font-weight; + color: var(--#{$prefix}alert-link-color); } @@ -27,25 +42,27 @@ // Expand the right padding and account for the close button's positioning. .alert-dismissible { - padding-right: ($close-font-size + $alert-padding-x * 2); + padding-right: $alert-dismissible-padding-r; // Adjust close link position - .close { + .btn-close { position: absolute; top: 0; right: 0; - padding: $alert-padding-y $alert-padding-x; - color: inherit; + z-index: $stretched-link-z-index + 1; + padding: $alert-padding-y * 1.25 $alert-padding-x; } } -// Alternate styles -// -// Generate contextual modifier classes for colorizing the alert. - -@each $color, $value in $theme-colors { - .alert-#{$color} { - @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level)); +// scss-docs-start alert-modifiers +// Generate contextual modifier classes for colorizing the alert +@each $state in map-keys($theme-colors) { + .alert-#{$state} { + --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis); + --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle); + --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle); + --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis); } } +// scss-docs-end alert-modifiers diff --git a/assets/scss/bootstrap/_badge.scss b/assets/scss/bootstrap/_badge.scss old mode 100755 new mode 100644 index b87a1b00..cc3d2695 --- a/assets/scss/bootstrap/_badge.scss +++ b/assets/scss/bootstrap/_badge.scss @@ -4,15 +4,26 @@ // `background-color`. .badge { + // scss-docs-start badge-css-vars + --#{$prefix}badge-padding-x: #{$badge-padding-x}; + --#{$prefix}badge-padding-y: #{$badge-padding-y}; + @include rfs($badge-font-size, --#{$prefix}badge-font-size); + --#{$prefix}badge-font-weight: #{$badge-font-weight}; + --#{$prefix}badge-color: #{$badge-color}; + --#{$prefix}badge-border-radius: #{$badge-border-radius}; + // scss-docs-end badge-css-vars + display: inline-block; - padding: $badge-padding-y $badge-padding-x; - font-size: $badge-font-size; - font-weight: $badge-font-weight; + padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x); + @include font-size(var(--#{$prefix}badge-font-size)); + font-weight: var(--#{$prefix}badge-font-weight); line-height: 1; + color: var(--#{$prefix}badge-color); text-align: center; white-space: nowrap; vertical-align: baseline; - @include border-radius($badge-border-radius); + @include border-radius(var(--#{$prefix}badge-border-radius)); + @include gradient-bg(); // Empty badges collapse automatically &:empty { @@ -25,23 +36,3 @@ position: relative; top: -1px; } - -// Pill badges -// -// Make them extra rounded with a modifier to replace v3's badges. - -.badge-pill { - padding-right: $badge-pill-padding-x; - padding-left: $badge-pill-padding-x; - @include border-radius($badge-pill-border-radius); -} - -// Colors -// -// Contextual variations (linked badges get darker on :hover). - -@each $color, $value in $theme-colors { - .badge-#{$color} { - @include badge-variant($value); - } -} diff --git a/assets/scss/bootstrap/_breadcrumb.scss b/assets/scss/bootstrap/_breadcrumb.scss old mode 100755 new mode 100644 index 25b9d85a..b8252ff2 --- a/assets/scss/bootstrap/_breadcrumb.scss +++ b/assets/scss/bootstrap/_breadcrumb.scss @@ -1,38 +1,40 @@ .breadcrumb { + // scss-docs-start breadcrumb-css-vars + --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x}; + --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y}; + --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom}; + @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size); + --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg}; + --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius}; + --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color}; + --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x}; + --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color}; + // scss-docs-end breadcrumb-css-vars + display: flex; flex-wrap: wrap; - padding: $breadcrumb-padding-y $breadcrumb-padding-x; - margin-bottom: $breadcrumb-margin-bottom; + padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x); + margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom); + @include font-size(var(--#{$prefix}breadcrumb-font-size)); list-style: none; - background-color: $breadcrumb-bg; - @include border-radius($border-radius); + background-color: var(--#{$prefix}breadcrumb-bg); + @include border-radius(var(--#{$prefix}breadcrumb-border-radius)); } .breadcrumb-item { // The separator between breadcrumbs (by default, a forward-slash: "/") - + .breadcrumb-item::before { - display: inline-block; // Suppress underlining of the separator in modern browsers - padding-right: $breadcrumb-item-padding; - padding-left: $breadcrumb-item-padding; - color: $breadcrumb-divider-color; - content: "#{$breadcrumb-divider}"; - } + + .breadcrumb-item { + padding-left: var(--#{$prefix}breadcrumb-item-padding-x); - // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built - // without `