From 029a3ac1745580c999b75ae6fd9b68e520514a91 Mon Sep 17 00:00:00 2001
From: iGor milhit <igor@milhit.ch>
Date: Thu, 1 Apr 2021 21:50:06 +0200
Subject: [PATCH] content: improve verses layout for small screens

* Improves the line-height globally.
* Adds the verse class to the content block according to the layout key
  of the front matter.
* Styles the verses.

Co-Authored-by: iGor milhit <igor@milhit.ch>
---
 README.md                    |  5 +++++
 assets/scss/_fonts.scss      |  4 ++--
 assets/scss/_texts.scss      | 17 +++++++++++++++++
 assets/scss/_variables.scss  |  7 +++----
 assets/scss/main.scss        |  1 +
 layouts/_default/single.html |  4 +++-
 6 files changed, 31 insertions(+), 7 deletions(-)
 create mode 100644 assets/scss/_texts.scss

diff --git a/README.md b/README.md
index fba0a43..56b9a68 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,8 @@
 # portfoliGor
 
 Yet another HUGO portfolio theme, that I will use for igor.milhit.ch.
+
+## Configuration
+
+- Add `layout: verse` to improve format for text in verse. Verse should be
+  separated by a line break, strophes are paragraphs.
diff --git a/assets/scss/_fonts.scss b/assets/scss/_fonts.scss
index b8f4914..45ae556 100644
--- a/assets/scss/_fonts.scss
+++ b/assets/scss/_fonts.scss
@@ -26,8 +26,8 @@ nav,
   }
 }
 
-.content {
-  line-height: 1.4; // TODO: fix homepage
+.container {
+  line-height: $line-height-base; // TODO: fix homepage
 }
 
 .smallcaps {
diff --git a/assets/scss/_texts.scss b/assets/scss/_texts.scss
new file mode 100644
index 0000000..4c5a9e7
--- /dev/null
+++ b/assets/scss/_texts.scss
@@ -0,0 +1,17 @@
+////////////////////
+//                //
+//     Textes     //
+//                //
+////////////////////
+
+.verse {
+  line-height: $line-height-verse;
+
+  p {
+    margin-bottom: 1rem;
+  }
+
+  br {
+    margin-bottom: .5rem;
+  }
+}
diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
index 70a3534..541b784 100644
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@@ -1,11 +1,10 @@
-///////////////////
-//               //
-//      FONT     //
-//               //
+/////////////////// // FONT     // //
 ///////////////////
 
 $font-size-base: 1.25rem !default;      // 25 px
 $font-size-small: .9rem;                // 18 px
+$line-height-base: 1.4;
+$line-height-verse: 1.3;
 
 
 /////////////////////
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 24ec0aa..cf6616d 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -15,6 +15,7 @@
 @import 'main_body';
 @import 'medias';
 @import 'post';
+@import 'texts';
 
 
 ////////////////////
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index e3209da..d76ef74 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -3,7 +3,9 @@
     <h1 id="title">{{ .Title }}</h1>
     {{- partial "post-info.html" . -}}
   </header>
-    <article class="content">
+    <article {{ if eq .Layout "verse" }} class="content, {{ .Layout }}"
+             {{ else }} class="content"
+             {{ end }}>
       {{ .Content }}
     </article>
 {{ end }}