Fix for long title/subtitle overlapping header (#320)

Lednerb · Dec 21, 2021 · b2b268e · b2b268e
1 parent 186ddeb
commit b2b268e
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 45 deletions.
diff --git a/assets/sass/_header.scss b/assets/sass/_header.scss
@@ -1,7 +1,7 @@
 header {
     background-color: $base-color;
     color: $header-text-color;
-    height: 20rem;
+    height: auto;
     display: flex;
     align-items: center;
 
@@ -13,7 +13,7 @@ header {
         display: flex;
         flex-direction: row;
         align-items: center;
-        height: 100%;
+        min-height: 20rem;
 
         &:after {
             content: "";

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -3,55 +3,56 @@
 {{ else }}
     <header>
 {{ end }}
-        <div class="container">
-            <div class="logo">
-                <a href="{{ .Site.BaseURL | relLangURL }}" class="logo">
-                    {{ if and (isset .Site.Params "customimage") (ne .Site.Params.customImage "") }}
-                        <img src="{{ .Site.Params.customImage | relURL }}" alt="">
+    <div class="container">
+        <div class="logo">
+            <a href="{{ .Site.BaseURL | relLangURL }}" class="logo">
+                {{ if and (isset .Site.Params "customimage") (ne .Site.Params.customImage "") }}
+                    <img src="{{ .Site.Params.customImage | relURL }}" alt="">
+                {{ else }}
+                    {{ $avatarEmail := "" }}
+                    {{ if not (eq .Site.Params.avatarEmail nil) }}
+                        {{ $avatarEmail = .Site.Params.avatarEmail }}
                     {{ else }}
-                        {{ $avatarEmail := "" }}
-                        {{ if not (eq .Site.Params.avatarEmail nil) }}
-                            {{ $avatarEmail = .Site.Params.avatarEmail }}
-                        {{ else }}
-                            {{ $avatarEmail = .Site.Params.gravatarEMail }}
-                        {{ end }}
-                        <img src="https://seccdn.libravatar.org/avatar/{{ md5 $avatarEmail }}?d=mm&size=200" alt="">
+                        {{ $avatarEmail = .Site.Params.gravatarEMail }}
                     {{ end }}
+                    <img src="https://seccdn.libravatar.org/avatar/{{ md5 $avatarEmail }}?d=mm&size=200" alt="">
+                {{ end }}
 
-                    <span class="overlay"><i class="fa {{ .Site.Params.overlayIcon | default "fa-home" }}"></i></span>
+                <span class="overlay"><i class="fa {{ .Site.Params.overlayIcon | default "fa-home" }}"></i></span>
+            </a>
+        </div>
+        <div class="titles">
+            <h3 class="title">
+                <a href="{{ .Site.BaseURL | relLangURL }}">
+                    {{ .Site.Title | default "My cool new blog" }}
                 </a>
-            </div>
-            <div class="titles">
-                <h3 class="title">
-                    <a href="{{ .Site.BaseURL | relLangURL }}">
-                        {{ .Site.Title | default "My cool new blog" }}
-                    </a>
-                </h3>
+            </h3>
 
-                {{ with .Site.Params.Subtitle }}
-                    <span class="subtitle">{{ . }}</span>
-                {{ end }}
-            </div>
+            {{ with .Site.Params.Subtitle }}
+                <span class="subtitle">{{ . }}</span>
+            {{ end }}
+        </div>
 
-            {{ if and (gt .Site.Languages 1) (.Site.Params.showHeaderLanguageChooser | default true) }}
-                {{- $language := .Language -}}
-                <div class="languages">
-                {{ range $.Site.Home.AllTranslations }}
-                    {{ if eq $language .Language }}
-                        <a href="{{ .Permalink }}" class="active">{{ .Language }}</a>
-                    {{ else }}
-                        <a href="{{ .Permalink }}">{{ .Language }}</a>
-                    {{ end }}
+        {{ if and (gt .Site.Languages 1) (.Site.Params.showHeaderLanguageChooser | default true) }}
+            {{- $language := .Language -}}
+            <div class="languages">
+            {{ range $.Site.Home.AllTranslations }}
+                {{ if eq $language .Language }}
+                    <a href="{{ .Permalink }}" class="active">{{ .Language }}</a>
+                {{ else }}
+                    <a href="{{ .Permalink }}">{{ .Language }}</a>
                 {{ end }}
-                </div>
             {{ end }}
+            </div>
+        {{ end }}
 
-            {{ if .Site.Params.permanentTopNav }}
-                <div class="toggler permanentTopNav">
-            {{ else }}
-                <div class="toggler">
-            {{ end }}
-                    <i class="fa fa-bars" aria-hidden="true"></i>
-                </div>
+        {{ if .Site.Params.permanentTopNav }}
+            <div class="toggler permanentTopNav">
+        {{ else }}
+            <div class="toggler">
+        {{ end }}
+                <i class="fa fa-bars" aria-hidden="true"></i>
             </div>
-    </header>
+        </div>
+    </div>
+</header>
diff --git a/static/theme.css b/static/theme.css