Skip to content

Commit 2b49970

Browse files
sergei-maertenssergei-maertens
committed
✨ [#5] Port the landing page/components CSS
Decided not to use a CSS pre-processor and instead use native CSS nesting. The target audience for APIs are developers/technical people of which we can reasonably assume that they can install a browser newer than January 2024. The CSS itself is not that exciting that we expect large benefits from minifications, and it keeps our toolchain lean.
1 parent b7c6ff3 commit 2b49970

File tree

2 files changed

+226
-1
lines changed

2 files changed

+226
-1
lines changed

‎.editorconfig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ end_of_line = lf
77
insert_final_newline = true
88
trim_trailing_whitespace = true
99

10-
[*.{scss,sass}]
10+
[*.css]
1111
indent_size = 2
1212

1313
[*.{yml,yaml}]

‎maykin_common/static/maykin_common/css/api.css

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
/**
2+
* Base styles for API projects.
3+
*
4+
* Uses native CSS nesting, which is supported by 90% of the browsers at the time of
5+
* writing (May 28th 2025).
6+
*/
7+
8+
/* page-title component */
9+
.page-title {
10+
text-align: center;
11+
12+
.page-title__title {
13+
color: var(--page-title-color, #333);
14+
font-family: var(--page-title-font-family, inherit);
15+
line-height: 1.2;
16+
font-size: 3.5rem;
17+
font-weight: 300;
18+
margin-block: 0;
19+
margin-inline: 0;
20+
}
21+
22+
.page-title__description {
23+
font-size: 1.25rem;
24+
margin-block-start: 0;
25+
margin-block-end: 1rem;
26+
margin-inline: 0;
27+
}
28+
}
29+
30+
/* page-content component */
31+
.page-content {
32+
&.page-content--centered {
33+
text-align: center;
34+
}
35+
}
36+
37+
/* footer component */
38+
.footer {
39+
padding-block: 3rem;
40+
border-top: 1px solid var(--footer-border-color);
41+
42+
box-sizing: border-box;
43+
inline-size: clamp(20%, 100%, 960px);
44+
padding-inline: 15px;
45+
margin-inline: auto;
46+
47+
display: flex;
48+
flex-direction: column;
49+
row-gap: 15px;
50+
51+
.footer__row {
52+
display: grid;
53+
column-gap: 15px;
54+
55+
&.footer__row--2-cols {
56+
grid-template-columns: repeat(2, 1fr);
57+
}
58+
59+
&.footer__row--3-cols {
60+
grid-template-columns: repeat(3, 1fr);
61+
}
62+
}
63+
64+
.footer__column-header {
65+
margin-block-start: 0;
66+
margin-block-end: 1rem;
67+
font-weight: 500;
68+
line-height: 1.2;
69+
font-size: 1.25rem;
70+
}
71+
72+
.footer__plain-content {
73+
margin-block: 0;
74+
padding-block: 0;
75+
padding-inline: 0;
76+
77+
&.footer__plain-content--small {
78+
font-size: 80%;
79+
}
80+
}
81+
82+
.footer__list {
83+
list-style: none;
84+
margin-block: 0;
85+
margin-inline: 0;
86+
padding-inline: 0;
87+
}
88+
}
89+
90+
/* Tab container component */
91+
.tabs {
92+
border-block-end: solid 1px var(--tabs-border-color);
93+
94+
.tabs__list {
95+
display: flex;
96+
column-gap: 0;
97+
justify-content: center;
98+
list-style: none;
99+
border-block-end: solid 1px var(--tabs-border-color);
100+
padding: 0;
101+
margin: 0;
102+
}
103+
104+
.tabs__item {
105+
display: flex;
106+
justify-content: center;
107+
align-items: center;
108+
padding-block: 0.5rem;
109+
padding-inline: 1rem;
110+
border: solid 1px transparent;
111+
cursor: pointer;
112+
color: var(--tabs-item-color, var(--link-color));
113+
114+
margin-block-end: -1px;
115+
border-block-end-color: var(--tabs-border-color);
116+
117+
&:hover {
118+
color: var(--tabs-item-hover-color, var(--link-color-hover));
119+
border-block-start-color: var(--tabs-item-hover-border-color);
120+
border-inline-start-color: var(--tabs-item-hover-border-color);
121+
border-inline-end-color: var(--tabs-item-hover-border-color);
122+
text-decoration: underline;
123+
text-underline-offset: 0.4rem;
124+
}
125+
126+
&.tabs__item--active,
127+
&.tabs__item--active:hover {
128+
border-block-start-color: var(--tabs-border-color);
129+
border-block-end-color: #ffffff;
130+
border-inline-start-color: var(--tabs-border-color);
131+
border-inline-end-color: var(--tabs-border-color);
132+
}
133+
}
134+
135+
.tabs__pane {
136+
display: none;
137+
138+
&.tabs__pane--active {
139+
display: flex;
140+
flex-direction: column;
141+
}
142+
}
143+
}
144+
145+
/* List container comonent */
146+
.list {
147+
margin: 0;
148+
padding: 0;
149+
150+
/* requires a parent with flex/grid display (!) */
151+
&.list--centered {
152+
text-align: start;
153+
display: block;
154+
align-self: center;
155+
max-inline-size: 75%;
156+
}
157+
}
158+
159+
/* button group container component */
160+
.button-group {
161+
display: flex;
162+
flex-direction: row;
163+
justify-content: center;
164+
column-gap: 1rem;
165+
}
166+
167+
/* button component */
168+
.button {
169+
display: flex;
170+
padding-block: 0.25rem;
171+
padding-inline: 0.5rem;
172+
border-radius: 0.2rem;
173+
min-inline-size: 100px;
174+
175+
color: var(--button-color);
176+
background-color: var(--button-background-color);
177+
text-decoration: none;
178+
179+
&:has(.fas) {
180+
display: flex;
181+
justify-content: center;
182+
align-items: center;
183+
column-gap: 0.5rem;
184+
}
185+
186+
&:hover {
187+
background-color: var(--button-hover-background-color);
188+
}
189+
190+
&.button--alert {
191+
background-color: var(--button-alert-background-color);
192+
193+
&:hover {
194+
background-color: var(--button-alert-hover-background-color);
195+
}
196+
}
197+
}
198+
199+
/* hyperlink component */
200+
.link {
201+
text-decoration: none;
202+
color: var(--link-color);
203+
204+
&:hover {
205+
text-decoration: underline;
206+
color: var(--link-color-hover);
207+
}
208+
209+
&.link--muted {
210+
--link-color: var(--link-color-muted);
211+
--link-color-hover: var(--link-color-muted);
212+
}
213+
}
214+
215+
/* landing page view */
216+
.landing-page {
217+
.landing-page__nav-buttons {
218+
display: flex;
219+
flex-direction: column;
220+
row-gap: 1rem;
221+
inline-size: clamp(400px, 50%, 800px);
222+
margin-inline: auto;
223+
margin-block-start: 2rem;
224+
}
225+
}

0 commit comments

Comments
 (0)