diff --git a/book.html b/book.html index c7b4fae..e6a1042 100644 --- a/book.html +++ b/book.html @@ -8,12 +8,7 @@ content="The Midnight Library - Between life and death there is a library" /> The Midnight Library - BookStore - - - + diff --git a/css/styles.css b/css/styles.css index 1c4aa15..2da5b98 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,3 +1,25 @@ +/* ========================================================================== + Font Definitions + ========================================================================== */ + +@font-face { + font-family: "Outline"; + src: url("../fonts/Outline-Regular.woff2") format("woff2"), + url("../fonts/Outline-Regular.woff") format("woff"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Outline"; + src: url("../fonts/Outline-Light.woff2") format("woff2"), + url("../fonts/Outline-Light.woff") format("woff"); + font-weight: 300; + font-style: normal; + font-display: swap; +} + /* ========================================================================== CSS Reset & Normalize (Modern Best Practices) Based on normalize.css v8.0.1 + modern resets @@ -175,15 +197,19 @@ table { --color-border: #e2e8f0; --color-border-light: #f1f5f9; + --color-push-box-bg: #EBEEF4; + --color-success: #22c55e; --color-error: #ef4444; --color-warning: #f59e0b; /* Typography */ - --font-family-base: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, + --font-family-base: "Outline", system-ui, -apple-system, BlinkMacSystemFont, "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 */ @@ -193,14 +219,16 @@ table { --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ + --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.25; - --line-height-normal: 1.5; + --line-height-normal: 1.5; /* 24px at 16px base */ --line-height-relaxed: 1.75; + --line-height-24: 24px; /* Spacing */ --spacing-xs: 0.25rem; /* 4px */ @@ -268,8 +296,8 @@ top-bar .icon-button svg { top-bar .logo { font-family: var(--font-family-base); - font-size: 1.25rem; - font-weight: 700; + font-size: var(--font-size-xl); + font-weight: var(--font-weight-bold); color: #ffffff; text-decoration: none; } @@ -277,6 +305,7 @@ top-bar .logo { top-bar .actions { display: flex; align-items: center; + gap: var(--spacing-md); } /* ========================================================================== 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 180b4d1..159b721 100644 --- a/index.html +++ b/index.html @@ -8,10 +8,11 @@ content="Milinda - Discover and buy your next favorite book" /> Milinda - Home + @@ -81,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/horizontal-scroll-nav.js b/js/components/horizontal-scroll-nav.js index 08a731c..4b0c2fd 100644 --- a/js/components/horizontal-scroll-nav.js +++ b/js/components/horizontal-scroll-nav.js @@ -59,11 +59,13 @@ class HorizontalScrollNav extends HTMLElement { .nav-container { display: flex; - gap: var(--spacing-sm, 0.5rem); + align-items: center; + height: 80px; + gap: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; - padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem); + padding: 0 16px; } .nav-container::-webkit-scrollbar { @@ -72,29 +74,39 @@ class HorizontalScrollNav extends HTMLElement { .nav-pill { flex-shrink: 0; - padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem); - font-size: var(--font-size-sm, 0.875rem); + height: 32px; + padding: 0; + font-family: var(--font-family-base); + font-size: var(--font-size-base, 16px); font-weight: var(--font-weight-medium, 500); - color: var(--color-text-light, #64748b); - background-color: var(--color-background-tertiary, #f1f5f9); + line-height: var(--line-height-24, 24px); + color: #000000; + background-color: transparent; border: none; - border-radius: var(--radius-full, 9999px); + border-radius: 0; cursor: pointer; transition: all var(--transition-fast, 150ms ease); white-space: nowrap; + text-decoration: underline; + text-underline-offset: 4px; + display: flex; + align-items: center; } .nav-pill:hover { - background-color: var(--color-border, #e2e8f0); + color: #333333; } .nav-pill.active { - color: var(--color-text-inverse, #ffffff); - background-color: var(--color-primary, #2563eb); + color: #ffffff; + background-color: #951D51; + text-decoration: none; + border-radius: 9999px; + padding: 0 16px; } .nav-pill.active:hover { - background-color: var(--color-primary-dark, #1d4ed8); + background-color: #7a1843; }