Skip to content

Commit 2a8a400

Browse files
Roméo MaignalRoméo Maignal
Roméo Maignal
authored and
Roméo Maignal
committed
feat: decorations
1 parent af71338 commit 2a8a400

12 files changed

Lines changed: 356 additions & 69 deletions

File tree

‎src/App.css‎

Lines changed: 132 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
.section {
77
border-top: 1px solid var(--border-sep);
8-
min-height: 100vh;
8+
min-height: calc(100svh - var(--navbar-height));
99
display: flex;
1010
align-items: center;
1111
justify-content: center;
@@ -14,6 +14,66 @@
1414
position: relative;
1515
}
1616

17+
.section::before,
18+
.section::after {
19+
content: '';
20+
position: absolute;
21+
width: 14px;
22+
height: 14px;
23+
border-color: var(--border-hover);
24+
border-style: solid;
25+
pointer-events: none;
26+
}
27+
28+
.section::before {
29+
top: 4.5rem;
30+
left: 4.5rem;
31+
border-width: 1px 0 0 1px;
32+
}
33+
34+
.section::after {
35+
bottom: 4.5rem;
36+
right: 4.5rem;
37+
border-width: 0 1px 1px 0;
38+
}
39+
40+
/* top-right and bottom-left corners via the outer <section> wrapper */
41+
section:has(.section),
42+
section:has(.intro-content),
43+
section:has(.about-content) {
44+
position: relative;
45+
}
46+
47+
section:has(.section)::before,
48+
section:has(.intro-content)::before,
49+
section:has(.about-content)::before {
50+
content: '';
51+
position: absolute;
52+
width: 14px;
53+
height: 14px;
54+
border-color: var(--border-hover);
55+
border-style: solid;
56+
pointer-events: none;
57+
top: 4.5rem;
58+
right: 4.5rem;
59+
border-width: 1px 1px 0 0;
60+
}
61+
62+
section:has(.section)::after,
63+
section:has(.intro-content)::after,
64+
section:has(.about-content)::after {
65+
content: '';
66+
position: absolute;
67+
width: 14px;
68+
height: 14px;
69+
border-color: var(--border-hover);
70+
border-style: solid;
71+
pointer-events: none;
72+
bottom: 4.5rem;
73+
left: 4.5rem;
74+
border-width: 0 0 1px 1px;
75+
}
76+
1777
.section-inner {
1878
width: 100%;
1979
max-width: 1200px;
@@ -35,16 +95,21 @@
3595
gap: 1rem;
3696
text-align: left;
3797
align-items: flex-start;
98+
max-width: 52ch;
3899
}
39100

40101
.viz-container .paragraph .section-badge {
41-
font-size: 0.75rem;
102+
font-size: 0.75rem;
42103
margin-bottom: 0.25rem;
43104
justify-content: flex-start;
44105
}
45106

107+
.viz-container .paragraph p,
108+
.viz-container .paragraph .viz-title {
109+
width: 100%;
110+
}
111+
46112
.viz-container .paragraph p {
47-
max-width: 55ch;
48113
font-size: 0.95rem;
49114
line-height: 1.8;
50115
}
@@ -61,7 +126,8 @@
61126
display: flex;
62127
align-items: center;
63128
justify-content: center;
64-
transition: border-color 0.3s ease;
129+
transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
130+
box-shadow: 0 0 24px -4px var(--glow-dim), 0 0 8px -2px var(--glow-dim);
65131
}
66132

67133
/* center each grid child within its half */
@@ -77,14 +143,34 @@
77143
left: 50%;
78144
top: 0;
79145
bottom: 0;
80-
width: 1px;
81-
background: var(--border);
146+
width: 2px;
147+
background: linear-gradient(to bottom, transparent, var(--border) 20%, var(--border) 80%, transparent);
82148
transform: translateX(-50%);
83149
pointer-events: none;
84150
}
85151

152+
.widget::before {
153+
content: '';
154+
position: absolute;
155+
top: 0;
156+
left: 15%;
157+
right: 15%;
158+
height: 1px;
159+
background: linear-gradient(90deg, transparent, var(--accent), transparent);
160+
opacity: 0.3;
161+
pointer-events: none;
162+
z-index: 1;
163+
}
164+
86165
.widget:hover {
87166
border-color: var(--border-hover);
167+
background: var(--bg-elevated);
168+
box-shadow: 0 0 40px -4px var(--glow-dim), 0 0 20px -2px var(--glow-dim);
169+
}
170+
171+
.widget:hover::before {
172+
opacity: 0.55;
173+
transition: opacity 0.3s ease;
88174
}
89175

90176
.fullscreen-btn {
@@ -109,7 +195,22 @@
109195

110196
.viz-title {
111197
font-size: clamp(1.25rem, 2.5vw, 1.75rem);
112-
margin-bottom: 0.5rem;
198+
margin-bottom: 1.75rem;
199+
word-break: break-word;
200+
overflow-wrap: break-word;
201+
white-space: normal;
202+
position: relative;
203+
}
204+
205+
.viz-title::after {
206+
content: '';
207+
position: absolute;
208+
bottom: -0.75rem;
209+
left: 0;
210+
width: 2.5rem;
211+
height: 1px;
212+
background: var(--accent);
213+
opacity: 0.55;
113214
}
114215

115216
.site-footer {
@@ -130,14 +231,31 @@
130231
font-size: 0.8rem;
131232
}
132233

133-
.widget:fullscreen,
134-
.widget:-webkit-full-screen {
135-
max-width: 100%;
136-
width: 100%;
137-
height: 100%;
138-
border-radius: 0;
139-
border: none;
234+
@keyframes widget-expand {
235+
from { opacity: 0; transform: scale(0.96); }
236+
to { opacity: 1; transform: scale(1); }
237+
}
238+
239+
@keyframes widget-collapse {
240+
from { opacity: 1; transform: scale(1); }
241+
to { opacity: 0; transform: scale(0.96); }
242+
}
243+
244+
.widget--fullscreen {
245+
position: fixed !important;
246+
inset: 0 !important;
247+
max-width: 100% !important;
248+
width: 100% !important;
249+
height: 100% !important;
250+
border-radius: 0 !important;
251+
border: none !important;
252+
z-index: 9999;
140253
background: var(--bg);
254+
animation: widget-expand 0.22s cubic-bezier(0.4, 0, 0.2, 1) forwards;
255+
}
256+
257+
.widget--fullscreen.widget--closing {
258+
animation: widget-collapse 0.18s cubic-bezier(0.4, 0, 0.2, 1) forwards;
141259
}
142260

143261
@media (max-width: 1024px) {

‎src/components/About.css‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,35 @@
11
.about-content {
22
border-top: 1px solid var(--border-sep);
3-
min-height: 100vh;
3+
min-height: calc(100svh - var(--navbar-height));
44
display: flex;
55
align-items: center;
66
justify-content: center;
77
width: 100%;
88
padding: 6rem 2rem;
9+
position: relative;
10+
}
11+
12+
.about-content::before,
13+
.about-content::after {
14+
content: '';
15+
position: absolute;
16+
width: 14px;
17+
height: 14px;
18+
border-color: var(--border-hover);
19+
border-style: solid;
20+
pointer-events: none;
21+
}
22+
23+
.about-content::before {
24+
top: 4.5rem;
25+
left: 4.5rem;
26+
border-width: 1px 0 0 1px;
27+
}
28+
29+
.about-content::after {
30+
bottom: 4.5rem;
31+
right: 4.5rem;
32+
border-width: 0 1px 1px 0;
933
}
1034

1135
.about-inner {
@@ -17,6 +41,19 @@
1741
.about-heading {
1842
font-size: clamp(1.75rem, 4vw, 3rem);
1943
margin-bottom: 3rem;
44+
position: relative;
45+
}
46+
47+
.about-heading::after {
48+
content: '';
49+
position: absolute;
50+
bottom: -1.25rem;
51+
left: 50%;
52+
transform: translateX(-50%);
53+
width: 2.5rem;
54+
height: 1px;
55+
background: var(--accent);
56+
opacity: 0.55;
2057
}
2158

2259
.about-grid {

‎src/components/Hero.css‎

Lines changed: 35 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
justify-content: center;
66
position: relative;
77
overflow: hidden;
8+
background-image: radial-gradient(-);
9+
background-size: 28px 28px;
810
}
911

1012
.hero-content::before {
@@ -18,6 +20,18 @@
1820
pointer-events: none;
1921
}
2022

23+
.hero-content::after {
24+
content: '';
25+
position: absolute;
26+
bottom: 0;
27+
left: 0;
28+
right: 0;
29+
height: 180px;
30+
background: linear-gradient(to bottom, transparent, var(--bg));
31+
pointer-events: none;
32+
z-index: 0;
33+
}
34+
2135
.hero-container {
2236
max-width: 800px;
2337
padding: 2rem;
@@ -110,7 +124,7 @@
110124
align-items: center;
111125
gap: 0.5rem;
112126
padding: 0.75rem 1.75rem;
113-
background: transparent;
127+
background: var(--bg);
114128
color: var(--text-h);
115129
font-weight: 500;
116130
font-size: 0.9rem;
@@ -126,12 +140,13 @@
126140
background: rgba(255, 255, 255, 0.03); */
127141
border-color: var(--accent);
128142
color: var(--accent);
143+
background-color: var(--bg);
129144
background: var(--accent-dim);
130145
}
131146

132147
.hero-stats {
133148
display: flex;
134-
gap: 3rem;
149+
gap: 0;
135150
justify-content: center;
136151
flex-wrap: wrap;
137152
}
@@ -140,6 +155,19 @@
140155
display: flex;
141156
flex-direction: column;
142157
gap: 0.25rem;
158+
padding: 0 2.5rem;
159+
}
160+
161+
.stat-item:first-child {
162+
padding-left: 0;
163+
}
164+
165+
.stat-item:last-child {
166+
padding-right: 0;
167+
}
168+
169+
.stat-item + .stat-item {
170+
border-left: 1px solid var(--border-sep);
143171
}
144172

145173
.stat-value {
@@ -157,7 +185,11 @@
157185

158186
@media (max-width: 768px) {
159187
.hero-stats {
160-
gap: 2rem;
188+
gap: 0;
189+
}
190+
191+
.stat-item {
192+
padding: 0 1.5rem;
161193
}
162194

163195
.hero-actions {

0 commit comments

Comments
 (0)