Tradycja i serce
diff --git a/inspiration/stitch_sweet_treats_online_shop/DESIGN.md b/inspiration/stitch_sweet_treats_online_shop/DESIGN.md
new file mode 100644
index 0000000..d2d6987
--- /dev/null
+++ b/inspiration/stitch_sweet_treats_online_shop/DESIGN.md
@@ -0,0 +1,85 @@
+# Design System Document: Artisanal Elegance
+
+## 1. Overview & Creative North Star
+
+### Creative North Star: "The Confectioner’s Gallery"
+This design system is not a mere utility; it is a digital extension of the physical 'Piekarnik Gosi' experience. It treats every interface as a curated display case, mirroring the warmth of a family-owned bakery and the precision of a high-end pâtisserie.
+
+To break the "template" look common in local business sites, this system rejects rigid grids in favor of **Intentional Editorial Asymmetry**. We lean into overlapping elements—such as a product image bleeding off-center into a text block—to mimic the organic arrangement of cakes on a counter. The visual language is defined by high-contrast typography scales, where massive, elegant serifs meet delicate, airy sans-serifs, creating an atmosphere that is both approachable and elite.
+
+---
+
+## 2. Colors
+
+The palette is derived from the shop's interior: sage greens, dusty roses, and warm creams. This is a tonal system designed for warmth.
+
+### The "No-Line" Rule
+**Explicit Instruction:** Designers are prohibited from using 1px solid borders to define sections. Boundaries must be defined solely through background color shifts. For example, a section using `surface-container-low` (#faf3e7) should sit directly against a `surface` (#fff8f0) background. This creates a soft, "dipped" effect rather than a harsh, boxed-in feel.
+
+### Surface Hierarchy & Nesting
+Treat the UI as physical layers of fine vellum paper. Use the surface tiers to create "nested" depth:
+- **Base Level:** `surface` (#fff8f0) for the main body.
+- **Sectioning:** `surface-container-low` (#faf3e7) for large background blocks (e.g., the "Our Story" section).
+- **Interactive Layers:** `surface-container-highest` (#eae2d2) for secondary cards or floating menus to define importance through tonal weight.
+
+### The "Glass & Gradient" Rule
+To move beyond a flat, "standard" UI, use Glassmorphism for floating elements (like a navigation bar or a "Quick Cart"). Utilize semi-transparent surface colors with a `backdrop-blur` of 12px-20px.
+**Signature CTA Polish:** Use subtle linear gradients for primary actions, transitioning from `primary` (#8c4d50) to `primary-container` (#fcacaf). This adds "visual soul" and a velvet-like texture that flat colors cannot replicate.
+
+---
+
+## 3. Typography
+
+The typography strategy balances the "Tradition" of the bakery with the "Clarity" of a modern cafe menu.
+
+- **Display & Headlines (Noto Serif):** These are our "Artisanal" markers. Use large scales (e.g., `display-lg` at 3.5rem) with tighter letter-spacing for a high-end editorial look. Italics should be used sparingly for "O nas" or "Nasze Wyroby" to evoke a handwritten, personal touch.
+- **Titles & Body (Plus Jakarta Sans):** This is our "Modern Service" layer. It provides high legibility. `title-lg` is your workhorse for product names, while `body-md` ensures the ingredients list is readable at any age.
+
+The hierarchy conveys the brand: The Serif speaks to the *quality* of the recipe; the Sans-Serif speaks to the *friendliness* of the service.
+
+---
+
+## 4. Elevation & Depth
+
+We eschew structural lines for **Tonal Layering**.
+
+- **The Layering Principle:** Stack containers to create lift. Place a `surface-container-lowest` (#ffffff) card on a `surface-container-low` (#faf3e7) section. This mimics the way a white pastry box sits on a cream-colored wooden table.
+- **Ambient Shadows:** For "floating" elements (like a cupcake selection modal), use extra-diffused shadows.
+ - *Formula:* `0px 12px 32px rgba(54, 50, 39, 0.06)`. Note the color is a tinted version of `on-surface`, never pure black.
+- **The "Ghost Border" Fallback:** If a border is required for accessibility, it must be a "Ghost Border": use `outline-variant` (#b9b1a3) at **15% opacity**. 100% opaque borders are strictly forbidden.
+- **Soft Geometry:** Utilize the `lg` (2rem) and `xl` (3rem) roundedness tokens. This mimics the scalloped wall details and rounded seating seen in the 'Piekarnik Gosi' interior.
+
+---
+
+## 5. Components
+
+### Buttons
+- **Primary:** Rounded `full` (9999px). Gradient background (`primary` to `primary-container`). Label in `on-primary` (#fff7f6).
+- **Secondary:** Surface-colored with a "Ghost Border." High-quality hover state: a subtle shift to `surface-container-high`.
+
+### Cards & Lists
+- **Rule:** Absolute prohibition of divider lines.
+- **Implementation:** Use vertical whitespace (refer to Spacing Scale) and background shifts. A product list should be a sequence of `surface-container-lowest` tiles floating on a `surface` background.
+- **Bakery Icons:** Use custom line-art icons (Cupcakes, Whisks) in the `primary` color, but place them within a `secondary-container` (#e0f5cb) circle to create a "stamp" effect.
+
+### Selection Chips
+- Use the `md` (1.5rem) roundedness. Use `secondary-container` for the "Active" state to bring in the sage green from the shop’s beams and window frames.
+
+### Input Fields
+- Avoid the "boxed" look. Use `surface-container-highest` as a solid background fill with a bottom-only `outline` at 20% opacity. This feels more like a chic, handwritten menu.
+
+---
+
+## 6. Do’s and Don'ts
+
+### Do:
+* **Embrace Whitespace:** Let the "Cream" background breathe. High-end design is defined by what isn't there.
+* **Layer Tones:** Always ask "Can I use a color shift instead of a line?"
+* **Iconography with Intent:** Use bakery-specific icons to reinforce the family-oriented, artisanal nature.
+* **Asymmetric Layouts:** Place a large serif heading on the left and a product image slightly overlapping it on the right.
+
+### Don't:
+* **Don't use pure black (#000000):** Use `on-background` (#363227) for text to maintain a warm, organic feel.
+* **Don't use hard corners:** Every element should feel as soft as a pastry. Minimum corner radius is `sm` (0.5rem), but aim for `lg` (2rem).
+* **Don't use heavy shadows:** If the shadow looks "dirty" or "heavy," reduce the opacity. It should feel like morning light in a coffee shop.
+* **Don't use standard Dividers:** If you need to separate content, use a change in background color or a 48px-64px vertical gap.
\ No newline at end of file
diff --git a/inspiration/stitch_sweet_treats_online_shop/code.html b/inspiration/stitch_sweet_treats_online_shop/code.html
new file mode 100644
index 0000000..f6436ec
--- /dev/null
+++ b/inspiration/stitch_sweet_treats_online_shop/code.html
@@ -0,0 +1,278 @@
+
+
+
+
+
+
Piekarnik Gosi | Tradycja i Słodkość
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Handcrafted Sweetness for Every Moment.
+
+
+ Discover the magic of traditional baking combined with modern elegance. From our family oven to your special celebrations.
+
+
+
+
+
+
+
+
+
+
cake
+
Baked daily with love.
+
+
+
+
+
+
+
+
+
+
+
+
+
Tradition & Heart
+
A Legacy of Flour and Sugar
+
+ Piekarnik Gosi started as a small family dream in our home kitchen. Today, we continue to honor the same recipes passed down through generations, ensuring every pastry carries the warmth of home.
+
+
+ We believe that the best ingredients are found close to home, which is why we source our flour, eggs, and dairy from local farmers who share our passion for quality.
+
+
+
+
Our Featured Delights
+
+
+
+
+
+
+
+
+
Artisanal Cakes
+
Perfectly balanced flavors and textures for your afternoon tea or celebration.
+
+
+
+
+
+
+
+
+
+
Birthday Creations
+
Custom designs that turn every birthday into an unforgettable masterpiece.
+
+
+
+
+
+
+
+
+
+
Homemade Gelato
+
Crafted in small batches using real fruit and the finest Italian techniques.
+
+
+
+
+
+
+
+coffee Cozy Atmosphere
+
+
Your Second Home
+
+ Step into a space where time slows down. Enjoy our specialty coffee paired with a freshly baked croissant in a serene setting inspired by nature.
+
+
+
+
+wifi
+
+
Free High-Speed Wi-Fi
+
+
+
+pets
+
+
Pet Friendly Garden
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/inspiration/stitch_sweet_treats_online_shop/screen.png b/inspiration/stitch_sweet_treats_online_shop/screen.png
new file mode 100644
index 0000000..2c161c5
Binary files /dev/null and b/inspiration/stitch_sweet_treats_online_shop/screen.png differ
diff --git a/scraped/002.jpg b/scraped/002.jpg
new file mode 100644
index 0000000..0d911ff
Binary files /dev/null and b/scraped/002.jpg differ
diff --git a/style.css b/style.css
index 04efae8..d2c5065 100644
--- a/style.css
+++ b/style.css
@@ -4,6 +4,7 @@
body {
background-color: var(--surface);
font-family: 'Plus Jakarta Sans', sans-serif;
+ box-sizing: border-box;
}
nav {
@@ -23,9 +24,12 @@ nav > div {
/* content inside */
display: grid;
grid-template-columns: 1fr auto 1fr;
- align-items: center;
+ align-items: center;
+
+ & :last-child {
+ justify-self: end
+ }
- & :last-child { justify-self: end }
& > div {
display: flex;
align-items: center;
@@ -39,12 +43,14 @@ nav > div {
&[href] {
font-weight: 200;
transition: color 0.2s;
+
&:hover {
color: var(--primary);
}
}
/* The main selected link doesn't have a href attribute, so we can use that for styles */
+
&:not([href]) {
color: var(--primary);
padding-bottom: 8px;
@@ -62,7 +68,7 @@ nav > div {
align-items: center;
justify-content: center;
- & > div{
+ & > div {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
@@ -73,6 +79,7 @@ nav > div {
}
/* left portion */
+
& > :first-child {
align-items: flex-start;
flex-direction: column;
@@ -80,8 +87,10 @@ nav > div {
}
/* right portion */
+
& > :last-child {
align-items: center;
+
& > img {
rotate: 2deg;
border-radius: var(--border-radius);
@@ -100,6 +109,7 @@ nav > div {
.about-us {
background-color: var(--surface-container-low);
+ max-height: calc(100vh - var(--nav-height) - 2rem);
& > div {
max-width: var(--max-content-width);
@@ -107,14 +117,41 @@ nav > div {
padding: 2rem;
display: grid;
- grid-template-columns: 2fr 1fr;
+ grid-template-columns: 60% 40%;
align-items: center;
- gap: 1rem;
- & > div {
+ & :first-child {
+ display: flex;
+ align-items: center;
+ align-content: center;
+
+ & > img {
+ border-radius: var(--border-radius);
+ border: 0.5rem solid var(--surface);
+ scale: 0.8;
+ height: 100%;
+ width: 100%;
+ position: relative;
+
+ &:first-child {
+ scale: 1;
+ top: -2rem;
+ }
+
+ &:last-child {
+ top: 1rem;
+ left: -7rem;
+ z-index: 10;
+ }
+
+ }
+ }
+
+ &:last-child {
& > span {
color: var(--primary);
}
+
gap: 1rem;
}
}