Skip to content

feat: breadcrumbs #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 35 commits into from
Jan 11, 2024
Merged

feat: breadcrumbs #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
7cfcc5e
feat: breadcrumb
synox Jan 9, 2024
2907173
css: header height
synox Jan 10, 2024
4f5ee4f
move into header
synox Jan 10, 2024
25c8fd2
update style
synox Jan 10, 2024
8168222
build tree
synox Jan 10, 2024
353dcd6
cleanup
synox Jan 10, 2024
6c69b45
refactor
synox Jan 10, 2024
bcabd9b
don't link the current page
synox Jan 10, 2024
b216f3a
style breadcrumbs
synox Jan 10, 2024
2c26269
refactor creating crumbs
synox Jan 10, 2024
585ba82
style
synox Jan 10, 2024
47c9e94
lint
synox Jan 10, 2024
7789b1a
lint
synox Jan 10, 2024
54a26f6
use placeholder
synox Jan 10, 2024
e129c74
lint
synox Jan 10, 2024
33db6f2
improve contrast for accessibility
synox Jan 10, 2024
6c8b771
lint
synox Jan 10, 2024
a05262b
Update blocks/header/header.css
synox Jan 10, 2024
5c90a6e
Update blocks/header/header.js
synox Jan 10, 2024
1ff3dcd
Update blocks/header/header.css
synox Jan 10, 2024
c72dd20
Update blocks/header/header.css
synox Jan 10, 2024
ed76d3a
Update blocks/header/header.js
synox Jan 10, 2024
9bc57bd
avoid layout shift
synox Jan 10, 2024
cf033ab
Merge remote-tracking branch 'origin/breadcrumb' into breadcrumb
synox Jan 10, 2024
294584b
fix: aria-current=page
synox Jan 10, 2024
175ce5e
fix: only apply nav styles to main navigation
synox Jan 10, 2024
c50e1c7
fix: lint
synox Jan 10, 2024
eb7421c
refactor: run fetchPlaceholders
synox Jan 10, 2024
6579ec8
fix: lint
synox Jan 10, 2024
b96608d
enable hover
synox Jan 11, 2024
f34d1de
make link clickable area larger
synox Jan 11, 2024
363ff9b
undo: nav hover
synox Jan 11, 2024
b496201
handle `home` page
synox Jan 11, 2024
f2a3e42
Merge branch 'main' of https://github.com/adobe/helix-block-collectio…
synox Jan 11, 2024
8384b09
fix: merge conflict
synox Jan 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion 404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
<link rel="stylesheet" href="/styles/styles.css">
<style>
main.error {
min-height: calc(100vh - var(--nav-height));
min-height: calc(100vh - var(--header-height));
display: flex;
align-items: center;
}
Expand Down
140 changes: 95 additions & 45 deletions blocks/header/header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ header .nav-wrapper {
position: fixed;
}

header nav {
header nav#nav {
box-sizing: border-box;
display: grid;
grid-template:
Expand All @@ -21,7 +21,7 @@ header nav {
font-family: var(--body-font-family);
}

header nav[aria-expanded="true"] {
header nav#nav[aria-expanded="true"] {
grid-template:
"hamburger brand" var(--nav-height)
"sections sections" 1fr
Expand All @@ -31,41 +31,42 @@ header nav[aria-expanded="true"] {
}

@media (width >= 600px) {
header nav {
header nav#nav {
padding: 0 2rem;
}
}

@media (width >= 900px) {
header nav {
header nav#nav {
display: flex;
justify-content: space-between;
}

header nav[aria-expanded="true"] {
header nav#nav[aria-expanded="true"] {
min-height: 0;
overflow: visible;
}
}

header nav p {
header nav#nav p {
margin: 0;
line-height: 1;
}

header nav a:any-link {
header nav#nav a:any-link {
color: currentcolor;
display: block;
}

/* hamburger */
header nav .nav-hamburger {
header nav#nav .nav-hamburger {
grid-area: hamburger;
height: 22px;
display: flex;
align-items: center;
}

header nav .nav-hamburger button {
header nav#nav .nav-hamburger button {
height: 22px;
margin: 0;
border: 0;
Expand All @@ -78,44 +79,44 @@ header nav .nav-hamburger button {
white-space: initial;
}

header nav .nav-hamburger-icon,
header nav .nav-hamburger-icon::before,
header nav .nav-hamburger-icon::after {
header nav#nav .nav-hamburger-icon,
header nav#nav .nav-hamburger-icon::before,
header nav#nav .nav-hamburger-icon::after {
box-sizing: border-box;
display: block;
position: relative;
width: 20px;
}

header nav .nav-hamburger-icon::before,
header nav .nav-hamburger-icon::after {
header nav#nav .nav-hamburger-icon::before,
header nav#nav .nav-hamburger-icon::after {
content: "";
position: absolute;
background: currentcolor;
}

header nav[aria-expanded="false"] .nav-hamburger-icon,
header nav[aria-expanded="false"] .nav-hamburger-icon::before,
header nav[aria-expanded="false"] .nav-hamburger-icon::after {
header nav#nav[aria-expanded="false"] .nav-hamburger-icon,
header nav#nav[aria-expanded="false"] .nav-hamburger-icon::before,
header nav#nav[aria-expanded="false"] .nav-hamburger-icon::after {
height: 2px;
border-radius: 2px;
background: currentcolor;
}

header nav[aria-expanded="false"] .nav-hamburger-icon::before {
header nav#nav[aria-expanded="false"] .nav-hamburger-icon::before {
top: -6px;
}

header nav[aria-expanded="false"] .nav-hamburger-icon::after {
header nav#nav[aria-expanded="false"] .nav-hamburger-icon::after {
top: 6px;
}

header nav[aria-expanded="true"] .nav-hamburger-icon {
header nav#nav[aria-expanded="true"] .nav-hamburger-icon {
height: 22px;
}

header nav[aria-expanded="true"] .nav-hamburger-icon::before,
header nav[aria-expanded="true"] .nav-hamburger-icon::after {
header nav#nav[aria-expanded="true"] .nav-hamburger-icon::before,
header nav#nav[aria-expanded="true"] .nav-hamburger-icon::after {
top: 3px;
left: 1px;
transform: rotate(45deg);
Expand All @@ -125,14 +126,14 @@ header nav[aria-expanded="true"] .nav-hamburger-icon::after {
border-radius: 2px;
}

header nav[aria-expanded="true"] .nav-hamburger-icon::after {
header nav#nav[aria-expanded="true"] .nav-hamburger-icon::after {
top: unset;
bottom: 3px;
transform: rotate(-45deg);
}

@media (width >= 900px) {
header nav .nav-hamburger {
header nav#nav .nav-hamburger {
display: none;
visibility: hidden;
}
Expand All @@ -147,67 +148,67 @@ header .nav-brand {
line-height: 1;
}

header nav .nav-brand img {
header nav#nav .nav-brand img {
width: 128px;
height: auto;
}

/* sections */
header nav .nav-sections {
header nav#nav .nav-sections {
grid-area: sections;
flex: 1 1 auto;
display: none;
visibility: hidden;
background-color: var(--overlay-color);
}

header nav[aria-expanded="true"] .nav-sections {
header nav#nav[aria-expanded="true"] .nav-sections {
display: block;
visibility: visible;
align-self: start;
}

header nav .nav-sections ul {
header nav#nav .nav-sections ul {
list-style: none;
padding-left: 0;
font-size: var(--body-font-size-s);
font-weight: 500;
}

header nav .nav-sections ul > li {
header nav#nav .nav-sections ul > li {
font-weight: 700;
}

header nav .nav-sections ul > li > ul {
header nav#nav .nav-sections ul > li > ul {
margin-top: 0;
}

header nav .nav-sections ul > li > ul > li {
header nav#nav .nav-sections ul > li > ul > li {
font-weight: 500;
}

@media (width >= 900px) {
header nav .nav-sections {
header nav#nav .nav-sections {
display: block;
visibility: visible;
white-space: nowrap;
}

header nav a:any-link {
header nav#nav a:any-link {
display: block;
}

header nav[aria-expanded="true"] .nav-sections {
header nav#nav[aria-expanded="true"] .nav-sections {
align-self: unset;
}

header nav .nav-sections .nav-drop {
header nav#nav .nav-sections .nav-drop {
position: relative;
padding-right: 16px;
cursor: pointer;
z-index: 10;
}

header nav .nav-sections .nav-drop::after {
header nav#nav .nav-sections .nav-drop::after {
content: "";
display: inline-block;
position: absolute;
Expand All @@ -221,31 +222,31 @@ header nav .nav-sections ul > li > ul > li {
border-width: 2px 2px 0 0;
}

header nav .nav-sections .nav-drop[aria-expanded="true"]::after {
header nav#nav .nav-sections .nav-drop[aria-expanded="true"]::after {
top: unset;
bottom: 0.5em;
transform: rotate(315deg);
}

header nav .nav-sections ul {
header nav#nav .nav-sections ul {
display: flex;
gap: 2em;
margin: 0;
font-size: var(--body-font-size-xs);
}

header nav .nav-sections .default-content-wrapper > ul > li {
header nav#nav .nav-sections .default-content-wrapper > ul > li {
flex: 0 1 auto;
position: relative;
font-weight: 500;
}

header nav .nav-sections .default-content-wrapper > ul > li > ul {
header nav#nav .nav-sections .default-content-wrapper > ul > li > ul {
display: none;
position: relative;
}

header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded="true"] > ul {
header nav#nav .nav-sections .default-content-wrapper > ul > li[aria-expanded="true"] > ul {
display: block;
position: absolute;
left: -1em;
Expand All @@ -256,7 +257,7 @@ header nav .nav-sections ul > li > ul > li {
white-space: initial;
}

header nav .nav-sections .default-content-wrapper > ul > li > ul::before {
header nav#nav .nav-sections .default-content-wrapper > ul > li > ul::before {
content: "";
position: absolute;
top: -8px;
Expand All @@ -268,12 +269,61 @@ header nav .nav-sections ul > li > ul > li {
border-bottom: 8px solid var(--light-color);
}

header nav .nav-sections .default-content-wrapper > ul > li > ul > li {
header nav#nav .nav-sections .default-content-wrapper > ul > li > ul > li {
padding: 8px 0;
}
}

/* tools */
header nav .nav-tools {
header nav#nav .nav-tools {
grid-area: tools;
}

/* breadcrumbs */
header .breadcrumbs {
display: none;
padding: 0 32px;
width: 100%;
height: var(--breadcrumbs-height);
max-width: 1200px;
overflow: hidden;
margin: 0 auto;
font-size: var(--breadcrumbs-font-size);
}

header .breadcrumbs ol {
display: flex;
flex-flow: wrap;
list-style: none;
padding: 0;
margin-top: 0;
margin-bottom: 0;
gap: 1ch;
}

/* stylelint-disable-next-line no-descending-specificity */
header .breadcrumbs ol li {
padding-inline-start: 0;
opacity: 0.7;
}

header .breadcrumbs ol li:not(:last-child)::after {
content: "/";
padding-left: 1ch;
}

/* stylelint-disable-next-line no-descending-specificity */
header .breadcrumbs ol li a:any-link {
color: var(--text-color);
}

/* stylelint-disable-next-line no-descending-specificity */
header .breadcrumbs ol li:last-of-type {
opacity: 1;
}

@media screen and (min-width: 900px) {
header .breadcrumbs {
display: block;
}
}
Loading