khalidadil/dynamic-sites-simple
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix CSS layout width and add more user friendly messages

Browse Source
This commit is contained in:
khalid@traclabs.com
2026-04-23 01:10:54 -05:00
parent 5229ccdb0f
commit c61f3acae9
6 changed files with 86 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/sections/HeroSection.astro
View File

@@ -20,14 +20,13 @@ const { headline, subheading, ctaText, ctaLink } = Astro.props;
<style>
.hero {
padding: 5rem 0 4rem;
padding: 5rem 1.5rem 4rem;
text-align: center;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--color-primary), white 92%) 0%,
var(--color-bg) 100%
);
border-bottom: none;
}
.hero h1 {
font-family: var(--font-display);

9
src/components/sections/TextSection.astro
View File

@@ -30,12 +30,7 @@ const isPromo = id.includes('promo') || id.includes('banner');
}
.promo {
background: color-mix(in srgb, var(--color-primary), white 90%);
border-left: 4px solid var(--color-primary);
border-radius: 0 6px 6px 0;
margin: 0 auto;
}
.promo .container {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: 3px solid var(--color-primary);
padding: 2rem 1.5rem;
}
</style>

34
src/layouts/BaseLayout.astro
View File

@@ -15,7 +15,7 @@ const { title, primaryColor = '#2d5016' } = Astro.props;
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Source+Sans+3:wght@300;400;500;600&display=swap" rel="stylesheet" />
<style define:vars={{ primaryColor }}>
<style is:global define:vars={{ primaryColor }}>
:root {
--color-primary: var(--primaryColor);
--color-primary-dark: color-mix(in srgb, var(--primaryColor), black 20%);
@@ -44,8 +44,28 @@ const { title, primaryColor = '#2d5016' } = Astro.props;
padding: 0 1.5rem;
}
/* Default: sections are constrained */
section {
max-width: 1080px;
margin-left: auto;
margin-right: auto;
padding: 3.5rem 1.5rem;
}
section + section {
border-top: 1px solid var(--color-border);
}
/* Full-bleed sections: hero and promo break out to full width */
section.hero,
section.promo {
max-width: none;
padding-left: 0;
padding-right: 0;
border-top: none;
}
.site-header {
padding: 1.25rem 0;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--color-border);
background: white;
}
@@ -53,6 +73,7 @@ const { title, primaryColor = '#2d5016' } = Astro.props;
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1080px;
}
.site-logo {
font-family: var(--font-display);
@@ -69,19 +90,12 @@ const { title, primaryColor = '#2d5016' } = Astro.props;
.site-footer {
margin-top: 4rem;
padding: 2rem 0;
padding: 2rem 1.5rem;
border-top: 1px solid var(--color-border);
text-align: center;
font-size: 0.85rem;
color: var(--color-text-muted);
}
section {
padding: 3.5rem 0;
}
section + section {
border-top: 1px solid var(--color-border);
}
</style>
</head>
<body>