scope differentiates - with spans around

assets/css/style.scss

@@ -32,7 +32,7 @@ header {
     a {
         color: white;
     }
-    a.exposed, span.exposed {
+    span.exposed span.title {
         font-weight: bold;
         font-size: 1.8em;
     }
@@ -65,11 +65,9 @@ header {
         align-items: baseline;
         justify-content: space-around;
         max-width: 1200px;
-        padding-bottom: 6em;
-        span {
-            -webkit-animation: exposed 1s ease forwards;
-        }
+        padding-bottom: 8em;
         span.exposed {
+            -webkit-animation: exposed 1s ease forwards;
             position: absolute;
             top: 4rem;
         }

layouts/partials/header.html

@@ -19,9 +19,7 @@
   <nav>
     {{ range $.Site.Sections }}
       {{ if eq $currentPage.Section .Section }}
-        <span class="exposed">
-          {{ partial "scope.html" $currentPage }}
-        </span>
+        {{ partial "scope.html" $currentPage }}
       {{ else }}
         <a href="{{ .Permalink }}">
           {{ .Title | markdownify }}

layouts/partials/scope.html

@@ -1,6 +1,7 @@
-{{- if .Parent.IsHome -}}
-  <a href="{{ .RelPermalink }}">{{ .Title }}</a>
-{{- else -}}
-  {{- partial "scope.html" .Parent }}
-  > <a href="{{ .RelPermalink }}">{{ .Title }}</a>
+<span class="exposed">
+  {{- template "scoper" .Parent -}} <span class="title">{{ .Title }}</span>
+</span>
+{{- define "scoper" -}}
+  {{- if not .IsHome -}}
+    {{- template "scoper" .Parent }}<a href="{{ .RelPermalink }}">{{ .Title }}</a> > {{ end -}}
 {{- end -}}