Case Headline

The first Image page-width off a case or article should always be 100% max. width

article>.notion-image.page-width:nth-child(5) {
    width: calc(100% - var(--padding-desktop) * 2) !important;
    max-width: calc(var(--m423-width) - var(--m423-radius) * 2);
    min-width: 800px;
    margin-top: 2rem;
}

New Version Header

Staging - Container widths

Stage (navigation-content)

    width: calc(100% - var(--m423-radius) * 2);
    max-width: calc(var(--m423-width) - var(--m423-radius) * 2);

Big Size Images or Content

    width: calc(100% - var(--m423-radius) * 4);
    max-width: calc(var(--m423-width) - var(--m423-radius) * 4);

New Hero Image on Top

article>.notion-image.page-width:nth-child(1) {
    width: calc(100% - var(--m423-radius) * 4) !important;
    max-width: calc(var(--m423-width) - var(--m423-radius) * 4);
    min-width: 820px;
    margin-top: 2rem;
}

Max Content and inline Images

width: 100%;
max-width: var(--content-md) !important;
padding: 0 var(--m423-radius);

IMAGES

Copy-Past Images

Rules:

When past an image the image set to page-width
When scale it sets to normal
If scaled back to content size it sets to page-width

CSS-Rules

1st page-width image (nth-child) is set to —content-xxl (max. 1440)
Any other page-width image should be —content-md (standard content)
Scaled images normal – should be scaled related to notion - max.1200

Copy-Paste Image - Standard - NO SCALE

.notion-image.page-width {
    max-width: var(--content-md);
    width: calc(100% - 46px);
    margin: 2rem auto;
}

Copy-Paste Image - scaled smaller

div notion-image normal > img width=384

Copy-Paste Image - scaled bigger

div notion-image normal > img width=1056

.notion-image.normal {
    width: auto;
    max-width: calc(100% - var(--m423-radius) * 2);
    margin: auto;
}

Copy-Paste Images - scaled to normal

div notion-image page-width > img width=720

For dark / light mode response

Responsive images

Culum Images

Image pairings

Problem: The column lists don't have a specific width (no CSS max-width). I would like to have at least 2 variants.

Solution:

empty paragraph background-color: red (or any aviable) before column-list

.notion-text.bg-red{
    display: none
}

.notion-text.bg-red + .notion-column-list{
    max-width: calc(var(--m423-width) - var(--m423-radius) * 2) !important;
}

idea: color-code → red 1200 → blue 1394 else = max. content

BUTTONS

CTA’s

Example Application

Get connected.

Let's start a conversation.

Discover together where our paths might intersect.

Contact me

Reach me by mail

No detours. No noise.

Call me: +41 76 540 50 57

Download CV

Download PDF (512 KB)

My experience at a glance – a map of my journey through design and creation.

Primary - Background standard