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

fix: add correct styles for book cart

Browse Source
This commit is contained in:
Tim Rijkse
2026-01-15 13:32:47 +01:00
parent 91a461c4fe
commit 200c50bb7f
10 changed files with 64 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
js/components/add-to-cart-button.js
View File

@@ -61,8 +61,8 @@ class AddToCartButton extends HTMLElement {
}
.add-to-cart-button svg {
width: 16px;
height: 16px;
width: 24px;
height: 24px;
color: var(--color-text-inverse, #ffffff);
}
</style>

15
js/components/arrow-button.js
View File

@@ -51,16 +51,12 @@ class ArrowButton extends HTMLElement {
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;
width: 24px;
height: 24px;
stroke: currentColor;
fill: none;
}
@@ -72,9 +68,10 @@ class ArrowButton extends HTMLElement {
</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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<path d="m12 16 4-4-4-4"/>
<path d="M8 12h8"/>
</svg>
</span>
<span class="button-text">

3
js/components/book-card.js
View File

@@ -27,7 +27,8 @@ class BookCard extends HTMLElement {
}
setupEventListeners() {
const addToCartButton = this.shadowRoot?.querySelector("add-to-cart-button");
const addToCartButton =
this.shadowRoot?.querySelector("add-to-cart-button");
if (addToCartButton) {
addToCartButton.addEventListener("add-to-cart", (e) => {
e.stopPropagation();

20
js/components/site-footer.js
View File

@@ -5,7 +5,7 @@
class SiteFooter extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.attachShadow({ mode: "open" });
}
connectedCallback() {
@@ -17,7 +17,7 @@ class SiteFooter extends HTMLElement {
<style>
:host {
display: block;
background-color: var(--color-background-secondary, #f8fafc);
background-color: var(--color-button-primary, #951D51);
border-top: 1px solid var(--color-border, #e2e8f0);
}
@@ -34,13 +34,13 @@ class SiteFooter extends HTMLElement {
.footer-link {
font-size: var(--font-size-sm, 0.875rem);
color: var(--color-text-light, #64748b);
color: var(--color-text-inverse, #ffffff);
text-decoration: none;
transition: color var(--transition-fast, 150ms ease);
}
.footer-link:hover {
color: var(--color-primary, #2563eb);
color: rgba(255, 255, 255, 0.8);
}
.social-icons {
@@ -55,15 +55,15 @@ class SiteFooter extends HTMLElement {
justify-content: center;
width: 40px;
height: 40px;
color: var(--color-text-light, #64748b);
background-color: var(--color-background, #ffffff);
color: var(--color-text-inverse, #ffffff);
background-color: rgba(255, 255, 255, 0.2);
border-radius: var(--radius-full, 9999px);
transition: all var(--transition-fast, 150ms ease);
}
.social-icon:hover {
color: var(--color-primary, #2563eb);
background-color: var(--color-background-tertiary, #f1f5f9);
color: var(--color-text-inverse, #ffffff);
background-color: rgba(255, 255, 255, 0.3);
}
.social-icon svg {
@@ -73,7 +73,7 @@ class SiteFooter extends HTMLElement {
.copyright {
font-size: var(--font-size-xs, 0.75rem);
color: var(--color-text-light, #64748b);
color: var(--color-text-inverse, #ffffff);
text-align: center;
}
</style>
@@ -108,4 +108,4 @@ class SiteFooter extends HTMLElement {
}
}
customElements.define('site-footer', SiteFooter);
customElements.define("site-footer", SiteFooter);