Skip to content

Commit 66246df

Browse files
JonnxJonnx
committed
feat(welcome): better homepage styling
1 parent 3972a46 commit 66246df

File tree

2 files changed

+107
-26
lines changed

2 files changed

+107
-26
lines changed

‎public/css/app.css

+55-16
Original file line numberDiff line numberDiff line change
@@ -1092,21 +1092,24 @@ select {
10921092
.right-0 {
10931093
right: 0px;
10941094
}
1095-
.col-span-3 {
1096-
grid-column: span 3 / span 3;
1097-
}
1098-
.col-span-4 {
1099-
grid-column: span 4 / span 4;
1095+
.col-span-2 {
1096+
grid-column: span 2 / span 2;
11001097
}
11011098
.col-span-1 {
11021099
grid-column: span 1 / span 1;
11031100
}
1101+
.col-span-4 {
1102+
grid-column: span 4 / span 4;
1103+
}
11041104
.col-span-9 {
11051105
grid-column: span 9 / span 9;
11061106
}
11071107
.col-span-10 {
11081108
grid-column: span 10 / span 10;
11091109
}
1110+
.col-span-3 {
1111+
grid-column: span 3 / span 3;
1112+
}
11101113
.m-0 {
11111114
margin: 0px;
11121115
}
@@ -1131,6 +1134,9 @@ select {
11311134
.mt-6 {
11321135
margin-top: 1.5rem;
11331136
}
1137+
.mt-2 {
1138+
margin-top: 0.5rem;
1139+
}
11341140
.-mb-4 {
11351141
margin-bottom: -1rem;
11361142
}
@@ -1239,15 +1245,18 @@ select {
12391245
.flex-shrink-0 {
12401246
flex-shrink: 0;
12411247
}
1242-
.grid-cols-3 {
1243-
grid-template-columns: repeat(3, minmax(0, 1fr));
1248+
.grid-cols-2 {
1249+
grid-template-columns: repeat(2, minmax(0, 1fr));
12441250
}
12451251
.grid-cols-5 {
12461252
grid-template-columns: repeat(5, minmax(0, 1fr));
12471253
}
12481254
.grid-cols-10 {
12491255
grid-template-columns: repeat(10, minmax(0, 1fr));
12501256
}
1257+
.grid-cols-3 {
1258+
grid-template-columns: repeat(3, minmax(0, 1fr));
1259+
}
12511260
.items-center {
12521261
align-items: center;
12531262
}
@@ -1294,9 +1303,6 @@ select {
12941303
.border-transparent {
12951304
border-color: transparent;
12961305
}
1297-
.bg-slate-700\/80 {
1298-
background-color: rgb(51 65 85 / 0.8);
1299-
}
13001306
.bg-indigo-600 {
13011307
--tw-bg-opacity: 1;
13021308
background-color: rgb(79 70 229 / var(--tw-bg-opacity));
@@ -1327,6 +1333,9 @@ select {
13271333
.p-6 {
13281334
padding: 1.5rem;
13291335
}
1336+
.p-10 {
1337+
padding: 2.5rem;
1338+
}
13301339
.p-12 {
13311340
padding: 3rem;
13321341
}
@@ -1359,12 +1368,6 @@ select {
13591368
.pb-24 {
13601369
padding-bottom: 6rem;
13611370
}
1362-
.pt-10 {
1363-
padding-top: 2.5rem;
1364-
}
1365-
.pb-4 {
1366-
padding-bottom: 1rem;
1367-
}
13681371
.pr-4 {
13691372
padding-right: 1rem;
13701373
}
@@ -1383,9 +1386,18 @@ select {
13831386
.pb-3 {
13841387
padding-bottom: 0.75rem;
13851388
}
1389+
.pt-10 {
1390+
padding-top: 2.5rem;
1391+
}
1392+
.text-left {
1393+
text-align: left;
1394+
}
13861395
.text-center {
13871396
text-align: center;
13881397
}
1398+
.text-right {
1399+
text-align: right;
1400+
}
13891401
.font-mono {
13901402
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
13911403
}
@@ -1405,6 +1417,10 @@ select {
14051417
font-size: 0.875rem;
14061418
line-height: 1.25rem;
14071419
}
1420+
.text-xs {
1421+
font-size: 0.75rem;
1422+
line-height: 1rem;
1423+
}
14081424
.text-lg {
14091425
font-size: 1.125rem;
14101426
line-height: 1.75rem;
@@ -1482,6 +1498,10 @@ select {
14821498
--tw-text-opacity: 1;
14831499
color: rgb(17 24 39 / var(--tw-text-opacity));
14841500
}
1501+
.underline {
1502+
-webkit-text-decoration-line: underline;
1503+
text-decoration-line: underline;
1504+
}
14851505
.no-underline {
14861506
-webkit-text-decoration-line: none;
14871507
text-decoration-line: none;
@@ -1631,6 +1651,14 @@ select {
16311651

16321652
@media (min-width: 768px) {
16331653

1654+
.md\:col-span-3 {
1655+
grid-column: span 3 / span 3;
1656+
}
1657+
1658+
.md\:col-span-1 {
1659+
grid-column: span 1 / span 1;
1660+
}
1661+
16341662
.md\:mx-0 {
16351663
margin-left: 0px;
16361664
margin-right: 0px;
@@ -1652,6 +1680,10 @@ select {
16521680
display: grid;
16531681
}
16541682

1683+
.md\:grid-cols-3 {
1684+
grid-template-columns: repeat(3, minmax(0, 1fr));
1685+
}
1686+
16551687
.md\:p-10 {
16561688
padding: 2.5rem;
16571689
}
@@ -1677,3 +1709,10 @@ select {
16771709
line-height: 1;
16781710
}
16791711
}
1712+
1713+
@media (min-width: 1280px) {
1714+
1715+
.xl\:col-span-1 {
1716+
grid-column: span 1 / span 1;
1717+
}
1718+
}

‎resources/views/welcome.blade.php

+52-10
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
@section('content')
44
<div class="container mx-auto px-2 text-gray-200">
55

6-
<div class="md:grid grid-cols-3 gap-8">
7-
<div class="col-span-3">
8-
<div class="rounded-lg mb-8 md:mb-0">
9-
<div class="rounded-lg lg:text-center bg-slate-700/80 p-6 lg:py-24">
6+
<div class="grid grid-cols-2 md:grid-cols-3 gap-8">
7+
<div class="col-span-2 md:col-span-3">
8+
<div class="rounded-lg" style="background: linear-gradient(-45deg, #441580, #055e6b);">
9+
<div class="rounded-lg lg:text-center p-6 lg:py-24">
1010
<h1 class="text-3xl lg:text-5xl font-bold">
1111
Generate complex map markers on the fly.
1212
</h1>
@@ -16,13 +16,53 @@
1616
</div>
1717
</div>
1818
</div>
19+
20+
<div class="col-span-1">
21+
<div class="rounded-lg">
22+
<div class="rounded-lg text-right p-6" style="background: linear-gradient(-20deg, #391971, #24183c, #0f0f10);">
23+
<h1 class="text-3xl lg:text-5xl font-bold">
24+
250,000
25+
</h1>
26+
<p class="text-sm mt-2">
27+
People see one of our markers every month
28+
</p>
29+
</div>
30+
</div>
31+
</div>
32+
33+
<div class="col-span-1">
34+
<div class="rounded-lg">
35+
<div class="rounded-lg text-right p-6" style="background: linear-gradient(-20deg, #391971, #24183c, #0f0f10);">
36+
<h1 class="text-3xl lg:text-5xl font-bold">
37+
2,840,000
38+
</h1>
39+
<p class="text-sm mt-2">
40+
Markers are used to improve maps every month
41+
</p>
42+
</div>
43+
</div>
44+
</div>
45+
46+
<div class="col-span-2 md:col-span-1 lg:xl-span-1 xl:col-span-1">
47+
<div class="rounded-lg">
48+
<div class="rounded-lg text-right p-6" style="background: linear-gradient(-20deg, #391971, #24183c, #0f0f10);">
49+
<h1 class="text-3xl lg:text-5xl font-bold">
50+
40ms
51+
</h1>
52+
<p class="text-sm mt-2">
53+
Average latency for markers
54+
</p>
55+
</div>
56+
</div>
57+
</div>
58+
1959
{{-- PINS --}}
20-
<div class="prose prose-invert text-center pt-10 pb-4">
60+
<div class="col-span-2 md:col-span-1 lg:xl-span-1 xl:col-span-1 prose prose-invert text-left p-10 rounded-lg" style="background: linear-gradient(145deg, #0f0f10, #171719, #171719, #171719);">
2161
<div class="-mb-4">
22-
<img src="/api/v3/font-awesome/v6/pin?text=A&background=992DE5&size=50" class="inline h-12 m-0 mx-1" />
23-
<img src="/api/v3/font-awesome/v6/pin?text=AC&background=BC5AF4&size=50" class="inline h-12 m-0 mx-1" />
62+
<img src="/api/v3/font-awesome/v6/pin?text=A&background=992DE5&size=50" class="inline h-12 m-0" />
63+
<img src="/api/v3/font-awesome/v6/pin?text=AC&background=BC5AF4&size=50" class="inline h-12 m-0" />
2464
<img src="/api/v3/font-awesome/v6/pin?icon=fa-solid+fa-star&background=CE86F5&size=50"
25-
class="inline-block h-12 m-0 mx-1" />
65+
class="inline-block h-12 m-0" />
2666
</div>
2767
<x-markdown>
2868
### Pins
@@ -34,7 +74,7 @@ class="no-underline -mb-4 mt-4 inline-block px-4 py-2 border border-transparent
3474
</a>
3575
</div>
3676
{{-- ICONS --}}
37-
<div class="prose prose-invert text-center pt-10 pb-4">
77+
<div class="col-span-2 md:col-span-1 lg:xl-span-1 xl:col-span-1 prose prose-invert text-left p-10 rounded-lg" style="background: linear-gradient(145deg, #0f0f10, #171719, #171719, #171719);">
3878
<div class="-mb-4">
3979
<img src="/api/v3/font-awesome/v6/icon?icon=fa-solid+fa-users&color=992DE5&size=50"
4080
class="inline h-12 m-0 mx-1" />
@@ -52,7 +92,7 @@ class="no-underline -mb-4 mt-4 inline-block px-4 py-2 border border-transparent
5292
</a>
5393
</div>
5494
{{-- ICON STACKS --}}
55-
<div class="prose prose-invert text-center pt-10 pb-4">
95+
<div class="col-span-2 md:col-span-1 lg:xl-span-1 xl:col-span-1 prose prose-invert text-left p-10 rounded-lg" style="background: linear-gradient(145deg, #0f0f10, #171719, #171719, #171719);">
5696
<div class="-mb-4">
5797
<img src="/api/v3/font-awesome/v6/icon-stack?size=64&icon=fa-solid+fa-location&color=171719&on=fa-solid+fa-map&oncolor=992DE5&iconsize=14&hoffset=23&voffset=8"
5898
class="inline h-12 m-0 mx-1" />
@@ -71,5 +111,7 @@ class="no-underline -mb-4 mt-4 inline-block px-4 py-2 border border-transparent
71111
</a>
72112
</div>
73113
</div>
114+
115+
<div class="mt-12 text-xs text-white">Built with passion for better maps by <a href="https://jonasweigert.com" target="_blank" class="underline">Jonas Weigert</a></div>
74116
</div>
75117
@endsection

0 commit comments

Comments
 (0)