diff --git a/archetypes/default.md b/archetypes/default.md index 196c1270..366caeec 100644 --- a/archetypes/default.md +++ b/archetypes/default.md @@ -9,9 +9,12 @@ tags = [] categories = [] # Featured image -# Place your image in the `static/img/` folder and reference its filename below, e.g. `image = "example.jpg"`. -[header] -image = "" -caption = "" +# To use, add an image named `featured.jpg/png` to your page's folder. +[image] + # Caption (optional) + caption = "" + # Focal point (optional) + # Options: Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight + focal_point = "" +++ diff --git a/archetypes/post.md b/archetypes/post.md deleted file mode 100644 index cb0f40e8..00000000 --- a/archetypes/post.md +++ /dev/null @@ -1,24 +0,0 @@ -+++ -title = "{{ replace .Name "-" " " | title }}" -date = {{ .Date }} -draft = false - -# Authors. Comma separated list, e.g. `["Bob Smith", "David Jones"]`. -authors = [] - -# Tags and categories -# For example, use `tags = []` for no tags, or the form `tags = ["A Tag", "Another Tag"]` for one or more tags. -tags = [] -categories = [] - -# Featured image -# Place your image in the `static/img/` folder and reference its filename below, e.g. `image = "example.jpg"`. -# Use `caption` to display an image caption. -# Markdown linking is allowed, e.g. `caption = "[Image credit](http://example.org)"`. -# Set `preview` to `false` to disable the thumbnail in listings. -[header] -image = "" -caption = "" -preview = true - -+++ diff --git a/archetypes/post/index.md b/archetypes/post/index.md new file mode 100644 index 00000000..a981655c --- /dev/null +++ b/archetypes/post/index.md @@ -0,0 +1,23 @@ ++++ +title = "{{ replace .Name "-" " " | title }}" +date = {{ .Date }} +draft = false + +# Authors. Comma separated list, e.g. `["Bob Smith", "David Jones"]`. +authors = [] + +# Tags and categories +# For example, use `tags = []` for no tags, or the form `tags = ["A Tag", "Another Tag"]` for one or more tags. +tags = [] +categories = [] + +# Featured image +# To use, add an image named `featured.jpg/png` to your page's folder. +[image] + # Caption (optional) + caption = "" + + # Focal point (optional) + # Options: Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight + focal_point = "" ++++ diff --git a/archetypes/project/index.md b/archetypes/project/index.md index ff845343..870725e8 100644 --- a/archetypes/project/index.md +++ b/archetypes/project/index.md @@ -14,7 +14,12 @@ summary = "" external_link = "" # Featured image -# To use, add an image named `featured.jpg/png` to your project's folder. -[header] -caption = "" # Optionally add a caption to the featured image. +# To use, add an image named `featured.jpg/png` to your page's folder. +[image] + # Caption (optional) + caption = "" + + # Focal point (optional) + # Options: Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight + focal_point = "" +++ diff --git a/archetypes/publication.md b/archetypes/publication/index.md similarity index 80% rename from archetypes/publication.md rename to archetypes/publication/index.md index 939a2a96..a62376fd 100644 --- a/archetypes/publication.md +++ b/archetypes/publication/index.md @@ -25,9 +25,6 @@ publication_short = "" abstract = "" abstract_short = "" -# Featured image thumbnail (optional) -image_preview = "" - # Is this a selected publication? (true/false) selected = false @@ -60,16 +57,13 @@ url_source = "" # Digital Object Identifier (DOI) doi = "" -# Does this page contain LaTeX math? (true/false) -math = false - -# Does this page require source code highlighting? (true/false) -highlight = true - # Featured image -# Place your image in the `static/img/` folder and reference its filename below, e.g. `image = "example.jpg"`. -[header] -image = "" -caption = "" +# To use, add an image named `featured.jpg/png` to your page's folder. +[image] + # Caption (optional) + caption = "" + # Focal point (optional) + # Options: Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight + focal_point = "" +++ diff --git a/archetypes/talk.md b/archetypes/talk/index.md similarity index 80% rename from archetypes/talk.md rename to archetypes/talk/index.md index 0839ffe3..dc411108 100644 --- a/archetypes/talk.md +++ b/archetypes/talk/index.md @@ -42,16 +42,13 @@ url_slides = "" url_video = "" url_code = "" -# Does the content use math formatting? -math = false - -# Does the content use source code highlighting? -highlight = true - # Featured image -# Place your image in the `static/img/` folder and reference its filename below, e.g. `image = "example.jpg"`. -[header] -image = "" -caption = "" +# To use, add an image named `featured.jpg/png` to your page's folder. +[image] + # Caption (optional) + caption = "" + # Focal point (optional) + # Options: Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight + focal_point = "" +++ diff --git a/exampleSite/content/post/getting-started/index.md b/exampleSite/content/post/getting-started/index.md index e1c87daf..47e7e461 100644 --- a/exampleSite/content/post/getting-started/index.md +++ b/exampleSite/content/post/getting-started/index.md @@ -1,5 +1,6 @@ +++ title = "Academic: the website designer for Hugo" +subtitle = "Create a beautifully simple website in under 10 minutes :rocket:" date = 2016-04-20T00:00:00 lastmod = 2018-01-13T00:00:00 @@ -11,7 +12,7 @@ authors = [] tags = ["Academic"] summary = "Create a beautifully simple website or blog in under 10 minutes." -[header] +[image] caption = "Image credit: [**Unsplash**](https://unsplash.com/photos/CpkOjOcXdUY)" [[gallery_item]] diff --git a/exampleSite/content/project/external-project/index.md b/exampleSite/content/project/external-project/index.md index 779e518a..4e985906 100644 --- a/exampleSite/content/project/external-project/index.md +++ b/exampleSite/content/project/external-project/index.md @@ -17,6 +17,11 @@ external_link = "http://example.org" # Featured image # To use, add an image named `featured.jpg/png` to your project's folder. -[header] -caption = "Photo by Toa Heftiba on Unsplash" # Optionally add a caption to the featured image. +[image] + # Caption (optional) + caption = "Photo by Toa Heftiba on Unsplash" + + # Focal point (optional) + # Options: Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight + focal_point = "Smart" +++ diff --git a/exampleSite/content/project/internal-project/index.md b/exampleSite/content/project/internal-project/index.md index 49112303..b9e28445 100644 --- a/exampleSite/content/project/internal-project/index.md +++ b/exampleSite/content/project/internal-project/index.md @@ -17,8 +17,13 @@ external_link = "" # Featured image # To use, add an image named `featured.jpg/png` to your project's folder. -[header] -caption = "Photo by rawpixel on Unsplash" # Optionally add a caption to the featured image. +[image] + # Caption (optional) + caption = "Photo by rawpixel on Unsplash" + + # Focal point (optional) + # Options: Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight + focal_point = "Smart" +++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere tellus ac convallis placerat. Proin tincidunt magna sed ex sollicitudin condimentum. Sed ac faucibus dolor, scelerisque sollicitudin nisi. Cras purus urna, suscipit quis sapien eu, pulvinar tempor diam. Quisque risus orci, mollis id ante sit amet, gravida egestas nisl. Sed ac tempus magna. Proin in dui enim. Donec condimentum, sem id dapibus fringilla, tellus enim condimentum arcu, nec volutpat est felis vel metus. Vestibulum sit amet erat at nulla eleifend gravida. diff --git a/layouts/_default/list.html b/layouts/_default/list.html index bf4aedd9..f9dbe5bb 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -7,11 +7,9 @@ {{ partial "header.html" . }} {{ partial "navbar.html" . }} -{{ partial "header_image.html" . }} +{{ partial "page_header.html" . }}
- {{ with .Title }}

{{ . }}

{{ end }} - {{ with .Content }}
{{ . }}
{{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index f2141f07..d3ae4d90 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -3,12 +3,9 @@
- {{ partial "header_image.html" . }} + {{ partial "page_header.html" . }}
-

{{ .Title }}

- - {{ partial "article_metadata" (dict "content" . "is_list" 0) }}
{{ .Content }} diff --git a/layouts/partials/css/academic.css b/layouts/partials/css/academic.css index 84018001..f298c743 100644 --- a/layouts/partials/css/academic.css +++ b/layouts/partials/css/academic.css @@ -642,7 +642,7 @@ ul.share li:hover i { } /************************************************* - * Blog Articles + * Page content style **************************************************/ article { @@ -652,12 +652,45 @@ article { .article-container { max-width: 760px; - padding: 1rem 20px 0 20px; + padding: 0 20px 0 20px; margin: 0 auto 0 auto; } +.split-header { + margin-bottom: 2rem; +} + +.split-header .share-box { + float: left; +} + +.page-subtitle { + font-size: 1.15rem; + color: rgba(0,0,0,.54); + margin-bottom: 1rem; +} + +.split-header .page-subtitle { + margin-bottom: 1.5rem; +} + +.split-header-content { + max-width: 612px; + width: 100%; + padding: 60px 60px 32px 0; + margin-left: auto; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.split-header-image { + position: relative; /* Required for caption positioning */ + clear: both; + max-width: 580px; +} + .article-header { - position: relative; + position: relative; /* Required for caption positioning */ clear: both; } @@ -700,12 +733,16 @@ article { transition: color 0.6s ease; } +.text-muted { + color: rgba(0,0,0,0.54) !important; /* Override Bootstrap */ +} + .article-metadata { margin-bottom: 15px; overflow: hidden; font-size: 14px; letter-spacing: 0.03em; - color: #888; + color: rgba(0,0,0,0.54); } /* For article page only, not lists. */ @@ -841,13 +878,13 @@ article .article-metadata { .pub-list-item .pub-authors { line-height: normal; font-style: normal; - font-size: 1rem; - color: #3170A5; + font-size: 0.9rem; + color: rgba(0,0,0,0.54); } .pub-list-item .pub-publication { - color: #090; - font-size: 1rem; + color: rgba(0,0,0,0.54); + font-size: 0.9rem; } .pub-list-item .pub-links { @@ -1029,7 +1066,7 @@ article .article-metadata { } .card .card-text p { - color: #999999; + color: rgba(0,0,0,0.54); font-size: 0.75rem; } @@ -1126,7 +1163,7 @@ footer p { .site-footer, footer a#back_to_top i { - color: #899596; + color: rgba(0,0,0,0.54); } /************************************************** @@ -1237,18 +1274,18 @@ a.badge:hover { .btn-toolbar .btn.btn-primary:hover, .btn-toolbar .btn.btn-primary:focus { - background-color: {{ .Get "primary_dark" }} !important; + background-color: {{ .Get "primary_light" }} !important; } .btn-toolbar .btn.btn-primary:active, .btn-toolbar .btn.btn-primary.active { - background-color: {{ .Get "primary_light" }} !important; + background-color: {{ .Get "primary_dark" }} !important; } .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus { - box-shadow: 0 0 0 .2rem {{ .Get "primary_dark" }}; + box-shadow: 0 0 0 .2rem {{ .Get "primary_light" }}; } /************************************************* diff --git a/layouts/partials/docs_layout.html b/layouts/partials/docs_layout.html index da7ff3c4..67a42be4 100644 --- a/layouts/partials/docs_layout.html +++ b/layouts/partials/docs_layout.html @@ -30,8 +30,6 @@
- {{ partial "header_image.html" . }} -

{{ .Title }}

diff --git a/layouts/partials/header_image.html b/layouts/partials/header_image.html deleted file mode 100644 index 032cb3c1..00000000 --- a/layouts/partials/header_image.html +++ /dev/null @@ -1,21 +0,0 @@ -{{ $featured := (.Resources.ByType "image").GetMatch "*featured*" }} -{{ with $featured }} -{{ $image := .Fill "1600x400" }} -
- - {{ with $.Params.header.caption }}{{ . | markdownify | emojify }}{{ end }} -
-{{end}} - -{{ if and .Params.header.image (not $featured) }} -
- {{ $img_src := urls.Parse .Params.header.image }} - {{ if $img_src.Scheme }} - - {{ else }} - - {{ end }} - - {{ with .Params.header.caption }}{{ . | markdownify | emojify }}{{ end }} -
-{{end}} diff --git a/layouts/partials/page_header.html b/layouts/partials/page_header.html new file mode 100644 index 00000000..d9373ad5 --- /dev/null +++ b/layouts/partials/page_header.html @@ -0,0 +1,92 @@ +{{ $page := . }} +{{ $featured := (.Resources.ByType "image").GetMatch "*featured*" }} +{{ $anchor := $page.Params.image.focal_point | default "Smart" }} + +{{/* Set default titles for node pages */}} +{{ $title := .Title }} +{{ if and (not $title) .IsNode }} + {{ if eq .Type "post" }} + {{ $title = i18n "posts" }} + {{ else if eq .Type "talk" }} + {{ $title = i18n "talks" }} + {{ else if eq .Type "publication" }} + {{ $title = i18n "publications" }} + {{end}} +{{end}} + +{{/* Header image */}} +{{ if and .Params.header.image (not $featured) }} +
+ {{ $img_src := urls.Parse .Params.header.image }} + {{ if $img_src.Scheme }} + + {{ else }} + + {{ end }} + + {{ with .Params.header.caption }}{{ . | markdownify | emojify }}{{ end }} +
+{{end}} + +{{/* Featured image */}} +{{ with $featured }} +{{ $image := .Fill (printf "1600x400 q90 %s" $anchor) }} +
+ + {{ with $.Params.image.caption }}{{ . | markdownify | emojify }}{{ end }} +
+ +{{ $image := .Fill (printf "680x500 q90 %s" $anchor) }} +
+
+
+
+

{{ $title }}

+ + {{ with $page.Params.subtitle }} +

{{ . | markdownify | emojify }}

+ {{end}} + + {{ partial "page_metadata" (dict "content" $page "is_list" 1) }} + + {{ partial "share.html" $page }} +
+
+
+
+ + {{ with $.Params.image.caption }}{{ . | markdownify | emojify }}{{ end }} +
+
+
+
+ +
+

{{ $title }}

+ + {{ with $page.Params.subtitle }} +

{{ . | markdownify | emojify }}

+ {{end}} + + {{ partial "page_metadata" (dict "content" $page "is_list" 0) }} +
+{{else}} + {{/* Case when page has no image */}} + + {{/* Wider container for nodes */}} + {{ $ctnr := "article-container" }} + {{ if $page.IsNode }} + {{ $ctnr = "universal-wrapper" }} + {{end}} +
+

{{ $title }}

+ + {{ with $page.Params.subtitle }} +

{{ . | markdownify | emojify }}

+ {{end}} + + {{ if not .IsNode }} + {{ partial "page_metadata" (dict "content" $page "is_list" 0) }} + {{end}} +
+{{end}} diff --git a/layouts/partials/article_metadata.html b/layouts/partials/page_metadata.html similarity index 100% rename from layouts/partials/article_metadata.html rename to layouts/partials/page_metadata.html diff --git a/layouts/partials/post_li_detailed.html b/layouts/partials/post_li_detailed.html index 07203ad1..bf8dd070 100644 --- a/layouts/partials/post_li_detailed.html +++ b/layouts/partials/post_li_detailed.html @@ -1,17 +1,14 @@ {{ $post := .post }}
- {{ partial "article_metadata" (dict "content" $post "is_list" 1) }} + {{ partial "page_metadata" (dict "content" $post "is_list" 1) }} - {{ $preview := $post.Params.header.preview | default true }} - {{ if and $post.Params.header.image $preview }} + {{ $resource := ($post.Resources.ByType "image").GetMatch "*featured*" }} + {{ $anchor := $post.Params.image.focal_point | default "Smart" }} + {{ with $resource }} + {{ $image := .Fill (printf "918x517 q90 %s" $anchor) }} - {{ $img_src := urls.Parse $post.Params.header.image }} - {{ if $img_src.Scheme }} - - {{ else }} - - {{ end }} + {{end}}

diff --git a/layouts/partials/post_li_stream.html b/layouts/partials/post_li_stream.html index a96b6e23..3364027e 100644 --- a/layouts/partials/post_li_stream.html +++ b/layouts/partials/post_li_stream.html @@ -20,7 +20,7 @@ {{ end }}
- {{ partial "article_metadata" (dict "content" $post "is_list" 1) }} + {{ partial "page_metadata" (dict "content" $post "is_list" 1) }}

diff --git a/layouts/partials/widgets/projects.html b/layouts/partials/widgets/projects.html index 0a28b076..5415d83b 100644 --- a/layouts/partials/widgets/projects.html +++ b/layouts/partials/widgets/projects.html @@ -75,14 +75,15 @@ {{ $.Scratch.Set "target" "" }} {{ if $project.Params.external_link }} {{ $.Scratch.Set "project_url" $project.Params.external_link }} - {{ $.Scratch.Set "target" "target=\"_blank\"" }} + {{ $.Scratch.Set "target" "target=\"_blank\" rel=\"noopener\"" }} {{ end }} {{ $resource := ($project.Resources.ByType "image").GetMatch "*featured*" }} + {{ $anchor := $project.Params.image.focal_point | default "Smart" }}
{{ with $resource }} - {{ $image := .Fill "550x550" }} - diff --git a/layouts/project/single.html b/layouts/project/single.html index 5af3ce15..f30be6a7 100644 --- a/layouts/project/single.html +++ b/layouts/project/single.html @@ -3,18 +3,9 @@
- {{ partial "header_image.html" . }} + {{ partial "page_header.html" . }}
- -
-

{{ .Title }}

- - - {{ partial "share.html" . }} - -
- {{ with .Params.external_link }} {{ i18n "open_project_site" }} {{ end }} diff --git a/layouts/publication/single.html b/layouts/publication/single.html index 94981cae..5530e816 100644 --- a/layouts/publication/single.html +++ b/layouts/publication/single.html @@ -2,22 +2,9 @@ {{ partial "navbar.html" . }}
- {{ partial "header_image.html" . }} + {{ partial "page_header.html" . }}
-

{{ .Title }}

- - - {{ partial "share.html" . }} - - - {{ if .Params.image }} - - {{end}} {{ if .Params.abstract }}

{{ i18n "abstract" }}

diff --git a/layouts/section/post.html b/layouts/section/post.html index 614f37e5..d0d54a14 100644 --- a/layouts/section/post.html +++ b/layouts/section/post.html @@ -1,12 +1,10 @@ {{ partial "header.html" . }} {{ partial "navbar.html" . }} -{{ partial "header_image.html" . }} +{{ partial "page_header.html" . }}
-

{{ .Title | default (i18n "posts") }}

- {{ with .Content }}
{{ . }}
{{ end }} diff --git a/layouts/section/publication.html b/layouts/section/publication.html index cda35aed..64bedd1a 100644 --- a/layouts/section/publication.html +++ b/layouts/section/publication.html @@ -1,12 +1,11 @@ {{ partial "header.html" . }} {{ partial "navbar.html" . }} -{{ partial "header_image.html" . }} +{{ partial "page_header.html" . }}
-

{{ .Title | default (i18n "publications") }}

{{ with .Content }}
{{ . }}
diff --git a/layouts/section/talk.html b/layouts/section/talk.html index ffd1c185..e71e3712 100644 --- a/layouts/section/talk.html +++ b/layouts/section/talk.html @@ -1,12 +1,11 @@ {{ partial "header.html" . }} {{ partial "navbar.html" . }} -{{ partial "header_image.html" . }} +{{ partial "page_header.html" . }}
-

{{ .Title | default (i18n "talks") }}

{{ with .Content }}
{{ . }}
diff --git a/layouts/talk/single.html b/layouts/talk/single.html index a1e5be69..27963ffa 100644 --- a/layouts/talk/single.html +++ b/layouts/talk/single.html @@ -2,22 +2,10 @@ {{ partial "navbar.html" . }}
- {{ partial "header_image.html" . }} + {{ partial "page_header.html" . }}
-
-

{{ .Title }}

- - - {{ partial "share.html" . }} - -
- {{ if .Params.abstract }}

{{ i18n "abstract" }}

{{ .Params.abstract | markdownify }}