80a1924519
The landing was one address. It now also answers on the pages the panel publishes -- "Sobre nosotros" and the like -- at the addresses the API itself chooses: `path` and `alternates` put the default language unprefixed and every other one under its code, so `/sobre-nosotros`, `/en/about-us`, `/ca/qui-som` are the routes. `core/api.ts#contentRoute` is the single rule for that shape, and `/es/…` is deliberately not one of them, so a page has one address rather than two. Two routes share one load function, because Analog wants a `.server.ts` beside each `.page.ts`: `[slug]` for the default language, and `[locale]/[slug]` for the rest. Whether a slug exists is the API's answer, not something the route table knows, so the 404 middleware lets page-shaped addresses through and `ui/content-page.ts` sets the status itself from `ngOnInit` -- the same `injectResponse()` the landing uses for its 503, and `ngOnInit` because an input has no value in the constructor. Body HTML comes from the panel's editor and goes through Angular's sanitiser. The header shows the featured pages beside the section anchors; the footer lists them all. On a page the language switcher follows the API's `alternates`, and a language with no translation leads to the landing in that language instead of a 404. Verified: lint, 20 unit tests, build, and 6 e2e -- including a new one that a page-shaped address the API does not know answers 404 with `robots: noindex`. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
118 lines
2.1 KiB
SCSS
118 lines
2.1 KiB
SCSS
:host {
|
|
display: block;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.content-page {
|
|
padding-block: 4rem 5rem;
|
|
|
|
@media (min-width: 768px) {
|
|
padding-block: 6rem 7rem;
|
|
}
|
|
}
|
|
|
|
// A reading column, not the landing's full width: prose past ~70 characters a
|
|
// line is hard to follow.
|
|
.content-page__inner {
|
|
max-width: 48rem;
|
|
}
|
|
|
|
.content-page__title {
|
|
margin: 0;
|
|
font-size: clamp(2rem, 5vw, 3rem);
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.content-page__lead {
|
|
margin: 1.25rem 0 0;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.content-page__media {
|
|
margin: 2.5rem 0 0;
|
|
overflow: hidden;
|
|
border-radius: var(--pi-theme-card-radius, 1.5rem);
|
|
}
|
|
|
|
.content-page__body {
|
|
margin-top: 2.5rem;
|
|
font-size: 1.0625rem;
|
|
line-height: 1.75;
|
|
|
|
// The body is HTML from the panel's editor, not this component's template,
|
|
// so it carries none of the scoping attributes: only `::ng-deep` reaches it.
|
|
// Confined to this container, it styles nothing else on the page.
|
|
::ng-deep {
|
|
h2 {
|
|
margin: 2.5rem 0 0.75rem;
|
|
font-size: 1.5rem;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
h3 {
|
|
margin: 2rem 0 0.5rem;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
// One rhythm for both: left alone, the library's sheet sets paragraphs
|
|
// tighter than list items and the body reads in two different spacings.
|
|
p,
|
|
li {
|
|
line-height: 1.7;
|
|
}
|
|
|
|
p {
|
|
margin: 0 0 1rem;
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
margin: 0 0 1.25rem;
|
|
padding-left: 1.25rem;
|
|
}
|
|
|
|
li {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
a {
|
|
color: var(--pi-color-primary);
|
|
}
|
|
|
|
> :first-child {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-page__back {
|
|
display: inline-block;
|
|
margin-top: 3rem;
|
|
color: var(--pi-color-grey-600, #5b5b6b);
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
// The `<img>` belongs to `app-api-image`, so a scoped rule cannot reach it.
|
|
.content-page__media ::ng-deep img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|