9fba7f2fd6
- global.css: rewrite all CSS variables for light-first theme
- White bg, dark text, yellow accent (preserved)
- New --color-bg, --color-bg-soft, --color-bg-alt tokens
- All button variants audited: btn-primary (yellow/black, never matches
any white/yellow/soft bg), btn-dark (black/white, safe on yellow/light),
btn-outline-dark, btn-outline-light (only on dark), btn-outline-yellow
- Form inputs: white bg, dark text, gray border, yellow focus ring
- Nav: white bg, dark text, yellow hover underline
- Footer: white bg, dark text, social icons on soft bg
- Section variants: .section-soft, .section-yellow (utility classes)
- Removed dark variants: .section-dark, .btn-dark-as-section-bg
- Base.astro: theme-color = #fed400 (yellow)
- Hero.astro: kinetic hero on WHITE bg with yellow badge + dark text
- PageHero.astro: light hero with yellow accent line at bottom
- Navigation.astro: white bg, dark links, yellow CTA, white logo banner
with /images/logo-long-black.png (works on light/yellow)
- Footer.astro: white bg, dark text, social icons, yellow CTA
- Card components: white bg, gray border, yellow hover state
169 lines
3.9 KiB
Plaintext
169 lines
3.9 KiB
Plaintext
---
|
|
/**
|
|
* MOREMINIMORE - PORTFOLIO CARD COMPONENT (LIGHT THEME)
|
|
*/
|
|
|
|
interface Props {
|
|
name: string;
|
|
url: string;
|
|
category: string;
|
|
category_label: string;
|
|
industry?: string;
|
|
thumbnail: string;
|
|
description: string;
|
|
what_we_did?: string;
|
|
result?: string;
|
|
}
|
|
|
|
const { name, url, category, category_label, industry, thumbnail, description, what_we_did, result } = Astro.props;
|
|
---
|
|
|
|
<a href={url || '#'} target="_blank" rel="noopener noreferrer" class="portfolio-card" data-category={category}>
|
|
<div class="portfolio-image">
|
|
<img src={thumbnail} alt={name} loading="lazy" />
|
|
<div class="portfolio-overlay">
|
|
<span class="visit-btn">
|
|
เยี่ยมชมเว็บไซต์
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-info">
|
|
{industry && <span class="portfolio-industry">{industry}</span>}
|
|
<span class="portfolio-category">{category_label}</span>
|
|
<h3 class="portfolio-name">{name}</h3>
|
|
{what_we_did && <p class="portfolio-did">{what_we_did}</p>}
|
|
{result && <p class="portfolio-result">→ {result}</p>}
|
|
{!what_we_did && description && <p class="portfolio-desc">{description}</p>}
|
|
</div>
|
|
</a>
|
|
|
|
<style>
|
|
/* ============================================
|
|
PORTFOLIO CARD (LIGHT THEME)
|
|
============================================ */
|
|
|
|
.portfolio-card {
|
|
display: block;
|
|
background: var(--color-white);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-xl);
|
|
overflow: hidden;
|
|
transition: all 0.4s var(--ease-out-expo);
|
|
}
|
|
|
|
.portfolio-card:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: var(--shadow-md);
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
.portfolio-image {
|
|
position: relative;
|
|
aspect-ratio: 16/10;
|
|
overflow: hidden;
|
|
background: var(--color-bg-soft);
|
|
}
|
|
|
|
.portfolio-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.5s ease;
|
|
}
|
|
|
|
.portfolio-card:hover .portfolio-image img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Yellow overlay on hover */
|
|
.portfolio-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(254, 212, 0, 0.95);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.portfolio-card:hover .portfolio-overlay {
|
|
opacity: 1;
|
|
}
|
|
|
|
.visit-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
background: var(--color-black);
|
|
color: var(--color-white);
|
|
padding: 14px 28px;
|
|
border-radius: var(--radius-full);
|
|
font-family: var(--font-display);
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.visit-btn svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
/* Info section */
|
|
.portfolio-info {
|
|
padding: 24px;
|
|
}
|
|
|
|
.portfolio-industry {
|
|
display: inline-block;
|
|
background: var(--color-primary);
|
|
color: var(--color-black);
|
|
padding: 4px 12px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.portfolio-category {
|
|
display: inline-block;
|
|
background: var(--color-bg-soft);
|
|
color: var(--color-gray-600);
|
|
padding: 4px 10px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
margin-left: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.portfolio-name {
|
|
font-family: var(--font-display);
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
color: var(--color-black);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.portfolio-did,
|
|
.portfolio-desc {
|
|
font-size: 14px;
|
|
color: var(--color-gray-600);
|
|
line-height: 1.5;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.portfolio-result {
|
|
font-size: 14px;
|
|
color: var(--color-black);
|
|
font-weight: 600;
|
|
line-height: 1.5;
|
|
margin-top: 4px;
|
|
}
|
|
</style>
|