Make the hero section brighter and center its text content
Adjusted CSS variables in `static/css/styles.css` to increase brightness of hr element and center-align text within `.hero-text-container`, `.hero-title`, and `.hero-description`. Also updated positioning and transform properties for `.hero-text-container`. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 5e584ab0-c340-4432-97ef-1972582b60e9 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: d21238ad-8e95-4779-8c03-ce66774f7dc0 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d0a1d46d-d203-4308-bc6a-312ac7c0243b/5e584ab0-c340-4432-97ef-1972582b60e9/XuUfYJo
This commit is contained in:
@@ -370,7 +370,7 @@ hr {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
filter: grayscale(100%) brightness(0.55);
|
||||
filter: grayscale(100%) brightness(0.65);
|
||||
}
|
||||
|
||||
.hero-overlay {
|
||||
@@ -385,11 +385,13 @@ hr {
|
||||
|
||||
.hero-text-container {
|
||||
position: absolute;
|
||||
bottom: 64px;
|
||||
left: 48px;
|
||||
right: 48px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 2;
|
||||
max-width: 800px;
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
@@ -398,7 +400,7 @@ hr {
|
||||
font-size: clamp(32px, 5vw, 56px);
|
||||
color: var(--white);
|
||||
margin: 0 0 24px 0;
|
||||
text-align: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
@@ -407,7 +409,7 @@ hr {
|
||||
color: var(--gray-300);
|
||||
line-height: 1.8;
|
||||
margin: 0 0 20px 0;
|
||||
text-align: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-description:last-child {
|
||||
@@ -1347,9 +1349,7 @@ span.emoji:hover::after {
|
||||
}
|
||||
|
||||
.hero-text-container {
|
||||
bottom: 40px;
|
||||
left: 24px;
|
||||
right: 24px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
|
||||
Reference in New Issue
Block a user