diff --git a/exampleSite/content/home/hero.md b/exampleSite/content/home/hero.md index 93fabc36..97be8d7e 100644 --- a/exampleSite/content/home/hero.md +++ b/exampleSite/content/home/hero.md @@ -11,12 +11,24 @@ weight = 3 # Hero image (optional). Enter filename of an image in the `static/img/` folder. hero_media = "hero-academic.png" -# Overlay a color or image (optional). -# Deactivate an option by commenting out the line, prefixing it with `#`. -[header] - overlay_color = "#4bb4e3" # An HTML color value. - overlay_img = "" # Image path relative to your `static/img/` folder. - overlay_filter = 0.5 # Darken the image. Value in range 0-1. +# Background (optional). +# Choose from a background color, gradient, or image. +# Choose a dark or light text color, by setting `text_color_light`. +# Delete or comment out (by prefixing `#`) any unused options. +[background] + # Background color. + # color = "navy" + + # Background gradient. + gradient_start = "#4bb4e3" + gradient_end = "#2b94c3" + + # Background image. + # image = "" # Name of image in `static/img/`. + # image_darken = 0.6 # Darken the image? Range 0-1 where 0 is transparent and 1 is opaque. + + # Text color (true=light or false=dark). + text_color_light = true # Call to action links (optional). # Display link(s) by specifying a URL and label below. Icon is optional for `[cta]`. diff --git a/exampleSite/content/home/hero_carousel.md b/exampleSite/content/home/slider.md similarity index 95% rename from exampleSite/content/home/hero_carousel.md rename to exampleSite/content/home/slider.md index e9b23986..0f1ca3d9 100644 --- a/exampleSite/content/home/hero_carousel.md +++ b/exampleSite/content/home/slider.md @@ -1,6 +1,6 @@ +++ -# Hero Carousel widget. -widget = "hero_carousel" # Do not modify this line! +# Slider widget. +widget = "slider" # Do not modify this line! active = false # Activate this widget? true/false # Order that this section will appear in. @@ -52,5 +52,4 @@ height = "300px" overlay_color = "#333" # An HTML color value. overlay_img = "" # Image path relative to your `static/img/` folder. overlay_filter = 0.5 # Darken the image. Value in range 0-1. - +++ diff --git a/exampleSite/content/home/teaching.md b/exampleSite/content/home/teaching.md index 3394864f..22b553e3 100644 --- a/exampleSite/content/home/teaching.md +++ b/exampleSite/content/home/teaching.md @@ -12,10 +12,34 @@ subtitle = "" # Order that this section will appear in. weight = 60 +# Background (optional). +# Choose from a background color, gradient, or image. +# Choose a dark or light text color, by setting `text_color_light`. +# Delete or comment out (by prefixing `#`) any unused options. +[background] + # Background color. + # color = "navy" + + # Background gradient. + # gradient_start = "DeepSkyBlue" + # gradient_end = "SkyBlue" + + # Background image. + image = "headers/bubbles-wide.jpg" # Name of image in `static/img/`. + image_darken = 0.6 # Darken the image? Range 0-1 where 0 is transparent and 1 is opaque. + + # Text color (true=light or false=dark). + text_color_light = true +++ +{{% alert note %}} This is an example of using the *custom* widget to create your own homepage section. +This section also demonstrates how to apply the *background* option to create an *image parallax* effect. Backgrounds can be applied to any section. +{{% /alert %}} + +## Example content + I am a teaching instructor for the following courses at University X: - CS101: An intro to computer science diff --git a/layouts/partials/css/academic.css b/layouts/partials/css/academic.css index 440aa671..7b713015 100644 --- a/layouts/partials/css/academic.css +++ b/layouts/partials/css/academic.css @@ -487,6 +487,22 @@ a[data-fancybox] img { animation-delay: 0.15s; } +/* Override dark colors that may be inherited from body.dark */ +.home-section.dark, +.home-section.dark h1, +.home-section.dark h3 { + color: rgb(248, 248, 242); +} + +/* Create the parallax scrolling effect */ +.parallax { + height: 100%; + background-attachment: fixed; + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} + .home-section:first-of-type { padding-top: 50px; } @@ -535,7 +551,7 @@ a[data-fancybox] img { * Hero Widget **************************************************/ -.hero-overlay { +.wg-hero { padding: 3em 0; clear: both; background-size: cover; @@ -557,27 +573,27 @@ a[data-fancybox] img { font-size: 1.35rem; } -.hero-overlay .hero-title, -.hero-overlay .hero-lead, -.hero-overlay .hero-cta-alt, -.hero-overlay .hero-note { +.wg-hero .hero-title, +.wg-hero .hero-lead, +.wg-hero .hero-cta-alt, +.wg-hero .hero-note { color: #fff; /*text-shadow: 1px 1px 4px rgba(0,0,0,0.5);*/ /* Uncomment to standout on complicated backgrounds. */ } -.hero-overlay a:not(.hero-overlay .btn) { +.wg-hero a:not(.wg-hero .btn) { color: #fff; } -.hero-overlay .hero-lead a { +.wg-hero .hero-lead a { text-decoration: underline; } -.hero-overlay .cta-btns { +.wg-hero .cta-btns { margin-bottom: 16px; } -.hero-overlay .btn { +.wg-hero .btn { color: {{ .Get "primary_dark" }}; padding: .6em 2.1em; } @@ -597,11 +613,11 @@ a.hero-cta-alt:hover { transform: scale(1.1); } -.hero-overlay .btn-lg { +.wg-hero .btn-lg { font-size: 1.1rem; } -.hero-overlay .hero-note { +.wg-hero .hero-note { font-size: 0.8rem; } diff --git a/layouts/partials/widget_page.html b/layouts/partials/widget_page.html index 2ec5d399..6b34d43d 100644 --- a/layouts/partials/widget_page.html +++ b/layouts/partials/widget_page.html @@ -13,14 +13,40 @@ {{ range $index, $page := where (where .Data.Pages "Section" $section) ".Params.active" "!=" false }} + {{/* Begin widget styling */}} + {{ $bg := $page.Params.background }} + {{ $style := "" }} + + {{ if $bg.color }} + {{ $style = printf "background-color: %s;" ($bg.color | default "transparent") }} + {{ end }} + + {{ if and $bg.gradient_start $bg.gradient_end }} + {{ $style = printf "%sbackground-image: linear-gradient(%s, %s);" $style $bg.gradient_start $bg.gradient_end }} + {{ end }} + + {{ if $bg.image }} + {{ $darken := "" }} + {{ if $bg.image_darken }} + {{ $darken = printf "linear-gradient(rgba(0, 0, 0, %s), rgba(0, 0, 0, %s))," (string $bg.image_darken) (string $bg.image_darken) }} + {{ end }} + {{/* See Hugo note on linking assets in styles: https://github.com/gohugoio/hugoThemes#common-permalink-issues */}} + {{ $style = printf "%sbackground-image: %s url('%s');" $style $darken (printf "img/%s" $bg.image | absURL) }} + {{ end }} + + {{ with $page.Params.css_custom }} + {{ $style = print $style . }} + {{ end }} + {{ $params := dict "root" $ "page" $page }} - {{ $widget := printf "widgets/%s.html" ( or $page.Params.widget "custom" ) }} - {{ if in (slice "hero" "hero_carousel") $page.Params.widget }} - {{ partial $widget $params }} + {{ $widget := or $page.Params.widget "custom" }} + {{ $widget_path := printf "widgets/%s.html" $widget }} + {{ if in (slice "slider") $widget }} + {{ partial $widget_path $params }} {{ else }} -
+
- {{ partial $widget $params }} + {{ partial $widget_path $params }}
{{ end }} diff --git a/layouts/partials/widgets/hero.html b/layouts/partials/widgets/hero.html index 135bfd16..2c5c19b0 100644 --- a/layouts/partials/widgets/hero.html +++ b/layouts/partials/widgets/hero.html @@ -1,86 +1,64 @@ {{ $ := .root }} {{ $page := .page }} -{{ $header := $page.Params.header }} -{{/* See Hugo note on linking assets in styles: https://github.com/gohugoio/hugoThemes#common-permalink-issues */}} -{{ $overlay_img := "" }} -{{ if $header.overlay_img }} - {{ $overlay_img = printf "img/%s" $header.overlay_img | absURL }} -{{end}} - -
+
{{ end }} -{{ if $header.overlay_img }} -background-image: -{{ if $header.overlay_filter }}linear-gradient(rgba(0, 0, 0, {{ $header.overlay_filter }}), rgba(0, 0, 0, {{ $header.overlay_filter }})), {{ end }} -url('{{ $overlay_img }}') -{{ end }} -;"> -
- {{ if $page.Params.hero_media }} -
-
+

+ {{ with $page.Title }}{{ . | markdownify }}{{ end }} +

+ + {{ with $page.Content }} +
{{ . }}
{{ end }} -

- {{ with $page.Title }}{{ . | markdownify }}{{ end }} -

+ {{/* Call-to-action link */}} + {{ if $page.Params.cta.url }} + {{ $pack := or $page.Params.cta.icon_pack "fas" }} + {{ $pack_prefix := $pack }} + {{ if in (slice "fab" "fas" "far" "fal") $pack }} + {{ $pack_prefix = "fa" }} + {{ end }} + {{ $link := $page.Params.cta.url }} + {{ $scheme := (urls.Parse $link).Scheme }} + {{ $target := "" }} + {{ if not $scheme }} + {{ $link = $link | relLangURL }} + {{ else if in (slice "http" "https") $scheme }} + {{ $target = "target=\"_blank\" rel=\"noopener\"" }} + {{ end }} +

+ {{ if $page.Params.cta.icon }} {{end}}{{ $page.Params.cta.label | markdownify | emojify | safeHTML }} - {{ with $page.Content }} -

{{ . }}
+ {{/* Alternative Call-to-action link */}} + {{ if $page.Params.cta_alt.url }} + {{ $link := $page.Params.cta_alt.url }} + {{ $scheme := (urls.Parse $link).Scheme }} + {{ $target := "" }} + {{ if not $scheme }} + {{ $link = $link | relLangURL }} + {{ else if in (slice "http" "https") $scheme }} + {{ $target = "target=\"_blank\" rel=\"noopener\"" }} {{ end }} - - {{/* Call-to-action link */}} - {{ if $page.Params.cta.url }} - {{ $pack := or $page.Params.cta.icon_pack "fas" }} - {{ $pack_prefix := $pack }} - {{ if in (slice "fab" "fas" "far" "fal") $pack }} - {{ $pack_prefix = "fa" }} - {{ end }} - {{ $link := $page.Params.cta.url }} - {{ $scheme := (urls.Parse $link).Scheme }} - {{ $target := "" }} - {{ if not $scheme }} - {{ $link = $link | relLangURL }} - {{ else if in (slice "http" "https") $scheme }} - {{ $target = "target=\"_blank\" rel=\"noopener\"" }} - {{ end }} -

- {{ if $page.Params.cta.icon }} {{end}}{{ $page.Params.cta.label | markdownify | emojify | safeHTML }} - - {{/* Alternative Call-to-action link */}} - {{ if $page.Params.cta_alt.url }} - {{ $link := $page.Params.cta_alt.url }} - {{ $scheme := (urls.Parse $link).Scheme }} - {{ $target := "" }} - {{ if not $scheme }} - {{ $link = $link | relLangURL }} - {{ else if in (slice "http" "https") $scheme }} - {{ $target = "target=\"_blank\" rel=\"noopener\"" }} - {{ end }} - {{ $page.Params.cta_alt.label | markdownify | emojify | safeHTML }} - {{ end }} -

- {{ end }} - - {{/* Call-to-action note */}} - {{ with $page.Params.cta_note }} -

- {{ .label | markdownify | emojify | safeHTML }} -

- {{ end }} - - {{/* Hero image */}} - {{ if $page.Params.hero_media }} -
-
- -
-
+ {{ $page.Params.cta_alt.label | markdownify | emojify | safeHTML }} + {{ end }} +

{{ end }} + {{/* Call-to-action note */}} + {{ with $page.Params.cta_note }} +

+ {{ .label | markdownify | emojify | safeHTML }} +

+ {{ end }} + + {{/* Hero image */}} + {{ if $page.Params.hero_media }}
-
+
+ +
+ +{{ end }} diff --git a/layouts/partials/widgets/hero_carousel.html b/layouts/partials/widgets/slider.html similarity index 95% rename from layouts/partials/widgets/hero_carousel.html rename to layouts/partials/widgets/slider.html index 49a57343..49d0787b 100644 --- a/layouts/partials/widgets/hero_carousel.html +++ b/layouts/partials/widgets/slider.html @@ -13,7 +13,7 @@
{{ range $index, $item := $page.Params.item }} -