Merge pull request #31 from wjh18/homepage-updates

Homepage updates
wjh18 · Aug 7, 2023 · 0ef301c · 0ef301c
2 parents ff85bd5 + c7df0e1
commit 0ef301c
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 57 deletions.
diff --git 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;

diff --git 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,21 +41,24 @@
   align-items: center;
   row-gap: 20px;
 
+  @include respond-to('medium') {
+    flex: 0 1 35%;
+  }
+
   .hero-avatar {
     max-width: 300px;
     width: 100%;
     height: auto;
     border-radius: 20px;
 
     @include respond-to('medium') {
-      width: 100%;
-      max-width:unset;
+      max-width: 100%;
+      width: unset;
     }
   }
 }
 
 .home-section-title {
-  margin-bottom: 50px;
 
   &::after {
     background-color: var(--color-contrast-medium);
@@ -88,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);
 }
diff --git 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
@@ -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
@@ -4,11 +4,25 @@
     <div class="hero-info">
       <h1 class="hero-title">{{ .Title }}</h1>
       {{ with .Params.subtitle }}
-        <p class="hero-subtitle">{{.}}</p>
+        <p class="hero-subtitle">{{. | markdownify}}</p>
       {{ end }}
       <div class="btn-group">
-        <a class="btn-primary" href="{{ "about/" | relURL }}">About</a>
-        <a class="btn-secondary" href="{{ "projects/" | relURL }}">Projects</a>
+        {{ $p_cta := "" }}
+        {{ with .Params.primary_cta_page }}
+          {{ $p_cta = . }}
+        {{ end }}
+        {{ $s_cta := "" }}
+        {{ with .Params.secondary_cta_page }}
+          {{ $s_cta = . }}
+        {{ end }}
+        <a class="btn-primary"
+           href="{{ with $p_cta }}{{ . | relURL }}{{ else }}{{ "about" | relURL }}{{ end }}">
+           {{ if $p_cta }}{{ with .Site.GetPage $p_cta }}{{ .LinkTitle }}{{ end }}{{ else }}About{{ end }}
+        </a>
+        <a class="btn-secondary"
+           href="{{ with $s_cta }}{{ . | relURL }}{{ else }}{{ "projects" | relURL }}{{ end }}">
+           {{ if $s_cta }}{{ with .Site.GetPage $s_cta }}{{ .LinkTitle }}{{ end }}{{ else }}Projects{{ end }}
+        </a>
       </div>
     </div>
     <div class="hero-owner">
@@ -25,61 +39,14 @@ <h1 class="hero-title">{{ .Title }}</h1>
       {{ end }}
       <img class="hero-avatar"
             src="{{ $image.RelPermalink }}"
-            width="300" height="300"
+            width="{{- $image.Width -}}" height="{{- $image.Height -}}"
             alt="Headshot or avatar belonging to the website owner"/>
       {{ if eq .Site.Params.home_hero_socials true }}
         {{ partial "general/social-links.html" . }}
       {{ end }}
     </div>
   </section>
-  <section class="section">
-    <div class="home-title-dropdown">
-      <h2 class="home-section-posts-title">
-        {{- with .Params.posts_section_heading -}}
-          {{- . -}}
-        {{- else -}}
-          Recent Posts
-        {{- end -}}
-      </h2>
-      <select name="choice" id="select-posts">
-        {{ range (where .Sections "Section" "posts") }}
-        <option value="all-{{ .Name | lower }}" selected>All {{ .Name | lower }}</option>
-        {{ range .Sections }}
-        {{ if .CurrentSection.Pages }}
-        <option value="{{ replace .CurrentSection.RelPermalink "/" "" | lower }}">{{ .CurrentSection.Name }}</option>
-        {{ end }}
-        {{ end }}
-        {{ end }}
-      </select>
-    </div>
-    {{ range (where site.RegularPages "Section" "posts" | first 10) }}
-      <div class="post-entry-filter entry--{{ replace .CurrentSection.RelPermalink "/" "" | lower }}">
-        {{ partial "posts/post-entry.html" . }}
-        <div class="post-entry-divider"></div>
-      </div>
-    {{ else }}
-      {{ partial "general/fallback-text.html" . }}
-    {{ end }}
-    <a class="btn-secondary see-more" href="{{ "posts/" | relURL }}">More Posts</a>
-  </section>
-  <section class="section">
-    <h2 class="home-section-title">
-      {{- with .Params.projects_section_heading -}}
-        {{- . -}}
-      {{- else -}}
-        My Projects
-      {{- end -}}
-    </h2>
-    {{ $projects := where site.RegularPages "Section" "projects" | first 6 }}
-    {{ with $projects }}
-      <div class="project-list">
-        {{- range . }}
-          {{ partial "projects/project-entry.html" . }}
-        {{ end }}
-      </div>
-    {{ else }}
-      {{ partial "general/fallback-text.html" . }}
-    {{ end }}
-  </section>
+  {{/*  Shortcodes from page content  */}}
+  {{ .Content }}
 </div>
 {{ end }}
diff --git a/layouts/shortcodes/.keep b/layouts/shortcodes/.keep
diff --git a/layouts/shortcodes/projects.html b/layouts/shortcodes/projects.html
@@ -0,0 +1,26 @@
+<section class="section">
+  <div class="home-title-dropdown">
+    <h2 class="home-section-title">
+      {{- with $.Page.Params.projects_section_heading -}}
+        {{- . -}}
+      {{- else -}}
+        My Projects
+      {{- end -}}
+    </h2>
+    <a class="see-more-projects" href="{{ "projects/" | relURL }}">View all &raquo;</a>
+  </div>
+  {{ $num := .Get 0 }}
+  {{ if not $num }}
+    {{ $num = 6 }}
+  {{ end }}
+  {{ $projects := where site.RegularPages "Section" "projects" | first $num }}
+  {{ with $projects }}
+    <div class="project-list">
+      {{- range . }}
+        {{ partial "projects/project-entry.html" . }}
+      {{ end }}
+    </div>
+  {{ else }}
+    {{ partial "general/fallback-text.html" . }}
+  {{ end }}
+</section>
diff --git a/layouts/shortcodes/recent-posts.html b/layouts/shortcodes/recent-posts.html
@@ -0,0 +1,34 @@
+<section class="section">
+  <div class="home-title-dropdown">
+    <h2 class="home-section-posts-title">
+      {{- with $.Page.Params.posts_section_heading -}}
+        {{- . -}}
+      {{- else -}}
+        Recent Posts
+      {{- end -}}
+    </h2>
+    <select name="choice" id="select-posts">
+      {{ range (where site.Sections "Section" "posts") }}
+      <option value="all-{{ .Name | lower }}" selected>All {{ .Name | lower }}</option>
+      {{ range .Sections }}
+      {{ if .CurrentSection.Pages }}
+      <option value="{{ replace .CurrentSection.RelPermalink "/" "" | lower }}">{{ .CurrentSection.Name }}</option>
+      {{ end }}
+      {{ end }}
+      {{ end }}
+    </select>
+  </div>
+  {{ $num := .Get 0 }}
+  {{ if not $num }}
+    {{ $num = 10 }}
+  {{ end }}
+  {{ range (where site.RegularPages "Section" "posts" | first $num) }}
+    <div class="post-entry-filter entry--{{ replace .CurrentSection.RelPermalink "/" "" | lower }}">
+      {{ partial "posts/post-entry.html" . }}
+      <div class="post-entry-divider"></div>
+    </div>
+  {{ else }}
+    {{ partial "general/fallback-text.html" . }}
+  {{ end }}
+  <a class="btn-secondary see-more" href="{{ "posts/" | relURL }}">More Posts</a>
+</section>