From 4c6e97ff5e56e123af6ed2d61bd404c9837e8548 Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Thu, 11 Jun 2020 02:13:06 +0100
Subject: [PATCH] Updating latest

---
 data/panaetius-theme/assets.json |  2 +-
 layouts/index.html               | 70 ++++++++++++++++++--------------
 layouts/partials/header.html     |  3 +-
 layouts/post/card-large.html     |  4 +-
 layouts/post/card-start.html     | 17 ++++++++
 layouts/post/card.html           | 25 ++++++++++--
 src/scss/cards.scss              | 70 +++++++++++++++++++++++++-------
 7 files changed, 140 insertions(+), 51 deletions(-)
 create mode 100644 layouts/post/card-start.html

diff --git a/data/panaetius-theme/assets.json b/data/panaetius-theme/assets.json
index 2f6bf5f..938effe 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.fe1e79a2ceb1a3e11a99.min.css",
+    "css": "main.cdd48a316d2fd0c38b94.min.css",
     "js": "main.48637aff6f96e597ae05.min.js"
   },
   "vendors~app": {
diff --git a/layouts/index.html b/layouts/index.html
index 871be8d..1a78c53 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,42 +1,52 @@
 {{ define "main" }}
 <img src="/images/front-wallpaper.svg" class="front-background">
-<main class="homepage container py-6">
-    <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>
+<main class="homepage py-6">
+    <div class="container">
+        <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>
+                </div>
+                {{- with .Site.Params.homepageImage -}}
+                <div class="homepage-image d-xs-block d-md-none pb-4">
+                    <img data-src="{{ . | relURL }}" class="img-fluid">
+                </div>
                 {{- end -}}
+                <div>
+                    {{- with .Site.Params.description -}}
+                    <h3 class="font-weight-normal">{{ . | safeHTML }}</h3>
+                    {{- end -}}
+                </div>
+            </div>
+            <div class="col-12 col-md-6 d-flex">
+                {{- with .Site.Params.homepageImage -}}
+                <div class="homepage-image d-none d-sm-block">
+                    <img data-src="{{ . | relURL }}" class="img-fluid">
+                </div>
+                {{- 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 d-none d-sm-block">
-                <img data-src="{{ . | relURL }}" class="img-fluid">
+        <div class="row">
+
+            <!-- Latest article -->
+            {{- range first 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) -}}
+
+            <div class="latest row py-lg-5">
+                {{ .Render "card-large" }}
             </div>
             {{- end -}}
+
         </div>
     </div>
-    <div class="row">
-
-        <!-- Latest article -->
-        {{- range first 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) -}}
-        <!-- <div class="latest row py-lg-5"> -->
-        <div class="latest row py-lg-5">
-            {{ .Render "card-large" }}
-        </div>
-        {{- 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" }}
-            </div>
+    <!-- <div class="container-fluid" style="padding-left: 15%; padding-right: 15%;"> -->
+    <div class="container">
+        <div class="row d-flex justify-content-center justify-content-md-between align-content-between">
+            {{ range first 1 (after 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)) }}
+            {{ .Render "card" }}
+            {{ end }}
+            {{ range first 2 (after 2 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)) }}
+            {{ .Render "card" }}
             {{ end }}
         </div>
     </div>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 96533d2..c8def1f 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -15,7 +15,8 @@
                 <li class="nav-item{{ if or (eq $current.URL .URL) ($current.HasMenuCurrent "main" .) }} active{{ end }}"><a class="nav-link" href="{{ .URL | relLangURL }}">{{ .Name }}</a></li>
                 {{ end }}
                 {{ end }}
-                <li class="nav-item d-none d-md-block" id="nav-search">
+                <li class="nav-item" id="nav-search">
+                <!-- <li class="nav-item d-none d-md-block" id="nav-search"> -->
                     <form id="search-form" method="get" action="/search" method="POST" class="form-inline">
                         <input type="text" name="q" id="search" class="form-control form-control-sm" placeholder="Search">
                         <div class="input-group ">
diff --git a/layouts/post/card-large.html b/layouts/post/card-large.html
index 26d4d57..177a6cc 100644
--- a/layouts/post/card-large.html
+++ b/layouts/post/card-large.html
@@ -16,10 +16,10 @@
             <h5 class="created text-muted text-uppercase font-weight-bold">{{ $page.Date.Format "January 2, 2006" }}</h5>
             <p class="text-muted">{{ $page.ReadingTime }} min read</p>
         </div>
-        <h2><a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a></h2>
+        <h2><a class="card-title-gray" href="{{ $page.RelPermalink }}">{{ $page.Title }}</a></h2>
 
         <div class="content">
-            {{ $page.Summary }}
+            {{ $page.Summary | truncate 200 }}
         </div>
         <div>
             {{- with $page.Params.tags -}}
diff --git a/layouts/post/card-start.html b/layouts/post/card-start.html
new file mode 100644
index 0000000..66929a7
--- /dev/null
+++ b/layouts/post/card-start.html
@@ -0,0 +1,17 @@
+<div class="d-flex flex-column card-regular col-md-3 my-2 my-md-5 px-0" style="height: 500px; overflow: hidden;">
+    {{ $page := . }}
+    {{- with .Resources.Match "images/banner.svg" -}}
+    {{ range . }}
+    {{- $image := . -}}
+    <div style="height: 60%; overflow: hidden;">
+        <div class="ma-0 pa-0" style="background-image: url('{{ $image.RelPermalink }}'); background-position: center; background-size: cover; height: 250%;">
+        </div>
+    </div>
+    {{- end -}}
+    {{- end -}}
+    <div class="mx-3 my-3">
+        <h5 class="created text-muted text-uppercase font-weight-bold">{{ $page.Date.Format "January 2, 2006" }}</h5>
+        <p class="text-muted">{{ $page.ReadingTime }} min read</p>
+    </div>
+</div>
+
diff --git a/layouts/post/card.html b/layouts/post/card.html
index 9d6c4fc..704dc46 100644
--- a/layouts/post/card.html
+++ b/layouts/post/card.html
@@ -1,12 +1,31 @@
-<div class="d-flex">
+<div class="d-flex flex-column card-regular card-regular-width my-2 my-md-5 px-0">
     {{ $page := . }}
     {{- with .Resources.Match "images/banner.svg" -}}
     {{ range . }}
     {{- $image := . -}}
-    <div class="card-large-image" style="background-image: url('{{ $image.RelPermalink }}');">
-        <div style="background-image: url('{{ $image.RelPermalink }}')">
+    <div class="card-regular-image-parent">
+        <div class="ma-0 pa-0 card-regular-image" style="background-image: url('{{ $image.RelPermalink }}');">
         </div>
     </div>
     {{- end -}}
     {{- end -}}
+    <div class="mx-3 my-3">
+        <h5 class="created text-muted text-uppercase font-weight-bold mb-0">{{ $page.Date.Format "January 2, 2006" }}</h5>
+        <p class="text-muted">{{ $page.ReadingTime }} min read</p>
+        <h2><a class="card-title-gray" href="{{ $page.RelPermalink }}">{{ $page.Title }}</a></h2>
+        <p>{{ $page.Summary | truncate 200 }}</p>
+        <div>
+            {{- with $page.Params.tags -}}
+            <div class="d-flex justify-content-start">
+                <div class="tags">
+                    {{- range . -}}
+                    <a class="badge badge-dark mr-2" href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">
+                        <i class="fas fa-tag mr-2"></i>{{ . }}
+                    </a>
+                    {{- end -}}
+                </div>
+            </div>
+            {{- end -}}
+        </div>
+    </div>
 </div>
diff --git a/src/scss/cards.scss b/src/scss/cards.scss
index 2d2bce2..2738d54 100644
--- a/src/scss/cards.scss
+++ b/src/scss/cards.scss
@@ -1,4 +1,10 @@
-.card-large, .card-regular {
+@mixin image-zoom {
+    background-position: center;
+    background-size: cover;
+    overflow: hidden;
+}
+
+@mixin card-border {
     background-color: white;
     z-index: 1;
     border: 1px solid rgb(204, 18, 18);
@@ -24,28 +30,64 @@
     border-top-right-radius: 0.45rem;
     border-bottom-right-radius: 0.45rem;
     border-bottom-left-radius: 0.45rem;
-    -webkit-box-shadow: 4px 4px 36px -10px rgba(255,0,94,0.79);
-    -moz-box-shadow: 4px 4px 36px -10px rgba(255,0,94,0.79);
-    box-shadow: 4px 4px 36px -10px rgba(255,0,94,0.79);
+    -webkit-box-shadow: 4px 4px 36px -10px rgba(255, 0, 94, 0.79);
+    -moz-box-shadow: 4px 4px 36px -10px rgba(255, 0, 94, 0.79);
+    box-shadow: 4px 4px 36px -10px rgba(255, 0, 94, 0.79);
     transition-property: all;
     transition-duration: 1s;
     overflow: hidden;
 
     &:hover {
-    -webkit-box-shadow: none;
-    -moz-box-shadow: none;
-    box-shadow: none;
-    -moz-transform: translate(-2px, -2px);
-    -ms-transform: translate(-2px, -2px);
-    -o-transform: translate(-2px, -2px);
-    -webkit-transform: translate(-2px, -2px);
-    transform: translate(-2px, -2px);
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        box-shadow: none;
+        -moz-transform: translate(-2px, -2px);
+        -ms-transform: translate(-2px, -2px);
+        -o-transform: translate(-2px, -2px);
+        -webkit-transform: translate(-2px, -2px);
+        transform: translate(-2px, -2px);
     }
+}
+
+.card-title-gray {
+    color: $text-gray !important;
+}
+
+.card-large {
+    @include card-border;
 
     & .card-large-image {
         height: 250%;
-        background-position: center;
-        background-size: cover;
+        @include image-zoom;
+    }
+
+
+}
+
+.card-regular {
+    @include card-border;
+    min-height: 600px;
+
+    & .card-regular-image {
+        @include image-zoom;
+        height: 150%;
+        background-size: initial;
+    }
+
+    & .card-regular-image-parent {
+        height: 40%;
         overflow: hidden;
     }
 }
+
+@media only screen and (min-width: map-get($grid-breakpoints, "md")) {
+    .card-regular-width {
+        width: 30%;
+    }
+}
+
+@media only screen and (max-width: map-get($grid-breakpoints, "md")) {
+    .card-regular-width {
+        width: 80%
+    }
+}