mirror of
https://github.com/gohugoio/hugo.git
synced 2026-09-01 19:22:38 +00:00
Squashed 'themes/gohugoioTheme/' changes from ecad8247..fe71e360
fe71e360 Add srcset to the showcase screenshots 919da9a5 Add a simple byline cbe20918 Fix an issue where whitespace wrap caused scrollbars on some browsers cfee86a2 Add section to the title element 3d2ef1ac Iterating on Showcase (#330) c28c5e05 Standardize showcase metadata 551fbcde Adjust showcase image size on front page 159d5c98 Use .RelPermalink and not .URL 53eb89ec Move showcase items in list view to a template in the layout 7797cfe3 Tweak details box for mobile 90cafcfd Improve showcase single layout 083c3123 Improve styling of showcase prev/next buttons c0701abf Remove extra div that was breaking mobile layout of the showcase e277d36c Add block class to to images on mobile so they behave as expected 97c12851 Add a proper RSS feed to home page 660f3dfd Move showcase images to proper Resources a0668630 Add Showcase to Home page and internal pages d9e80db6 Revert "Add some temporary baseURL debug" 46de36ab Add some temporary baseURL debug 8fb218a5 Fix mobile menu display so it shows on mid-size displays 98a831f7 Add featured image to news articles 5beafd1e Revert the recent change made to default list template befee494 Add rough draft for page and section bundles git-subtree-dir: themes/gohugoioTheme git-subtree-split: fe71e3601c8bd5f0df3396df6d7f5e761c6bb08c
This commit is contained in:
Bjørn Erik Pedersen
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: "{{ replace .Name "-" " " | title }}"
|
||||
date: {{ .Date }}
|
||||
description:
|
||||
siteURL:
|
||||
siteSource:
|
||||
---
|
||||
@@ -22,6 +22,10 @@
|
||||
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
|
||||
{{ end }}
|
||||
|
||||
{{ range .AlternativeOutputFormats -}}
|
||||
<link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
|
||||
{{ end -}}
|
||||
|
||||
<link href='{{ "dist/main.css" | relURL }}' rel='stylesheet' type="text/css" />
|
||||
{{- partial "head-additions.html" . -}}
|
||||
{{- template "_internal/opengraph.html" . -}}
|
||||
|
||||
@@ -9,6 +9,8 @@
|
||||
{{- partial "home-page-sections/features-icons" . -}}
|
||||
</section>
|
||||
|
||||
{{- partial "home-page-sections/showcase.html" . -}}
|
||||
|
||||
{{- partial "home-page-sections/features-single" . -}}
|
||||
|
||||
<section class="w-100 ph4 ph5-ns pv4 pv6-ns mid-gray bg-white bb bt b--light-gray">
|
||||
|
||||
@@ -47,8 +47,13 @@
|
||||
<div class="fn pl5-l pt3 mid-gray w-100 w-two-third-l sans-serif nested-copy-line-height no-underline nested-links nested-img nested-copy-seperator nested-blockquote measure-wide-l"><!-- TODO: Can the content top and the description top line up more precisely, or is just winging it with padding the best we've got? -->
|
||||
{{ with .Params.featured_image_path }}
|
||||
<img src="{{ . }}" alt="Featured Image for {{ $.Title }}" class="mw-100">
|
||||
{{ end }}
|
||||
|
||||
{{ else }}
|
||||
{{ $featured := (.Resources.ByType "image").GetMatch "*featured*" }}
|
||||
{{ with $featured }}
|
||||
{{ $featured := .Resize "480x" }}
|
||||
<img src="{{ $featured.RelPermalink }}" alt="Featured Image for {{ $.Title }}" class="mw-100">
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
<section class="bg-near-white mid-gray pb5 ph4 ph5-ns pt4 w-100">
|
||||
<h3 class="black f1 fw4 lh-title ma0 pb3 pt0-l pt4">Showcase</h3>
|
||||
{{/* NOTE: transitions for this section are in themes/gohugoioTheme/src/css/_carousel.css */}}
|
||||
<div class="w-100">
|
||||
<div class="w-100 overflow-x-scroll">
|
||||
<div class="row nowrap mv2 pb1">
|
||||
{{ range $p := first 10 (where .Site.RegularPages "Section" "showcase") }}
|
||||
{{ $img := (.Resources.ByType "image").GetMatch "*featured*" }}
|
||||
{{ with $img }}
|
||||
{{ $big := .Fill "1024x512 top" }}
|
||||
{{ $small := $big.Resize "512x" }}
|
||||
<a href="{{ $p.RelPermalink}}" class="tile lazyload cover dib f4 h5 ml1 mr4 bg-black relative mw-100 shadow-5" style="width:{{ $small.Width }}px;"
|
||||
data-bg="{{ $img.RelPermalink }}"
|
||||
data-sizes="auto"
|
||||
data-srcset="{{ $small.RelPermalink }} 1x,
|
||||
{{ $big.RelPermalink }} 2x" data-src="small"
|
||||
>
|
||||
{{with $p.Title}}
|
||||
<div class="details absolute bottom-0 f3-ns f4 left-0 o-0 right-0 top-0">
|
||||
<div class="absolute bottom-0 pa2 tc white">
|
||||
{{.}} →
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</a>
|
||||
{{ end }}
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/* END */}}
|
||||
<div class="flex w-100 mt4 justify-end">{{/* using Flex to make the button show up on the right side */}}
|
||||
<a href="/showcase/" class="br2 f6 bg-primary-color-dark hover-bg-primary-color link ph3 pv2 ttu white">See All</a>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,14 @@
|
||||
{{ if or .PrevInSection .NextInSection }}
|
||||
{{/* this div holds these a tags as a unit for flex-box display */}}
|
||||
<div date-pref class="white">
|
||||
{{if .NextInSection}}
|
||||
<a href="{{.NextInSection.Permalink }}" class="br2 db f6 ph2 pv2 bg-light-gray white" title="{{ .NextInSection.Title }} ">{{ partial "svg/ic_chevron_left_black_24px.svg" (dict "fill" "#fff" "size" "12px") }} {{.NextInSection.Title}}</a>
|
||||
{{end}}
|
||||
|
||||
{{if .PrevInSection}}
|
||||
<a href="{{ .PrevInSection.Permalink }}" class="br2 db f6 pr1 mt3 bg-light-gray ph2 pv2 white" title="{{ .PrevInSection.Title }}">
|
||||
{{.PrevInSection.Title}} {{ partial "svg/ic_chevron_right_black_24px.svg" (dict "fill" "#fff" "size" "12px") }}
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
{{ end }}
|
||||
@@ -1,7 +1,7 @@
|
||||
<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>
|
||||
@@ -41,8 +41,8 @@
|
||||
|
||||
<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 class="bg-primary-color-dark bottom-0 left-0 right-0 dn-l fixed pb3 ph3 w-100">
|
||||
{{- partial "nav-mobile.html" . -}}
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
{{ define "main" }}
|
||||
<div class="w-100 ph4 ph5-ns pb5 pb6-ns pt1 pt3-ns ">
|
||||
<article class="cf pa3 pa4-m pa4-l nested-copy-line-height nested-img">
|
||||
<h1 class="primary-color-dark">
|
||||
{{ .Title }}
|
||||
</h1>
|
||||
<div class="nested-copy-line-height">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</article>
|
||||
<section class="flex-ns flex-wrap justify-between w-100 v-top">
|
||||
{{ range (.Paginator 20).Pages }}
|
||||
{{template "showcase_items" .}}
|
||||
{{ end }}
|
||||
</section>
|
||||
<div class="nested-list-reset nested-links">
|
||||
{{/* pagination.html: https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/template_embedded.go#L117 */}}
|
||||
{{ template "_internal/pagination.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
|
||||
{{define "showcase_items"}}
|
||||
<a href="{{.Permalink}}" class="b--moon-gray ba bg-animate bg-white db flex-auto-ns hover-bg-near-white mb3 mr3 w-100 w-30-l" style="max-width: 1024px;">
|
||||
<div class="flex flex-column black h-100 mb2 pa3 pa4-l">
|
||||
{{ $img := (.Resources.ByType "image").GetMatch "*featured*" }}
|
||||
{{ with $img }}
|
||||
{{ $big := .Fill "1024x512 top" }}
|
||||
{{ $small := $big.Resize "512x" }}
|
||||
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiIHZpZXdCb3g9IjAgMCAxNjAwIDkwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGU+UmVjdGFuZ2xlPC90aXRsZT48ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz48ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiLz48L2c+PC9zdmc+"
|
||||
data-sizes="auto"
|
||||
data-srcset="{{ $small.RelPermalink }} 1x,
|
||||
{{ $big.RelPermalink }} 2x" data-bg="{{ $small.RelPermalink }}" class="grow img lazyload" style="display: block; width: 100%; height: auto;" />
|
||||
{{end}}
|
||||
<div style="margin-top:auto;">{{/* the margin aligns to the bottom */}}
|
||||
<h2 class="dib f3 mt4">
|
||||
{{- .Title -}}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
{{end}}
|
||||
@@ -0,0 +1,98 @@
|
||||
{{ define "title" }}
|
||||
Showcase: {{ .Title }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
<article class="center ph3 ph4-ns pv3 pv5-ns mw9">
|
||||
|
||||
<!-- header spans the full width -->
|
||||
<div class="flex flex-wrap">
|
||||
|
||||
<div class="w-100 w-20-l order-1 order-0-l">
|
||||
{{template "details" .}}
|
||||
</div>
|
||||
|
||||
<div class="w-100 w-60-l order-0 order-1-l">
|
||||
{{template "main-column" .}}
|
||||
</div>
|
||||
|
||||
<aside class="dn mid-gray w-100 w-20-ns flex-l justify-center order-2">
|
||||
{{template "navigation" .}}
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="f6 gray mv6">{{/* bottom row */}}
|
||||
Last Update: {{ .Lastmod.Format "January 2, 2006" }} <br>
|
||||
{{ partial "page-edit.html" . }}
|
||||
</div>
|
||||
|
||||
</article>
|
||||
{{ end }}
|
||||
|
||||
|
||||
|
||||
{{define "main-column"}}
|
||||
{{ $img := (.Resources.ByType "image").GetMatch "*featured*" }}
|
||||
{{ with $img }}
|
||||
{{ $big := .Fill "1024x512 top" }}
|
||||
{{ $small := $big.Resize "512x" }}
|
||||
<img srcset="{{ $small.RelPermalink }} 1x, {{ $big.RelPermalink }} 2x" alt="{{ $img.Title }}" width="{{ $big.Width }}" class="mw-100 b--light-gray ba">
|
||||
{{ end }}
|
||||
<div class="mid-gray nested-copy-line-height nested-img nested-links">
|
||||
{{with .Params.byline }}
|
||||
<div style="margin-top: 20px; font-style: italic;">By {{ . | markdownify -}}</div>
|
||||
{{ end }}
|
||||
{{with .Content}}
|
||||
{{- . -}}
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{define "details"}}
|
||||
<div class="mt4 mt0-ns nested-links mr3-m mr4-l">
|
||||
<div class="ba b--light-gray bg-white pa3">
|
||||
<h1 class="f3 mt0">{{.Title}}</h1>
|
||||
{{ with .Params.siteURL }}
|
||||
<a href="{{ . }}" class="db f5 mb1">{{ . | replaceRE "^https?://([^/]+).*" "$1"}} {{ partial "svg/link-ext.svg" (dict "size" "10") }}</a>
|
||||
{{ end }}
|
||||
{{ with .Params.siteSource }}
|
||||
<a href="{{ . }}" class="db mb4">source {{ partial "svg/link-ext.svg" (dict "size" "10") }}</a>
|
||||
{{ end }}
|
||||
{{ $bio := (.Resources.ByType "page").GetMatch "bio*" }}
|
||||
{{ with $bio }}
|
||||
<div class="f6 mid-gray nested-copy-line-height nested-links">
|
||||
{{- .Content -}}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="b--light-gray bt dn-l pt3">
|
||||
<div class="f6 gray mb2">Previous/Next</div>
|
||||
{{- partial "previous-next-links-in-section-with-title.html" . -}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{define "navigation"}}
|
||||
{{$section := where .Site.RegularPages "Section" .Section}}
|
||||
{{$number_of_entries := $section | len}}
|
||||
<ul class="pa0 list">
|
||||
<li class="b f5 blTK b--light-gray pb2 pl2">
|
||||
More Sites
|
||||
</li>
|
||||
{{range first 20 $section}}
|
||||
<li class="bl b--light-gray pl2 f6 hover-bg-light-gray hover-accent-color-light {{if eq $ .}} bg-light-gray{{end}}">
|
||||
<a href="{{.RelPermalink}}" class="db link w-100 pv1 ph1 {{ if eq $ . }} b primary-color{{else}} mid-gray {{end}}">
|
||||
{{- .Title -}}
|
||||
</a>
|
||||
</li>
|
||||
{{end}}
|
||||
{{if ge $number_of_entries 20}}
|
||||
<li class="mt3">
|
||||
<a href="/showcase/page/2/" class="link blue">
|
||||
See More »
|
||||
</a>
|
||||
</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
{{end}}
|
||||
@@ -0,0 +1,25 @@
|
||||
/* These styles enhance the home page carousel, located here: themes/gohugoioTheme/layouts/partials/home-page-sections/showcase.html */
|
||||
.overflow-x-scroll{
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.row {
|
||||
transition: 450ms transform;
|
||||
font-size: 0;
|
||||
}
|
||||
.tile {
|
||||
transition: 450ms all;
|
||||
}
|
||||
.details {
|
||||
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.9)), to(rgba(0,0,0,0)));
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
|
||||
transition: 450ms opacity;
|
||||
}
|
||||
.tile:hover .details {
|
||||
opacity: 1;
|
||||
}
|
||||
.row:hover .tile {
|
||||
opacity: 0.3;
|
||||
}
|
||||
.row:hover .tile:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -11,6 +11,7 @@
|
||||
@import '_documentation-styles';
|
||||
|
||||
@import '_algolia';
|
||||
@import '_carousel';
|
||||
@import '_code';
|
||||
@import '_color-scheme';
|
||||
@import '_columns';
|
||||
|
||||
@@ -1,2 +1,3 @@
|
||||
var lazysizes = require('lazysizes');
|
||||
// var lsnoscript = require('lazysizes/plugins/noscript/ls.noscript.js');
|
||||
var unveilhooks = require('lazysizes/plugins/unveilhooks/ls.unveilhooks.js');
|
||||
|
||||
Generated
+17
-17
@@ -2585,14 +2585,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"string_decoder": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"safe-buffer": "5.0.1"
|
||||
}
|
||||
},
|
||||
"string-width": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
@@ -2603,6 +2595,14 @@
|
||||
"strip-ansi": "3.0.1"
|
||||
}
|
||||
},
|
||||
"string_decoder": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"safe-buffer": "5.0.1"
|
||||
}
|
||||
},
|
||||
"stringstream": {
|
||||
"version": "0.0.5",
|
||||
"bundled": true,
|
||||
@@ -5411,15 +5411,6 @@
|
||||
"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
|
||||
"dev": true
|
||||
},
|
||||
"string_decoder": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
|
||||
"integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"safe-buffer": "5.1.1"
|
||||
}
|
||||
},
|
||||
"string-width": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
|
||||
@@ -5431,6 +5422,15 @@
|
||||
"strip-ansi": "3.0.1"
|
||||
}
|
||||
},
|
||||
"string_decoder": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
|
||||
"integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"safe-buffer": "5.1.1"
|
||||
}
|
||||
},
|
||||
"strip-ansi": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
|
||||
|
||||
+1
-1
@@ -8,7 +8,7 @@
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"build:production": "rm -rf ../static/dist && webpack -p",
|
||||
"build": "webpack --progress --colors --watch",
|
||||
"build": "webpack --progress --colors --watch",
|
||||
"start": "npm run build"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
Vendored
+6
-11692
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user