Add sponsor logos to home page and footer

This commit is contained in:
Bud Parr 2017-11-29 04:27:15 -05:00 committed by Bjørn Erik Pedersen
parent 3ca53db974
commit 899e2defe3
7 changed files with 86 additions and 30 deletions

View File

@ -44,6 +44,19 @@ sections:
color_classes: bg-primary-color-light black
image: /images/home-page-templating-example.png
copy: "Hugo's Go-based templating provides just the right amount of logic to build anything from the simple to complex. If you prefer Jade/Pug-like syntax, you can also use Amber, Ace, or any combination of the three."
sponsors:
- name: "Forestry.io"
link: https://forestry.io/
logo: /images/sponsors/forestry-logotype.svg
copy:
- name:
link:
logo:
copy:
- name:
link:
logo:
copy:
---
Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.

View File

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 7.6 KiB

View File

@ -14,6 +14,9 @@
<section class="w-100 ph4 ph5-ns pv4 pv6-ns mid-gray bg-white bb bt b--light-gray">
{{- partial "home-page-sections/installation" . -}}
</section>
{{ partial "home-page-sections/sponsors.html" (dict "cx" . ) }}
<section class="w-100 ph4 ph5-ns pv4 pv6-ns mid-gray bg-accent-color-dark">
{{- partial "home-page-sections/tweets" . -}}
</section>

View File

@ -0,0 +1,31 @@
{{$sponsors := .cx.Site.GetPage "home"}}
{{$classes_box := "ba b--light-gray bg-light-gray br3 flex flex-column flex-wrap items-center justify-center ph3 pv4 mb4 w-100 w-30-l "}}
{{if $sponsors.Params.sponsors}}
<section class="{{.classes_section | default "bg-primary-color-dark b--light-gray bb bt ph5 pv4 w-100"}}">
<div class="center mw9"> 
<f3 class="b f3 light-gray">Hugo Sponsors</f3>
<div class="flex-ns flex-wrap center justify-between pt3">
{{ range $sponsors.Params.sponsors }}
{{if .logo}}
<div class="{{$classes_box}} o-100">
{{with .link -}}
<a href="{{.}}?{{ (querify "utm_source" "homepage" "utm_medium" "banner" "utm_campaign" "hugosponsor") | safeURL }}" class="grow">
{{- end}}
<img src="{{ .logo }}" alt="Logo for {{ .name }}" class="img h3 center" />
{{with .link}}</a>{{end}}
{{with .copy}}
<p class="center lh-copy gray mv1 tc {{$.classes_copy | default "f5 w-70-ns"}}">
{{- . -}}
</p>
{{end}}
</div>
{{else}}
<div class="{{$classes_box}} o-10">
<p class="b black tc">Your Logo Here</p>
</div>
{{end}}
{{end}}
</div>
</div>
</section>
{{end}}

View File

@ -5,8 +5,8 @@
{{ partial "nav-links-docs-mobile.html" . }}
</div>
<div class="flex dn-l">
<button class="js-toggle flex-auto ml2 dib dn-l f6 tc db mt4-ns ph3 pv2 link white bg-primary-color-dark hover-bg-primary-color ba b--white-40 w-auto" data-target=".globalmenu">Menu</button>
<div class="flex dn-l justify-between">
<button class="js-toggle flex-auto dib dn-l f6 tc db mt4-ns ph3 pv2 link mr2 white bg-primary-color-dark hover-bg-primary-color ba b--white-40 w-auto" data-target=".globalmenu">Menu</button>
<button class="js-toggle flex-auto ml2 dib dn-l f6 tc db mt4-ns ph3 pv2 link white bg-primary-color-dark hover-bg-primary-color ba b--white-40 w-auto" data-target=".docsmenu">Docs Menu</button>
<button class="js-toggle flex-auto dib dn-l f6 tc db mt4-ns ph3 pv2 link white bg-primary-color-dark hover-bg-primary-color ba b--white-40 w-auto" data-target=".docsmenu">Docs Menu</button>
</div>

View File

@ -1,40 +1,48 @@
<footer class="fixed relative-l bg-primary-color-dark bottom-0 w-100 pa3 pa4-l" role="contentinfo">
<!-- TODO: Make sure we don't lose all the footer content on mobile -->
<!-- TODO: Add icons https://github.com/rdwatters/hugo-docs-concept/issues/3#issuecomment-287194777
-->
<div class="dn db-l flex-ns flex-wrap w-80 center mw9 justify-between">
<div class="w-third pv3 dn db-l">
<div class="mb3 gray tc nested-links">
<footer class="bg-primary-color-dark ph4-ns pt4 relative w-100" role="contentinfo">
<div class="center flex-ns flex-wrap justify-between mw9 w-90">
<div class="pb3 pt4 w-100 w-50-ns">
<div class="b f3 light-gray mb3 nested-links tc">
By the <a href="https://github.com/gohugoio/hugo/contributors" class="link">Hugo Authors</a><br />
</div>
<div class="w4 center">
{{ partialCached "svg/hugo-logo-wide.svg" (dict "size" "100") }}
<div class="center w4">
{{ partialCached "svg/hugo-logo-wide.svg" . }}
</div>
<p class="f6 gray tc w-70 center">The Hugo logos are copyright © Steve Francia 2013{{ now.Year }}.</p>
<p class="f6 gray tc w-70 center">The Hugo Gopher is based on an original work by Renée French.</p>
<ul class="center f6 list ma0 mv3 pa0 tc">
{{- with .Site.Params.github_repo -}}<li class="dib mr3"><a href="{{ . }}" class="dim link light-gray pv2">File an Issue</a></li>{{- end -}}
{{- with .Site.Params.forum -}}<li class="dib mr3"><a href="{{ . }}" class="dim link light-gray pv2">Get Help</a></li>{{- end -}}
{{- with .Site.Params.gitter -}}<li class="dib"><a href="{{ . }}" class="dim link light-gray pv2">Discuss Source Code</a></li>{{- end -}}
</ul>
<ul class="center f6 list ma0 mv4 pa0 tc">
<li class="dib mr3"><a href="https://twitter.com/gohugoio" class="dim link light-gray pv2">@GoHugoIO</a></li>
<li class="dib mr3"><a href="https://twitter.com/spf13" class="dim link light-gray pv2">@spf13</a></li>
<li class="dib"><a href="https://twitter.com/bepsays" class="dim link light-gray pv2">@bepsays</a></li>
</ul>
{{ with getenv "REPOSITORY_URL" -}}
<p class="f6 tc w-70 center"><a href="https://www.netlify.com"><img src="https://www.netlify.com/img/global/badges/netlify-dark.svg"/></a></p>
<p class="center f6 tc w-70"><a href="https://www.netlify.com"><img src="https://www.netlify.com/img/global/badges/netlify-dark.svg"/></a></p>
{{- end }}
</div>
<div class="w-third pv3 dn db-l">
<ul class="list ma0 pa0 w-50 center">
{{- with .Site.Params.github_repo -}}<li><a href="{{ . }}" class="link white dim pv2 db">File an Issue</a></li>{{- end -}}
{{- with .Site.Params.forum -}}<li><a href="{{ . }}" class="link white dim pv2 db">Get Help</a></li>{{- end -}}
{{- with .Site.Params.gitter -}}<li><a href="{{ . }}" class="link white dim pv2 db">Discuss the Source Code</a></li>{{- end -}}
</ul>
<div class="w-100 w-50-l"> 
{{ partial "home-page-sections/sponsors.html" (dict "cx" . "classes_section" "pb3 w-100" "classes_copy" "f7 w-90-ns") }}
</div>
<div class="w-third pv3 dn db-l">
<ul class="list ma0 pa0">
<li><a href="https://twitter.com/gohugoio" class="link white dim pv2 db">@GoHugoIO</a></li>
<li><a href="https://twitter.com/spf13" class="link white dim pv2 db">@spf13</a></li>
<li><a href="https://twitter.com/bepsays" class="link white dim pv2 db">@bepsays</a></li>
</ul>
</div>
</div>
<div class="f7 gray mb5 mb0-ns ph3 w-100"> 
<p class="dib mr4">The Hugo logos are copyright © Steve Francia 2013{{ now.Year }}.</p>
<p class="dib">The Hugo Gopher is based on an original work by Renée French.</p>
</div>
<img src="/images/gopher-side_color.svg" class="absolute-l bottom-0 dn db-l h4 right-0 z-999"/>
<div class="bg-primary-color-dark bottom-0 dn-ns fixed pb3 ph3 w-100"> 
{{ partial "nav-mobile.html" . }}
</div>
</footer>