From 8fa7c40eca61df09e39765018878887fd65dfbe2 Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Tue, 9 Jun 2020 13:24:46 +0100
Subject: [PATCH] Responsive layout to homepage

---
 data/panaetius-theme/assets.json |  2 +-
 layouts/index.html               | 82 ++++++++++++++++----------------
 2 files changed, 43 insertions(+), 41 deletions(-)

diff --git a/data/panaetius-theme/assets.json b/data/panaetius-theme/assets.json
index cc7b5ee..cc2c8b4 100644
--- a/data/panaetius-theme/assets.json
+++ b/data/panaetius-theme/assets.json
@@ -9,7 +9,7 @@
     "js": "2.lazyload.1168fc21175de558d316.min.js"
   },
   "main": {
-    "css": "main.854425fe9410f0937f19.min.css",
+    "css": "main.056eb67e3d086eb33a6f.min.css",
     "js": "main.48637aff6f96e597ae05.min.js"
   },
   "vendors~app": {
diff --git a/layouts/index.html b/layouts/index.html
index 5c12c00..733e1b9 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,59 +1,61 @@
 {{ define "main" }}
-{{ .Scratch.Set "IsSingle" true }}
-<!-- <main class="homepage container py-6" id="front-background"> -->
 <img src="/images/front-wallpaper.svg" class="front-background">
 <main class="homepage container py-6">
-    <div>
-        <!-- Hero -->
-        <div class="hero row">
-            {{ .Scratch.Get "IsSingle" }}
-            <div class="col position-relative py-lg-7{{ if not .Site.Params.homepageImage }} py-7{{ else }} pb-5{{ end }}">
+        <div class="hero row pt-3 pt-md-6">
+            <div class="col-12 col-md-6 d-flex flex-column justify-content-center text-center text-md-left">
+                <div>
+                    <h1 class="display-4">{{ .Site.Title }}</h1>
+                    {{- with .Site.Params.description -}}
+                </div>
+                <div>
+                    <h3 class="font-weight-normal">{{ . | safeHTML }}</h3>
+                    {{- end -}}
+                </div>
+            </div>
+            <div class="col-0 col-md-6 d-flex">
                 {{- with .Site.Params.homepageImage -}}
                 {{/*  <div class="homepage-image" data-aos="zoom-in">  */}}
-                <div class="homepage-image">
+                <div class="homepage-image d-none d-sm-block">
                     <img data-src="{{ . | relURL }}" class="img-fluid">
                 </div>
                 {{- end -}}
-
-                <h1 class="display-4">{{ .Site.Title }}</h1>
-                {{- with .Site.Params.description -}}
-                <h3 class="font-weight-normal" style="max-width: 50%;">{{ . | safeHTML }}</h3>
-                {{- end -}}
             </div>
         </div>
+        <div class="row">
 
-        <!-- Latest article -->
-        {{- range first 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) -}}
-        {{ $page := . }}
-        <div class="latest row py-lg-5">
-            <div class="col-lg-6 mb-3">
-                {{- with .Resources.Match "images/banner.svg" -}}
-                {{ range . }}
-                {{- $image := . -}}
-                <a href="{{ $page.RelPermalink }}" class="d-block">
-                    <img data-src="{{ $image.RelPermalink }}" class="img-fluid rounded" alt="{{ $page.Title }}" data-aos="zoom-in">
-                </a>
-                {{- end -}}
-                {{- end -}}
-            </div>
-            <div class="col-lg-6 mb-3">
-                <h5 class="created text-muted text-uppercase font-weight-bold">{{ $page.Date.Format "January 2, 2006" }}</h5>
-                <h2><a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a></h2>
+            <!-- Latest article -->
+            {{- range first 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) -}}
+            {{ $page := . }}
+            <div class="latest row py-lg-5">
+                <div class="col-lg-6 mb-3">
+                    {{- with .Resources.Match "images/banner.svg" -}}
+                    {{ range . }}
+                    {{- $image := . -}}
+                    <a href="{{ $page.RelPermalink }}" class="d-block">
+                        <img data-src="{{ $image.RelPermalink }}" class="img-fluid rounded" alt="{{ $page.Title }}" data-aos="zoom-in">
+                    </a>
+                    {{- end -}}
+                    {{- end -}}
+                </div>
+                <div class="col-lg-6 mb-3">
+                    <h5 class="created text-muted text-uppercase font-weight-bold">{{ $page.Date.Format "January 2, 2006" }}</h5>
+                    <h2><a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a></h2>
 
-                <div class="content">
-                    {{ $page.Summary }}
+                    <div class="content">
+                        {{ $page.Summary }}
+                    </div>
                 </div>
             </div>
-        </div>
-        {{- end -}}
+            {{- end -}}
 
-        <!-- Articles -->
-        <div class="articles row row-cols-1 row-cols-lg-3">
-            {{ range after 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }}
-            <div class="col mb-3" data-aos="zoom-in">
-                {{ .Render "card" }}
+            <!-- Articles -->
+            <div class="articles row row-cols-1 row-cols-lg-3">
+                {{ range after 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }}
+                <div class="col mb-3" data-aos="zoom-in">
+                    {{ .Render "card" }}
+                </div>
+                {{ end }}
             </div>
-            {{ end }}
         </div>
     </div>
 </main>