Skip to content

Commit

Permalink
initial header
Browse files Browse the repository at this point in the history
  • Loading branch information
@nc-andreashaller
nc-andreashaller committed Dec 19, 2023
1 parent 5599255 commit 6a603ba
Show file tree
Hide file tree
Showing 9 changed files with 66 additions and 435 deletions.
1 change: 1 addition & 0 deletions blocks/grid/grid.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@

.section.grid .element img {
width: 100%;
height: auto;
}

.section.grid .element p {
Expand Down
11 changes: 4 additions & 7 deletions blocks/grid/grid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,10 @@ export default function decorate(block) {
const rowTemplate = elements.find((e) => e.dataset.gridRows)?.dataset.gridRows;
if (columnTemplate || rowTemplate) {
const variables = {};

Check failure on line 11 in blocks/grid/grid.js

View workflow job for this annotation

GitHub Actions / build 

'variables' is assigned a value but never used
if (columnTemplate) {
variables['grid-template-columns'] = columnTemplate;
}
if (rowTemplate) {
variables['grid-template-rows'] = rowTemplate;
}
addCssVariables(block, variables);
addCssVariables(block, {
'grid-template-columns': columnTemplate,
'grid-template-rows': rowTemplate,
});
}

elements.forEach((e) => {
Expand Down
276 changes: 10 additions & 266 deletions blocks/header/header.css
View file
Original file line number Diff line number Diff line change
@@ -1,275 +1,19 @@
/* header and nav layout */
header .nav-wrapper {
background-color: var(--background-color);
width: 100%;
z-index: 2;
position: fixed;
}

header nav {
box-sizing: border-box;
display: grid;
grid-template:
'hamburger brand tools' var(--nav-height)
'sections sections sections' 1fr / auto 1fr auto;
align-items: center;
gap: 0 2em;
margin: auto;
max-width: 1264px;
height: var(--nav-height);
padding: 0 1rem;
font-family: var(--body-font-family);
}

header nav[aria-expanded="true"] {
grid-template:
'hamburger brand' var(--nav-height)
'sections sections' 1fr
'tools tools' var(--nav-height) / auto 1fr;
overflow-y: auto;
min-height: 100vh;
}

@media (min-width: 600px) {
header nav {
padding: 0 2rem;
}
}

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

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

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

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

/* hamburger */
header nav .nav-hamburger {
grid-area: hamburger;
height: 22px;
display: flex;
align-items: center;
header a:any-link {
color: inherit;
}

header nav .nav-hamburger button {
height: 22px;
header p,
header .section.grid .element p {
margin: 0;
border: 0;
border-radius: 0;
padding: 0;
background-color: var(--background-color);
color: inherit;
overflow: initial;
text-overflow: initial;
white-space: initial;
}

header nav .nav-hamburger-icon,
header nav .nav-hamburger-icon::before,
header 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 {
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 {
height: 2px;
border-radius: 2px;
background: currentcolor;
}

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

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

header 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 {
top: 3px;
left: 1px;
transform: rotate(45deg);
transform-origin: 2px 1px;
width: 24px;
height: 2px;
border-radius: 2px;
}

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

@media (min-width: 900px) {
header nav .nav-hamburger {
display: none;
visibility: hidden;
}
}

/* brand */
header .nav-brand {
grid-area: brand;
flex-basis: 128px;
font-size: var(--heading-font-size-s);
font-weight: 700;
line-height: 1;
}

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

/* sections */
header 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 {
display: block;
visibility: visible;
align-self: start;
}

header 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 {
font-weight: 700;
}

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

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

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

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

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

header nav .nav-sections .nav-drop::after {
content: '';
display: inline-block;
position: absolute;
top: .5em;
right: 2px;
transform: rotate(135deg);
width: 6px;
height: 6px;
border: 2px solid currentcolor;
border-radius: 0 1px 0 0;
border-width: 2px 2px 0 0;
}

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

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

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

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

header nav .nav-sections > ul > li[aria-expanded="true"] > ul {
display: block;
position: absolute;
left: -1em;
width: 200px;
margin-top: 12px;
padding: 1em;
background-color: var(--highlight-background-color);
white-space: initial;
}

header nav .nav-sections > ul > li > ul::before {
content: '';
position: absolute;
top: -8px;
left: 8px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid var(--highlight-background-color);
}

header nav .nav-sections > ul > li > ul > li {
padding: 8px 0;
}
a.button:any-link {
background-color: transparent;
color: inherit;
font-weight: normal;
}

/* tools */
header nav .nav-tools {
grid-area: tools;
a.button:any-link .icon {
vertical-align: middle;
}
Loading

0 comments on commit 6a603ba

Please sign in to comment.