diff --git a/css/styles.css b/css/styles.css index 35aedde..2da5b98 100644 --- a/css/styles.css +++ b/css/styles.css @@ -197,6 +197,8 @@ table { --color-border: #e2e8f0; --color-border-light: #f1f5f9; + --color-push-box-bg: #EBEEF4; + --color-success: #22c55e; --color-error: #ef4444; --color-warning: #f59e0b; @@ -206,6 +208,8 @@ table { "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; --font-family-heading: var(--font-family-base); + --font-family-outfit: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, sans-serif; --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ diff --git a/images/logo-asoka.png b/images/logo-asoka.png new file mode 100644 index 0000000..ac2923b Binary files /dev/null and b/images/logo-asoka.png differ diff --git a/index.html b/index.html index cf9066d..159b721 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,12 @@ /> Milinda - Home + + + @@ -76,6 +82,15 @@ + + Asoka Logo +

+ Gespecialiseerd op het vlak van boeddhisme en aanverwante Oost-West + thema's +

+ Meer over Asoka + +

Featured Books

diff --git a/js/app.js b/js/app.js index d1b66f1..289184c 100644 --- a/js/app.js +++ b/js/app.js @@ -11,6 +11,8 @@ import './components/search-bar.js'; import './components/site-content.js'; import './components/site-footer.js'; import './components/book-card.js'; +import './components/push-box.js'; +import './components/arrow-button.js'; // App initialization (if needed) document.addEventListener('DOMContentLoaded', () => { diff --git a/js/components/arrow-button.js b/js/components/arrow-button.js new file mode 100644 index 0000000..be19ff5 --- /dev/null +++ b/js/components/arrow-button.js @@ -0,0 +1,88 @@ +/** + * Arrow Button Component + * A CTA link with a circular arrow icon + * Uses a slot for the button text content + */ +class ArrowButton extends HTMLElement { + static get observedAttributes() { + return ["href"]; + } + + constructor() { + super(); + this.attachShadow({ mode: "open" }); + } + + connectedCallback() { + this.render(); + } + + attributeChangedCallback() { + this.render(); + } + + get href() { + return this.getAttribute("href") || "#"; + } + + render() { + this.shadowRoot.innerHTML = ` + + + + + + + + + + + + + `; + } +} + +customElements.define("arrow-button", ArrowButton); diff --git a/js/components/push-box.js b/js/components/push-box.js new file mode 100644 index 0000000..531bc55 --- /dev/null +++ b/js/components/push-box.js @@ -0,0 +1,93 @@ +/** + * Push Box Component + * A promotional container with logo, title, and CTA + * Uses slots for all content to allow easy customization in HTML + */ +class PushBox extends HTMLElement { + static get observedAttributes() { + return ["background-color", "text-color"]; + } + + constructor() { + super(); + this.attachShadow({ mode: "open" }); + } + + connectedCallback() { + this.render(); + } + + attributeChangedCallback() { + this.render(); + } + + get backgroundColor() { + return ( + this.getAttribute("background-color") || + "var(--color-push-box-bg, #EBEEF4)" + ); + } + + get textColor() { + return this.getAttribute("text-color") || "#951D51"; + } + + render() { + this.shadowRoot.innerHTML = ` + +
+
+ +
+
+ +
+
+ +
+
+ `; + } +} + +customElements.define("push-box", PushBox); diff --git a/js/components/search-bar.js b/js/components/search-bar.js index f45f9f9..34d9eea 100644 --- a/js/components/search-bar.js +++ b/js/components/search-bar.js @@ -173,7 +173,7 @@ class SearchBar extends HTMLElement { align-items: center; width: 100%; height: 40px; - background-color: #FADCE7; + background-color: #FFF; border-radius: 8px; overflow: hidden; }