diff --git a/public/assets/favicon/site.webmanifest b/public/assets/favicon/site.webmanifest index 3b99375..7acd482 100644 --- a/public/assets/favicon/site.webmanifest +++ b/public/assets/favicon/site.webmanifest @@ -3,12 +3,12 @@ "short_name": "Offene Daten Köln", "icons": [ { - "src": "/android-chrome-192x192.png", + "src": "./android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { - "src": "/android-chrome-512x512.png", + "src": "./android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } diff --git a/src/pages/homepage.twig b/src/pages/homepage.twig index ffd795c..5a3fbb1 100644 --- a/src/pages/homepage.twig +++ b/src/pages/homepage.twig @@ -25,7 +25,7 @@
+
{% include 'partials::base/b_card.twig' with { 'thumbnail': { @@ -77,7 +77,7 @@ } %}
-
+
{% include 'partials::base/b_card.twig' with { 'thumbnail': { @@ -91,7 +91,7 @@ } %}
-
+
{% include 'partials::base/b_card.twig' with { 'thumbnail': { @@ -105,7 +105,7 @@ } %}
-
+
{% include 'partials::base/b_card.twig' with { 'thumbnail': { @@ -119,7 +119,7 @@ } %}
-
+
{% include 'partials::base/b_card.twig' with { 'thumbnail': { @@ -133,7 +133,7 @@ } %}
-
+
{% include 'partials::base/b_card.twig' with { 'thumbnail': { diff --git a/src/pages/index.twig b/src/pages/index.twig index 7d6b5d2..e010689 100644 --- a/src/pages/index.twig +++ b/src/pages/index.twig @@ -58,10 +58,10 @@

{{ template.name }}

-
+
{% for variant in template.variants %} -
- +
+
{% if variant.thumbnail_dark %} diff --git a/src/pages/overview-empty.twig b/src/pages/overview-empty.twig index 9f4f8e8..f8073fa 100644 --- a/src/pages/overview-empty.twig +++ b/src/pages/overview-empty.twig @@ -47,7 +47,7 @@
-

Ihre Suche nach "Lorem" ergab 0 Datensätze.

+

Ihre Suche nach "Lorem" ergab 0 Datensätze.

{% include 'partials::content-layout/cl_results-empty-state.twig' %}
diff --git a/src/pages/overview.twig b/src/pages/overview.twig index 79aa696..fb9ae3d 100644 --- a/src/pages/overview.twig +++ b/src/pages/overview.twig @@ -46,9 +46,7 @@
-

- Ihre Suche nach "Struktur" ergab 387 Treffer. -

+

Ihre Suche nach "Struktur" ergab 387 Treffer.

{% include 'partials::content-layout/cl_results.twig' %}
diff --git a/src/pages/publisher-overview.twig b/src/pages/publisher-overview.twig index 18ce854..625ae6c 100644 --- a/src/pages/publisher-overview.twig +++ b/src/pages/publisher-overview.twig @@ -30,7 +30,7 @@
{% include 'partials::content-layout/cl_publisher.twig' with { - href: './publisher', + href: './publisher-datasets', title: 'Meinung für Köln', description: 'Auf dem Beteiligungsportal der Stadt Köln "Meinung für Köln", werden Impulse für das Stadtentwicklungskonzept gesammelt.', datasets: 21 @@ -40,7 +40,7 @@
{% include 'partials::content-layout/cl_publisher.twig' with { - href: './publisher', + href: './publisher-datasets', title: 'Landesdatenbank NRW', description: 'Daten zu den Kreisen und Gemeinden des Landes Nordrhein-Westfalen.', datasets: 113 @@ -50,7 +50,7 @@
{% include 'partials::content-layout/cl_publisher.twig' with { - href: './publisher', + href: './publisher-datasets', title: 'Touristischer Data Hub NRW', description: 'Der Data Hub NRW bündelt touristische Daten aus ganz Nordrhein-Westfalen, um Gästen touristische Informationen einfach und schnell bereitzustellen.', datasets: 1 @@ -60,7 +60,7 @@
{% include 'partials::content-layout/cl_publisher.twig' with { - href: './publisher', + href: './publisher-datasets', title: 'GrowSmarter', description: 'transforming cities for a smart, sustainable Europe.', datasets: 1 @@ -70,7 +70,7 @@
{% include 'partials::content-layout/cl_publisher.twig' with { - href: './publisher', + href: './publisher-datasets', title: 'Kölner Zoo', description: 'Aktiengesellschaft Zoologischer Garten Köln.', datasets: 3 @@ -80,7 +80,7 @@
{% include 'partials::content-layout/cl_publisher.twig' with { - href: './publisher', + href: './publisher-datasets', title: 'KölnBäder GmbH', description: 'KölnBäder GmbH', datasets: 1 @@ -90,7 +90,7 @@
{% include 'partials::content-layout/cl_publisher.twig' with { - href: './publisher', + href: './publisher-datasets', title: 'VHS Koeln', description: 'Die Volkshochschule Köln - Weiterbildungseinrichtung', datasets: 1 diff --git a/src/partials/base/b_card.twig b/src/partials/base/b_card.twig index 9f934dc..576d0d6 100644 --- a/src/partials/base/b_card.twig +++ b/src/partials/base/b_card.twig @@ -14,7 +14,7 @@

{{ title }} {% if tag %} - {{ tag }} + {{ tag }} {% endif %}

{{ subtitle }}

@@ -25,7 +25,7 @@ {% if formats %}
{% for format in formats %} - {{ format | upper }} + {{ format | upper }} {% endfor %}
{% endif %} diff --git a/src/partials/base/b_header.twig b/src/partials/base/b_header.twig index 1d0cee2..6b1585c 100644 --- a/src/partials/base/b_header.twig +++ b/src/partials/base/b_header.twig @@ -44,7 +44,7 @@
  • Daten
  • News
    • -
  • Herausgeber
    • +
  • Herausgeber
  • Apps
  • Anfragen
    • diff --git a/src/partials/base/b_hero.twig b/src/partials/base/b_hero.twig index 7d86cb9..f60a715 100644 --- a/src/partials/base/b_hero.twig +++ b/src/partials/base/b_hero.twig @@ -1,6 +1,8 @@ {% set type = type is defined ? type : 'default' %}
    - +
    + +
    diff --git a/src/partials/base/b_tile.twig b/src/partials/base/b_tile.twig index 4cb4208..417858c 100644 --- a/src/partials/base/b_tile.twig +++ b/src/partials/base/b_tile.twig @@ -1,4 +1,5 @@ - + +

    {{ name }}

    diff --git a/src/partials/content-layout/cl_app.twig b/src/partials/content-layout/cl_app.twig index 51bdc8c..dcb2ccb 100644 --- a/src/partials/content-layout/cl_app.twig +++ b/src/partials/content-layout/cl_app.twig @@ -5,7 +5,7 @@
    {% if href is not defined %} - Nicht Verfügbar + Nicht Verfügbar {% endif %}

    {{ title }}

    {% if description is defined %} @@ -18,7 +18,7 @@
    {% include 'partials::base/b_link.twig' with { - text: 'Zur Anwendung', + text: 'zur Anwendung', icon: 'arrow-return-right', href: href } diff --git a/src/partials/content-layout/cl_filters.twig b/src/partials/content-layout/cl_filters.twig index 20bdef5..074abcb 100644 --- a/src/partials/content-layout/cl_filters.twig +++ b/src/partials/content-layout/cl_filters.twig @@ -22,13 +22,13 @@
    -

    Filtern nach

    +

    Filtern nach

    {% for category in data %}
    -

    +

    {{ category.title }} -

    +
    {% for filter in category.filters %} {% set id = 'filter-' ~ loop.parent.loop.index ~ loop.index %} diff --git a/src/partials/content-layout/cl_results-empty-state.twig b/src/partials/content-layout/cl_results-empty-state.twig index e9f37a4..8d21e98 100644 --- a/src/partials/content-layout/cl_results-empty-state.twig +++ b/src/partials/content-layout/cl_results-empty-state.twig @@ -86,7 +86,7 @@

    Sortieren nach

    -
    -
    +
    +
    {% include 'partials::content-layout/cl_result-card.twig' with { href: './dataset', @@ -126,7 +126,7 @@ } %}
    -
    +
    {% include 'partials::content-layout/cl_result-card.twig' with { href: './dataset', @@ -138,7 +138,7 @@ } %}
    -
    +
    {% include 'partials::content-layout/cl_result-card.twig' with { seen: true, @@ -151,7 +151,7 @@ } %}
    -
    +
    {% include 'partials::content-layout/cl_result-card.twig' with { seen: true, @@ -162,7 +162,7 @@ } %}
    -
    +
    {% include 'partials::content-layout/cl_result-card.twig' with { seen: true, @@ -173,7 +173,7 @@ } %}
    -
    +
    {% include 'partials::base/b_pagination.twig' %}
    diff --git a/src/styles/base/_theme.scss b/src/styles/base/_theme.scss index d1ed5d5..a3019cc 100644 --- a/src/styles/base/_theme.scss +++ b/src/styles/base/_theme.scss @@ -1,8 +1,9 @@ .text-bg-primary { - color: var(--color-on-primary) !important; - background-color: var(--primary) !important; --focus-ring-color: var(--color-on-primary); + background-color: var(--primary) !important; + color: var(--color-on-primary) !important; + .btn-primary { --btn-bg: var(--color-on-primary); --btn-color: var(--primary); @@ -16,6 +17,18 @@ --btn-hover-color: var(--primary); --btn-hover-bg: var(--color-on-primary); } + + [data-bs-theme='dark'] & { + --body-bg: var(--primary); + + input { + color: var(--black); + + &::placeholder { + color: var(--gray); + } + } + } } .dark-mode-only { diff --git a/src/styles/components/_accordion.scss b/src/styles/components/_accordion.scss index 25f763b..91fe40a 100644 --- a/src/styles/components/_accordion.scss +++ b/src/styles/components/_accordion.scss @@ -5,10 +5,14 @@ var(--focus-ring-color); &-button::after { - &, - [data-bs-theme='dark'] & { + & { --accordion-btn-active-icon: url("data:image/svg+xml,") !important; --accordion-btn-icon: url("data:image/svg+xml,") !important; } + + [data-bs-theme='dark'] & { + --accordion-btn-active-icon: url("data:image/svg+xml,") !important; + --accordion-btn-icon: url("data:image/svg+xml,") !important; + } } } diff --git a/src/styles/components/_footer.scss b/src/styles/components/_footer.scss index fb56216..e50fe93 100644 --- a/src/styles/components/_footer.scss +++ b/src/styles/components/_footer.scss @@ -1,8 +1,8 @@ .footer { --footer-color: var(--light); --footer-background: var(--dark); - --footer-link-color: var(--light); - --footer-link-hover-color: var(--primary); + --footer-link-color: var(--light-gray); + --footer-link-hover-color: var(--light); color: var(--footer-color); background-color: var(--footer-background); @@ -17,7 +17,8 @@ } a { - color: var(---footer-link-color); + --focus-ring-color: var(--footer-link-color); + color: var(--footer-link-color); &:hover { color: var(--footer-link-hover-color); diff --git a/src/styles/components/_form.scss b/src/styles/components/_form.scss index 04ddca6..18408cb 100644 --- a/src/styles/components/_form.scss +++ b/src/styles/components/_form.scss @@ -26,8 +26,24 @@ --dropdown-link-active-color: var(--color-on-primary); } -.form-switch .form-check-input:not(:checked) { - &:focus { - --form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ff0000'/%3e%3c/svg%3e"); +.form-switch .form-check-input { + [data-bs-theme='dark'] &:checked { + background-color: var(--color-on-primary); + } + + &:not(:checked) { + &:focus { + --form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23a01e28'/%3e%3c/svg%3e"); + } } } + +input[type='search']::-webkit-search-cancel-button { + cursor: pointer; + -webkit-appearance: none; + background-color: var(--primary); + -webkit-mask-image: url("data:image/svg+xml;utf8,"); + background-size: 24px 24px; + height: 24px; + width: 24px; +} diff --git a/src/styles/components/_hero.scss b/src/styles/components/_hero.scss index a2c1687..6be4e99 100644 --- a/src/styles/components/_hero.scss +++ b/src/styles/components/_hero.scss @@ -1,3 +1,5 @@ +@use 'sass:math'; + .hero { --hero-overflow: 320px; @@ -43,12 +45,29 @@ aspect-ratio: 21 / 9; } - > img { - margin: 0 calc(var(--hero-overflow) * -1); - object-fit: cover; + &-ratio { + position: relative; width: 100vw; min-width: $body-min-width; max-width: calc(100% + var(--hero-overflow) * 2); + margin: 0 calc(var(--hero-overflow) * -1); + padding-top: 100%; + + @include media-breakpoint-up(sm) { + padding-top: math.div(3, 4) * 100%; + } + + @include media-breakpoint-up(lg) { + padding-top: math.div(9, 21) * 100%; + } + } + + img { + position: absolute; + width: 100%; + height: 100%; + top: 0; + object-fit: cover; } } } diff --git a/src/styles/components/_tile.scss b/src/styles/components/_tile.scss index 8f05adf..f156ce7 100644 --- a/src/styles/components/_tile.scss +++ b/src/styles/components/_tile.scss @@ -3,7 +3,19 @@ --tile-border-color: var(--secondary-bg); --tile-color: var(--black); --tile-hover-background: var(--primary); - --tile-hover-color: var(--white); + --tile-hover-color: var(--color-on-primary); + + position: relative; + display: flex; + justify-content: center; + align-items: center; + background-color: var(--tile-background); + border: 1px solid var(--tile-border-color); + color: var(--tile-color); + text-decoration: none; + transition: + background-color 0.15s, + box-shadow 0.15s ease-in-out; &:hover, &:focus { @@ -14,25 +26,19 @@ &:focus, &:focus-visible { outline: none; - - > div { - box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color); - } + box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color); } - > div { - background-color: var(--tile-background); - border: 1px solid var(--tile-border-color); - color: var(--tile-color); - transition: - background-color 0.15s, - box-shadow 0.15s ease-in-out; + &-ratio { + display: block; + padding-top: 100%; } } [data-bs-theme='dark'] .tile { - --tile-background: var(--black); + --tile-background: var(--body-bg); --tile-color: var(--white); + --tile-border-color: var(--border-color); &:hover, &:focus { diff --git a/src/styles/themes/default.css b/src/styles/themes/default.css index 2d112ac..27d05df 100644 --- a/src/styles/themes/default.css +++ b/src/styles/themes/default.css @@ -8,7 +8,7 @@ --primary-rgb: 160, 30, 40; --primary-hover: #801820; --primary-hover-rgb: 128, 24, 32; - --primary-active: #f23333; + --primary-active: #801820; --primary-shadow-rgb: 203, 0, 0; --color-on-primary: #fff; @@ -19,16 +19,16 @@ [data-bs-theme='dark'] { color-scheme: dark; - --focus-ring-color: #a01e28; + --focus-ring-color: #ffffff; --focus-ring-width: 3px; - --primary: #a01e28; - --primary-rgb: 160, 30, 40; - --primary-hover: #801820; - --primary-hover-rgb: 128, 24, 32; - --primary-active: #f23333; + --primary: #fff; + --primary-rgb: 255, 255, 255; + --primary-hover: #e9ecef; + --primary-hover-rgb: 233, 236, 239; + --primary-active: #e9ecef; --primary-shadow-rgb: 255, 255, 255; - --color-on-primary: #fff; + --color-on-primary: #a01e28; --border-color: #827d73; --header-border-color: #827d73;