Skip to content

Commit

Permalink
Merge branch 'main' into 10-create-the-footer-block
Browse files Browse the repository at this point in the history
  • Loading branch information
tonyklapatch authored May 9, 2024
2 parents cd609d2 + 15fe265 commit 814ffd0
Show file tree
Hide file tree
Showing 14 changed files with 252 additions and 66 deletions.
7 changes: 5 additions & 2 deletions .stylelintrc.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
{
"extends": ["stylelint-config-standard"]
}
"extends": ["stylelint-config-standard"],
"rules": {
"media-feature-range-notation": null
}
}
7 changes: 5 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
# Famous Smoke Shop Best Cigars Guide
Find the best recommended Cigars by year, occasion, shape, size, country, food pairing, and more.

## Production url
- https://www.famous-smoke.com/best-cigars-guide/

## AEM Preview Environments
- Preview: https://main--best-cigars-guide--famous-smoke.hlx.page/
- Live: https://main--best-cigars-guide--famous-smoke.hlx.live/
- Preview: https://main--best-cigars-guide--famous-smoke.hlx.page/best-cigars-guide
- Live: https://main--best-cigars-guide--famous-smoke.hlx.live/best-cigars-guide

## Installation

Expand Down
2 changes: 1 addition & 1 deletion best-cigars-guide/blocks/columns/columns.css
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
display: block;
}

@media (width >= 900px) {
@media (min-width: 900px) {
.columns > div {
align-items: center;
flex-direction: unset;
Expand Down
2 changes: 1 addition & 1 deletion best-cigars-guide/blocks/footer/footer.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ function getFamousLogo() {
export default async function decorate(block) {
// load footer as fragment
const footerMeta = getMetadata('footer');
const footerPath = footerMeta ? new URL(footerMeta, window.location).pathname : '/footer';
const footerPath = footerMeta ? new URL(footerMeta, window.location).pathname : '/best-cigars-guide/footer';
const fragment = await loadFragment(footerPath);

// decorate footer DOM
Expand Down
88 changes: 70 additions & 18 deletions best-cigars-guide/blocks/header/header.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* header and nav layout */
header .nav-wrapper {
background-color: var(--background-color);
background-color: var(--header-background-color);
width: 100%;
z-index: 2;
position: fixed;
Expand All @@ -11,14 +11,12 @@ header nav {
display: grid;
grid-template:
'hamburger brand tools' var(--nav-height)
'sections sections sections' 1fr / auto 1fr auto;
'sections sections sections' 1fr / auto 1fr 30%;
align-items: center;
gap: 0 2em;
margin: auto;
max-width: 1264px;
max-width: var(--content-width);
height: var(--nav-height);
padding: 0 1rem;
font-family: var(--body-font-family);
}

header nav[aria-expanded="true"] {
Expand All @@ -30,18 +28,27 @@ header nav[aria-expanded="true"] {
min-height: 100vh;
}

@media (width >= 600px) {
@media (max-width: 600px) {
header nav {
padding: 0 2rem;
grid-template:
'brand' auto
'tools' auto
}
}

@media (width >= 900px) {
header nav {
display: flex;
justify-content: space-between;
header nav p {
font-size: 0.8em;
}

header nav .brand-logo {
flex-flow: column;
}

header nav .nav-brand img {
padding: 0.5em 0;
}
}

@media (min-width: 900px) {
header nav[aria-expanded="true"] {
min-height: 0;
overflow: visible;
Expand All @@ -51,6 +58,7 @@ header nav[aria-expanded="true"] {
header nav p {
margin: 0;
line-height: 1;
color: #FFF;
}

header nav a:any-link {
Expand Down Expand Up @@ -131,7 +139,7 @@ header nav[aria-expanded="true"] .nav-hamburger-icon::after {
transform: rotate(-45deg);
}

@media (width >= 900px) {
@media (min-width: 900px) {
header nav .nav-hamburger {
display: none;
visibility: hidden;
Expand All @@ -141,9 +149,8 @@ header nav[aria-expanded="true"] .nav-hamburger-icon::after {
/* brand */
header .nav-brand {
grid-area: brand;
flex-basis: 128px;
font-size: var(--heading-font-size-s);
font-weight: 700;
font-size: var(--heading-font-size-m);
font-weight: 500;
line-height: 1;
}

Expand All @@ -152,13 +159,58 @@ header nav .nav-brand img {
height: auto;
}

header nav .brand-logo {
display: flex;
align-items: center;
}

header nav .brand-logo div {
color: #FFF;
padding: 0 1em;
}

header nav .search-header {
position: relative;
padding: 0;
}

header nav .search-header label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}

header nav .search-header input {
position: relative;
border: none;
padding: 9px 12px;
width: 100%;
background: var(--background-color);
outline: none;
}

header nav .search-header button {
position: absolute;
top: 0.5em;
bottom: 0;
right: 4px;
background: none;
border: none;
margin: 0;
padding: 0;
}

/* 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 {
Expand Down Expand Up @@ -186,7 +238,7 @@ header nav .nav-sections ul > li > ul > li {
font-weight: 500;
}

@media (width >= 900px) {
@media (min-width: 900px) {
header nav .nav-sections {
display: block;
visibility: visible;
Expand Down
56 changes: 38 additions & 18 deletions best-cigars-guide/blocks/header/header.js
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ function toggleMenu(nav, navSections, forceExpanded = null) {
export default async function decorate(block) {
// load nav as fragment
const navMeta = getMetadata('nav');
const navPath = navMeta ? new URL(navMeta, window.location).pathname : '/nav';
const navPath = navMeta ? new URL(navMeta, window.location).pathname : '/best-cigars-guide/nav';
const fragment = await loadFragment(navPath);

// decorate nav DOM
Expand All @@ -108,15 +108,19 @@ export default async function decorate(block) {
if (section) section.classList.add(`nav-${c}`);
});

// Famous Smoke Shop logo
const navBrand = nav.querySelector('.nav-brand');
const brandLink = navBrand.querySelector('.button');
if (brandLink) {
brandLink.className = '';
brandLink.closest('.button-container').className = '';
}
const navText = navBrand.innerHTML;
navBrand.innerHTML = `
<a href="/best-cigars-guide" rel="home" class="brand-logo" title="Best Cigars Guide Homepage">
<img src="/best-cigars-guide/icons/famous-smoke-shop-logo.svg" alt="Famous Smoke Shop Logo">
${navText}
</a>
`;

// Build submenu links (if they exist)
const navSections = nav.querySelector('.nav-sections');
if (navSections) {
if (navSections && navSections.length > 0) {
navSections.querySelectorAll(':scope .default-content-wrapper > ul > li').forEach((navSection) => {
if (navSection.querySelector('ul')) navSection.classList.add('nav-drop');
navSection.addEventListener('click', () => {
Expand All @@ -127,21 +131,37 @@ export default async function decorate(block) {
}
});
});
}

// hamburger for mobile
const hamburger = document.createElement('div');
hamburger.classList.add('nav-hamburger');
hamburger.innerHTML = `<button type="button" aria-controls="nav" aria-label="Open navigation">
const hamburger = document.createElement('div');
hamburger.classList.add('nav-hamburger');
hamburger.innerHTML = `<button type="button" aria-controls="nav" aria-label="Open navigation">
<span class="nav-hamburger-icon"></span>
</button>`;
hamburger.addEventListener('click', () => toggleMenu(nav, navSections));
nav.prepend(hamburger);
nav.setAttribute('aria-expanded', 'false');
// prevent mobile nav behavior on window resize
toggleMenu(nav, navSections, isDesktop.matches);
isDesktop.addEventListener('change', () => toggleMenu(nav, navSections, isDesktop.matches));
hamburger.addEventListener('click', () => toggleMenu(nav, navSections));
nav.prepend(hamburger);
nav.setAttribute('aria-expanded', 'false');
// prevent mobile nav behavior on window resize
toggleMenu(nav, navSections, isDesktop.matches);
isDesktop.addEventListener('change', () => toggleMenu(nav, navSections, isDesktop.matches));
}

// Site search box
const navTools = nav.querySelector('.nav-tools');
const searchBox = document.createElement('div');
searchBox.id = 'site-search';
searchBox.className = 'site-search';
searchBox.innerHTML = `
<form role="search" action="/best-cigars-guide/search" class="search search-header">
<label for="header-search-term">Search</label>
<input type="search" id="header-search-term" maxlength="255" placeholder="Search" name="s" autocomplete="off">
<button type="submit" class="search-submit" value="Submit" title="Submit">
<span class="icon icon-search"><img data-icon-name="search" src="/best-cigars-guide/icons/search.svg" alt="Search" title="Search" loading="lazy"></span>
</button>
</form>
`;
navTools.innerHTML = searchBox.innerHTML;

// Wrap it up!
const navWrapper = document.createElement('div');
navWrapper.className = 'nav-wrapper';
navWrapper.append(nav);
Expand Down
6 changes: 4 additions & 2 deletions best-cigars-guide/blocks/hero/hero.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
main .hero-container > div {
max-width: unset;
}

main .hero-container {
padding: 0;
}
Expand All @@ -13,10 +13,12 @@ main .hero-container {
}

.hero h1 {
max-width: 1200px;
max-width: var(--content-width);
margin-left: auto;
margin-right: auto;
color: white;
text-align: center;
font-size: var(--heading-font-size-xl);
}

.hero picture {
Expand Down
Binary file added best-cigars-guide/fonts/montserrat-italic.woff2
Binary file not shown.
Binary file added best-cigars-guide/fonts/montserrat.woff2
Binary file not shown.
Binary file removed best-cigars-guide/fonts/roboto-bold.woff2
Binary file not shown.
Binary file removed best-cigars-guide/fonts/roboto-regular.woff2
Binary file not shown.
Loading

0 comments on commit 814ffd0

Please sign in to comment.