rubberducky/milinda-pitch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/site-header #1

Merged
rubberducky merged 4 commits from feature/site-header into main 2026-01-15 07:49:02 +00:00
Conversation 0 Commits 4 Files Changed 17 +203 -1
7 changed files with 203 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 73ca0cb94f - Show all commits

4
css/styles.css
View File

@@ -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 */

BIN
images/logo-asoka.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

15
index.html
View File

@@ -9,6 +9,12 @@
/>
<title>Milinda - Home</title>
<!-- 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" />
</head>
<body>
@@ -76,6 +82,15 @@
</site-header>
<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">
<h2 class="section-title">Featured Books</h2>
<div class="book-grid">

2
js/app.js
View File

@@ -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', () => {

88
js/components/arrow-button.js Normal file
View 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
View 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);

2
js/components/search-bar.js
View File

@@ -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;
}