More readable titles in blog posts

themes/chosto/layouts/partials/header.html

@@ -5,7 +5,8 @@
 {{ $page := eq "page" .Kind }}
 {{ $home := eq "home" .Kind }}
 <header>
-  <section class='hero has-text-centered {{ if $background }}is-info has-bg-img {{ if $page }}is-large{{ else if $home }}is-medium{{ end }}{{ end }}'>
+  <section
+    class='hero has-text-centered {{ if $background }}is-info has-bg-img {{ if $page }}is-large{{ else if $home }}is-medium{{ end }}{{ end }}'>
     <div class="hero-head mx-5">
       <div class="level mt-4">
         <div class="level-left">
@@ -29,10 +30,12 @@
         </div>
       </div>
       <div class="hero-body {{ if not $background }}pb-0{{ end }} container has-text-centered">
-        <p class="title is-size-1-desktop is-size-3-mobile {{ if $page }}is-uppercase{{ end }}">{{ .Title }}</p>
-        {{ with .Params.subtitle }}
-        <p class="mt-5 subtitle is-size-2-desktop is-size-5-mobile">{{ . }}</p>
-        {{ end }}
+        <div {{ if $page }}class="box"{{ end }}>
+          <p class="title is-size-1-desktop is-size-3-mobile {{ if $page }}is-uppercase{{ end }}">{{ .Title }}</p>
+          {{ with .Params.subtitle }}
+          <p class="mt-5 subtitle is-size-2-desktop is-size-5-mobile">{{ . }}</p>
+          {{ end }}
+        </div>
       </div>
       <!-- Words and date stuff makes sens only for blog posts, not other pages -->
       {{ if (and .IsPage (eq .FirstSection.Section "posts"))}}

themes/chosto/static/css/custom.css

@@ -36,6 +36,11 @@ p:not(.title, .subtitle, figcaption p) {
   text-align: justify;
 }
 
+/* Used only in page header, add transparency */
+.box {
+  background: rgba(0, 0, 0, 0.3);
+}
+
 /* New font is "smaller" in feeling */
 .navbar-dropdown {
   font-size: 1rem;