bang

notes.org

@@ -0,0 +1,16 @@
+* Inbox
+** [2026-07-04 Sat 18:13] Style
+rounded corners
+soft pastels
+
+** [2026-07-04 Sat 18:11] Pallete
+- Colors
+  - #00a0d6
+  - #ffe77e
+  - #fdf5b5
+  - #fc8da1
+  - #e5362b
+- Fonts
+  - Outfit
+  - Titan One
+    

src/components/Hero.astro

@@ -13,6 +13,17 @@ const { image, title, subtitle } = Astro.props;
 <section class="hero">
   <div class="container hero-grid">
     <div class="hero-image">
+      <div class="hero-image-icons">
+        <span class="hero-icon" aria-hidden="true">
+          <svg width="14" height="14" 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"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+        </span>
+        <span class="hero-icon" aria-hidden="true">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
+        </span>
+        <span class="hero-icon" aria-hidden="true">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+        </span>
+      </div>
       <img src={image} alt={title} width="600" height="800" loading="eager" />
     </div>
     <div class="hero-content">

src/styles/global.css

@@ -1,15 +1,15 @@
 :root {
-  --bg: #f0e0ea;
+  --bg: #fdf5b5;
   --surface: #ffffff;
-  --text: #1a1120;
+  --text: #e5362b;
-  --text-muted: #7a5a75;
+  --text-muted: #a8322b;
-  --border: #e8d0e4;
+  --border: #cceaf5;
-  --accent: #d4a0c0;
+  --accent: #00a0d6;
-  --accent-light: #e8bcd4;
+  --accent-light: #80cfea;
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
   --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1);
-  --radius: 4px;
+  --radius: 8px;
   --max-width: 1200px;
   --content-width: 720px;
   --font-sans: system-ui, -apple-system, sans-serif;
@@ -116,18 +116,45 @@ h1, h2, h3, h4 {
   align-items: center;
 }
 .hero-image {
-  aspect-ratio: 3 / 4;
+  position: relative;
-  overflow: hidden;
+  aspect-ratio: 1 / 1;
-  background: var(--border);
+  background: #e5362b;
-  border-radius: var(--radius);
+  border: 24px solid #e5362b;
+  border-top: 64px solid #e5362b;
+  border-radius: 16px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.hero-image-icons {
+  position: absolute;
+  top: -48px;
+  right: -5px;
+  display: flex;
+  gap: 8px;
+  z-index: 1;
+}
+.hero-icon {
+  width: 28px;
+  height: 28px;
+  background: #fdf5b5;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #e5362b;
+}
+.hero-icon svg {
+  width: 14px;
+  height: 14px;
 }
 .hero-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  transition: transform 0.6s ease;
+  border-radius: 12px;
 }
-.hero-image:hover img { transform: scale(1.03); }
 .hero-content h1 {
   font-size: 2.5rem;
   margin-bottom: 0.5rem;
@@ -167,7 +194,7 @@ h1, h2, h3, h4 {
 /* Painting card */
 .painting-card {
   background: var(--surface);
-  border-radius: var(--radius);
+  border-radius: 16px;
   overflow: hidden;
   box-shadow: var(--shadow-sm);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
@@ -178,9 +205,10 @@ h1, h2, h3, h4 {
   box-shadow: var(--shadow-lg);
 }
 .painting-card-image {
-  aspect-ratio: 3 / 4;
+  aspect-ratio: 1 / 1;
-  overflow: hidden;
   background: var(--border);
+  border-radius: 16px;
+  overflow: hidden;
 }
 .painting-card-image img {
   width: 100%;