Files
landing-app/landing/src/app/pages/home.page.scss
pigui 399b8d5450 Add a page for every way to help
/colabora (/en/contribute, /ca/col-labora) — the calls' own section, so
it lists what /colabora/{slug} are — brings the open calls, the good
first issues across the collective's repositories, and a five-step
guide from picking a task to having it reviewed. With nothing open and
nothing labelled, the guide and the other ways to help are still there.
The landing's "contribute" section links to it.

Also fixes the landing's issue list, which @pi/ui's `li + li` margin
spaced twice over.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-29 15:14:16 +02:00

96 lines
1.7 KiB
SCSS

// The home page's own layout: the grids each section drops its cards into,
// plus the skip link. Everything else belongs to a component.
.landing-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(1, minmax(0, 1fr));
@media (min-width: 640px) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1024px) {
grid-template-columns: repeat(var(--landing-columns, 3), minmax(0, 1fr));
}
}
.landing-grid--four {
@media (min-width: 1024px) {
--landing-columns: 4;
}
}
.landing-grid--logos {
gap: 1rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
@media (min-width: 640px) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 1024px) {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
.landing-issues {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 1.25rem;
padding: 0;
list-style: none;
// `@pi/ui`'s reset spaces every `li + li`; this list is spaced by `gap`.
> li {
margin: 0;
}
}
.landing-subsection {
margin-top: 3rem;
}
.landing-subsection__title {
margin: 0;
font-size: 1.25rem;
}
.landing-subsection__lead {
margin: 0.375rem 0 0;
color: var(--pi-color-grey-600, #5b5b6b);
}
.landing-form__wrap {
max-width: 40rem;
}
.landing-skip {
position: absolute;
left: -9999px;
&:focus {
left: 1rem;
top: 1rem;
z-index: 100;
padding: 0.5rem 1rem;
background: var(--pi-color-white, #fff);
border-radius: 0.5rem;
}
}
// "See the full radar" under the section's summary of it.
.landing-section__more {
margin: 2rem 0 0;
a {
color: var(--pi-color-primary);
font-weight: 600;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}