Skip to content

Commit dffa60f

Browse files
offyottooffyotto
committed
Refine landing page hero and top bar git push origin main
con
1 parent 48553d4 commit dffa60f

4 files changed

Lines changed: 72 additions & 64 deletions

File tree

‎docs/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,14 @@
3838
<div class="hero-glow hero-glow-right"></div>
3939
<div class="hero-copy">
4040
<p class="eyebrow">Open-source macOS control center</p>
41-
<h1>Monitor, tune, and control your Mac in one native app.</h1>
41+
<h1>Monitor, tune, and control your Mac.</h1>
4242
</div>
4343
<figure class="hero-shot">
4444
<img src="images/ui/dashboard-v2.png" alt="Core-Monitor dashboard showing live macOS monitoring, fan control, and system metrics.">
4545
</figure>
4646
<div class="hero-copy hero-copy-secondary">
4747
<p class="hero-lead">
48-
Core-Monitor combines live system monitoring, real fan control, menu bar stats, benchmarking, and Touch Bar tools in one fast Swift app.
48+
Live monitoring, real fan control, menu bar stats, benchmarking, and Touch Bar tools in one native app.
4949
</p>
5050
<div class="hero-actions">
5151
<a class="button primary" href="https://github.com/offyotto-sl3/Core-Monitor/releases/latest">Download Latest Release</a>

‎docs/styles.css‎

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -131,8 +131,8 @@ section {
131131
position: relative;
132132
display: grid;
133133
gap: 0;
134-
min-height: min(980px, calc(100vh - 84px));
135-
padding: 72px 28px 56px;
134+
min-height: min(840px, calc(100vh - 84px));
135+
padding: 58px 28px 40px;
136136
overflow: hidden;
137137
border: none;
138138
background: transparent;
@@ -149,8 +149,8 @@ section {
149149
}
150150

151151
.hero-copy h1 {
152-
max-width: 11ch;
153-
font-size: clamp(4rem, 8vw, 7rem);
152+
max-width: 13.5ch;
153+
font-size: clamp(3.5rem, 7.2vw, 6.2rem);
154154
}
155155

156156
.eyebrow,
@@ -185,23 +185,23 @@ section {
185185
}
186186

187187
.hero-copy-secondary {
188-
z-index: 3;
189-
margin-top: -24px;
188+
z-index: 5;
189+
margin-top: -118px;
190190
}
191191

192192
.hero-lead {
193-
max-width: 18ch;
193+
max-width: 26ch;
194194
color: var(--text);
195-
font-size: clamp(1.85rem, 3.2vw, 3.1rem);
196-
line-height: 1.06;
195+
font-size: clamp(1.5rem, 2.5vw, 2.45rem);
196+
line-height: 1.08;
197197
font-weight: 700;
198198
text-shadow: 0 12px 34px rgba(0, 0, 0, 0.62);
199199
}
200200

201201
.hero-subline {
202-
margin: 16px 0 0;
202+
margin: 14px 0 0;
203203
color: rgba(247, 248, 252, 0.78);
204-
font-size: 1rem;
204+
font-size: 0.98rem;
205205
font-weight: 500;
206206
}
207207

@@ -268,40 +268,40 @@ section {
268268
}
269269

270270
.hero-glow-left {
271-
width: 540px;
272-
height: 260px;
273-
top: 148px;
274-
left: 26%;
275-
background: radial-gradient(circle, rgba(182, 99, 255, 0.52), transparent 72%);
271+
width: 620px;
272+
height: 300px;
273+
top: 118px;
274+
left: 20%;
275+
background: radial-gradient(circle, rgba(182, 99, 255, 0.48), transparent 72%);
276276
}
277277

278278
.hero-glow-right {
279-
width: 520px;
280-
height: 260px;
281-
top: 124px;
282-
right: 18%;
283-
background: radial-gradient(circle, rgba(109, 120, 255, 0.34), transparent 72%);
279+
width: 620px;
280+
height: 300px;
281+
top: 92px;
282+
right: 12%;
283+
background: radial-gradient(circle, rgba(109, 120, 255, 0.3), transparent 72%);
284284
}
285285

286286
.hero-shot {
287287
position: relative;
288288
z-index: 2;
289-
width: min(980px, 94vw);
290-
margin: -54px auto -88px;
291-
padding: 18px;
289+
width: min(1040px, 97vw);
290+
margin: -122px auto -176px;
291+
padding: 16px;
292292
border-radius: 34px;
293293
background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
294294
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.46);
295-
transform: perspective(1800px) rotateX(16deg) rotateY(-10deg) rotateZ(-5deg);
295+
transform: perspective(1800px) rotateX(12deg) rotateY(-8deg) rotateZ(-4deg);
296296
transform-origin: center top;
297297
}
298298

299299
.hero-shot img {
300300
width: 100%;
301301
border-radius: 24px;
302302
border: 1px solid rgba(255, 255, 255, 0.08);
303-
opacity: 0.82;
304-
filter: brightness(0.42) saturate(0.9) contrast(0.9);
303+
opacity: 0.92;
304+
filter: brightness(0.52) saturate(0.92) contrast(0.92);
305305
}
306306

307307
.section-heading {
@@ -424,7 +424,7 @@ section {
424424
}
425425

426426
.hero-shot {
427-
margin: -20px auto -32px;
427+
margin: -36px auto -56px;
428428
transform: none;
429429
}
430430

@@ -495,13 +495,17 @@ section {
495495
}
496496

497497
.hero-shot {
498-
margin: 8px auto 0;
498+
margin: 10px auto -8px;
499499
padding: 10px;
500500
border-radius: 24px;
501501
}
502502

503+
.hero-copy-secondary {
504+
margin-top: -4px;
505+
}
506+
503507
.hero-lead {
504-
font-size: clamp(1.55rem, 6vw, 2.3rem);
508+
font-size: clamp(1.3rem, 5.3vw, 2rem);
505509
line-height: 1.1;
506510
}
507511
}

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,14 @@
3838
<div class="hero-glow hero-glow-right"></div>
3939
<div class="hero-copy">
4040
<p class="eyebrow">Open-source macOS control center</p>
41-
<h1>Monitor, tune, and control your Mac in one native app.</h1>
41+
<h1>Monitor, tune, and control your Mac.</h1>
4242
</div>
4343
<figure class="hero-shot">
4444
<img src="docs/images/ui/dashboard-v2.png" alt="Core-Monitor dashboard showing live macOS monitoring, fan control, and system metrics.">
4545
</figure>
4646
<div class="hero-copy hero-copy-secondary">
4747
<p class="hero-lead">
48-
Core-Monitor combines live system monitoring, real fan control, menu bar stats, benchmarking, and Touch Bar tools in one fast Swift app.
48+
Live monitoring, real fan control, menu bar stats, benchmarking, and Touch Bar tools in one native app.
4949
</p>
5050
<div class="hero-actions">
5151
<a class="button primary" href="https://github.com/offyotto-sl3/Core-Monitor/releases/latest">Download Latest Release</a>

‎styles.css‎

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -131,8 +131,8 @@ section {
131131
position: relative;
132132
display: grid;
133133
gap: 0;
134-
min-height: min(980px, calc(100vh - 84px));
135-
padding: 72px 28px 56px;
134+
min-height: min(840px, calc(100vh - 84px));
135+
padding: 58px 28px 40px;
136136
overflow: hidden;
137137
border: none;
138138
background: transparent;
@@ -149,8 +149,8 @@ section {
149149
}
150150

151151
.hero-copy h1 {
152-
max-width: 11ch;
153-
font-size: clamp(4rem, 8vw, 7rem);
152+
max-width: 13.5ch;
153+
font-size: clamp(3.5rem, 7.2vw, 6.2rem);
154154
}
155155

156156
.eyebrow,
@@ -185,23 +185,23 @@ section {
185185
}
186186

187187
.hero-copy-secondary {
188-
z-index: 3;
189-
margin-top: -24px;
188+
z-index: 5;
189+
margin-top: -118px;
190190
}
191191

192192
.hero-lead {
193-
max-width: 18ch;
193+
max-width: 26ch;
194194
color: var(--text);
195-
font-size: clamp(1.85rem, 3.2vw, 3.1rem);
196-
line-height: 1.06;
195+
font-size: clamp(1.5rem, 2.5vw, 2.45rem);
196+
line-height: 1.08;
197197
font-weight: 700;
198198
text-shadow: 0 12px 34px rgba(0, 0, 0, 0.62);
199199
}
200200

201201
.hero-subline {
202-
margin: 16px 0 0;
202+
margin: 14px 0 0;
203203
color: rgba(247, 248, 252, 0.78);
204-
font-size: 1rem;
204+
font-size: 0.98rem;
205205
font-weight: 500;
206206
}
207207

@@ -268,40 +268,40 @@ section {
268268
}
269269

270270
.hero-glow-left {
271-
width: 540px;
272-
height: 260px;
273-
top: 148px;
274-
left: 26%;
275-
background: radial-gradient(circle, rgba(182, 99, 255, 0.52), transparent 72%);
271+
width: 620px;
272+
height: 300px;
273+
top: 118px;
274+
left: 20%;
275+
background: radial-gradient(circle, rgba(182, 99, 255, 0.48), transparent 72%);
276276
}
277277

278278
.hero-glow-right {
279-
width: 520px;
280-
height: 260px;
281-
top: 124px;
282-
right: 18%;
283-
background: radial-gradient(circle, rgba(109, 120, 255, 0.34), transparent 72%);
279+
width: 620px;
280+
height: 300px;
281+
top: 92px;
282+
right: 12%;
283+
background: radial-gradient(circle, rgba(109, 120, 255, 0.3), transparent 72%);
284284
}
285285

286286
.hero-shot {
287287
position: relative;
288288
z-index: 2;
289-
width: min(980px, 94vw);
290-
margin: -54px auto -88px;
291-
padding: 18px;
289+
width: min(1040px, 97vw);
290+
margin: -122px auto -176px;
291+
padding: 16px;
292292
border-radius: 34px;
293293
background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
294294
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.46);
295-
transform: perspective(1800px) rotateX(16deg) rotateY(-10deg) rotateZ(-5deg);
295+
transform: perspective(1800px) rotateX(12deg) rotateY(-8deg) rotateZ(-4deg);
296296
transform-origin: center top;
297297
}
298298

299299
.hero-shot img {
300300
width: 100%;
301301
border-radius: 24px;
302302
border: 1px solid rgba(255, 255, 255, 0.08);
303-
opacity: 0.82;
304-
filter: brightness(0.42) saturate(0.9) contrast(0.9);
303+
opacity: 0.92;
304+
filter: brightness(0.52) saturate(0.92) contrast(0.92);
305305
}
306306

307307
.section-heading {
@@ -424,7 +424,7 @@ section {
424424
}
425425

426426
.hero-shot {
427-
margin: -20px auto -32px;
427+
margin: -36px auto -56px;
428428
transform: none;
429429
}
430430

@@ -495,13 +495,17 @@ section {
495495
}
496496

497497
.hero-shot {
498-
margin: 8px auto 0;
498+
margin: 10px auto -8px;
499499
padding: 10px;
500500
border-radius: 24px;
501501
}
502502

503+
.hero-copy-secondary {
504+
margin-top: -4px;
505+
}
506+
503507
.hero-lead {
504-
font-size: clamp(1.55rem, 6vw, 2.3rem);
508+
font-size: clamp(1.3rem, 5.3vw, 2rem);
505509
line-height: 1.1;
506510
}
507511
}

0 commit comments

Comments
 (0)