Skip to content

site: tile grid with the market icon in the landing band #52

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
erlendoksvoll merged 1 commit into from
Oct 1, 2026
Merged

site: tile grid with the market icon in the landing band #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
62 changes: 10 additions & 52 deletions layouts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,61 +30,19 @@ <h1 id="landing-title" class="ds-heading landing-hero__title" data-size="xl">Byg
{{- end }}
</div>
</div>
{{- /* Band art: the data.altinn.no market icon (white, as the profile requires on dark
surfaces) beside a stack of building blocks in the profile's graphic colours, echoing
the headline "Bygg på data.altinn.no". */ -}}
<svg class="landing-hero__art" viewBox="0 0 480 360" aria-hidden="true" focusable="false">
<g class="landing-hero__icon" fill="#ffffff" fill-rule="evenodd" transform="translate(14 14) scale(4.4)">
{{- /* Band art: a three-by-two grid of tiles in the profile's graphic colours, with the
data.altinn.no market icon in navy inside a white circle in the top middle tile. */ -}}
<svg class="landing-hero__art" viewBox="0 0 354 232" aria-hidden="true" focusable="false">
<rect x="0" y="0" width="110" height="110" rx="3" fill="#1e98f5"/>
<rect x="244" y="0" width="110" height="110" rx="3" fill="#e5aa20"/>
<rect x="0" y="122" width="110" height="110" rx="3" fill="#e5aa20"/>
<rect x="122" y="122" width="110" height="110" rx="3" fill="#1e98f5"/>
<rect x="244" y="122" width="110" height="110" rx="3" fill="#f45f63"/>
<circle cx="177" cy="55" r="55" fill="#ffffff"/>
<g fill="#022f51" fill-rule="evenodd" transform="translate(142.00 20.00) scale(1.4583)">
<path d="M36.71,18.29l-1.42,1.42,3.3,3.29h-6.65c-.45-3.62-3.32-6.49-6.94-6.94v-4.19c1.73-.44,3-2.01,3-3.87,0-2.21-1.79-4-4-4s-4,1.79-4,4c0,1.86,1.27,3.43,3,3.87v4.19c-1.46.18-2.8.76-3.91,1.62l-3.65-3.65c.36-.59.56-1.29.56-2.03,0-2.21-1.79-4-4-4s-4,1.79-4,4,1.79,4,4,4c.74,0,1.43-.2,2.03-.55l3.65,3.64c-.86,1.11-1.44,2.45-1.62,3.91h-4.19c-.44-1.73-2.01-3-3.87-3-2.21,0-4,1.79-4,4s1.79,4,4,4c1.86,0,3.43-1.28,3.88-3h4.18c.18,1.46.76,2.79,1.62,3.9l-3.68,3.63c-1.54-.91-3.55-.7-4.87.62-1.56,1.56-1.56,4.09,0,5.65s4.09,1.56,5.66,0c1.31-1.31,1.52-3.32.62-4.85l3.68-3.63c1.11.86,2.45,1.44,3.91,1.62v4.21c-1.73.44-3,2.01-3,3.87,0,2.21,1.79,4,4,4s4-1.79,4-4c0-1.86-1.27-3.43-3-3.87v-6.15h-1c-3.31,0-6-2.69-6-6s2.69-6,6-6,5.99,2.68,6,5.99v1.01h8.59l-3.3,3.29,1.42,1.42,5.7-5.71-5.7-5.71ZM12,14c-1.1,0-2-.9-2-2s.9-2,2-2,2,.9,2,2-.89,2-2,2ZM8,26c-1.1,0-2-.9-2-2s.9-2,2-2,2,.9,2,2.01-.9,1.99-2,1.99ZM13.37,37.39c-.78.78-2.04.78-2.83,0-.78-.78-.78-2.05,0-2.83.79-.78,2.05-.78,2.83,0s.78,2.05,0,2.83ZM26,40.02c0,1.1-.9,2-2,2s-2-.9-2-2,.9-2,2-2,2,.9,2,2ZM22,8c0-1.1.9-2,2-2s2,.9,2,2-.9,2-2,2-2-.9-2-2Z"/>
<path d="M27.43,31.23c1.04-.5,1.96-1.21,2.7-2.09l-1.53-1.29c-.55.66-1.24,1.19-2.03,1.57l.86,1.81Z"/>
</g>
<defs>
<filter id="block-shadow" x="-20%" y="-20%" width="140%" height="160%">
<feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000914" flood-opacity=".25"/>
</filter>
<linearGradient id="block-blue" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#3fa6f7"/>
<stop offset="1" stop-color="#1e98f5"/>
</linearGradient>
<linearGradient id="block-yellow" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ebb63f"/>
<stop offset="1" stop-color="#e5aa20"/>
</linearGradient>
<linearGradient id="block-red" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#f6767a"/>
<stop offset="1" stop-color="#f45f63"/>
</linearGradient>
</defs>
<g class="landing-hero__blocks">
<rect x="120" y="292" width="112" height="64" rx="8" fill="#ffffff" fill-opacity=".1"/>
<g filter="url(#block-shadow)">
<rect x="240" y="296" width="112" height="64" rx="8" fill="#1a82d1"/>
<rect x="240" y="292" width="112" height="64" rx="8" fill="url(#block-blue)"/>
<rect x="248" y="294" width="96" height="2" rx="1" fill="#ffffff" fill-opacity=".28"/>
</g>
<g filter="url(#block-shadow)">
<rect x="360" y="296" width="112" height="64" rx="8" fill="#c8931c"/>
<rect x="360" y="292" width="112" height="64" rx="8" fill="url(#block-yellow)"/>
<rect x="368" y="294" width="96" height="2" rx="1" fill="#ffffff" fill-opacity=".28"/>
</g>
<g filter="url(#block-shadow)">
<rect x="180" y="226" width="112" height="64" rx="8" fill="#d6535a"/>
<rect x="180" y="222" width="112" height="64" rx="8" fill="url(#block-red)"/>
<rect x="188" y="224" width="96" height="2" rx="1" fill="#ffffff" fill-opacity=".28"/>
</g>
<g filter="url(#block-shadow)">
<rect x="300" y="226" width="112" height="64" rx="8" fill="#1a82d1"/>
<rect x="300" y="222" width="112" height="64" rx="8" fill="url(#block-blue)"/>
<rect x="308" y="224" width="96" height="2" rx="1" fill="#ffffff" fill-opacity=".28"/>
</g>
<g filter="url(#block-shadow)">
<rect x="240" y="156" width="112" height="64" rx="8" fill="#c8931c"/>
<rect x="240" y="152" width="112" height="64" rx="8" fill="url(#block-yellow)"/>
<rect x="248" y="154" width="96" height="2" rx="1" fill="#ffffff" fill-opacity=".28"/>
</g>
<rect x="360" y="152" width="112" height="64" rx="8" fill="#ffffff" fill-opacity=".1"/>
<rect x="300" y="82" width="112" height="64" rx="8" fill="#ffffff" fill-opacity=".1"/>
</g>
</svg>
</div>
</section>
Expand Down
10 changes: 4 additions & 6 deletions static/css/landing.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ body.landing-page .footer { margin-top: 0; }
.landing-hero__art {
position: absolute;
right: 3.6rem; /* = the container's side padding: the art's right edge lines up with the content below */
bottom: -6.4rem; /* the art's bottom edge is the band's bottom edge (the band's padding is 6.4rem), so the blocks stand on it */
bottom: -3.2rem; /* 32px above the band's bottom edge (the band's padding is 6.4rem) */
width: 40%;
max-width: 480px;
height: auto;
Expand All @@ -138,7 +138,7 @@ body.landing-page .footer { margin-top: 0; }
block so the icon clears the buttons. Placed after the base rules above so it wins. */
@media (min-width: 901px) and (max-width: 1150px) {
.landing-hero__text { max-width: 64%; }
.landing-hero__art { width: 34%; }
.landing-hero__art { width: 32%; }
}

/* Sections */
Expand Down Expand Up @@ -211,17 +211,15 @@ body.landing-page .footer { margin-top: 0; }
.landing-contact .ds-button .fa { font-size: 1.1em; }

@media (max-width: 900px) {
/* Narrow: the text spans the band, so only the faint tiles stay, low right, behind it. */
.landing-hero__art { width: 60%; right: -22%; bottom: -10rem; opacity: .35; }
.landing-hero__icon { display: none; }
/* Narrow: the text spans the band, so the art goes. */
.landing-hero__art { display: none; }
.landing-about__grid { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
}

@media (max-width: 680px) {
.landing-wrap { padding: 0 20px; }
.landing-hero { padding: 3.2rem 0 4.8rem; }
.landing-section { padding: 4rem 0; }
.landing-hero__art { opacity: .25; }
}

/* High-contrast mode (Windows "forced colors"): Designsystemet 1.23.0 opts its button out of forced
Expand Down
Loading