widgets: Add Hero widget (#99)

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 = '<i class="fa fa-download"></i> Install Now'
++++
+
+The highly flexible website framework for Hugo with an extensible plugin mechanism. Create a beautifully simple site in under 10 minutes :rocket:
+<br>
+<small><a id="academic-release" href="https://sourcethemes.com/academic/tags/updates">Latest release</a></small>
+<br><br>
+<iframe style="display: inline-block;" src="https://ghbtns.com/github-btn.html?user=gcushen&amp;repo=hugo-academic&amp;type=star&amp;count=true&amp;size=large" scrolling="0" width="160px" height="30px" frameborder="0"></iframe>
+<iframe style="display: inline-block;" src="https://ghbtns.com/github-btn.html?user=gcushen&amp;repo=hugo-academic&amp;type=fork&amp;count=true&amp;size=large" scrolling="0" width="158px" height="30px" frameborder="0"></iframe>
+
+<script type="text/javascript">
+  (function defer() {
+    if (window.jQuery) {
+      jQuery(document).ready(function(){
+        GetLatestReleaseInfo();
+      });
+    } else {
+      setTimeout(function() { defer() }, 50);
+    }
+  })();  
+  function GetLatestReleaseInfo() {
+    $.getJSON('https://api.github.com/repos/gcushen/hugo-academic/tags').done(function (json) {
+      let release = json[0];
+      // let downloadURL = release.zipball_url;
+      $('#academic-release').text('Latest release ' + release.name);  
+    });    
+}  
+</script>

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.

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,

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 }}
   <section id="{{ $page.File.TranslationBaseName }}" class="home-section">
     <div class="container">
       {{ partial $widget $params }}
     </div>
   </section>
+  {{ end }}
 {{ end }}
 
 <!-- Page Footer -->

layouts/partials/widgets/hero.html

@@ -0,0 +1,32 @@
+{{ $ := .root }}
+{{ $page := .page }}
+{{ $header := $page.Params.header }}
+
+<section id="{{ $page.File.TranslationBaseName }}" class="hero-overlay" style="
+{{ if $header.overlay_color }}
+background-color: {{ $header.overlay_color | default "transparent" }};
+{{ 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('{{ printf "img/%s" $header.overlay_img | absURL}}');
+{{ end }}
+;">
+
+  <div class="container">
+
+    <h1 class="hero-title" itemprop="headline">
+      {{ with $page.Title }}{{ . | markdownify }}{{ end }}
+    </h1>
+
+    {{ with $page.Content }}
+    <p class="hero-lead">{{ . | markdownify }}</p>
+    {{ end }}
+
+    {{ if $page.Params.cta.url }}
+    <p><a href="{{ $page.Params.cta.url }}" class="btn btn-light btn-outline btn-large">{{ $page.Params.cta.label | safeHTML}}</a></p>
+    {{ end }}
+
+  </div>
+
+</section>