feat: refactor components to use slots, implement CSS-controlled SVG graphics, and enhance theming system
- Refactored InitialSection.astro to use named slot (extraContent) instead of prop for flexible HTML/JSX content injection from parent components - Updated index.astro to utilize extraContent slot in InitialSection component - Replaced decorative background div in Layout.astro with inline SVG element, enabling dynamic color control via CSS variable (--naliia-n-bg-color) - Added .bg-svg class and --bg-svg-color variable in global.css for customizable SVG decorative background - Converted navbar logo from img to inline SVG with CSS-controlled gradient using linearGradient definition - Implemented gradient variables (--navbar-n-naliia-start, --navbar-n-naliia-end) for theme-aware logo coloring - Configured vertical gradient (bottom-to-top) with pink color at bottom for navbar logo - Added data-theme attribute support in Layout.astro for light/dark theme switching - Extended global.css with comprehensive color palette (pink, yellow, mistyRose variants) and semantic tokens - Refactored all color references to use CSS custom properties for consistent theming - Updated Footer.astro logo from img to inline SVG with gradient support matching navbar implementation - Replaced hardcoded color values in navbar.css and footer.css with semantic token variables - Added [data-theme='dark'] selector in global.css to support future dark mode implementation - Created reusable CSS variables for borders, backgrounds, and text colors across components - Improved pricing card layout with enhanced visual hierarchy and gradient-based pricing tiers - Restructured index.astro pricing section with improved feature presentation and layout
This commit is contained in:
@@ -30,9 +30,46 @@
|
||||
|
||||
:root {
|
||||
/* Primitive values */
|
||||
--bg-svg-color: #ffffff;
|
||||
|
||||
/* Colors */
|
||||
--dark-gray: #252525;
|
||||
--light-gray: #444444;
|
||||
--base-white: #ffffff;
|
||||
--base-black: #000000;
|
||||
|
||||
--main-pink-50: #fcedf1;
|
||||
--main-pink-100: #f7c8d4;
|
||||
--main-pink-200: #f3adc0;
|
||||
--main-pink-300: #ee87a3;
|
||||
--main-pink-400: #ea7091;
|
||||
--main-pink-500: #e54c75;
|
||||
--main-pink-600: #d0456a;
|
||||
--main-pink-700: #a33653;
|
||||
--main-pink-800: #7e2a40;
|
||||
--main-pink-900: #602031;
|
||||
|
||||
--main-yellow-50: #fef8f1;
|
||||
--main-yellow-100: #fde9d4;
|
||||
--main-yellow-200: #fbdfbf;
|
||||
--main-yellow-300: #fad0a1;
|
||||
--main-yellow-400: #f9c78f;
|
||||
--main-yellow-500: #f7b973;
|
||||
--main-yellow-600: #e1a869;
|
||||
--main-yellow-700: #af8352;
|
||||
--main-yellow-800: #88663f;
|
||||
--main-yellow-900: #684e30;
|
||||
|
||||
--main-mistyRose-50: #fefcfa;
|
||||
--main-mistyRose-100: #fcf6f0;
|
||||
--main-mistyRose-200: #faf2e9;
|
||||
--main-mistyRose-300: #f8ece0;
|
||||
--main-mistyRose-400: #f6e8d9;
|
||||
--main-mistyRose-500: #f4e2d0;
|
||||
--main-mistyRose-600: #decebd;
|
||||
--main-mistyRose-700: #ada094;
|
||||
--main-mistyRose-800: #867c72;
|
||||
--main-mistyRose-900: #665f57;
|
||||
|
||||
/* Fonts */
|
||||
--font-family-primary: "Gilroy";
|
||||
@@ -93,7 +130,24 @@
|
||||
--space-9: 160px;
|
||||
|
||||
/* Tokens */
|
||||
--bg-dark: var(--dark-gray);
|
||||
/* Light theme (default) */
|
||||
--main-bg-color: var(--base-white);
|
||||
--main-text-color: var(--light-gray);
|
||||
--secundary-text-color: var(--base-white);
|
||||
--card-bg-color: var(--main-mistyRose-500);
|
||||
--naliia-n-bg-color: var(--main-pink-500);
|
||||
--main-icon-color: var(--light-gray);
|
||||
--navbar-border-color: rgba(68, 68, 68, 0.2);
|
||||
--navbar-n-naliia-start: var(--main-pink-500);
|
||||
--navbar-n-naliia-end: var(--main-yellow-500);
|
||||
--main-border: 1px solid rgba(68, 68, 68, 0.2);
|
||||
--pricingcard-bgcolor: var(--dark-gray);
|
||||
--pricingcard-section-bgcolor: var(--dark-gray);
|
||||
--pricingcard-plantype-bgcolor: var(--main-pink-500);
|
||||
--pricingcard-plantype-txtcolor: var(--base-white);
|
||||
--pricingcard-value-txtcolor: var(--base-white);
|
||||
--pricingcard-features-subtitlecolor: var(--main-pink-500);
|
||||
--pricingcard-features-txtcolor: var(--base-white);
|
||||
|
||||
/* spacing, padding, margin */
|
||||
--space-none-0: var(--space-none);
|
||||
@@ -174,13 +228,19 @@
|
||||
--line-height-mobile-h1: var(--lh-h1-mobile);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
/* Dark theme */
|
||||
--navbar-n-naliia-start: var(--base-white);
|
||||
--navbar-n-naliia-end: var(--base-white);
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
background-color: var(--bg-dark);
|
||||
background-color: var(--main-bg-color);
|
||||
font-family: var(--font-family-primary), sans-serif, Arial;
|
||||
}
|
||||
|
||||
@@ -189,7 +249,7 @@ p {
|
||||
line-height: var(--line-height-desktop-base);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: white;
|
||||
color: var(--main-text-color);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: var(--font-mobile-base);
|
||||
@@ -204,7 +264,7 @@ h1 {
|
||||
line-height: var(--line-height-desktop-h1);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: white;
|
||||
color: var(--main-text-color);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: var(--font-mobile-h1);
|
||||
@@ -219,7 +279,7 @@ h2 {
|
||||
line-height: var(--line-height-desktop-h2);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: white;
|
||||
color: var(--main-text-color);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: var(--font-mobile-h2);
|
||||
@@ -234,7 +294,7 @@ h3 {
|
||||
line-height: var(--line-height-desktop-h3);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: white;
|
||||
color: var(--main-text-color);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: var(--font-mobile-h3);
|
||||
@@ -249,7 +309,7 @@ h4 {
|
||||
line-height: var(--line-height-desktop-h4);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: white;
|
||||
color: var(--main-text-color);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: var(--font-mobile-h4);
|
||||
@@ -264,7 +324,7 @@ h5 {
|
||||
line-height: var(--line-height-desktop-h5);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: white;
|
||||
color: var(--main-text-color);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: var(--font-mobile-h5);
|
||||
@@ -279,7 +339,7 @@ h6 {
|
||||
line-height: var(--line-height-desktop-h6);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: white;
|
||||
color: var(--main-text-color);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: var(--font-mobile-h6);
|
||||
@@ -289,21 +349,30 @@ h6 {
|
||||
}
|
||||
}
|
||||
|
||||
.bg-image {
|
||||
a,
|
||||
li,
|
||||
summary {
|
||||
color: var(--main-text-color);
|
||||
text-decoration: none;
|
||||
font-size: var(--font-desktop-base);
|
||||
line-height: var(--line-height-desktop-base);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: var(--font-mobile-base);
|
||||
line-height: var(--line-height-mobile-base);
|
||||
}
|
||||
}
|
||||
|
||||
.bg-svg {
|
||||
position: absolute;
|
||||
top: -180px;
|
||||
right: 0px;
|
||||
|
||||
width: 1400px;
|
||||
height: 1400px;
|
||||
|
||||
transform: translateX(8%);
|
||||
background-image: url("../assets/imgs/n-naliia-blanca.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
opacity: 0.02;
|
||||
opacity: 0.05;
|
||||
transform: translateX(8%);
|
||||
}
|
||||
|
||||
.body-container {
|
||||
|
||||
Reference in New Issue
Block a user