From 3122a0d27e3548c3475d849fb105d384032d3c4f Mon Sep 17 00:00:00 2001
From: BESANCON Vincent <besancon.vincent@gmail.com>
Date: Sun, 10 Sep 2023 18:33:28 +0200
Subject: [PATCH] feat(layout): adjust fonts and paddings

---
 assets/scss/main.scss  |  11 +-
 index.hbs              |   6 +-
 partials/post-card.hbs |  10 +-
 partials/readings.hbs  |   2 +-
 post-index.hbs         |   9 +-
 post.hbs               | 302 +++++++++++++++++++++--------------------
 6 files changed, 175 insertions(+), 165 deletions(-)

diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 233a9a6..db2441d 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -2,7 +2,7 @@
 FONT FACES
 ====*/
 
-@import url(https://fonts.bunny.net/css?family=acme:400);
+@import url(https://fonts.bunny.net/css?family=acme:250);
 
 @font-face
 {
@@ -28,7 +28,7 @@ VARIABLE OVERRIDES
 
 $global-font-size: 18px !default;
 $global-background: #000000 !default;
-$global-color: rgba(0, 255, 53, 0.85) !default;
+$global-color: #f626eed9 !default;
 $global-emphasis-color: #f626eed9 !default;
 $global-font-family: "Acme", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $global-secondary-background: #691066d9 !default;
@@ -50,12 +50,13 @@ body, a {
     cursor: url(../images/coeurseur-mini.png), auto !important;
 }
 
-h1 {
-    font-family: "Basteleur Bold"
+h1.uk-article-title {
+    font-family: "Basteleur Moonlight";
+    color: rgba(0, 255, 53, 0.85) !important;
 }
 
 h2, h3 {
-    font-family: "Optiker-K"
+    font-family: "Basteleur Bold";
 }
 
 .uk-overlay-primary h1 {
diff --git a/index.hbs b/index.hbs
index cb19fb1..0d1d926 100755
--- a/index.hbs
+++ b/index.hbs
@@ -5,14 +5,14 @@
 
 
 {{! Portfolio }}
-<div class="uk-section uk-padding-small">
+<div class="uk-section">
     <a id="portfolio"></a>
 
     <div
 		class="uk-container uk-dark"
 		uk-scrollspy="cls: uk-animation-slide-right"
 	>
-        <h2 class="uk-heading-divider">Portfolio</h2>
+        <h2 class="uk-heading-divider uk-text-center">Portfolio</h2>
 
         {{> portfolio}}
     </div>
@@ -24,7 +24,7 @@
     <a id="readings"></a>
 
     <div class="uk-container uk-dark" uk-scrollspy="cls: uk-animation-slide-right">
-        <h2 class="uk-heading-divider">Readings</h2>
+        <h2 class="uk-heading-divider uk-text-center">Readings</h2>
 		{{> readings posts=posts featuredOnly=true }}
 		{{#getPostByTags "post-index" ""}}
 			<div class="uk-margin uk-flex uk-flex-right">
diff --git a/partials/post-card.hbs b/partials/post-card.hbs
index bbc8f5a..4023708 100644
--- a/partials/post-card.hbs
+++ b/partials/post-card.hbs
@@ -8,13 +8,13 @@
 				{{else}}
 					<img src="{{@config.custom.postDefaultHeaderImageUrl}}" uk-cover>
 				{{/checkIfAll}}
-				<canvas width="300" height="300"></canvas>
+				<canvas width="96" height="96"></canvas>
 			</div>
 
 			<div class="uk-card-header">
 				<div class="uk-grid-small uk-flex-middle" uk-grid>
 					<div class="uk-width-auto">
-						<img class="uk-border-circle" width="40" height="40" src="{{author.avatarImage.url}}" alt="Avatar">
+						<img class="uk-border-circle" width="48" height="48" src="{{author.avatarImage.url}}" alt="Avatar">
 					</div>
 					<div class="uk-width-expand">
 						<h3 class="uk-card-title uk-margin-remove-bottom">{{title}}</h3>
@@ -23,8 +23,10 @@
 				</div>
 			</div>
 
-			<div class="uk-card-body" uk-height-viewport="expand: true">
-				<p>{{excerpt}}</p>
+			<div
+				class="uk-card-body uk-padding-remove-top uk-padding-remove-bottom"
+			>
+				<p>{{{excerpt}}}</p>
 			</div>
 
 			<div class="uk-card-footer">
diff --git a/partials/readings.hbs b/partials/readings.hbs
index 6589604..e66e94d 100644
--- a/partials/readings.hbs
+++ b/partials/readings.hbs
@@ -1,5 +1,5 @@
 {{! Posts listing }}
-<div class="uk-grid-small uk-child-width-1-2@m" uk-grid uk-height-match=".uk-card-body > p">
+<div class="uk-grid-small uk-child-width-1-2@m" uk-grid="masonry: true">
 	{{#each posts}}
 		{{#unless isHidden}}
 			{{#if ../featuredOnly }}
diff --git a/post-index.hbs b/post-index.hbs
index 0b681ac..3e05f22 100644
--- a/post-index.hbs
+++ b/post-index.hbs
@@ -2,8 +2,11 @@
 {{> head}}
 {{> navbar}}
 
-<main class="uk-container uk-animation-fade">
-	{{> readings posts=@website.contentStructure.posts featuredOnly=false }}
-</main>
+<div class="uk-section uk-padding-small">
+	<div class="uk-container uk-animation-fade">
+		<h2 class="uk-heading-divider uk-text-center">Readings</h2>
+		{{> readings posts=@website.contentStructure.posts featuredOnly=false }}
+	</div>
+</div>
 
 {{> footer}}
diff --git a/post.hbs b/post.hbs
index 8691da9..e3aa5c9 100644
--- a/post.hbs
+++ b/post.hbs
@@ -2,158 +2,162 @@
 {{> head}}
 {{> navbar}}
 
-<main class="uk-container uk-animation-fade">
-
-   	{{! injects code via a Custom HTML tool - as defined in the config.json file in the "renderer" section }}
-   	{{#if @customHTML.beforePost}}
-    	<div id="custom-html-before-post">
-			{{{@customHTML.beforePost}}}
-      	</div>
-   	{{/if}}
-   	{{! /injects code via a Custom HTML tool }}
-
-   	{{! indicates the post's context}}
-  	 <div uk-grid>
-     	<div class="uk-width-expand@s">
-       		{{#post}}
-				<article class="uk-article">
-					{{! post title }}
-					<h1 class="uk-article-title">
-						{{title}}
-					</h1>
-					{{! /post title }}
-
-					{{! post header }}
-					<div class="uk-article-meta">
-						{{! post author }}
-						{{ translate 'post.publishedBy' }}
-						{{#author}}
-							<a href="{{url}}" rel="author" title="{{name}}">{{name}}</a>
-						{{/author}}
-						{{! /post author }}
-
-						{{! post creation date }}
-						{{ translate 'post.publishedDate' }}
-						<time
-							datetime="{{date createdAt 'YYYY-MM-DDTHH:mm'}}"
-						>
-							{{date createdAt}}.
-						</time>
-						{{! /post creation date }}
-
-						{{! post modification date }}
-						{{#if modifiedAt}}
-							{{ translate 'post.lastUpdatedDate' }}
-							<time datetime="{{date modifiedAt 'YYYY-MM-DDTHH:mm'}}">
-								{{date modifiedAt}}.
+<div class="uk-section">
+	<div class="uk-container uk-animation-fade">
+
+		{{! injects code via a Custom HTML tool - as defined in the config.json file in the "renderer" section }}
+		{{#if @customHTML.beforePost}}
+			<div id="custom-html-before-post">
+				{{{@customHTML.beforePost}}}
+			</div>
+		{{/if}}
+		{{! /injects code via a Custom HTML tool }}
+
+		{{! indicates the post's context}}
+		<div uk-grid>
+			<div class="uk-width-expand@s">
+				{{#post}}
+					<article class="uk-article">
+						{{! post title }}
+						<h1 class="uk-article-title uk-text-center">
+							{{title}}
+						</h1>
+						{{! /post title }}
+
+						{{! post header }}
+						<div class="uk-article-meta">
+							{{! post author }}
+							{{ translate 'post.publishedBy' }}
+							{{#author}}
+								<a href="{{url}}" rel="author" title="{{name}}">{{name}}</a>
+							{{/author}}
+							{{! /post author }}
+
+							{{! post creation date }}
+							{{ translate 'post.publishedDate' }}
+							<time
+								datetime="{{date createdAt 'YYYY-MM-DDTHH:mm'}}"
+							>
+								{{date createdAt}}.
 							</time>
-						{{/if}}
-						{{! /post modification date }}
-
-						{{! main tag - if not selected, the first tag in the list of all tags will be displayed }}
-						{{#if mainTag}}
-							{{ translate 'post.mainTag' }}
-							<a href="{{ mainTag.url }}">
-								{{mainTag.name }}.
-							</a>
-						{{/if}}
-						{{! /main tag }}
-					</div>
-					{{! /post header }}
-
-					{{! featured image }}
-					{{#featuredImage}}
-						{{! check if an image exists }}
-						{{#if url}}
-							<figure id="featured-image">
-								<img
-									src="{{url}}"
-									{{! checks if the Responsive Images option (located in Site Settings -> Website Speed) is enabled  }}
-									{{#if @config.site.responsiveImages}}
-										{{responsiveImageAttributes 'featuredImage' srcset sizes}}
-									{{/if}}
-									{{! generates a native loading attribute; if the Media Lazy Load option (located in Site Settings -> Website Speed) is disabled, the loading attribute is not generated }}
-									{{ lazyload "eager" }}
-									height="{{height}}"
-									width="{{width}}"
-									alt="{{alt}}"
-								>
-								{{! checks if the caption or credits exist }}
-								{{#checkIfAny caption credits}}
-									<figcaption>
-										{{caption}}
-										{{credits}}
-									</figcaption>
-								{{/checkIfAny}}
-								{{! /checks if the caption or credits exist }}
-							</figure>
-						{{else}}
-							<div class="uk-cover-container uk-height-medium">
-								<canvas width="" height=""></canvas>
-								<img
-									src="{{@config.custom.postDefaultHeaderImageUrl}}"
-									{{! generates a native loading attribute; if the Media Lazy Load option (located in Site Settings -> Website Speed) is disabled, the loading attribute is not generated }}
-									{{ lazyload "eager" }} uk-cover
-								>
-							</div>
-						{{/if}}
-						{{! /check if an image exists }}
-					{{/featuredImage}}
-					{{! /featured image }}
-
-					{{! post body }}
-					<p>
-						{{{text}}}
-					</p>
-					{{! /post body }}
-
-					{{! previous & next post }}
-					{{! checks if there are any posts besides the current one; including ../ segment on a path, we change the post context into the parent context }}
-					{{#checkIfAny ../previousPost ../nextPost}}
-						<nav id="post-navigation">
-							{{#../previousPost}}
-								{{#checkIf template '!=' "portfolio"}}
-									<a href="{{url}}" rel="prev">
-										&larr; {{ translate 'post.previousPost' }}
-										({{title}})
-									</a>
-								{{/checkIf}}
-							{{/../previousPost}}
-
-							{{#../nextPost}}
-								{{#checkIf template '!=' "portfolio"}}
-									<a href="{{url}}" rel="next">
-									{{ translate 'post.nextPost' }}
-									({{title}}) &rarr;
-									</a>
-								{{/checkIf}}
-							{{/../nextPost}}
-						</nav>
-					{{/checkIfAny}}
-					{{! /checks if there are any posts besides the current one }}
-					{{! /previous & next post }}
-
-				</article>
-         	{{/post}}
-
-         	<a href="#" uk-totop uk-scroll uk-sticky></a>
-      	</div>
-      	{{! /indicates the post's context}}
-   	</div>
+							{{! /post creation date }}
+
+							{{! post modification date }}
+							{{#if modifiedAt}}
+								{{ translate 'post.lastUpdatedDate' }}
+								<time datetime="{{date modifiedAt 'YYYY-MM-DDTHH:mm'}}">
+									{{date modifiedAt}}.
+								</time>
+							{{/if}}
+							{{! /post modification date }}
+
+							{{! main tag - if not selected, the first tag in the list of all tags will be displayed }}
+							{{#if mainTag}}
+								{{ translate 'post.mainTag' }}
+								<a href="{{ mainTag.url }}">
+									{{mainTag.name }}.
+								</a>
+							{{/if}}
+							{{! /main tag }}
+						</div>
+						{{! /post header }}
+
+						{{! featured image }}
+						{{#featuredImage}}
+							{{! check if an image exists }}
+							{{#if url}}
+								<figure id="featured-image">
+									<img
+										src="{{url}}"
+										{{! checks if the Responsive Images option (located in Site Settings -> Website Speed) is enabled  }}
+										{{#if @config.site.responsiveImages}}
+											{{responsiveImageAttributes 'featuredImage' srcset sizes}}
+										{{/if}}
+										{{! generates a native loading attribute; if the Media Lazy Load option (located in Site Settings -> Website Speed) is disabled, the loading attribute is not generated }}
+										{{ lazyload "eager" }}
+										height="{{height}}"
+										width="{{width}}"
+										alt="{{alt}}"
+									>
+									{{! checks if the caption or credits exist }}
+									{{#checkIfAny caption credits}}
+										<figcaption>
+											{{caption}}
+											{{credits}}
+										</figcaption>
+									{{/checkIfAny}}
+									{{! /checks if the caption or credits exist }}
+								</figure>
+							{{else}}
+								<div class="uk-cover-container uk-height-small">
+									<canvas width="" height=""></canvas>
+									<img
+										src="{{@config.custom.postDefaultHeaderImageUrl}}"
+										{{! generates a native loading attribute; if the Media Lazy Load option (located in Site Settings -> Website Speed) is disabled, the loading attribute is not generated }}
+										{{ lazyload "eager" }} uk-cover
+									>
+								</div>
+							{{/if}}
+							{{! /check if an image exists }}
+						{{/featuredImage}}
+						{{! /featured image }}
+
+						{{! post body }}
+						<p>
+							{{{text}}}
+						</p>
+						{{! /post body }}
+
+						{{! previous & next post }}
+						{{! checks if there are any posts besides the current one; including ../ segment on a path, we change the post context into the parent context }}
+						{{#checkIfAny ../previousPost ../nextPost}}
+							{{!-- #TODO: use a navbar (left, right) --}}
+							<nav id="post-navigation">
+								{{#../previousPost}}
+									{{#checkIf template '!=' "portfolio"}}
+										<a class="uk-button uk-button-text" href="{{url}}" rel="prev">
+											&larr; {{ translate 'post.previousPost' }}
+											({{title}})
+										</a>
+									{{/checkIf}}
+								{{/../previousPost}}
+
+								{{#../nextPost}}
+									{{#checkIf template '!=' "portfolio"}}
+										<a class="uk-button uk-button-text" href="{{url}}" rel="next">
+										{{ translate 'post.nextPost' }}
+										({{title}}) &rarr;
+										</a>
+									{{/checkIf}}
+								{{/../nextPost}}
+							</nav>
+						{{/checkIfAny}}
+						{{! /checks if there are any posts besides the current one }}
+						{{! /previous & next post }}
+
+					</article>
+				{{/post}}
+
+				<a href="#" uk-totop uk-scroll uk-sticky></a>
+			</div>
+			{{! /indicates the post's context}}
+		</div>
+
+		{{! code injection by a Custom HTML tool - defined in config.json file in the renderer section}}
+		{{#if @customHTML.afterPost}}
+			<div id="custom-html-after-post">
+				{{{@customHTML.afterPost}}}
+			</div>
+		{{/if}}
+		{{! injects code via a Custom HTML tool }}
+	</div>
+</div>
 
+<div class="uk-section">
 	<div class="uk-container uk-dark" uk-scrollspy="cls: uk-animation-slide-right">
-        <h2 class="uk-heading-divider">Readings</h2>
-   		{{> readings posts=@website.contentStructure.posts featuredOnly=true}}
+		<h2 class="uk-heading-divider uk-text-center">Readings</h2>
+		{{> readings posts=@website.contentStructure.posts featuredOnly=true}}
 	</div>
-
-   	{{! code injection by a Custom HTML tool - defined in config.json file in the renderer section}}
-   	{{#if @customHTML.afterPost}}
-      	<div id="custom-html-after-post">
-         	{{{@customHTML.afterPost}}}
-      	</div>
-   	{{/if}}
-   	{{! injects code via a Custom HTML tool }}
-
-</main>
+</div>
 
 {{> footer}}