- Aktualisierung: - 15.08.2022 -
-- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et - dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet - clita kasd gubergren, no sea takimata sanctus. -
- {% - include 'partials::icon-link.twig' with { - href: '#', - text: 'Mehr', - icon: 'chevron-down' - } - %} -Personal Planstellen Ordnungsamt Koeln CSV
-Personal Planstellen Ordnungsamt Koeln JSON
-Personal Planstellen Ordnungsamt Koeln XLSX
-Baumkataster Köln 2019
- -- - JSON - PDF - -
-Baumkataster Köln 2018
- -- - JSON - PDF - -
-- Datensatz Inhalt: - - JSON - PDF - -
- -- Datensatz Metadaten im DCAT-AP.de-Format: - - JSON - PDF - -
-Lorem
-Lorem
-Lorem
-Feldbeschreibung, e.g. "Veröffentlichungsdatum"
-Wert, e.g. 2022-07-26
-Feldbeschreibung, e.g. "Veröffentlichungsdatum"
-Wert, e.g. 2022-07-26
-Feldbeschreibung, e.g. "Veröffentlichungsdatum"
-Wert, e.g. 2022-07-26
-Feldbeschreibung, e.g. "Veröffentlichungsdatum"
-Wert, e.g. 2022-07-26
-Feldbeschreibung, e.g. "Herausgeber"
-Wert, e.g. Redaktion offenedaten-koeln
-LOREM, LOREM, LOREM
-- Haben Sie eine Frage oder Feedback zu diesem Datensatz? Wir freuen uns, von Ihnen zu hören und bemühen - uns, zeitnah zu antworten. Geben Sie Ihre Frage bitte in das Formular ein. -
- - -+ Aktualisierung: + 15.08.2022 +
++ Formate: + JSON + RDF +
+ + {% endfor %} +Feldbeschreibung, e.g. "Veröffentlichungsdatum"
+Wert, e.g. 2022-07-26
++ Datensatz Inhalt: + JSON + RDF +
++ Datensatz Metadaten im DCAT-AP.de-Format: + JSON + RDF + TTL +
+{{ subtitle }}
@@ -25,7 +25,7 @@ {% if formats %}{{ name }}
++ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et + dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita + kasd gubergren, no sea takimata sanctus. +
+ ++
{% endif %} diff --git a/src/styles/base/_index.scss b/src/styles/base/_index.scss index e18d396..9fe2113 100644 --- a/src/styles/base/_index.scss +++ b/src/styles/base/_index.scss @@ -1,3 +1,4 @@ +@import 'mixins'; @import 'font'; @import 'theme'; @import 'positions'; diff --git a/src/styles/base/_mixins.scss b/src/styles/base/_mixins.scss new file mode 100644 index 0000000..91ef4c5 --- /dev/null +++ b/src/styles/base/_mixins.scss @@ -0,0 +1,5 @@ +@mixin device-without-touchscreen { + @media (any-pointer: fine) { + @content; + } +} diff --git a/src/styles/base/_theme.scss b/src/styles/base/_theme.scss index 47100b7..66dd4c1 100644 --- a/src/styles/base/_theme.scss +++ b/src/styles/base/_theme.scss @@ -2,9 +2,9 @@ color: var(--color-on-primary) !important; background-color: var(--primary) !important; --focus-ring-color: var(--color-on-primary); -} -.text-bg-secondary { - color: var(--color-on-secondary) !important; - background-color: var(--secondary) !important; + .btn-primary { + --btn-bg: var(--color-on-primary); + --btn-color: var(--primary); + } } diff --git a/src/styles/components/_badge.scss b/src/styles/components/_badge.scss new file mode 100644 index 0000000..42ae070 --- /dev/null +++ b/src/styles/components/_badge.scss @@ -0,0 +1,30 @@ +.badge { + font-weight: 400; + padding: 8px 16px; + font-size: 1rem; + line-height: 1.3; + + &.badge-small { + font-size: 0.9rem; + padding: 4px 8px; + } + + &.badge-large { + font-size: 1.25rem; + padding: 8px 16px; + } + + @each $breakpoint, $breakpoint-size in $grid-breakpoints { + @include media-breakpoint-up($breakpoint) { + &.badge-#{$breakpoint}-small { + font-size: 0.9rem; + padding: 4px 8px; + } + + &.badge-#{$breakpoint}-large { + font-size: 1.25rem; + padding: 8px 16px; + } + } + } +} diff --git a/src/styles/components/_button.scss b/src/styles/components/_button.scss index 1062854..3695a2e 100644 --- a/src/styles/components/_button.scss +++ b/src/styles/components/_button.scss @@ -37,21 +37,3 @@ --btn-disabled-color: var(--color-on-primary); --btn-disabled-border-color: var(--primary); } - -.btn-secondary { - --btn-bg: var(--secondary); - --btn-color: var(--color-on-secondary); - --btn-border-color: var(--secondary); - - --btn-hover-bg: var(--secondary-hover); - --btn-hover-color: var(--color-on-secondary); - --btn-hover-border-color: var(--secondary-hover); - - --btn-active-bg: var(--secondary-active); - --btn-active-color: var(--color-on-secondary); - --btn-active-border-color: var(--secondary-active); - - --btn-disabled-bg: var(--secondary); - --btn-disabled-color: var(--color-on-secondary); - --btn-disabled-border-color: var(--secondary); -} diff --git a/src/styles/components/_hero.scss b/src/styles/components/_hero.scss new file mode 100644 index 0000000..ab0e056 --- /dev/null +++ b/src/styles/components/_hero.scss @@ -0,0 +1,31 @@ +.hero { + --hero-overflow: 160px; + --hero-m-bottom: -10%; + + display: flex; + justify-content: center; + aspect-ratio: 4 / 3; + margin-bottom: var(--hero-m-bottom); + + @include media-breakpoint-up(md) { + aspect-ratio: 21 / 9; + } + + ~ * { + position: relative; + z-index: 10; + } + + > img { + margin: 0 calc(var(--hero-overflow) * -1); + object-fit: cover; + width: 100vw; + min-width: $body-min-width; + max-width: calc(100% + var(--hero-overflow) * 2); + + @include device-without-touchscreen { + $scrollbar-width: 15px; + width: calc(100vw - $scrollbar-width); + } + } +} diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss index e685260..c005beb 100644 --- a/src/styles/components/_index.scss +++ b/src/styles/components/_index.scss @@ -1,7 +1,9 @@ @import 'header'; @import 'footer'; +@import 'badge'; @import 'button'; -@import 'link'; @import 'form'; -@import 'tile'; +@import 'hero'; +@import 'link'; @import 'pagination'; +@import 'tile'; diff --git a/src/styles/components/_tile.scss b/src/styles/components/_tile.scss index f811892..8f05adf 100644 --- a/src/styles/components/_tile.scss +++ b/src/styles/components/_tile.scss @@ -1,5 +1,6 @@ .tile { --tile-background: var(--secondary-bg); + --tile-border-color: var(--secondary-bg); --tile-color: var(--black); --tile-hover-background: var(--primary); --tile-hover-color: var(--white); @@ -21,6 +22,7 @@ > div { background-color: var(--tile-background); + border: 1px solid var(--tile-border-color); color: var(--tile-color); transition: background-color 0.15s, diff --git a/src/styles/styles.scss b/src/styles/styles.scss index 707f208..e344138 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -2,6 +2,7 @@ $prefix: ''; $enable-negative-margins: true; +$body-min-width: 375px; // Required @import 'bootstrap/scss/variables'; @@ -49,3 +50,7 @@ $enable-negative-margins: true; @import 'base'; @import 'components'; + +body { + min-width: $body-min-width; +} diff --git a/src/styles/themes/default.css b/src/styles/themes/default.css index 7b6ffc8..52637d0 100644 --- a/src/styles/themes/default.css +++ b/src/styles/themes/default.css @@ -11,14 +11,6 @@ --primary-active: #f23333; --primary-shadow-rgb: 203, 0, 0; --color-on-primary: #fff; - - --secondary: #fff; - --secondary-rgb: 255, 255, 255; - --secondary-hover: #e7e7e7; - --secondary-hover-rgb: 231, 231, 231; - --secondary-active: #e7e7e7; - --secondary-shadow-rgb: 203, 0, 0; - --color-on-secondary: #ef0000; } [data-bs-theme='dark'] { @@ -34,12 +26,4 @@ --primary-active: #f23333; --primary-shadow-rgb: 255, 255, 255; --color-on-primary: #fff; - - --secondary: #fff; - --secondary-rgb: 255, 255, 255; - --secondary-hover: #e7e7e7; - --secondary-hover-rgb: 231, 231, 231; - --secondary-active: #e7e7e7; - --secondary-shadow-rgb: 203, 0, 0; - --color-on-secondary: #ef0000; }