style: do not wrap the breadcrumb on small screens

razonyang · Jan 29, 2023 · 9960a38 · 9960a38
1 parent 36871bb
commit 9960a38
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 1 deletion.
diff --git a/assets/main/scss/_breadcrumb.scss b/assets/main/scss/_breadcrumb.scss
@@ -0,0 +1,20 @@
+.hbs-breadcrumb {
+    .breadcrumb-item {
+        max-width: 240px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    @include media-breakpoint-down(sm) {
+        .breadcrumb-item:not(:last-child):not(:first-child) {
+            &::after {
+                content: '...';
+            }
+
+            a {
+                display: none;
+            }
+        }
+    }
+}
diff --git a/assets/main/scss/index.scss b/assets/main/scss/index.scss
@@ -11,6 +11,7 @@
 @import 'archives';
 @import 'author';
 @import 'blockquote';
+@import 'breadcrumb';
 @import 'card';
 @import 'component';
 @import 'code';

diff --git a/layouts/partials/breadcrumb.html b/layouts/partials/breadcrumb.html
@@ -1,7 +1,7 @@
 {{- if and .Site.Params.breadcrumb (default true .Params.breadcrumb) -}}
 <nav class="row card component" aria-label="breadcrumb">
   <div class="card-body pb-0">
-    <ol class="breadcrumb">
+    <ol class="hbs-breadcrumb breadcrumb flex-nowrap">
       {{- template "breadcrumbnav" (dict "p1" . "p2" . "titleCase" $.Site.Params.titleCase) -}}
     </ol>
   </div>