feat: light theme + audited color-conflict-safe tokens
- 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
This commit is contained in:
Macky
@@ -1,76 +1,168 @@
|
||||
---
|
||||
/**
|
||||
* 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, thumbnail, description } = Astro.props;
|
||||
const { name, url, category, category_label, industry, thumbnail, description, what_we_did, result } = Astro.props;
|
||||
---
|
||||
|
||||
<a href={url} target="_blank" rel="noopener" class="portfolio-card" data-category={category}>
|
||||
<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>
|
||||
<p class="portfolio-desc">{description}</p>
|
||||
{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: rgba(255,255,255,0.03);
|
||||
border-radius: 16px;
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
transition: all 0.4s ease;
|
||||
transition: all 0.4s var(--ease-out-expo);
|
||||
}
|
||||
|
||||
.portfolio-card:hover {
|
||||
transform: translateY(-8px);
|
||||
background: rgba(255,255,255,0.08);
|
||||
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); }
|
||||
.portfolio-info { padding: 24px; }
|
||||
.portfolio-category {
|
||||
|
||||
.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: 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.portfolio-name {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.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: rgba(255,255,255,0.6);
|
||||
color: var(--color-gray-600);
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
.portfolio-result {
|
||||
font-size: 14px;
|
||||
color: var(--color-black);
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user