diff --git a/exampleSite/content/home/hero.md b/exampleSite/content/home/hero.md index a12c8249..93fabc36 100644 --- a/exampleSite/content/home/hero.md +++ b/exampleSite/content/home/hero.md @@ -8,28 +8,36 @@ title = "Academic" # Order that this section will appear in. 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 = "#666" # An HTML color value. - overlay_img = "headers/bubbles-wide.jpg" # Image path relative to your `static/img/` folder. + 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. -# Call to action button (optional). -# Activate the button by specifying a URL and button label below. -# Deactivate by commenting out parameters, prefixing lines with `#`. +# Call to action links (optional). +# Display link(s) by specifying a URL and label below. Icon is optional for `[cta]`. +# Remove a link/note by deleting a cta/note block. [cta] - url = "./post/getting-started/" - label = ' Install Now' + url = "post/getting-started/" + label = "Get Started" + icon_pack = "fas" + icon = "download" + +[cta_alt] + url = "https://sourcethemes.com/academic/" + label = "View Documentation" + +# Note. An optional note to show underneath the links. +[cta_note] + label = 'Latest release ' +++ -The highly flexible website framework for Hugo with an extensible plugin mechanism. Create a beautifully simple site in under 10 minutes :rocket: -
- - Latest release - -
-
- Star -
- +**The Best Way to Create the Website You Want from Markdown (or RStudio/Jupyter)** + +Build **Anything** with Widgets + +Star diff --git a/exampleSite/static/img/hero-academic.png b/exampleSite/static/img/hero-academic.png new file mode 100644 index 00000000..89afaff3 Binary files /dev/null and b/exampleSite/static/img/hero-academic.png differ diff --git a/layouts/partials/css/academic.css b/layouts/partials/css/academic.css index aa844e6f..ecb32101 100644 --- a/layouts/partials/css/academic.css +++ b/layouts/partials/css/academic.css @@ -559,24 +559,60 @@ a[data-fancybox] img { .hero-overlay .hero-title, .hero-overlay .hero-lead, -.hero-overlay .btn { +.hero-overlay .hero-cta-alt, +.hero-overlay .hero-note { color: #fff; - text-shadow: 1px 1px 4px rgba(0,0,0,0.5); + /*text-shadow: 1px 1px 4px rgba(0,0,0,0.5);*/ /* Uncomment to standout on complicated backgrounds. */ } -.hero-overlay a { +.hero-overlay a:not(.hero-overlay .btn) { color: #fff; } .hero-overlay .hero-lead a { - color: #fff; - text-decoration-line: underline; + text-decoration: underline; +} + +.hero-overlay .cta-btns { + margin-bottom: 16px; +} + +.hero-overlay .btn { + color: {{ .Get "primary_dark" }}; + padding: .6em 2.1em; +} + +a.hero-cta-alt { + display: inline-block; + position: relative; + transition-duration: .2s; + transition-property: transform; + transition-timing-function: ease-out; + font-size: 1.1rem; +} + +a.hero-cta-alt:active, +a.hero-cta-alt:focus, +a.hero-cta-alt:hover { + transform: scale(1.1); } .hero-overlay .btn-lg { font-size: 1.1rem; } +.hero-overlay .hero-note { + font-size: 0.8rem; +} + +.hero-media { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + text-align: center; +} + /************************************************* * Featurette Widget **************************************************/ diff --git a/layouts/partials/widgets/hero.html b/layouts/partials/widgets/hero.html index f961c4c1..135bfd16 100644 --- a/layouts/partials/widgets/hero.html +++ b/layouts/partials/widgets/hero.html @@ -20,19 +20,67 @@ url('{{ $overlay_img }}') ;">
- -

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

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

{{ . | markdownify }}

+ {{ if $page.Params.hero_media }} +
+
{{ end }} - {{ if $page.Params.cta.url }} -

{{ $page.Params.cta.label | safeHTML}}

+

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

+ + {{ with $page.Content }} +
{{ . }}
+ {{ 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 }} +
+
+ +
+
{{ end }}
-