[WIP] 414986 update theme and readme

blocks/breadcrumbs/breadcrumbs.css

@@ -0,0 +1,24 @@
+raqn-breadcrumbs {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 10px;
+  align-items: center;
+  padding: 10px 0;
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+
+    li {
+      margin-inline-end: 1em;
+      font-weight: bold;
+
+      a {
+        color: var(--scope-color);
+        font-weight: normal;
+      }
+    }
+  }
+}

blocks/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,30 @@
+import ComponentBase from '../../scripts/component-base.js';
+
+export default class BreadCrumbs extends ComponentBase {
+  capitalize(string) {
+    return string
+      .split('-')
+      .map((str) => str.charAt(0).toUpperCase() + str.slice(1))
+      .join(' ');
+  }
+
+  ready() {
+    this.path = window.location.pathname.split('/');
+    this.classList.add('breadcrumbs');
+    this.innerHTML = `
+    <ul>
+        ${this.path
+          .map((path, index) => {
+            if (path === '') {
+              return `<li><a href="/${path}">Home</a></li>`;
+            }
+            if (index === this.path.length - 1) {
+              return `<li>${this.capitalize(path)}</li>`;
+            }
+            const href = this.path.slice(0, index + 1).join('/');
+            return `<li><a href="${href}">${this.capitalize(path)}</a></li>`;
+          })
+          .join('<li class="separator">›</li>')}
+    <ul>`;
+  }
+}

blocks/button/button.css

@@ -1,8 +1,12 @@
 raqn-button {
   width: 100%;
   display: grid;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+  justify-items: var(--scope-justify, start);
 
-  & > div {
+  & > * {
     background-color: var(--scope-accent-background, #000);
     color: var(--scope-accent-color, #fff);
     text-transform: none;
@@ -19,7 +23,7 @@ raqn-button {
 }
 
 raqn-button a {
-  color: currentcolor;
+  color: var(--scope-accent-color, currentcolor);
   padding: 10px 20px;
   text-decoration: none;
 }

blocks/card/card.css

@@ -1,10 +1,41 @@
 raqn-card {
-    background-color: var(--scope-background, red);
-    display: grid;
-    grid-template-columns: var(--card-columns, 1fr);
-    gap: var(--scope-gap, 20px);
+  background-color: var(--scope-background, red);
+  display: grid;
+  position: relative;
+  grid-template-columns: var(--card-columns, 1fr);
+  gap: var(--scope-gap, 20px);
+  padding: var(--scope-padding, 20px 0);
+}
+
+raqn-card a {
+  font-size: var(--raqn-font-size-3, 1.2em);
+  font-weight: bold;
 }
 
 raqn-card > picture {
-    grid-column: span var(--card-columns, 1fr);
-}
+  grid-column: span var(--card-columns, 1fr);
+}
+
+raqn-card > div {
+  position: relative;
+}
+
+raqn-card:not(.inner-background) > div {
+  background-color: var(--scope-background, #fff);
+  color: var(--scope-color, #000);
+}
+
+raqn-card > div div:last-child > a {
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-start: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  text-indent: -10000px;
+}
+
+raqn-card raqn-icon {
+  width: 100%;
+  display: flex;
+}

blocks/card/card.js

@@ -3,17 +3,32 @@ import { eagerImage } from '../../scripts/libs.js';
 
 export default class Card extends ComponentBase {
   static get observedAttributes() {
-    return ['columns', 'ratio', 'eager'];
+    return ['columns', 'ratio', 'eager', 'background', 'button'];
   }
 
   connected() {
+    if (this.getAttribute('button') === 'true') {
+      Array.from(this.querySelectorAll('a')).forEach((a) =>
+        this.convertLink(a),
+      );
+    }
     this.eager = parseInt(this.getAttribute('eager') || 0, 10);
+    this.ratio = this.getAttribute('ratio') || '4/3';
+    this.style.setProperty('--card-ratio', this.ratio);
+    this.classList.add('inner');
     this.setupColumns(this.getAttribute('columns'));
     if (this.eager) {
       eagerImage(this, this.eager);
     }
   }
 
+  convertLink(a) {
+    const button = document.createElement('raqn-button');
+    const content = a.outerHTML;
+    button.innerHTML = content;
+    a.replaceWith(button);
+  }
+
   setupColumns(columns) {
     if (!columns) {
       return;
@@ -24,19 +39,4 @@ export default class Card extends ComponentBase {
       .join(' ');
     this.style.setProperty('--card-columns', this.area);
   }
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (oldValue !== newValue) {
-      switch (name) {
-        case 'columns':
-          this.setupColumns(newValue);
-          break;
-        case 'ratio':
-          this.style.setProperty('--card-ratio', newValue);
-          break;
-        default:
-          break;
-      }
-    }
-  }
 }

blocks/footer/footer.css

@@ -1,14 +1,38 @@
 footer {
-  padding: 2rem;
-  background-color: var(--overlay-background-color);
-  font-size: var(--body-font-size-s);
+  background-color: var(--scope-background-color);
+  width: var(--scope-max-width);
+  margin: 0 auto;
 }
 
-footer .footer {
-  max-width: 1200px;
-  margin: auto;
-}
+raqn-footer {
+  background-color: var(--scope-background-color);
+  border-top: 1px solid var(--scope-color);
+  display: grid;
+  grid-template-columns: auto 20vw;
+
+  & :last-child {
+    justify-self: end;
+    align-self: center;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+
+    li {
+      margin: 2em 0;
+
+      a {
+        padding: 10px 1.2em;
+        color: var(--scope-color);
+        border-inline-end: 1px solid var(--scope-color);
+      }
 
-footer .footer p {
-  margin: 0;
+      &:last-child a {
+        border-inline-end: none;
+      }
+    }
+  }
 }

blocks/footer/footer.js

@@ -5,4 +5,12 @@ export default class Footer extends ComponentBase {
     super();
     this.external = '/footer.plain.html';
   }
+
+  ready() {
+    const child = this.children[0];
+    child.replaceWith(...child.children);
+    this.nav = this.querySelector('ul');
+    this.nav.setAttribute('role', 'navigation');
+    this.classList.add('full-width');
+  }
 }

blocks/hero/hero.css

@@ -1,23 +1,23 @@
 /* block specific CSS goes here */
 
 raqn-hero {
-  --raqn-background-color: var(--scope-background, transparent);
-  --raqn-color: var(--scope-color, transparent);
-  --raqn-grid-template-columns: 0.6fr 0.4fr;
+  --hero-background-color: var(--scope-background, black);
+  --hero-color: var(--scope-color, white);
+  --hero-grid-template-columns: 0.6fr 0.4fr;
+  --hero-hero-order: 0;
+  --hero-padding-block: 40px;
 
-  background-color: var(--raqn-background-color);
-  color: var(--raqn-color);
+  background-color: var(--hero-background-color);
+  color: var(--hero-color);
   align-items: center;
+  grid-template-columns: var(--hero-grid-template-columns, 1fr);
+  padding-block: var(--hero-padding-block);
 
   @media screen and (max-width: 768px) {
-    --raqn-grid-template-columns: 1fr;
+    --hero-grid-template-columns: 1fr;
   }
 
-  grid-template-columns: var(--raqn-grid-template-columns, 1fr);
-
-  @media screen and (min-width: 768px) {
-    & > div:first-child {
-      max-width: 30vw;
-    }
+  & > div:first-child {
+    order: var(--hero-hero-order);
   }
 }

blocks/hero/hero.js

@@ -1,12 +1,16 @@
 import ComponentBase from '../../scripts/component-base.js';
 
 export default class Hero extends ComponentBase {
+  get observedAttributes() {
+    return ['order'];
+  }
+
   connected() {
     const child = this.children[0];
     child.replaceWith(...child.children);
     this.classList.add('full-width');
     this.setAttribute('role', 'banner');
     this.setAttribute('aria-label', 'hero');
-    this.style.setProperty('--hero-columns', this.getAttribute('height'));
+    this.style.setProperty('--hero-hero-order', this.getAttribute('order'));
   }
 }

blocks/icon/icon.css

@@ -2,9 +2,10 @@ raqn-icon {
   display: inline-flex;
   font-size: 1em;
   line-height: 1em;
+  text-align: center;
   min-width: var(--scope-icon-size, 1em);
   min-height: var(--scope-icon-size, 1em);
-  text-align: center;
+  justify-content: var(--scope-icon-align, start);
   text-transform: none;
   vertical-align: middle;
   -webkit-font-smoothing: antialiased;
@@ -13,8 +14,8 @@ raqn-icon {
 
 raqn-icon svg {
   display: inline-block;
-  max-height: 100%;
-  max-width: 100%;
+  max-width: var(--scope-icon-size, 1em);
+  max-height: var(--scope-icon-size, 1em);
   fill: currentcolor;
   overflow: hidden;
   vertical-align: middle;

blocks/icon/icon.js

@@ -16,7 +16,7 @@ export default class Icon extends ComponentBase {
   }
 
   get iconUrl() {
-    return `assets/icons/${this.iconName}.svg`;
+    return `/assets/icons/${this.iconName}.svg`;
   }
 
   get cache() {

blocks/navigation/navigation.css

@@ -97,6 +97,17 @@ raqn-navigation {
       padding: var(--padding-vertical, 20px) var(--padding-horizontal, 20px);
     }
 
+    .level-2,
+    .level-2 > ul {
+      display: inline-flex;
+      flex-direction: column;
+    }
+
+    .level-2 > ul {
+      list-style: none;
+      padding: 0;
+    }
+
     .level-1 > ul {
       display: flex;
       clip-path: inset(0% -100vw 100% -100vw);

blocks/navigation/navigation.js

@@ -17,7 +17,7 @@ export default class Navigation extends Column {
     return button;
   }
 
-  render() {
+  ready() {
     this.list = this.querySelector('ul');
     this.nav = document.createElement('nav');
     this.nav.append(this.list);