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

@@ -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.

assets/scss/_fonts.scss

@@ -26,8 +26,8 @@ nav,
   }
 }
 
-.content {
+.container {
-  line-height: 1.4; // TODO: fix homepage
+  line-height: $line-height-base; // TODO: fix homepage
 }
 
 .smallcaps {

assets/scss/_texts.scss

@@ -0,0 +1,17 @@
+////////////////////
+//                //
+//     Textes     //
+//                //
+////////////////////
+
+.verse {
+  line-height: $line-height-verse;
+
+  p {
+    margin-bottom: 1rem;
+  }
+
+  br {
+    margin-bottom: .5rem;
+  }
+}

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;
 
 
 /////////////////////

assets/scss/main.scss

@@ -15,6 +15,7 @@
 @import 'main_body';
 @import 'medias';
 @import 'post';
+@import 'texts';
 
 
 ////////////////////

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 }}