feature/site-header #1
@@ -197,6 +197,8 @@ table {
|
|||||||
--color-border: #e2e8f0;
|
--color-border: #e2e8f0;
|
||||||
--color-border-light: #f1f5f9;
|
--color-border-light: #f1f5f9;
|
||||||
|
|
||||||
|
--color-push-box-bg: #EBEEF4;
|
||||||
|
|
||||||
--color-success: #22c55e;
|
--color-success: #22c55e;
|
||||||
--color-error: #ef4444;
|
--color-error: #ef4444;
|
||||||
--color-warning: #f59e0b;
|
--color-warning: #f59e0b;
|
||||||
@@ -206,6 +208,8 @@ table {
|
|||||||
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
|
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
|
||||||
sans-serif;
|
sans-serif;
|
||||||
--font-family-heading: var(--font-family-base);
|
--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-xs: 0.75rem; /* 12px */
|
||||||
--font-size-sm: 0.875rem; /* 14px */
|
--font-size-sm: 0.875rem; /* 14px */
|
||||||
|
|||||||
BIN
images/logo-asoka.png
Normal file
BIN
images/logo-asoka.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
15
index.html
15
index.html
@@ -9,6 +9,12 @@
|
|||||||
/>
|
/>
|
||||||
<title>Milinda - Home</title>
|
<title>Milinda - Home</title>
|
||||||
<!-- Fonts are loaded via @font-face in styles.css -->
|
<!-- Fonts are loaded via @font-face in styles.css -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
<link rel="stylesheet" href="css/styles.css" />
|
<link rel="stylesheet" href="css/styles.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -76,6 +82,15 @@
|
|||||||
</site-header>
|
</site-header>
|
||||||
|
|
||||||
<site-content>
|
<site-content>
|
||||||
|
<push-box>
|
||||||
|
<img slot="logo" src="images/logo-asoka.png" alt="Asoka Logo" />
|
||||||
|
<h2 slot="title">
|
||||||
|
Gespecialiseerd op het vlak van boeddhisme en aanverwante Oost-West
|
||||||
|
thema's
|
||||||
|
</h2>
|
||||||
|
<arrow-button slot="cta" href="#">Meer over Asoka</arrow-button>
|
||||||
|
</push-box>
|
||||||
|
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<h2 class="section-title">Featured Books</h2>
|
<h2 class="section-title">Featured Books</h2>
|
||||||
<div class="book-grid">
|
<div class="book-grid">
|
||||||
|
|||||||
@@ -11,6 +11,8 @@ import './components/search-bar.js';
|
|||||||
import './components/site-content.js';
|
import './components/site-content.js';
|
||||||
import './components/site-footer.js';
|
import './components/site-footer.js';
|
||||||
import './components/book-card.js';
|
import './components/book-card.js';
|
||||||
|
import './components/push-box.js';
|
||||||
|
import './components/arrow-button.js';
|
||||||
|
|
||||||
// App initialization (if needed)
|
// App initialization (if needed)
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
|||||||
88
js/components/arrow-button.js
Normal file
88
js/components/arrow-button.js
Normal file
@@ -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 = `
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-button {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
transition: opacity var(--transition-fast, 150ms ease);
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-button:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border: 1.5px solid currentColor;
|
||||||
|
border-radius: 50%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-icon svg {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
stroke: currentColor;
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-text {
|
||||||
|
text-decoration: underline;
|
||||||
|
text-underline-offset: 3px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<a class="arrow-button" href="${this.href}">
|
||||||
|
<span class="arrow-icon">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M5 12h14"></path>
|
||||||
|
<path d="m12 5 7 7-7 7"></path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span class="button-text">
|
||||||
|
<slot></slot>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define("arrow-button", ArrowButton);
|
||||||
93
js/components/push-box.js
Normal file
93
js/components/push-box.js
Normal file
@@ -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 = `
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.push-box {
|
||||||
|
background-color: ${this.backgroundColor};
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding: 48px 16px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-wrapper {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-wrapper ::slotted(img) {
|
||||||
|
width: 104px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-wrapper ::slotted(*) {
|
||||||
|
font-family: var(--font-family-outfit, "Outfit", sans-serif);
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 34px;
|
||||||
|
color: #000000;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-wrapper {
|
||||||
|
color: #951D51;
|
||||||
|
font-family: var(--font-family-outfit, "Outfit", sans-serif);
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="push-box">
|
||||||
|
<div class="logo-wrapper">
|
||||||
|
<slot name="logo"></slot>
|
||||||
|
</div>
|
||||||
|
<div class="title-wrapper">
|
||||||
|
<slot name="title"></slot>
|
||||||
|
</div>
|
||||||
|
<div class="cta-wrapper">
|
||||||
|
<slot name="cta"></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define("push-box", PushBox);
|
||||||
@@ -173,7 +173,7 @@ class SearchBar extends HTMLElement {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
background-color: #FADCE7;
|
background-color: #FFF;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user