Skip to content

Commit

Permalink
chore: minor design adjustments (#16)
Browse files Browse the repository at this point in the history
* chore: minor design adjustments

* chore: update preview images

* fix: import correct fonts

* fix: attempt to fix fonts

* fix: attempt to fix fonts ❓

* fix: attempt to fix fonts ⁉️

* chore: improve a11y
  • Loading branch information
paulovareiro29 authored Sep 19, 2024
1 parent a350b0f commit 0efa718
Show file tree
Hide file tree
Showing 24 changed files with 115 additions and 38 deletions.
Binary file added public/assets/fonts/Approach-SemiBold.ttf
Binary file not shown.
Binary file added public/assets/fonts/ApproachKoeln-Bd.ttf
Binary file not shown.
Binary file removed public/assets/fonts/ApproachKoeln-BdIt.ttf
Binary file not shown.
Binary file added public/assets/fonts/ApproachKoeln-Rg.ttf
Binary file not shown.
Binary file removed public/assets/fonts/ApproachKoeln-RgIt.ttf
Binary file not shown.
Binary file removed public/assets/fonts/ApproachKoeln-SmBdIt.ttf
Binary file not shown.
Binary file modified public/assets/previews/enquiry-all-states-dark.webp
Binary file not shown.
Binary file modified public/assets/previews/enquiry-all-states.webp
Binary file not shown.
Binary file modified public/assets/previews/enquiry-dark.webp
Binary file not shown.
Binary file modified public/assets/previews/enquiry-validated-dark.webp
Binary file not shown.
Binary file modified public/assets/previews/enquiry-validated.webp
Binary file not shown.
Binary file modified public/assets/previews/enquiry.webp
Binary file not shown.
Binary file modified public/assets/previews/homepage-dark.webp
Binary file not shown.
Binary file modified public/assets/previews/homepage.webp
Binary file not shown.
24 changes: 21 additions & 3 deletions src/pages/enquiry-all-states.twig
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,19 @@
<div class='col-12 mb-3'>
<h1 class='display-3 mb-4'>Daten anfragen</h1>

<div class='pb-5 mb-3'>
{%
include 'partials::base/b_highlight-teaser.twig' with {
content: "
<p class='h3 mb-3 fw-semibold lh-sm'>“Titel lorem ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua...Weiterlesen”</p>
<p class='fs-3 m-0'>
Anna Hofman
</p>
"
}
%}
</div>

<h2 class='m-0'>
Nutzen Sie dieses Formular, um uns mitzuteilen, welche Daten Sie auf unserer Plattform noch vermissen – wir
bemühen uns, Ihre Anfragen so schnell wie möglich zu erfüllen.
Expand All @@ -29,7 +42,7 @@

<section class='row mb-4 mb-md-5'>
<div class='col-12'>
<form class='row'>
<form class='row pb-3'>
<div class='col-12 col-md-6 mb-4'>
<label for='name' class='form-label'>Name</label>
<input type='text' class='form-control form-control-lg' id='name' aria-describedby='name-help'>
Expand Down Expand Up @@ -126,7 +139,7 @@
</div>
</div>

<div class='d-flex flex-column gap-4 mb-4' role='region' aria-live='polite'>
<div class='d-flex flex-column gap-5 mb-5' role='region' aria-live='polite'>
{%
include 'partials::base/b_request.twig' with {
status: 'coordinating'
Expand Down Expand Up @@ -160,7 +173,12 @@
</div>

<div class='d-flex justify-content-center'>
<button class='btn btn-primary'>Mehr</button>
{%
include 'partials::base/b_link.twig' with {
text: 'Mehr Datenanfragen anzeigen',
icon: 'plus-lg'
}
%}
</div>
</div>
</section>
Expand Down
24 changes: 21 additions & 3 deletions src/pages/enquiry-validated.twig
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,19 @@
<div class='col-12 mb-3'>
<h1 class='display-3 mb-4'>Daten anfragen</h1>

<div class='pb-5 mb-3'>
{%
include 'partials::base/b_highlight-teaser.twig' with {
content: "
<p class='h3 mb-3 fw-semibold lh-sm'>“Titel lorem ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua...Weiterlesen”</p>
<p class='fs-3 m-0'>
Anna Hofman
</p>
"
}
%}
</div>

<h2 class='m-0'>
Nutzen Sie dieses Formular, um uns mitzuteilen, welche Daten Sie auf unserer Plattform noch vermissen – wir
bemühen uns, Ihre Anfragen so schnell wie möglich zu erfüllen.
Expand All @@ -29,7 +42,7 @@

<section class='row mb-4 mb-md-5'>
<div class='col-12'>
<form class='row'>
<form class='row pb-3'>
<div class='col-12 col-md-6 mb-4'>
<label for='name' class='form-label'>Name</label>
<input type='text' class='form-control form-control-lg is-valid' id='name' aria-describedby='name-help'>
Expand Down Expand Up @@ -134,7 +147,7 @@
</div>
</div>

<div class='d-flex flex-column gap-4 mb-4' role='region' aria-live='polite'>
<div class='d-flex flex-column gap-5 mb-5' role='region' aria-live='polite'>
{%
include 'partials::base/b_request.twig' with {
status: 'coordinating'
Expand Down Expand Up @@ -163,7 +176,12 @@
</div>

<div class='d-flex justify-content-center'>
<button class='btn btn-primary'>Mehr</button>
{%
include 'partials::base/b_link.twig' with {
text: 'Mehr Datenanfragen anzeigen',
icon: 'plus-lg'
}
%}
</div>
</div>
</section>
Expand Down
24 changes: 21 additions & 3 deletions src/pages/enquiry.twig
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,19 @@
<div class='col-12 mb-3'>
<h1 class='display-3 mb-4'>Daten anfragen</h1>

<div class='pb-5 mb-3'>
{%
include 'partials::base/b_highlight-teaser.twig' with {
content: "
<p class='h3 mb-3 fw-semibold lh-sm'>“Titel lorem ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua...Weiterlesen”</p>
<p class='fs-3 m-0'>
Anna Hofman
</p>
"
}
%}
</div>

<h2 class='m-0'>
Nutzen Sie dieses Formular, um uns mitzuteilen, welche Daten Sie auf unserer Plattform noch vermissen – wir
bemühen uns, Ihre Anfragen so schnell wie möglich zu erfüllen.
Expand All @@ -29,7 +42,7 @@

<section class='row mb-4 mb-md-5'>
<div class='col-12'>
<form class='row'>
<form class='row pb-3'>
<div class='col-12 col-md-6 mb-4'>
<label for='name' class='form-label'>Name</label>
<input type='text' class='form-control form-control-lg' id='name' aria-describedby='name-help'>
Expand Down Expand Up @@ -126,7 +139,7 @@
</div>
</div>

<div class='d-flex flex-column gap-4 mb-4' role='region' aria-live='polite'>
<div class='d-flex flex-column gap-5 mb-5' role='region' aria-live='polite'>
{%
include 'partials::base/b_request.twig' with {
status: 'coordinating'
Expand Down Expand Up @@ -156,7 +169,12 @@
</div>

<div class='d-flex justify-content-center'>
<button class='btn btn-primary'>Mehr</button>
{%
include 'partials::base/b_link.twig' with {
text: 'Mehr Datenanfragen anzeigen',
icon: 'plus-lg'
}
%}
</div>
</div>
</section>
Expand Down
35 changes: 23 additions & 12 deletions src/pages/homepage.twig
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<div class='col-12'>
{%
include 'partials::base/b_hero.twig' with {
src: 'https://picsum.photos/960/540',
src: 'https://static.ksta.de/__images/2023/08/25/063fe724-7865-4843-86d8-83e429101402.jpeg?q=75&q=70&w=2000&h=4484&fm=jpeg&s=1c2a6b096dbbc95dd3a9d637962b6d14',
type: 'background'
}
%}
Expand Down Expand Up @@ -47,7 +47,7 @@
</div>
</section>

<section class='row pt-4 pb-5'>
<section class='row pb-5 mb-3'>
{%
include 'partials::content-layout/cl_section-header.twig' with {
title: 'Beliebte Datensätze',
Expand All @@ -58,7 +58,7 @@
}
%}

<div class='col-6 mb-4'>
<div class='col-6 mb-3'>
{%
include 'partials::base/b_card.twig' with {
'thumbnail': {
Expand All @@ -72,7 +72,7 @@
}
%}
</div>
<div class='col-6 mb-4'>
<div class='col-6 mb-3'>
{%
include 'partials::base/b_card.twig' with {
'thumbnail': {
Expand All @@ -86,7 +86,7 @@
}
%}
</div>
<div class='col-6 mb-4'>
<div class='col-6 my-3'>
{%
include 'partials::base/b_card.twig' with {
'thumbnail': {
Expand All @@ -100,7 +100,7 @@
}
%}
</div>
<div class='col-6 mb-4'>
<div class='col-6 my-3'>
{%
include 'partials::base/b_card.twig' with {
'thumbnail': {
Expand All @@ -114,7 +114,7 @@
}
%}
</div>
<div class='col-6'>
<div class='col-6 mt-3'>
{%
include 'partials::base/b_card.twig' with {
'thumbnail': {
Expand All @@ -128,7 +128,7 @@
}
%}
</div>
<div class='col-6'>
<div class='col-6 mt-3'>
{%
include 'partials::base/b_card.twig' with {
'thumbnail': {
Expand All @@ -144,7 +144,7 @@
</div>
</section>

<section class='row py-5 border-gray border-top border-opacity-25'>
<section class='row py-5 mb-3 border-gray border-top border-opacity-25'>
{%
include 'partials::content-layout/cl_section-header.twig' with {
title: 'News',
Expand All @@ -156,11 +156,22 @@
%}

<div class='col-12'>
{% include 'partials::base/b_highlight-teaser.twig' %}
{%
include 'partials::base/b_highlight-teaser.twig' with {
content: "
<h3 class='mb-3'>Title lorem ipsum</h3>
<p class='fs-5 text-lg mb-3'>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua...
</p>
<a class='btn btn-primary align-self-center align-self-lg-start' href='#'>Weiterlesen</a>
"
}
%}
</div>
</section>

<section class='row py-5 border-gray border-top border-opacity-25'>
<section class='row py-5 mb-3 border-gray border-top border-opacity-25'>
{%
include 'partials::content-layout/cl_section-header.twig' with {
title: 'Beliebte Kategorien'
Expand All @@ -172,7 +183,7 @@
</div>
</section>

<section class='row py-5 border-gray border-top border-bottom border-opacity-25'>
<section class='row py-5 mb-3 border-gray border-top border-bottom border-opacity-25'>
{%
include 'partials::content-layout/cl_section-header.twig' with {
title: 'Daten über Schnittstelle nutzen',
Expand Down
2 changes: 1 addition & 1 deletion src/partials/base/b_breadcrumbs.twig
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
{% for link in links %}
{% if link.href is defined %}
<li class='breadcrumb-item'>
<a href='{{ link.href }}'>{{ link.text }}</a>
<a href='{{ link.href }}' class='link-offset-2'>{{ link.text }}</a>
</li>
{% else %}
<li class='breadcrumb-item active' aria-current='page'>{{ link.text }}</li>
Expand Down
13 changes: 5 additions & 8 deletions src/partials/base/b_highlight-teaser.twig
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
<div class='row position-relative'>
<div class='col-lg-8'>
<img class='img-fluid' src='https://picsum.photos/960/540' alt>
<div class=' ratio ratio-16x9'>
<img class='img-fluid' src='https://picsum.photos/960/540' alt>
</div>
</div>
<div class='mt-n5 col-lg-6 position-lg-absolute end-0 top-0 mt-lg-5'>
<div class='mt-n5 col-lg-6 position-lg-absolute z-1 end-0 top-0 mt-lg-5'>
<div class='card-body text-bg-primary p-4 mx-4 mx-lg-0 d-flex flex-column'>
<h3 class='mb-3'>Title lorem ipsum</h3>
<p class='fs-5 text-lg mb-3'>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua...
</p>
<a class='btn btn-primary align-self-center align-self-lg-start' href='#'>Weiterlesen</a>
{{ content | raw }}
</div>
</div>
</div>
6 changes: 6 additions & 0 deletions src/partials/base/b_link.twig
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<a href='{{ href }}' class='link fs-5'>
{% if icon %}
<i class='bi bi-{{ icon }} text-primary me-2' aria-hidden='true'></i>
{% endif %}
{{ text }}
</a>
12 changes: 8 additions & 4 deletions src/partials/content-layout/cl_section-header.twig
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
<div class='col-12 mb-5 d-flex justify-content-between align-items-center'>
<div class='col-12 mt-3 mb-4 d-flex justify-content-between align-items-center'>
<h2 class='display-6 m-0'>{{ title }}</h2>

{% if link is defined %}
<p class='fs-5 m-0'>
<a href='{{ link.href }}' class='link'><i class='bi bi-arrow-return-right me-2'></i>{{ link.text }} </a>
</p>
{%
include 'partials::base/b_link.twig' with {
href: link.href,
text: link.text,
icon: 'arrow-return-right'
}
%}
{% endif %}
</div>
7 changes: 6 additions & 1 deletion src/partials/content-layout/cl_tile-showcase.twig
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,11 @@
</div>

<div class='col-12 mt-5 d-flex justify-content-center'>
<button class='btn btn-primary'>Alle Kategorien anzeigen</button>
{%
include 'partials::base/b_link.twig' with {
text: 'Alle Kategorien anzeigen',
icon: 'plus-lg'
}
%}
</div>
</div>
6 changes: 3 additions & 3 deletions src/styles/base/_font.scss
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
@font-face {
font-family: 'ApproachKoeln';
src: url('/assets/fonts/ApproachKoeln-Rglt.ttf') format('truetype');
src: url('./fonts/ApproachKoeln-Rg.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: 'ApproachKoeln';
src: url('/assets/fonts/ApproachKoeln-SmBdlt.ttf') format('truetype');
src: url('./fonts/Approach-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}

@font-face {
font-family: 'ApproachKoeln';
src: url('/assets/fonts/ApproachKoeln-Bdlt.ttf') format('truetype');
src: url('./fonts/ApproachKoeln-Bd.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
Expand Down

0 comments on commit 0efa718

Please sign in to comment.