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

1
css/styles.css
View File

@@ -421,6 +421,7 @@ site-content {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-md, 1rem); /* 16px */
padding-bottom: var(--spacing-md, 1rem);
}
/* ==========================================================================

93
index.html
View File

@@ -52,8 +52,9 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="8" r="5"></circle>
<path d="M20 21a8 8 0 0 0-16 0"></path>
<path d="M18 20a6 6 0 0 0-12 0" />
<circle cx="12" cy="10" r="4" />
<circle cx="12" cy="12" r="10" />
</svg>
</button>
<button class="icon-button" aria-label="Shopping basket">
@@ -68,11 +69,11 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="8" cy="21" r="1" />
<circle cx="19" cy="21" r="1" />
<path
d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"
></path>
<path d="M3 6h18"></path>
<path d="M16 10a4 4 0 0 1-8 0"></path>
d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"
/>
</svg>
</button>
</div>
@@ -132,69 +133,43 @@
</section>
<section class="section">
<section-title text="New Releases"></section-title>
<section-title text="Featured Books"></section-title>
<div class="book-grid">
<book-card
title="Tomorrow, and Tomorrow"
author="Gabrielle Zevin"
price="$15.99"
rating="4"
href="book.html"
></book-card>
<book-card
title="The House in the Pines"
author="Ana Reyes"
price="$13.99"
rating="3.5"
href="book.html"
></book-card>
<book-card
title="Demon Copperhead"
author="Barbara Kingsolver"
price="$19.99"
rating="5"
href="book.html"
></book-card>
<book-card
title="The Light We Carry"
author="Michelle Obama"
price="$17.99"
rating="4.5"
href="book.html"
></book-card>
</div>
</section>
<section class="section">
<section-title text="Best Sellers"></section-title>
<div class="book-grid">
<book-card
title="Where the Crawdads Sing"
author="Delia Owens"
price="$11.99"
rating="4.5"
href="book.html"
></book-card>
<book-card
title="The Silent Patient"
author="Alex Michaelides"
title="The Midnight Library"
description="A library of infinite possibilities"
author="Matt Haig"
price="$14.99"
rating="4"
href="book.html"
></book-card>
<book-card
title="Educated"
author="Tara Westover"
price="$13.99"
rating="4.5"
href="book.html"
theme="dark"
></book-card>
<book-card
title="Becoming"
author="Michelle Obama"
title="Atomic Habits"
description="A simple, proven system for breaking bad habits and forming good ones"
author="James Clear"
price="$16.99"
rating="5"
href="book.html"
theme="dark"
></book-card>
<book-card
title="The Psychology of Money"
description="A book about the psychology of money and how it affects our lives"
author="Morgan Housel"
price="$12.99"
rating="4"
href="book.html"
theme="dark"
></book-card>
<book-card
title="Project Hail Mary"
description="A book about the science of space travel and the future of humanity"
author="Andy Weir"
price="$18.99"
rating="4.5"
href="book.html"
theme="dark"
></book-card>
</div>
</section>

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);

4
js/icons/mic.js
View File

@@ -23,9 +23,9 @@ export function micIcon({
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/>
<path d="M12 19v3"/>
<path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
<line x1="12" x2="12" y1="19" y2="22"/>
<rect x="9" y="2" width="6" height="13" rx="3"/>
</svg>
`;
}

2
js/icons/search.js
View File

@@ -23,8 +23,8 @@ export function searchIcon({
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m21 21-4.34-4.34"/>
<circle cx="11" cy="11" r="8"/>
<path d="m21 21-4.3-4.3"/>
</svg>
`;
}

6
js/icons/shopping-bag.js
View File

@@ -23,9 +23,9 @@ export function shoppingBagIcon({
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/>
<path d="M3 6h18"/>
<path d="M16 10a4 4 0 0 1-8 0"/>
<circle cx="8" cy="21" r="1"/>
<circle cx="19" cy="21" r="1"/>
<path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"/>
</svg>
`;
}

5
js/icons/user.js
View File

@@ -23,8 +23,9 @@ export function userIcon({
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="8" r="5"/>
<path d="M20 21a8 8 0 0 0-16 0"/>
<path d="M18 20a6 6 0 0 0-12 0"/>
<circle cx="12" cy="10" r="4"/>
<circle cx="12" cy="12" r="10"/>
</svg>
`;
}