From 4ed47ece1fb145658b191fe6474a3bad888c6045 Mon Sep 17 00:00:00 2001 From: Will Holmes Date: Wed, 2 Aug 2023 15:32:55 -0400 Subject: [PATCH 1/6] Fix: Homepage hero avatar image shrinking as hero title and subtitle grew in size. Resolved by adding explicit flex-basis declarations to each child div in the flex container. It also now allows the image to grow to its intrinsic size if there's room (but no more than that). --- assets/scss/pages/_home.scss | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/assets/scss/pages/_home.scss b/assets/scss/pages/_home.scss index 6beba33..a1bc488 100644 --- a/assets/scss/pages/_home.scss +++ b/assets/scss/pages/_home.scss @@ -19,6 +19,10 @@ .hero-info { + @include respond-to('medium') { + flex: 0 1 65%; + } + .hero-title { font-weight: 900; margin-top: 0; @@ -37,6 +41,10 @@ align-items: center; row-gap: 20px; + @include respond-to('medium') { + flex: 0 1 35%; + } + .hero-avatar { max-width: 300px; width: 100%; @@ -44,8 +52,8 @@ border-radius: 20px; @include respond-to('medium') { - width: 100%; - max-width:unset; + max-width: 100%; + width: unset; } } } From 1b8d611bc450d12551be8d383ccdaa35d6a221d9 Mon Sep 17 00:00:00 2001 From: Will Holmes Date: Wed, 2 Aug 2023 15:42:41 -0400 Subject: [PATCH 2/6] Fix: Replace hardcoded avatar image width and height attributes with the width and height of the Hugo image resource itself (for semantic reasons only, display is determined by CSS). --- layouts/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/index.html b/layouts/index.html index 8ad3beb..89881b7 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -25,7 +25,7 @@

{{ .Title }}

{{ end }} Headshot or avatar belonging to the website owner {{ if eq .Site.Params.home_hero_socials true }} {{ partial "general/social-links.html" . }} From 4e26e043f3ebfb3d53f65a88a4b5741afaed946f Mon Sep 17 00:00:00 2001 From: Will Holmes Date: Wed, 2 Aug 2023 15:53:12 -0400 Subject: [PATCH 3/6] Fix: social icons from growing to fit the entire width of the flex container, which was particularly strange looking when only a few icons were present. Instead, justify them center and add a row/col gap. --- assets/scss/components/_socials.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/assets/scss/components/_socials.scss b/assets/scss/components/_socials.scss index e8f16fb..4d9544c 100644 --- a/assets/scss/components/_socials.scss +++ b/assets/scss/components/_socials.scss @@ -7,7 +7,8 @@ display: flex; flex-wrap: wrap; align-items: center; - justify-content: space-around; + justify-content: center; + gap: 15px 40px; list-style: none; padding: 0; margin: 0; From 823221ac530fd1faa9e617a2ee13e729a68ac63a Mon Sep 17 00:00:00 2001 From: Will Holmes Date: Wed, 2 Aug 2023 17:20:44 -0400 Subject: [PATCH 4/6] Feat: Allow users to change the homepage primary and secondary CTA destinations in _index.md. Use .LinkTitle for CTA text so it can be customized in the chosen page's frontmatter. Add fallbacks to about and projects pages if nothing is set in frontmatter. --- exampleSite/content/_index.md | 3 +++ exampleSite/content/about/index.md | 1 + layouts/index.html | 18 ++++++++++++++++-- 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md index 5fc1e83..b40e199 100644 --- a/exampleSite/content/_index.md +++ b/exampleSite/content/_index.md @@ -3,6 +3,9 @@ title: Jump-start your personal blog and portfolio with the Hugo Liftoff theme. subtitle: Minimal blog/portfolio theme with a focus on content creation and SEO best practices. An ideal choice for technical users jump-starting a personal brand. seo_title: Hugo Liftoff | Hugo theme for creators +primary_cta_page: "about" +secondary_cta_page: "projects" + posts_section_heading: Recent Posts projects_section_heading: My Projects --- diff --git a/exampleSite/content/about/index.md b/exampleSite/content/about/index.md index 736a295..c6b5a25 100644 --- a/exampleSite/content/about/index.md +++ b/exampleSite/content/about/index.md @@ -1,5 +1,6 @@ --- type: about +linktitle: About title: Hi, my name is Hugo. seo_title: About description: Learn more about my background and experience. diff --git a/layouts/index.html b/layouts/index.html index 89881b7..11486dc 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -7,8 +7,22 @@

{{ .Title }}

{{.}}

{{ end }}
- About - Projects + {{ $p_cta := "" }} + {{ with .Params.primary_cta_page }} + {{ $p_cta = . }} + {{ end }} + {{ $s_cta := "" }} + {{ with .Params.secondary_cta_page }} + {{ $s_cta = . }} + {{ end }} + + {{ if $p_cta }}{{ with .Site.GetPage $p_cta }}{{ .LinkTitle }}{{ end }}{{ else }}About{{ end }} + + + {{ if $s_cta }}{{ with .Site.GetPage $s_cta }}{{ .LinkTitle }}{{ end }}{{ else }}Projects{{ end }} +
From 90db35b13669c36cdeb3501d27609d6840b94838 Mon Sep 17 00:00:00 2001 From: Will Holmes Date: Wed, 2 Aug 2023 17:31:55 -0400 Subject: [PATCH 5/6] Feat: Use markdownify function to convert homepage hero subtitle from markdown to HTML. Allows for markdown in subtitle, split into multiple paragraphs, etc. --- layouts/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/index.html b/layouts/index.html index 11486dc..893aaa4 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -4,7 +4,7 @@

{{ .Title }}

{{ with .Params.subtitle }} -

{{.}}

+

{{. | markdownify}}

{{ end }}
{{ $p_cta := "" }} From c7df0e10e939dc97922321af6c166dfbf04c83db Mon Sep 17 00:00:00 2001 From: Will Holmes Date: Mon, 7 Aug 2023 03:29:06 -0400 Subject: [PATCH 6/6] Convert homepage Recent Posts and Projects sections to shortcodes with the ability to customize the number of results. Those can now be included or excluded from within _index.md. Also add a see more projects link next to projects heading in shortcode. --- assets/scss/pages/_home.scss | 7 +++- layouts/index.html | 51 ++-------------------------- layouts/shortcodes/.keep | 0 layouts/shortcodes/projects.html | 26 ++++++++++++++ layouts/shortcodes/recent-posts.html | 34 +++++++++++++++++++ 5 files changed, 68 insertions(+), 50 deletions(-) delete mode 100644 layouts/shortcodes/.keep create mode 100644 layouts/shortcodes/projects.html create mode 100644 layouts/shortcodes/recent-posts.html diff --git a/assets/scss/pages/_home.scss b/assets/scss/pages/_home.scss index a1bc488..f147a9b 100644 --- a/assets/scss/pages/_home.scss +++ b/assets/scss/pages/_home.scss @@ -59,7 +59,6 @@ } .home-section-title { - margin-bottom: 50px; &::after { background-color: var(--color-contrast-medium); @@ -96,4 +95,10 @@ .see-more { margin-top: 30px; +} + +.see-more-projects { + color: var(--color-contrast-medium); + font-weight: 300; + font-size: var(--font-size-base); } \ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html index 893aaa4..f32159a 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -46,54 +46,7 @@

{{ .Title }}

{{ end }}
-
-
-

- {{- with .Params.posts_section_heading -}} - {{- . -}} - {{- else -}} - Recent Posts - {{- end -}} -

- -
- {{ range (where site.RegularPages "Section" "posts" | first 10) }} -
- {{ partial "posts/post-entry.html" . }} -
-
- {{ else }} - {{ partial "general/fallback-text.html" . }} - {{ end }} - More Posts -
-
-

- {{- with .Params.projects_section_heading -}} - {{- . -}} - {{- else -}} - My Projects - {{- end -}} -

- {{ $projects := where site.RegularPages "Section" "projects" | first 6 }} - {{ with $projects }} -
- {{- range . }} - {{ partial "projects/project-entry.html" . }} - {{ end }} -
- {{ else }} - {{ partial "general/fallback-text.html" . }} - {{ end }} -
+ {{/* Shortcodes from page content */}} + {{ .Content }}
{{ end }} \ No newline at end of file diff --git a/layouts/shortcodes/.keep b/layouts/shortcodes/.keep deleted file mode 100644 index e69de29..0000000 diff --git a/layouts/shortcodes/projects.html b/layouts/shortcodes/projects.html new file mode 100644 index 0000000..370264f --- /dev/null +++ b/layouts/shortcodes/projects.html @@ -0,0 +1,26 @@ +
+
+

+ {{- with $.Page.Params.projects_section_heading -}} + {{- . -}} + {{- else -}} + My Projects + {{- end -}} +

+ View all » +
+ {{ $num := .Get 0 }} + {{ if not $num }} + {{ $num = 6 }} + {{ end }} + {{ $projects := where site.RegularPages "Section" "projects" | first $num }} + {{ with $projects }} +
+ {{- range . }} + {{ partial "projects/project-entry.html" . }} + {{ end }} +
+ {{ else }} + {{ partial "general/fallback-text.html" . }} + {{ end }} +
\ No newline at end of file diff --git a/layouts/shortcodes/recent-posts.html b/layouts/shortcodes/recent-posts.html new file mode 100644 index 0000000..dab00c9 --- /dev/null +++ b/layouts/shortcodes/recent-posts.html @@ -0,0 +1,34 @@ +
+
+

+ {{- with $.Page.Params.posts_section_heading -}} + {{- . -}} + {{- else -}} + Recent Posts + {{- end -}} +

+ +
+ {{ $num := .Get 0 }} + {{ if not $num }} + {{ $num = 10 }} + {{ end }} + {{ range (where site.RegularPages "Section" "posts" | first $num) }} +
+ {{ partial "posts/post-entry.html" . }} +
+
+ {{ else }} + {{ partial "general/fallback-text.html" . }} + {{ end }} + More Posts +
\ No newline at end of file