The source code for our eny.social landing page, which is mirrored in a different repository as part of the CI setup.
eny.social
social-network
eny
local-first
refactor(globals): switch breakpoint logic to min
+22
-15
+4
-7
app/components/Hero.tsx
+4
-7
app/components/Hero.tsx
···
25
25
{/* Grained star blob — decorative, bleeds left edge, behind text */}
26
26
<GrainedBlob className="pointer-events-none absolute -left-[40%] -top-[10%] h-[120vh] w-[120vh]" />
27
27
28
-
<div className="relative mx-auto max-w-[1536px]">
28
+
<div className="relative mx-auto max-w-xl lg:max-w-[1536px]">
29
29
<div className="grid gap-12 lg:grid-cols-12">
30
30
{/* Heading + Text (6 cols) */}
31
-
<div className="lg:col-span-6">
31
+
<div className="relative z-10 lg:col-span-6">
32
32
{/* Heading indented 1 col */}
33
33
<div className="lg:pl-[calc(100%/6)]">
34
34
<p className="headline-label mb-4">a place where you can</p>
···
112
112
</svg>
113
113
{/* Full-size blob-masked photo */}
114
114
<div
115
-
className="relative w-[170%] aspect-square -mr-[70%]"
116
-
style={{
117
-
clipPath: "url(#hero-blob)",
118
-
transform: "translate(2%, -20%)",
119
-
}}
115
+
className="relative w-full lg:w-[170%] aspect-square lg:-mr-[70%] lg:[transform:translate(2%,-20%)]"
116
+
style={{ clipPath: "url(#hero-blob)" }}
120
117
>
121
118
{slides.map((slide, index) => (
122
119
<img
+18
-8
app/globals.css
+18
-8
app/globals.css
···
79
79
/* Stage Heading 1 — Sans, bold */
80
80
.stage-heading-1 {
81
81
font-family: var(--font-instrument-sans);
82
-
font-size: 130px;
82
+
font-size: 56px;
83
83
font-style: normal;
84
84
font-weight: 700;
85
85
line-height: 105%;
···
89
89
/* Stage Heading 2 — Serif, regular */
90
90
.stage-heading-2 {
91
91
font-family: var(--font-instrument-serif);
92
-
font-size: 150px;
92
+
font-size: 64px;
93
93
font-style: normal;
94
94
font-weight: 400;
95
95
line-height: 100%;
96
96
color: var(--charcoal);
97
97
}
98
98
99
-
/* Responsive scaling for stage headings */
100
-
@media (max-width: 1024px) {
99
+
@media (min-width: 480px) {
101
100
.stage-heading-1 {
102
-
font-size: 90px;
101
+
font-size: 80px;
103
102
}
104
103
.stage-heading-2 {
104
+
font-size: 96px;
105
+
}
106
+
}
107
+
108
+
@media (min-width: 640px) {
109
+
.stage-heading-1 {
105
110
font-size: 100px;
106
111
}
112
+
.stage-heading-2 {
113
+
font-size: 120px;
114
+
}
107
115
}
108
-
@media (max-width: 640px) {
116
+
117
+
/* Responsive scaling for stage headings */
118
+
@media (min-width: 1024px) {
109
119
.stage-heading-1 {
110
-
font-size: 56px;
120
+
font-size: 130px;
111
121
}
112
122
.stage-heading-2 {
113
-
font-size: 64px;
123
+
font-size: 150px;
114
124
}
115
125
}
116
126