Skip to content

Commit fa4cc9c

Browse files
pusewiczpusewicz
committed
Split CSS into partials
1 parent 1b77b08 commit fa4cc9c

14 files changed

Lines changed: 1894 additions & 2006 deletions

‎_sass/_about.scss‎

Lines changed: 248 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,248 @@
1+
.about-features {
2+
background: var(--color-border);
3+
border-bottom: 1px solid var(--color-border);
4+
padding: 0 var(--container-padding);
5+
}
6+
7+
.about-features__inner {
8+
max-width: var(--container-max-width);
9+
margin: 0 auto;
10+
display: flex;
11+
gap: 1px;
12+
}
13+
14+
.about-feature {
15+
flex: 1;
16+
background: var(--color-white);
17+
padding: 40px;
18+
}
19+
20+
.about-feature__title {
21+
font-family: var(--font-heading);
22+
font-size: 28px;
23+
font-weight: 700;
24+
letter-spacing: -0.02em;
25+
line-height: 34px;
26+
color: var(--color-black);
27+
margin-bottom: 12px;
28+
}
29+
30+
.about-feature__desc {
31+
font-size: 14px;
32+
line-height: 1.6;
33+
color: var(--color-muted);
34+
}
35+
36+
.about-body {
37+
background: var(--color-border);
38+
padding: 0 var(--container-padding);
39+
}
40+
41+
.about-body__inner {
42+
max-width: var(--container-max-width);
43+
margin: 0 auto;
44+
display: flex;
45+
gap: 1px;
46+
}
47+
48+
.about-releases {
49+
flex: 2;
50+
background: var(--color-white);
51+
padding: 56px 48px;
52+
}
53+
54+
.about-section-eyebrow {
55+
display: block;
56+
font-family: var(--font-heading);
57+
font-size: 11px;
58+
font-weight: 600;
59+
letter-spacing: 0.1em;
60+
text-transform: uppercase;
61+
color: var(--color-red);
62+
line-height: 14px;
63+
margin-bottom: 24px;
64+
}
65+
66+
.about-releases__list {
67+
display: flex;
68+
flex-direction: column;
69+
}
70+
71+
.about-release-row {
72+
display: flex;
73+
align-items: baseline;
74+
padding: 14px 0;
75+
gap: 20px;
76+
border-bottom: 1px solid var(--color-border);
77+
text-decoration: none;
78+
transition: background 0.1s ease;
79+
}
80+
81+
.about-release-row:hover .about-release-row__title {
82+
opacity: 0.75;
83+
}
84+
85+
.about-release-row__date {
86+
flex-shrink: 0;
87+
width: 96px;
88+
font-family: var(--font-heading);
89+
font-size: 12px;
90+
font-weight: 500;
91+
letter-spacing: 0.02em;
92+
color: var(--color-muted);
93+
line-height: 16px;
94+
}
95+
96+
.about-release-row__title {
97+
font-size: 15px;
98+
font-weight: 500;
99+
color: var(--color-red);
100+
line-height: 18px;
101+
transition: opacity 0.15s ease;
102+
}
103+
104+
.about-release-badge {
105+
margin-left: auto;
106+
flex-shrink: 0;
107+
display: inline-block;
108+
padding: 2px 8px;
109+
background: var(--color-red);
110+
font-family: var(--font-heading);
111+
font-size: 11px;
112+
font-weight: 600;
113+
letter-spacing: 0.04em;
114+
text-transform: uppercase;
115+
color: var(--color-white);
116+
line-height: 14px;
117+
}
118+
119+
.about-sidebar {
120+
flex: 1;
121+
background: var(--color-white);
122+
padding: 56px 48px;
123+
display: flex;
124+
flex-direction: column;
125+
gap: 48px;
126+
}
127+
128+
.about-video-list {
129+
display: flex;
130+
flex-direction: column;
131+
gap: 16px;
132+
}
133+
134+
.about-video-card {
135+
display: flex;
136+
flex-direction: column;
137+
border: 1px solid var(--color-border);
138+
}
139+
140+
.about-video-embed {
141+
position: relative;
142+
aspect-ratio: 16 / 9;
143+
}
144+
145+
.about-video-embed iframe {
146+
position: absolute;
147+
inset: 0;
148+
width: 100%;
149+
height: 100%;
150+
border: none;
151+
display: block;
152+
}
153+
154+
.about-video-info {
155+
padding: 16px;
156+
}
157+
158+
.about-video-title {
159+
font-family: var(--font-heading);
160+
font-size: 14px;
161+
font-weight: 600;
162+
color: var(--color-black);
163+
line-height: 1.4;
164+
margin-bottom: 6px;
165+
}
166+
167+
.about-video-subtitle {
168+
font-size: 12px;
169+
color: var(--color-muted);
170+
line-height: 16px;
171+
}
172+
173+
.about-ack {
174+
padding-top: 32px;
175+
border-top: 1px solid var(--color-border);
176+
}
177+
178+
.about-ack .about-section-eyebrow {
179+
margin-bottom: 12px;
180+
}
181+
182+
.about-ack__text {
183+
font-size: 13px;
184+
line-height: 1.65;
185+
color: var(--color-muted);
186+
margin-bottom: 16px;
187+
}
188+
189+
.about-ack__logo {
190+
font-size: 12px;
191+
color: var(--color-muted);
192+
line-height: 16px;
193+
}
194+
195+
.about-ack__logo a {
196+
color: var(--color-red);
197+
transition: opacity 0.15s ease;
198+
}
199+
200+
.about-ack__logo a:hover {
201+
opacity: 0.75;
202+
}
203+
204+
@media (max-width: 1024px) {
205+
.about-feature {
206+
padding: 32px 28px;
207+
}
208+
209+
.about-feature__title {
210+
font-size: 22px;
211+
}
212+
213+
.about-releases {
214+
padding: 48px 32px;
215+
}
216+
217+
.about-sidebar {
218+
padding: 48px 24px;
219+
}
220+
}
221+
222+
@media (max-width: 768px) {
223+
.about-features__inner {
224+
flex-wrap: wrap;
225+
}
226+
227+
.about-feature {
228+
flex: 1 1 calc(50% - 1px);
229+
}
230+
231+
.about-body__inner {
232+
flex-direction: column;
233+
}
234+
235+
.about-releases {
236+
padding: 40px 24px;
237+
}
238+
239+
.about-sidebar {
240+
padding: 40px 24px;
241+
}
242+
}
243+
244+
@media (max-width: 480px) {
245+
.about-feature {
246+
flex: 1 1 100%;
247+
}
248+
}

0 commit comments

Comments
 (0)