feat(frontend): update pages, components and branding
Refresh Astro frontend implementation including new pages (Portfolio, Teams, Services), components, and styling updates.
This commit is contained in:
@@ -1,204 +1,385 @@
|
||||
/* Theme CSS Variables and Custom Styles */
|
||||
/**
|
||||
* Theme CSS Variables and Custom Styles
|
||||
* 恩群數位行銷 - Enchun Digital Marketing
|
||||
*
|
||||
* Design tokens extracted from Webflow CSS
|
||||
* Last Updated: 2026-01-31
|
||||
*/
|
||||
|
||||
/* ============================================
|
||||
CSS CUSTOM PROPERTIES - DESIGN TOKENS
|
||||
============================================ */
|
||||
|
||||
/* CSS Custom Properties for Theme */
|
||||
:root {
|
||||
/* Color Palette */
|
||||
--color-primary: #1F3A93;
|
||||
--color-secondary: #F39C12;
|
||||
--color-accent: #16A085;
|
||||
--color-enchunblue: #3083BF;
|
||||
--color-background: #FFFFFF;
|
||||
--color-surface: #F7FAFC;
|
||||
--color-text: #1A202C;
|
||||
--color-text-muted: #718096;
|
||||
--color-border: #E2E8F0;
|
||||
/*
|
||||
Purpose:
|
||||
Define extended Enchun brand color palette as CSS custom properties, all prefixed with --color- for consistency and semantic clarity.
|
||||
This ensures all color variables are easily discoverable and maintainable across the codebase.
|
||||
*/
|
||||
--color-alabaster: #fafafa;
|
||||
--color-alto: #d1d1d1;
|
||||
--color-amber: #ffc107;
|
||||
--color-black: #000000;
|
||||
--color-boston-blue: #3083bf;
|
||||
--color-concrete: #f2f2f2;
|
||||
--color-cream-can: #f6c456;
|
||||
--color-dove-gray: #6b6b6b;
|
||||
--color-dusty-gray: #999999;
|
||||
--color-emperor: #4f4f4f;
|
||||
--color-gray: #878787;
|
||||
--color-killarney: #3c6f50;
|
||||
--color-lucky-point: #171c61;
|
||||
--color-manatee: #939494;
|
||||
--color-mercury: #e3e3e3;
|
||||
--color-mine-shaft: #333333;
|
||||
--color-mine-shaft-60: #222222;
|
||||
--color-nobel: #b6b6b6;
|
||||
--color-oslo-gray: #939494;
|
||||
--color-pomegranate: #f44336;
|
||||
--color-silver: #bdbdbd;
|
||||
--color-silver-chalice: #acacac;
|
||||
--color-st-tropaz: #2b618f;
|
||||
--color-tarawera: #062841;
|
||||
--color-tropical-blue: #c7e4fa;
|
||||
--color-tundora: #4d4d4d;
|
||||
--color-turbo: #ffef00;
|
||||
--color-valencia: #d84038;
|
||||
--color-viking: #67aee1;
|
||||
--color-white: #ffffff;
|
||||
--color-wild-sand: #f6f6f6;
|
||||
/* ============================================
|
||||
🎨 COLORS - Extracted from Webflow CSS
|
||||
============================================ */
|
||||
|
||||
/* Typography */
|
||||
--font-family-sans: 'Noto Sans CJK TC', 'Inter', system-ui, -apple-system, sans-serif;
|
||||
--font-family-heading: 'Noto Sans CJK TC', 'Inter', system-ui, -apple-system, sans-serif;
|
||||
/* Primary Colors (主要色) */
|
||||
--color-primary: #3898ec; /* Primary blue */
|
||||
--color-primary-dark: #0082f3; /* Deep blue */
|
||||
--color-primary-light: #67aee1; /* Light blue */
|
||||
--color-primary-hover: #2895f7; /* Hover blue */
|
||||
|
||||
/* Spacing */
|
||||
--spacing-xs: 0.25rem;
|
||||
--spacing-sm: 0.5rem;
|
||||
--spacing-md: 1rem;
|
||||
--spacing-lg: 1.5rem;
|
||||
--spacing-xl: 2rem;
|
||||
--spacing-2xl: 3rem;
|
||||
/* Secondary Colors (次要色) */
|
||||
--color-secondary: #f39c12; /* Secondary orange */
|
||||
--color-secondary-light: #f6c456; /* Light pink */
|
||||
--color-secondary-dark: #d84038; /* Deep orange */
|
||||
|
||||
/* Border Radius */
|
||||
--radius-sm: 0.25rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--radius-xl: 1rem;
|
||||
/* Accent Colors (強調色) */
|
||||
--color-accent: #d84038; /* Accent red-orange */
|
||||
--color-accent-light: #f6c456; /* Light pink */
|
||||
--color-accent-dark: #ea384c; /* Deep red */
|
||||
--color-accent-pink: #bb8282; /* Pink */
|
||||
--color-accent-rose: #c48383; /* Rose */
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
/* Link Colors (連結色) */
|
||||
--color-link: #3083bf; /* Default link */
|
||||
--color-link-hover: #23608c; /* Link hover */
|
||||
|
||||
/* Transitions */
|
||||
--transition-fast: 150ms ease-in-out;
|
||||
--transition-normal: 250ms ease-in-out;
|
||||
--transition-slow: 350ms ease-in-out;
|
||||
/* Neutral Colors (中性色 - Tailwind Slate mapping) */
|
||||
--color-white: #ffffff; /* White */
|
||||
--color-black: #000000; /* Black */
|
||||
--color-gray-50: #fafafa; /* Surface lightest */
|
||||
--color-gray-100: #f5f5f5; /* Surface light */
|
||||
--color-gray-200: #f3f3f3; /* Surface */
|
||||
--color-gray-300: #eeeeee; /* Border light */
|
||||
--color-gray-400: #dddddd; /* Border default */
|
||||
--color-gray-500: #c8c8c8; /* Mid gray */
|
||||
--color-gray-600: #999999; /* Text muted */
|
||||
--color-gray-700: #828282; /* Text dark */
|
||||
--color-gray-800: #758696; /* Dark gray 1 */
|
||||
--color-gray-900: #5d6c7b; /* Dark gray 2 */
|
||||
--color-gray-950: #4f4f4f; /* Darkest gray */
|
||||
|
||||
/* Semantic Colors (語意化顏色) */
|
||||
--color-text-primary: #333333; /* Primary text */
|
||||
--color-text-secondary: #222222; /* Secondary text */
|
||||
--color-text-muted: #999999; /* Muted text */
|
||||
--color-text-light: #758696; /* Light text on dark */
|
||||
--color-text-inverse: #ffffff; /* Inverse (white) */
|
||||
|
||||
/* Backgrounds (背景色) */
|
||||
--color-background: #f2f2f2; /* Main background - Grey 6 from Webflow */
|
||||
--color-surface: #fafafa; /* Surface background */
|
||||
--color-surface2: #f3f3f3; /* Surface elevated */
|
||||
--color-surface-dark: #2226; /* Dark background */
|
||||
|
||||
/* Borders (邊框色) */
|
||||
--color-border: #e2e8f0; /* Default border */
|
||||
--color-border-light: #dddddd; /* Light border */
|
||||
|
||||
/* Category Colors (文章分類) */
|
||||
--color-category-google: #67aee1; /* Google小學堂 */
|
||||
--color-category-meta: #8974de; /* Meta小學堂 */
|
||||
--color-category-news: #3083bf; /* 行銷時事最前線 */
|
||||
--color-category-enchun: #3898ec; /* 恩群數位 */
|
||||
|
||||
/* Badge Colors (標籤) */
|
||||
--color-badge-hot: #ea384c; /* Hot 標籤 (紅) */
|
||||
--color-badge-new: #67aee1; /* New 標籤 (淡藍) */
|
||||
|
||||
/* Webflow Colors - Story 1-4 Global Layout (Verified against original) */
|
||||
--color-enchunblue: #23608c; /* Enchun Blue - 品牌/主色 */
|
||||
--color-enchunblue-dark: #3083bf; /* Enchun Blue Dark - 品牌/主色深色 */
|
||||
--color-tropical-blue: #c7e4fa; /* Tropical Blue - 頁腳背景 (verified: rgb(199, 228, 250)) */
|
||||
--color-st-tropaz: #5d7285; /* St. Tropaz - 頁腳文字 */
|
||||
--color-amber: #f6c456; /* Amber - CTA/強調 */
|
||||
--color-tarawera: #2d3748; /* Tarawera - 深色文字 */
|
||||
--color-nav-link: var(--color-gray-200); /* Navigation Link - 使用灰色系 */
|
||||
|
||||
/* Webflow Additional Colors - Story 1-5 Homepage */
|
||||
--color-notification-red: #d84038; /* Notification Red - CTA Button */
|
||||
--color-dark-blue: #062841; /* Dark Blue - Headings */
|
||||
--color-medium-blue: #67aee1; /* Medium Blue - Accents */
|
||||
--color-grey5: #e0e0e0; /* Grey 5 - Borders */
|
||||
--color-grey6: #f2f2f2; /* Grey 6 - Backgrounds */
|
||||
|
||||
/* ============================================
|
||||
🔤 TYPOGRAPHY - From Webflow
|
||||
============================================ */
|
||||
|
||||
--font-family-sans: "Noto Sans TC", "Quicksand", Arial, sans-serif;
|
||||
--font-family-heading: "Noto Sans TC", "Quicksand", Arial, sans-serif;
|
||||
--font-family-accent: "Quicksand", "Noto Sans TC", sans-serif;
|
||||
|
||||
/* ============================================
|
||||
📏 SPACING - Based on Tailwind scale
|
||||
============================================ */
|
||||
|
||||
--spacing-xs: 0.25rem; /* 4px */
|
||||
--spacing-sm: 0.5rem; /* 8px */
|
||||
--spacing-md: 1rem; /* 16px */
|
||||
--spacing-lg: 1.5rem; /* 24px */
|
||||
--spacing-xl: 2rem; /* 32px */
|
||||
--spacing-2xl: 3rem; /* 48px */
|
||||
--spacing-3xl: 4rem; /* 64px */
|
||||
|
||||
/* Container */
|
||||
--container-max-width: 1200px;
|
||||
--container-padding: 1.5rem;
|
||||
--container-padding-lg: 2rem;
|
||||
|
||||
/* ============================================
|
||||
🔲 BORDER RADIUS
|
||||
============================================ */
|
||||
|
||||
--radius-sm: 0.125rem; /* 2px */
|
||||
--radius: 0.375rem; /* 6px (DEFAULT) */
|
||||
--radius-md: 0.5rem; /* 8px */
|
||||
--radius-lg: 0.75rem; /* 12px */
|
||||
--radius-xl: 1rem; /* 16px */
|
||||
--radius-2xl: 1.5rem; /* 24px */
|
||||
--radius-3xl: 2rem; /* 32px */
|
||||
--radius-full: 9999px; /* Full circle */
|
||||
|
||||
/* ============================================
|
||||
💫 SHADOWS
|
||||
============================================ */
|
||||
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.06);
|
||||
--shadow-md:
|
||||
0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg:
|
||||
0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
|
||||
/* ============================================
|
||||
⏱ TRANSITIONS
|
||||
============================================ */
|
||||
|
||||
--transition-fast: 150ms ease-in-out;
|
||||
--transition-base: 200ms ease-in-out;
|
||||
--transition-normal: 250ms ease-in-out;
|
||||
--transition-slow: 350ms ease-in-out;
|
||||
|
||||
/* ============================================
|
||||
🎯 Z-INDEX LAYERS
|
||||
============================================ */
|
||||
|
||||
--z-dropdown: 1000;
|
||||
--z-sticky: 1020;
|
||||
--z-modal: 1040;
|
||||
--z-popover: 1060;
|
||||
--z-tooltip: 1080;
|
||||
|
||||
/* ============================================
|
||||
📱 RESPONSIVE - Font Size Adjustments (Webflow)
|
||||
============================================ */
|
||||
|
||||
/* Webflow breakpoints:
|
||||
Desktop default: 19px
|
||||
Tablet (≤991px): 19px
|
||||
Mobile (≤767px): 16px
|
||||
Small (≤479px): 13px
|
||||
*/
|
||||
--html-font-size-desktop: 19px;
|
||||
--html-font-size-tablet: 19px; /* 991px breakpoint */
|
||||
--html-font-size-mobile: 16px; /* 767px breakpoint */
|
||||
--html-font-size-small: 13px; /* 479px breakpoint */
|
||||
}
|
||||
|
||||
/* Dark Theme (if needed in future) */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-background: #1A202C;
|
||||
--color-surface: #2D3748;
|
||||
--color-text: #F7FAFC;
|
||||
--color-text-muted: #A0AEC0;
|
||||
--color-border: #4A5568;
|
||||
}
|
||||
}
|
||||
/* ============================================
|
||||
🌙 DARK MODE (Optional - for future use)
|
||||
============================================ */
|
||||
|
||||
/*@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-background: #1a202c;
|
||||
--color-surface: #2d3748;
|
||||
--color-surface2: #1a202c;
|
||||
--color-text: #f7fafc;
|
||||
--color-text-muted: #a0aec0;
|
||||
--color-text-secondary: #e2e8f0;
|
||||
--color-border: #4a5568;
|
||||
}
|
||||
}*/
|
||||
|
||||
/* ============================================
|
||||
📐 BASE STYLES
|
||||
============================================ */
|
||||
|
||||
/* Base Styles */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: var(--font-family-sans);
|
||||
line-height: 1.6;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-background);
|
||||
font-family: var(--font-family-sans);
|
||||
line-height: 1.5;
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-background);
|
||||
font-size: var(--html-font-size-desktop);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: inherit;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
background-color: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: inherit;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
/* Typography Classes */
|
||||
/* ============================================
|
||||
📱 RESPONSIVE FONT SIZE ADJUSTMENTS
|
||||
============================================ */
|
||||
|
||||
@media (max-width: 991px) {
|
||||
html {
|
||||
font-size: var(--html-font-size-tablet);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
html {
|
||||
font-size: var(--html-font-size-mobile);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479px) {
|
||||
html {
|
||||
font-size: var(--html-font-size-small);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
🎨 UTILITY CLASSES
|
||||
============================================ */
|
||||
|
||||
/* Text Gradient */
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--color-primary),
|
||||
var(--color-accent)
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Animation Classes */
|
||||
/* Animations */
|
||||
.fade-in {
|
||||
animation: fadeIn var(--transition-normal) ease-in-out;
|
||||
animation: fadeIn var(--transition-normal) ease-in-out;
|
||||
}
|
||||
|
||||
.slide-up {
|
||||
animation: slideUp var(--transition-normal) ease-in-out;
|
||||
animation: slideUp var(--transition-normal) ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(1rem);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(1rem);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Utility Classes */
|
||||
/* Glass Effect */
|
||||
.glass-effect {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Shadow Custom */
|
||||
.shadow-custom {
|
||||
box-shadow: var(--shadow-lg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
/* Component Specific Styles */
|
||||
/* ============================================
|
||||
🔘 BUTTON STYLES
|
||||
============================================ */
|
||||
|
||||
.btn-primary {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
border-radius: var(--radius);
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--color-primary-hover);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--color-secondary);
|
||||
color: white;
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
border-radius: var(--radius);
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--color-secondary-dark);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
🧭 NAVIGATION STYLES
|
||||
============================================ */
|
||||
|
||||
.nav-link {
|
||||
position: relative;
|
||||
transition: color var(--transition-fast);
|
||||
position: relative;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: var(--color-primary);
|
||||
transition: width var(--transition-fast);
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: var(--color-primary);
|
||||
transition: width var(--transition-fast);
|
||||
}
|
||||
|
||||
.nav-link:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Active Navigation Link Indicator */
|
||||
.nav-active {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Active Navigation Link */
|
||||
.nav-active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 70%;
|
||||
height: 2px;
|
||||
background: var(--color-secondary);
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 70%;
|
||||
height: 2px;
|
||||
background: var(--color-secondary);
|
||||
}
|
||||
|
||||
/* Prose/Markdown Styles */
|
||||
/* ============================================
|
||||
📝 PROSE / MARKDOWN STYLES
|
||||
============================================ */
|
||||
|
||||
.prose-custom {
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-family-sans);
|
||||
color: var(--color-text-primary);
|
||||
font-family: var(--font-family-sans);
|
||||
}
|
||||
|
||||
.prose-custom h1,
|
||||
@@ -207,158 +388,160 @@ body {
|
||||
.prose-custom h4,
|
||||
.prose-custom h5,
|
||||
.prose-custom h6 {
|
||||
color: var(--color-text);
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
margin-top: var(--spacing-xl);
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--color-text-primary);
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
margin-top: var(--spacing-xl);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.prose-custom h1 {
|
||||
font-size: 2.25rem;
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
.prose-custom h2 {
|
||||
font-size: 1.875rem;
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
|
||||
.prose-custom h3 {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.prose-custom p {
|
||||
margin-bottom: var(--spacing-md);
|
||||
line-height: 1.7;
|
||||
margin-bottom: var(--spacing-md);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.prose-custom a {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
transition: color var(--transition-fast);
|
||||
color: var(--color-link);
|
||||
text-decoration: none;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.prose-custom a:hover {
|
||||
color: #1a2f7a;
|
||||
text-decoration: underline;
|
||||
color: var(--color-link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.prose-custom strong {
|
||||
color: var(--color-text);
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.prose-custom em {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.prose-custom ul,
|
||||
.prose-custom ol {
|
||||
margin-bottom: var(--spacing-md);
|
||||
padding-left: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.prose-custom li {
|
||||
margin-bottom: var(--spacing-xs);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.prose-custom blockquote {
|
||||
border-left: 4px solid var(--color-primary);
|
||||
padding-left: var(--spacing-md);
|
||||
margin: var(--spacing-lg) 0;
|
||||
color: var(--color-text-muted);
|
||||
font-style: italic;
|
||||
background: var(--color-surface);
|
||||
padding: var(--spacing-md);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.prose-custom code {
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
padding: 0.125rem 0.25rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: 0.875em;
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text-primary);
|
||||
padding: 0.125rem 0.25rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: "Monaco", "Menlo", monospace;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
.prose-custom pre {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--spacing-md);
|
||||
overflow-x: auto;
|
||||
margin: var(--spacing-lg) 0;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--spacing-md);
|
||||
overflow-x: auto;
|
||||
margin: var(--spacing-lg) 0;
|
||||
}
|
||||
|
||||
.prose-custom pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
.prose-custom blockquote {
|
||||
border-left: 4px solid var(--color-primary);
|
||||
padding-left: var(--spacing-md);
|
||||
margin: var(--spacing-lg) 0;
|
||||
color: var(--color-text-muted);
|
||||
font-style: italic;
|
||||
background: var(--color-surface);
|
||||
padding: var(--spacing-md);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.prose-custom hr {
|
||||
border: 0;
|
||||
border-top: 1px solid var(--color-border);
|
||||
margin: var(--spacing-2xl) 0;
|
||||
}
|
||||
/* ============================================
|
||||
📊 TABLE STYLES
|
||||
============================================ */
|
||||
|
||||
.prose-custom table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: var(--spacing-lg) 0;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: var(--spacing-lg) 0;
|
||||
}
|
||||
|
||||
.prose-custom th,
|
||||
.prose-custom td {
|
||||
border: 1px solid var(--color-border);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
text-align: left;
|
||||
border: 1px solid var(--color-border);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.prose-custom th {
|
||||
background: var(--color-surface);
|
||||
font-weight: 600;
|
||||
background: var(--color-surface);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
🖼️ IMAGE STYLES
|
||||
============================================ */
|
||||
|
||||
.prose-custom img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: var(--radius-md);
|
||||
margin: var(--spacing-md) 0;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: var(--radius-md);
|
||||
margin: var(--spacing-md) 0;
|
||||
}
|
||||
|
||||
/* Button Styles */
|
||||
.btn-primary {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
border-radius: var(--radius-md);
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
/* ============================================
|
||||
📏 HR (DIVIDER) STYLES
|
||||
============================================ */
|
||||
|
||||
.prose-custom hr {
|
||||
border: 0;
|
||||
border-top: 1px solid var(--color-border);
|
||||
margin: var(--spacing-2xl) 0;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #1a2f7a;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-md);
|
||||
/* ============================================
|
||||
🏷️ CATEGORY BADGES
|
||||
============================================ */
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--color-secondary);
|
||||
color: white;
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
border-radius: var(--radius-md);
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
.badge-hot {
|
||||
background-color: var(--color-badge-hot);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #e08e0b;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
.badge-new {
|
||||
background-color: var(--color-badge-new);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Category Badge Colors */
|
||||
.badge-category-google {
|
||||
background-color: var(--color-category-google);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-category-meta {
|
||||
background-color: var(--color-category-meta);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-category-news {
|
||||
background-color: var(--color-category-news);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-category-enchun {
|
||||
background-color: var(--color-category-enchun);
|
||||
color: white;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user