From ff2690fcb83d6e7edde5d3fcc03275da4db99e93 Mon Sep 17 00:00:00 2001 From: George Cushen Date: Sun, 15 Oct 2017 02:23:07 +0100 Subject: [PATCH] widgets: Add Hero widget (#99) --- exampleSite/content/home/hero.md | 52 +++++++++++++++++++ exampleSite/content/post/widgets.md | 1 + layouts/partials/css/academic.css | 77 +++++++++++++++++++++++++++++ layouts/partials/widget_page.html | 4 ++ layouts/partials/widgets/hero.html | 32 ++++++++++++ 5 files changed, 166 insertions(+) create mode 100644 exampleSite/content/home/hero.md create mode 100644 layouts/partials/widgets/hero.html diff --git a/exampleSite/content/home/hero.md b/exampleSite/content/home/hero.md new file mode 100644 index 00000000..56a93188 --- /dev/null +++ b/exampleSite/content/home/hero.md @@ -0,0 +1,52 @@ ++++ +# Hero widget. + +date = 2017-10-15 +draft = false + +title = "Academic" +widget = "hero" + +# Order that this section will appear in. +weight = 3 + +# 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_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 `#`. +[cta] + url = "./post/getting-started/" + label = ' Install Now' ++++ + +The highly flexible website framework for Hugo with an extensible plugin mechanism. Create a beautifully simple site in under 10 minutes :rocket: +
+Latest release +

+ + + + diff --git a/exampleSite/content/post/widgets.md b/exampleSite/content/post/widgets.md index fbe9f6f7..acbc6fac 100644 --- a/exampleSite/content/post/widgets.md +++ b/exampleSite/content/post/widgets.md @@ -20,6 +20,7 @@ Homepage widgets display as sections on the homepage. They can be enabled/disabl - Recent talks - Contact - Tag cloud +- Hero (introduction) - Custom widget (demonstrated with the *teaching* example) The example site that you copied to create your site uses all the different types of widget (except talks), so you can generally just delete the widgets you don't need and customize the parameters of the widgets you wish to keep. diff --git a/layouts/partials/css/academic.css b/layouts/partials/css/academic.css index 521bbe48..422ff76c 100644 --- a/layouts/partials/css/academic.css +++ b/layouts/partials/css/academic.css @@ -196,6 +196,11 @@ blockquote p:last-child { } } +small, +.small { + font-size: .75em; +} + /************************************************* * Home Sections **************************************************/ @@ -243,6 +248,53 @@ blockquote p:last-child { color: #b2b2b2; } +/************************************************* + * Hero Widget + **************************************************/ + +.hero-overlay { + position: relative; + padding: 3em 0; + clear: both; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + animation: intro 0.3s both; + animation-delay: 0s; + animation-delay: 0.25s; +} + +.hero-title { + font-size: 2.7rem; + margin-top: 0; + line-height: 1; +} + +.hero-lead { + max-width: 768px; + font-size: 1.35rem; +} + +.hero-overlay .hero-title, +.hero-overlay .hero-lead, +.hero-overlay .btn { + color: #fff; + text-shadow: 1px 1px 4px rgba(0,0,0,0.5); +} + +.hero-overlay a { + color: #fff; +} + +.hero-overlay .hero-lead a { + color: #fff; + text-decoration-line: underline; +} + +.hero-overlay .btn-large { + font-size: 1.1rem; +} + /************************************************* * Biography **************************************************/ @@ -768,6 +820,17 @@ footer a#back_to_top i { background: {{ .Get "primary" }} !important; } +.btn-light { + border-color: #fff !important; + background: #fff !important; +} + +.btn-light:hover, +.btn-light:active, +.btn-light.active { + background: rgba(0,0,0,0.4) !important; +} + /************************************************* * Toolbar Buttons **************************************************/ @@ -819,6 +882,19 @@ footer a#back_to_top i { color: #fff !important; } +.btn-light.btn-outline { + color: #fff !important; + border-color: #fff !important; +} + +.btn-light.btn-outline:focus { + color: #fff !important; +} + +.btn-light.btn-outline:active { + color: transparent !important; +} + .btn-success.btn-outline { color: #5cb85c; } @@ -836,6 +912,7 @@ footer a#back_to_top i { } .btn-primary.btn-outline:hover, +.btn-light.btn-outline:hover, .btn-success.btn-outline:hover, .btn-info.btn-outline:hover, .btn-warning.btn-outline:hover, diff --git a/layouts/partials/widget_page.html b/layouts/partials/widget_page.html index ca7f4354..a620716a 100644 --- a/layouts/partials/widget_page.html +++ b/layouts/partials/widget_page.html @@ -15,11 +15,15 @@ {{ range $index, $page := where .Data.Pages "Section" $section }} {{ $params := dict "root" $ "page" $page }} {{ $widget := printf "widgets/%s.html" ( or $page.Params.widget "custom" ) }} + {{ if eq $page.Params.widget "hero" }} + {{ partial $widget $params }} + {{ else }}
{{ partial $widget $params }}
+ {{ end }} {{ end }} diff --git a/layouts/partials/widgets/hero.html b/layouts/partials/widgets/hero.html new file mode 100644 index 00000000..51233a74 --- /dev/null +++ b/layouts/partials/widgets/hero.html @@ -0,0 +1,32 @@ +{{ $ := .root }} +{{ $page := .page }} +{{ $header := $page.Params.header }} + +
+ +
+ +

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

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

{{ . | markdownify }}

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

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

+ {{ end }} + +
+ +