Skip to content

Feature/arc 3825 interlinie #451

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
reunefe merged 3 commits into from
Sep 8, 2026
Merged

Feature/arc 3825 interlinie #451

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3757115
ARC-3825: fix timeline padding
reunefe Sep 3, 2026
9b65e0c
ARC-3825: Remove sofiapro from the typography but keep all other font…
reunefe Sep 3, 2026
789a5e3
Merge branch 'release/v6.0.0' into feature/ARC-3825_interlinie
reunefe Sep 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ...act-admin/modules/content-page/components/blocks/BlockDoubleBanner/BlockDoubleBanner.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ $image-min-height: variables.$g-spacer-unit * 12;
}

&__label {
@include typography.sofia-pro-heading-md;
@include typography.heading-md;
}

// Mobile keeps only the arrow at the far edge; desktop groups the selected icons and arrow at
Expand Down
8 changes: 4 additions & 4 deletions ...min/modules/content-page/components/blocks/BlockDriekeuzespeler/BlockDriekeuzespeler.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ $pill-font-size: clamp(1.8rem, 1.964cqw, 2.4rem);
overflow: hidden;

&__title {
@include typography.sofia-pro-heading-2xl;
@include typography.heading-2xl;

// The shapes layer reaches into the title, so the title has to sit in front of it.
position: relative;
Expand All @@ -77,7 +77,7 @@ $pill-font-size: clamp(1.8rem, 1.964cqw, 2.4rem);
text-align: center;

@media (max-width: variables.$g-bp2) {
@include typography.sofia-pro-heading-xl;
@include typography.heading-xl;

margin-bottom: variables.$g-spacer-unit * 6;
}
Expand Down Expand Up @@ -222,7 +222,7 @@ $pill-font-size: clamp(1.8rem, 1.964cqw, 2.4rem);
}

&__pill {
@include typography.sofia-pro-heading-lg;
@include typography.heading-lg;

position: relative;
z-index: 1;
Expand All @@ -233,7 +233,7 @@ $pill-font-size: clamp(1.8rem, 1.964cqw, 2.4rem);
text-align: center;

@media (max-width: variables.$g-bp2) {
@include typography.sofia-pro-heading-md;
@include typography.heading-md;

display: flex;
align-items: center;
Expand Down
4 changes: 1 addition & 3 deletions ...odules/content-page/components/blocks/BlockDriekeuzespeler/BlockDriekeuzespelerModal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
@use "../../../../shared/styles/settings/colors" as colors;
@use "../../../../shared/styles/settings/variables" as variables;

// Same ratio as the video player on an object's detail page.
$media-aspect-ratio: 16 / 9;
$card-radius: variables.$g-spacer-unit * 1.5;

.c-driekeuzespeler-modal {
&__media {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: $media-aspect-ratio;
aspect-ratio: 16 / 9;
width: 100%;

// Keeps a tall newspaper page inside the viewport instead of pushing the metadata panel and
Expand Down
9 changes: 2 additions & 7 deletions ...act-admin/modules/content-page/components/blocks/BlockHeroCarousel/BlockHeroCarousel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,13 +260,8 @@ $hero-carousel-search-radius-desktop: 3.2rem;
}

&-label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-family: typography.$font-family;
font-size: 1.8rem;
font-style: normal;
font-weight: 800;
@include typography.truncate;
@include typography.heading-md;
line-height: 2rem;
color: colors.$white;
}
Expand Down
4 changes: 2 additions & 2 deletions ...min/modules/content-page/components/blocks/BlockHetArchiefQuote/BlockHetArchiefQuote.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ $mark-line-height: variables.$g-spacer-unit * 9;
white-space: pre-line;

// Figma node 455:5724, style "P - XL".
@include typography.sofia-pro-body-xl;
@include typography.body-xl;

@media (max-width: variables.$g-bp2) {
// Figma node 455:7186: gap below the mark, plus the padding on the text group that
Expand All @@ -77,7 +77,7 @@ $mark-line-height: variables.$g-spacer-unit * 9;
margin-top: variables.$g-spacer-unit;

// Figma node 455:5725, style "P - S".
@include typography.sofia-pro-body-xs;
@include typography.body-xs;

@media (max-width: variables.$g-bp2) {
margin-bottom: variables.$g-spacer-unit;
Expand Down
2 changes: 1 addition & 1 deletion ...ct-admin/modules/content-page/components/blocks/BlockHighlightText/BlockHighligtText.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ $pattern-mobile-overshoot: 15rem;
background: var(--pattern-color, transparent);
padding: variables.$g-spacer-unit * 6;

@include typography.sofia-pro-body;
@include typography.body;

@media (max-width: variables.$g-bp4) {
padding: calc(#{variables.$g-spacer-unit} * 3) calc(#{variables.$g-spacer-unit} * 2.5) !important;
Expand Down
4 changes: 2 additions & 2 deletions ...admin/modules/content-page/components/blocks/BlockHomepageBanner/BlockHomepageBanner.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,13 +70,13 @@ $pattern-mobile-overshoot: 10rem;
width: 100%;
white-space: wrap;

@include typography.sofia-pro-heading-xl(true);
@include typography.heading-xl(true);
}

&-text {
color: colors.$neutral;

@include typography.sofia-pro-body(true);
@include typography.body(true);

// The rich text paragraph margins space the paragraphs apart, but the title's
// padding does the spacing above the first one.
Expand Down
2 changes: 1 addition & 1 deletion ...t-admin/modules/content-page/components/blocks/BlockImageCarousel/BlockImageCarousel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@

&-title {
color: colors.$color-gray-1000;
@include typography.sofia-pro-heading-lg();
@include typography.heading-lg();
@include typography.truncate();
width: fit-content;
}
Expand Down
8 changes: 4 additions & 4 deletions ...react-admin/modules/content-page/components/blocks/BlockObjectsGrid/BlockObjectsGrid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ $max-item-height: 37.6rem;
}

.c-block-objects-grid__title {
@include typography.sofia-pro-heading-lg($important: false);
@include typography.heading-lg($important: false);

color: colors.$color-gray-1000;
margin-bottom: 2.2rem;
Expand Down Expand Up @@ -194,15 +194,15 @@ $max-item-height: 37.6rem;
}

.c-block-objects-grid__tile-title {
@include typography.sofia-pro-heading-sm($important: false);
@include typography.heading-sm($important: false);
font-size: 1.6rem;

@include typography.truncate-after-x-lines(2);
overflow: hidden;
}

.c-block-objects-grid__tile-maintainer {
@include typography.sofia-pro-body-sm($important: false);
@include typography.body-sm($important: false);
line-height: 2rem;

@include typography.truncate;
Expand All @@ -222,7 +222,7 @@ $max-item-height: 37.6rem;
background-color: colors.$color-gray-1000;
color: colors.$white;

@include typography.sofia-pro-heading;
@include typography.heading;

text-decoration: none;

Expand Down
8 changes: 4 additions & 4 deletions ...admin/modules/content-page/components/blocks/BlockOverviewThemes/BlockOverviewThemes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ $tile-padding: 3rem;
$description-animation-speed: 0.3s;

.c-block-overview-themes {
@include typography.sofia-pro-heading-xl;
@include typography.heading-xl;

&__group {
position: relative;
Expand Down Expand Up @@ -50,7 +50,7 @@ $description-animation-speed: 0.3s;
position: relative;
z-index: 1;

@include typography.sofia-pro-heading-xl(true);
@include typography.heading-xl(true);

// Reset so the heading level (h1-h4, chosen for semantics only) never affects the visual style.
margin: 0 0 (variables.$g-spacer-unit * 3) !important;
Expand Down Expand Up @@ -181,7 +181,7 @@ $description-animation-speed: 0.3s;
&__tile-title {
color: colors.$white;

@include typography.sofia-pro-heading-md;
@include typography.heading-md;
@include typography.truncate-after-x-lines(2);
}

Expand All @@ -204,7 +204,7 @@ $description-animation-speed: 0.3s;
margin-top $description-animation-speed ease-out;
color: colors.$white;

@include typography.sofia-pro-body-sm;
@include typography.body-sm;
}

.c-block-overview-themes__tile {
Expand Down
6 changes: 3 additions & 3 deletions ...s/content-page/components/blocks/BlockOverviewWithCarousel/BlockOverviewWithCarousel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ $slide-width: 28rem;
&-title {
color: colors.$color-gray-1000;

@include typography.sofia-pro-heading-lg;
@include typography.heading-lg;
@include typography.truncate;

width: fit-content;
Expand Down Expand Up @@ -140,7 +140,7 @@ $slide-width: 28rem;
}

.c-block-overview-with-carousel__slide-text {
@include typography.sofia-pro-heading-xl;
@include typography.heading-xl;
}
}

Expand Down Expand Up @@ -174,7 +174,7 @@ $slide-width: 28rem;

color: colors.$color-gray-1000;

@include typography.sofia-pro-heading-md;
@include typography.heading-md;
}
}
}
10 changes: 5 additions & 5 deletions ...-admin/modules/content-page/components/blocks/BlockThemeReels/BlockThemeReelsSection.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ $slide-image-height-mobile: 12rem;
width: fit-content;

@include typography.truncate;
@include typography.sofia-pro-heading-lg;
@include typography.heading-lg;

@media (max-width: variables.$g-bp2) {
line-height: 2.6rem;
Expand All @@ -43,7 +43,7 @@ $slide-image-height-mobile: 12rem;

&-subtitle {
@include typography.truncate-after-x-lines(3);
@include typography.sofia-pro-body-sm;
@include typography.body-sm;

color: colors.$neutral;
width: 100%;
Expand Down Expand Up @@ -246,7 +246,7 @@ $slide-image-height-mobile: 12rem;
&-title {
color: colors.$color-gray-1000;

@include typography.sofia-pro-heading-md;
@include typography.heading-md;

width: 100%;

Expand All @@ -264,7 +264,7 @@ $slide-image-height-mobile: 12rem;
width: 100%;
color: colors.$color-gray-1000;

@include typography.sofia-pro-body-sm;
@include typography.body-sm;


@media (max-width: variables.$g-bp2) {
Expand All @@ -289,7 +289,7 @@ $slide-image-height-mobile: 12rem;
}

&-label {
@include typography.sofia-pro-heading-md;
@include typography.heading-md;
@include typography.truncate-after-x-lines(3);
}

Expand Down
22 changes: 11 additions & 11 deletions ui/src/react-admin/modules/content-page/components/blocks/BlockTimeline/BlockTimeline.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ $object-meta-vertical-padding: variables.$g-spacer-unit * 2;
align-self: baseline;
padding-right: 1rem;

@include typography.sofia-pro-heading-xl;
@include typography.heading-xl;

// Taller than the font itself, so the year lines up with the top of the node's content
line-height: 5.6rem;
Expand All @@ -148,7 +148,7 @@ $object-meta-vertical-padding: variables.$g-spacer-unit * 2;
display: block;
padding-left: $line-content-gap;

@include typography.sofia-pro-heading-lg;
@include typography.heading-lg;

line-height: 2.6rem;
color: colors.$color-gray-300;
Expand Down Expand Up @@ -227,30 +227,30 @@ $object-meta-vertical-padding: variables.$g-spacer-unit * 2;

&__node-text {
padding-bottom: $node-background-padding;

&:first-child .c-block-timeline__node-title {
margin-top: 0;
}
}

&__node-title {
margin: (variables.$g-spacer-unit * 4) 0 0;

&:first-child {
margin-top: 0;
}

@include typography.sofia-pro-heading-lg;
@include typography.heading-lg;

@media (max-width: variables.$g-bp3) {
@include typography.sofia-pro-heading-md;
@include typography.heading-md;
margin: (variables.$g-spacer-unit * 3) 0 0;
}
}

&__node-description {
margin-top: variables.$g-spacer-unit * 2;

@include typography.sofia-pro-body;
@include typography.body;

@media (max-width: variables.$g-bp3) {
@include typography.sofia-pro-body-sm;
@include typography.body-sm;
}
}

Expand Down Expand Up @@ -334,7 +334,7 @@ $object-meta-vertical-padding: variables.$g-spacer-unit * 2;
// and on backgrounds with no record. https://meemoo.atlassian.net/browse/ARC-3848
color: colors.$color-gray-300;

@include typography.sofia-pro-body-xs;
@include typography.body-xs;

&-icon {
width: 1rem;
Expand Down
8 changes: 4 additions & 4 deletions ...modules/content-page/components/blocks/BlockTitleWithParallax/BlockTitleWithParallax.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,12 +122,12 @@
&__title-text {
display: inline;

@include typography.sofia-pro-heading-2xl(true);
@include typography.heading-2xl(true);

color: colors.$white;

@media (max-width: variables.$g-bp2) {
@include typography.sofia-pro(4rem, 800, 4.4rem, true);
@include typography.set-font(4rem, 800, 4.4rem, true);
}
}

Expand All @@ -144,7 +144,7 @@
&__subtitle-text {
color: colors.$neutral;

@include typography.sofia-pro(2.4rem, 800, 2.6rem, true);
@include typography.set-font(2.4rem, 800, 2.6rem, true);
}

&__subtitle-box {
Expand All @@ -154,7 +154,7 @@
// "Big" keeps the desktop subtitle size on mobile - only "small" shrinks it.
&--small &__subtitle-text {
@media (max-width: variables.$g-bp2) {
@include typography.sofia-pro(2rem, 800, 2.4rem, true);
@include typography.set-font(2rem, 800, 2.4rem, true);
}
}
}
6 changes: 3 additions & 3 deletions ui/src/react-admin/modules/content-page/components/blocks/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,9 +154,9 @@ Block styles are a plain `Block<Name>.scss` next to the component, imported by i
- **Breakpoints** are `variables.$g-bp1`…`$g-bp4`, written as
`@media (max-width: variables.$g-bp2)`.
- **Type** goes through [`mixins/_typography.scss`](../../../shared/styles/mixins/_typography.scss):
always a preset (`sofia-pro-body()`, `sofia-pro-heading-lg()`, …). If none of them matches, add a
preset there instead of calling `sofia-pro($size, $weight, $line-height)` from the block. Don't
re-declare `font-family`/`font-size`/`font-weight` by hand.
always a preset (`body()`, `heading-lg()`, …). If none of them matches, add a
preset there instead of calling `set-font($size, $weight, $line-height)` from the block. Don't
re-declare `font-size`/`font-weight` by hand.
- **Colours** come from `settings/colors`, or from a CSS custom property when the editor picks them
(`background: var(--frame-color)`).
- A value that genuinely is design-specific (a frame radius, an icon-column width) becomes a named
Expand Down
2 changes: 1 addition & 1 deletion ui/src/react-admin/modules/shared/components/ContentPageLabelChip/ContentPageLabelChip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,6 @@
display: inline-block;
padding: variables.$g-spacer-unit;

@include typography.sofia-pro(1.6rem, 700, 2rem);
@include typography.set-font(1.6rem, 700, 2rem);
@include typography.truncate;
}
Loading