Website: Improve breadcrumbs style
MODIFY
website/src/_includes/layouts/base.njk
website/src/_includes/layouts/base.njk
{% set navPages = collections.all | eleventyNavigationBreadcrumb(eleventyNavigation.key) %}
{%- for entry in navPages %}
<li>
- <a href="{{ entry.url | url }}">{{ entry.title }}</a>
+ <a href="{{ entry.url | url }}"><span>{{ entry.title }}</span></a>
<ul class="sub-menu">
{% set subNavPages = collections.all | eleventyNavigation(entry.key) %}

MODIFY
website/src/styles/_global.scss
website/src/styles/_global.scss
@@ -108,23 +108,88 @@ a:active {
}
ul.breadcrumbs {
- list-style: none;
- padding: 0;
- margin: 0;
background-color: var(--background-color);
+ border-bottom: 1px solid var(--soft-border-color);
+ display: flex;
+ height: $breadcrumbs-height;
+ margin: 0;
+ padding: 0;
+
+ @include mobile-only() {
+ overflow-x: auto;
+ overflow-y: hidden;
+ }
+
+ a{
+ text-decoration: none;
+ color: var(--font-color);
+
+ &:hover{
+ background: var(--breadcrumbs-background-hover);
+ color: var(--font-color);
+ }
+
+ &:active{
+ background: var(--breadcrumbs-background-active);
+ color: var(--font-color);
+ }
+
+ }
> li {
- display: inline-block;
padding: 0;
- line-height: 40px;;
position: relative;
+ list-style: none;
+
+ &:first-child a {
+ padding-left: 32px;
+ }
- a, &.active {
- padding: 0 $unit;
+ > a {
+ display: flex;
+ padding-left: $unit * 2 + $unit / 2;
+ padding-right: $unit / 2;
+ line-height: $breadcrumbs-height;
+
+ span{
+ z-index: 2;
+ }
+
+ &:hover{
+ &:after{
+ background: var(--breadcrumbs-background-hover);
+ }
+ }
+
+ &:active{
+ &:after{
+ background: var(--breadcrumbs-background-active);
+ }
+ }
+
+ &:after{
+ content: "";
+ position: absolute;
+ width: $breadcrumbs-height;
+ height: $breadcrumbs-height;
+ right: -23px;
+ background: var(--background-color);
+ transform: scale(0.7) rotate(45deg);
+ box-shadow: 1px -1px var(--soft-border-color);
+ z-index: 1;
+ }
+
+ }
+
+ &:first-child.active {
+ padding-left: $unit * 2;
}
&.active {
font-weight: bold;
+ padding-left: $unit * 2 + $unit / 2;
+ padding-right: $unit;
+ line-height: $breadcrumbs-height;
}
&:hover {
@@ -137,19 +202,27 @@ ul.breadcrumbs {
ul.sub-menu {
display: none;
position: absolute;
- top: 40px;
+ top: $breadcrumbs-height;
left: 0;
list-style: none;
margin-left: 0;
background-color: var(--background-color);
padding: 0;
max-height: 400px;
+ min-width: 100%;
overflow: auto;
- border: 1px solid;
- box-shadow: 4px 4px 10.4px -6px #999998;
+ border: 1px solid var(--soft-border-color);
+ border-top: 0;
+ box-shadow: 4px 4px 10.4px -6px var(--breadcrumbs-submenu-shadow-color);
li {
- padding: 0;
+
+ a{
+ padding: $unit / 2 $unit;
+ display: block;
+ }
+
+ border-bottom: 1px solid var(--soft-border-color);
}
}
}

MODIFY
website/src/styles/_variables.scss
website/src/styles/_variables.scss
@@ -31,6 +31,9 @@ $gray-8: lighten(#27272A, 80%);
--toc-link-color-active: #{$gray-4};
--blockquote-color: #{$gray-7};
--link-hover-color: #{lighten(#27272A, 20%)};
+ --breadcrumbs-background-active: #{lighten(#27272A, 70%)};
+ --breadcrumbs-background-hover: #{$gray-7};
+ --breadcrumbs-submenu-shadow-color: #{$gray-6};
}
html[data-theme='dark'] {
@@ -47,6 +50,9 @@ html[data-theme='dark'] {
--toc-link-color-active: #{$gray-8};
--blockquote-color: #{$gray-7};
--link-hover-color: #{lighten(#27272A, 60%)};
+ --breadcrumbs-background-active: #{darken(#27272A, 7%)};
+ --breadcrumbs-background-hover: #{darken(#27272A, 4%)};
+ --breadcrumbs-submenu-shadow-color: #{$gray-2};
}
$body-line-height: 1.5em;
@@ -58,3 +64,5 @@ $unit: 16px;
$unit-border-radius: 4px;
$mobile-breakpoint: 768px;
+
+$breadcrumbs-height: $unit * 3;
\ No newline at end of file

Website: Improve breadcrumbs style (#823)