improvements

_includes/site/breadcrumbs.html

@@ -1,15 +1,17 @@
 <div class="section-nav">
   <nav class="breadcrumbs" aria-label="Breadcrumbs">
     {% capture separator %}<span aria-hidden="true">/</span>{% endcapture %}
+    {%- assign page_title = nil -%}
+    {%- assign page_nav = nil -%}
 
     <span class="breadcrumb">
       <a href="/" rel="index up">Home</a>
     </span>
 
-    {% if page.section -%}
-      {%- assign section = site.data.sections[page.section] -%}
+    {% if include.page.section -%}
+      {%- assign section = site.data.sections[include.page.section] -%}
       {% for item in section.breadcrumbs %}
-        {%- if item.url == page.url -%}
+        {%- if item.url == include.page.url -%}
           {% assign page_title = item.title %}
           {% assign page_nav = item.nav %}
           {% break %}
@@ -21,7 +23,7 @@
         {% if item.url -%}
           <a href="{{ item.url }}" rel="up">{{ item.title }}</a>
         {%- else -%}
-          {{ item.title }}
+          <span>{{ item.title }}</span>
         {%- endif %}
         </div>
       {% endfor %}
@@ -31,7 +33,7 @@
       {{ separator }}
 
       <span class="breadcrumb">
-        <a href="{{ page.url }}" aria-current="page">{{ page_title }}</a>
+        <a href="{{ include.page.url }}" aria-current="page">{{ page_title }}</a>
       </span>
     {% endif %}
   </nav>

_layouts/base.html

@@ -8,7 +8,7 @@
   {% include site/nav.html %}
 </header>
 
-{% include site/breadcrumbs.html %}
+{% include site/breadcrumbs.html page=page %}
 
 <main>
   {{ content }}

_sass/components/_breadcrumbs.scss

@@ -1,13 +1,16 @@
 .section-nav {
-  margin-block-start: var(--block-flow-sm);
   transition: 0.5s opacity;
   &:not(:hover) {
     opacity: 0.6;
   }
+
+  margin-block-start: var(--block-flow-xs);
+  &:first-child {
+    margin-block-start: var(--block-flow-sm);
+  }
 }
 
 .breadcrumbs {
-  position: relative;
   display: flex;
 
   --link-color: var(--light-text);
@@ -22,10 +25,10 @@
 .breadcrumb {
   display: inline flex;
 
-  > a {
+  > :first-child {
     padding-inline-end: var(--padding-xs);
   }
-  &:not(:first-child) > a {
+  &:not(:first-child) > :first-child {
     padding-inline-start: var(--padding-xs);
   }
 }