Fix image display on main page

config.yaml

@@ -61,7 +61,7 @@ params:
     # Where the main hero button links to
     buttonlink: "about"
     # Hero image (from static/images/___)
-    image: penguin_learning.webp
+    image: penguin_learning
     # Footer logos (from static/images/logos/clients/*.svg)
     # urls are optional
     clientlogos:

layouts/partials/css.html

@@ -5,11 +5,11 @@
 {{- $fontName     := .Site.Params.font.name | default "Open Sans" }}
 {{- $fontFace     := replace $fontName " " "+" }}
 {{- $fontSizes    := delimit (.Site.Params.font.sizes | default (slice 300 400 600 700)) "," }}
-{{- $fontUrl      := printf "/css/open-sans.css?family=%s:%s" $fontFace $fontSizes }}
+{{- $fontUrl      := printf "/css/open-sans.css?family=%s:%s&display=swap" $fontFace $fontSizes }}
 <link rel="icon" type="image/png" href="{{ "images/favicon.ico" | relURL }}" />
 
 <link rel="stylesheet" type="text/css" href="{{ $fontUrl | relURL }}" />
-    
+
 {{- if $inServerMode }}
 {{- $css := resources.Get $sass | toCSS $cssOpts }}
 <link rel="preload" href="{{ $css.RelPermalink }}" as="style" onload="this.onload=null;this.rel='stylesheet'" />
@@ -27,13 +27,13 @@
 <script type="text/javascript" src="{{  $icons }}"></script>
 
 {{ partial "stylesheet.html" (dict "css" "css/icons.css")  }}
-{{ partial "stylesheet.html" (dict "css" "css/custom.css")  }}
-{{ partial "stylesheet.html" (dict "css" "css/glossary.css")  }}
-{{ partial "stylesheet.html" (dict "css" "css/recommendations.css")  }}
-{{ partial "stylesheet.html" (dict "css" "css/images.css")  }}
-{{ partial "stylesheet.html" (dict "css" "css/patterns.css")  }}
-{{ partial "stylesheet.html" (dict "css" "css/quotes.css")  }}
-{{ partial "stylesheet.html" (dict "css" "css/taxonomies.css")  }}
+{{ partial "stylesheet.html" (dict "css" "css/custom.min.css")  }}
+{{ partial "stylesheet.html" (dict "css" "css/glossary.min.css")  }}
+{{ partial "stylesheet.html" (dict "css" "css/recommendations.min.css")  }}
+{{ partial "stylesheet.html" (dict "css" "css/images.min.css")  }}
+{{ partial "stylesheet.html" (dict "css" "css/patterns.min.css")  }}
+{{ partial "stylesheet.html" (dict "css" "css/quotes.min.css")  }}
+{{ partial "stylesheet.html" (dict "css" "css/taxonomies.min.css")  }}
 
 {{ partial "stylesheet.html" (dict "css" "css/lightbox.css")  }}
 

layouts/partials/hero-body.html

@@ -4,6 +4,10 @@
 {{- $buttonText := index $hero "buttontext" }}
 {{- $buttonLink := index $hero "buttonlink" }}
 {{- $image      := index $hero "image" }}
+
+{{- $imageFull := printf "images/%s.webp" $image | relURL }}"
+{{- $imageMobile := printf "images/%s-mobile.webp" $image | relURL }}"
+
 <div class="hero-body">
     <div class="container">
         <div class="columns is-vcentered">
@@ -24,7 +28,11 @@ <h2 class="subtitle is-5 is-muted">
             </div>
             <div class="column is-5 is-offset-1">
                 <figure class="image is-4by3">
-                    <img src="{{ printf "images/%s" $image | relURL }}" alt="Description">
+                    <picture>
+                        <source media="(max-width: 600px)" srcset="{{ $imageMobile}}" />
+                        <source media="(min-width: 800px)" srcset="{{ $imageFull }}" />
+                        <img src="{{ $imageFull }}" alt="An image of a penguin using a laptop" load="lazy" />
+                    </picture>
                 </figure>
             </div>
         </div>

layouts/partials/hero-footer.html

@@ -0,0 +1,17 @@
+{{- $hero        := .Site.Params.hero }}
+{{- $clientLogos := index $hero "clientlogos" }}
+<div class="hero-foot mb-20">
+  <div class="container">
+    <div class="tabs is-centered">
+      <ul>
+        {{- range $clientLogos }}
+        <li>
+          <a {{ if .url }} href="{{ .url }}" {{ end }}>
+            <img class="partner-logo" src="{{ printf "images/logos/clients/%s.svg" .logo | relURL }}">
+          </a>
+        </li>
+        {{- end }}
+      </ul>
+    </div>
+  </div>
+</div>

layouts/partials/hero.html

@@ -0,0 +1,6 @@
+<section class="hero is-fullheight is-default is-bold">
+  {{ partial "navbar.html" . }}
+  {{ partial "navbar-clone.html" . }}
+  {{ partial "hero-body.html" . }}
+  {{ partial "hero-footer.html" . }}
+</section>

layouts/partials/section1.html

@@ -0,0 +1,36 @@
+{{- $section1 := .Site.Params.section1 }}
+{{- $title    := index $section1 "title" }}
+{{- $subtitle := index $section1 "subtitle" }}
+{{- $tiles    := index $section1 "tiles" }}
+<section class="section section-feature-grey is-medium" id="section1">
+  <div class="container">
+    <div class="title-wrapper has-text-centered">
+      <h2 class="title is-2">{{ $title }}</h2>
+      <h3 class="subtitle is-5 is-muted">{{ $subtitle }}</h3>
+      <div class="divider is-centered"></div>
+    </div>
+
+    <div class="content-wrapper">
+      <div class="columns">
+        {{- range $tiles }}
+        <div class="column is-one-third">
+          <div class="feature-card is-bordered has-text-centered revealOnScroll delay-1" data-animation="fadeInLeft">
+            <div class="card-title">
+              <h4>{{ .title }}</h4>
+            </div>
+            <div class="card-icon">
+                <img src="{{ printf "images/illustrations/icons/%s.svg" .icon | relURL }}">
+            </div>
+            <div class="card-text">
+                <p>{{ .text }}</p>
+            </div>
+            <div class="card-action">
+              <a href="{{ .url }}" class="button btn-align-md accent-btn raised">{{ .buttonText }}</a>
+            </div>
+          </div>
+        </div>
+        {{- end }}
+      </div>
+    </div>
+  </div>
+</section>

layouts/partials/section2.html.1

@@ -0,0 +1,35 @@
+{{- $section2 := .Site.Params.section2 }}
+{{- $title    := index $section2 "title" }}
+{{- $subtitle := index $section2 "subtitle" }}
+{{- $features := index $section2 "features" }}
+<section class="section is-medium" id="section2">
+  <div class="container">
+    <div class="columns">
+      <div class="column is-centered-tablet-portrait">
+        <h1 class="title section-title">{{ $title }}</h1>
+        <h3 class="subtitle is-5 is-muted">{{ $subtitle }}</h3>
+        <div class="divider"></div>
+      </div>
+      <div class="column is-7 mt-60">
+        {{- range $features }}
+        <article class="media icon-box">
+          <figure class="media-left">
+            <p class="image">
+              <img src="{{ printf "images/illustrations/icons/%s.svg" .icon | relURL }}">
+            </p>
+          </figure>
+          <div class="media-content mt-50">
+            <div class="content">
+              <p>
+                <span class="icon-box-title">{{ .title }}</span>
+
+                <span class="icon-box-text">{{ .text | markdownify }}</span>
+              </p>
+            </div>
+          </div>
+        </article>
+        {{- end }}
+      </div>
+    </div>
+  </div>
+</section>

layouts/partials/section4.html

@@ -0,0 +1,34 @@
+{{- $section4 := .Site.Params.section4 }}
+{{- $title    := index $section4 "title" }}
+{{- $subtitle := index $section4 "subtitle" }}
+{{- $clients  := index $section4 "clients" }}
+<section class="section is-medium section-secondary" id="section4">
+  <div class="container">
+
+    <div class="title-wrapper has-text-centered">
+      <h2 class="title is-2 light-text is-spaced">{{ $title }}</h2>
+      {{- with $subtitle }}
+      <h3 class="subtitle is-5 light-text">{{ . }}</h3>
+      {{- end }}
+    </div>
+
+    <div class="content-wrapper">
+      <div class="columns is-vcentered">
+        {{- range $clients }}
+        <div class="column is-4">
+          <figure class="testimonial">
+            <blockquote>
+              {{ .quote }}
+            </blockquote>
+            <div class="author">
+              <img src="{{ printf "images/illustrations/faces/%s.png" (string .img) | relURL }}" alt=""/>
+              <h5>{{ .name }}</h5>
+              <span>{{ .job }}</span>
+            </div>
+          </figure>
+        </div>
+        {{- end }}
+      </div>
+    </div>
+  </div>
+</section>

layouts/partials/section5.html

@@ -0,0 +1,41 @@
+{{- $section5   := .Site.Params.section5 }}
+{{- if eq $section5 true }}
+{{- $section5 = dict "_" "_" }}
+{{- end }}
+{{- $title      := index $section5 "title" | default "Drop us a line or two "}}
+{{- $subtitle   := index $section5 "subtitle" | default "We'd love to hear from you" }}
+{{- $action     := index $section5 "action" }}
+{{- $method     := index $section5 "method" }}
+{{- $buttonText := index $section5 "buttontext" | default "Send Message" }}
+<section class="section section-light-grey is-medium" id="section5">
+  <div class="container">
+    <div class="title-wrapper has-text-centered">
+      <h2 class="title is-2 is-spaced">{{ $title }}</h2>
+      <h3 class="subtitle is-5 is-muted">{{ $subtitle }}</h3>
+      <div class="divider is-centered"></div>
+    </div>
+
+    <div class="content-wrapper">
+      <div class="columns">
+        <div class="column is-6 is-offset-3">
+          <form{{ with $action }} action="{{ . }}"{{end}}{{ with $method }} method="{{ . }}"{{end}}>
+            <div class="columns is-multiline">
+              <div class="column is-6">
+                <input class="input is-medium" name="name" type="text" placeholder="Enter your name">
+              </div>
+              <div class="column is-6">
+                <input class="input is-medium" name="email" type="email" placeholder="Enter your email address">
+              </div>
+              <div class="column is-12">
+                <textarea class="textarea" name="message" rows="10" placeholder="Write something..."></textarea>
+              </div>
+              <div class="form-footer has-text-centered mt-10">
+                <button class="button cta is-large primary-btn raised is-clear">{{ $buttonText }}</button>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

layouts/partials/single/sidebar.html

@@ -0,0 +1,20 @@
+{{- $logo     := .Params.sidebarlogo }}
+<div class="sidebar">
+  <div class="sidebar-header">
+    <img src="{{ printf "images/logos/%s.svg" $logo | relURL }}">
+    <a class="sidebar-close" href="javascript:void(0);">
+      <i data-feather="x"></i>
+    </a>
+  </div>
+  <div class="inner">
+    <ul class="sidebar-menu">
+      {{ range where .Site.RegularPages "Section" (strings.TrimSuffix "/" .File.Dir) }}
+      <li>
+        <a href="{{ .Permalink }}">
+          {{ .Title }}
+        </a>
+      </li>
+      {{ end }}
+    </ul>
+  </div>
+</div>

layouts/partials/stylesheet.html

@@ -11,4 +11,4 @@
 
 {{$timestamp := now.Format "2006-01-02:150405"}}
 
-<link rel="stylesheet" type="text/css" href="{{ $css | relURL }}?v={{$timestamp}}" />
+<link rel="stylesheet" type="text/css" href="{{ $css | relURL }}" />