+
diff --git a/components/01-atoms/text/block/code/_code.scss b/components/01-atoms/text/block/code/_code.scss
index 95a23c877..3b7174026 100644
--- a/components/01-atoms/text/block/code/_code.scss
+++ b/components/01-atoms/text/block/code/_code.scss
@@ -3,17 +3,9 @@ pre > code {
display: block;
margin-bottom: $spacer-base;
- border-right: 2px solid $code-snippet-border-color;
background-color: $code-background-color;
padding: $spacer-xs $spacer-xs $spacer-xs $spacer-md;
overflow: auto;
- line-height: $code-snippet-line-height-small;
- font-size: $code-snippet-font-size-small;
-}
-
-@media screen and (min-width: $grid-breakpoint-md) {
- pre > code {
- line-height: $code-snippet-line-height;
- font-size: $code-snippet-font-size;
- }
+ line-height: $paragraph-line-height;
+ font-size: $font-size-xs;
}
diff --git a/components/01-atoms/text/block/date/_date.scss b/components/01-atoms/text/block/date/_date.scss
index 78c1d735e..ef3a3e063 100644
--- a/components/01-atoms/text/block/date/_date.scss
+++ b/components/01-atoms/text/block/date/_date.scss
@@ -1,9 +1,7 @@
-$event-date-section-height: ($label-font-size * $label-line-height) + (2 * $spacer-xxs);
-
.date {
@extend %heading-font-bold;
- line-height: $date-line-height;
- font-size: $date-font-size;
+
+ font-size: $font-size-base;
}
//Event Date for Teasers
@@ -11,7 +9,6 @@ $event-date-section-height: ($label-font-size * $label-line-height) + (2 * $spac
display: flex;
flex-direction: column;
justify-content: space-around;
- margin-top: -$event-date-section-height;
background-color: $date-section-background-color;
}
@@ -19,7 +16,7 @@ $event-date-section-height: ($label-font-size * $label-line-height) + (2 * $spac
display: flex;
flex-direction: row;
align-items: center;
- justify-content: space-around;
+ justify-content: space-between;
}
.event-date {
@@ -38,9 +35,8 @@ $event-date-section-height: ($label-font-size * $label-line-height) + (2 * $spac
.event-day {
@extend %heading-font-heavy;
- line-height: $event-day-line-height-small;
color: $date-section-day-color;
- font-size: $event-day-font-size-small;
+ font-size: $font-size-lg;
}
.event-month {
@@ -48,9 +44,8 @@ $event-date-section-height: ($label-font-size * $label-line-height) + (2 * $spac
margin-bottom: 0;
text-transform: uppercase;
- line-height: $event-month-line-height-small;
color: $date-section-month-color;
- font-size: $event-month-font-size-small;
+ font-size: $font-size-xs;
}
.event-year {
@@ -59,9 +54,8 @@ $event-date-section-height: ($label-font-size * $label-line-height) + (2 * $spac
margin-left: $spacer-xs;
border-left: 1px solid $date-section-year-color;
padding-left: $spacer-xxs;
- line-height: $event-year-line-height;
color: $date-section-year-color;
- font-size: $event-year-font-size;
+ font-size: $font-size-xs;
}
.event-date-separator {
@@ -73,7 +67,6 @@ $event-date-section-height: ($label-font-size * $label-line-height) + (2 * $spac
// Breakpoints
@media screen and (min-width: $grid-breakpoint-md) {
-
.event-date-section {
margin-top: 0;
width: 80px;
@@ -88,14 +81,12 @@ $event-date-section-height: ($label-font-size * $label-line-height) + (2 * $spac
}
.event-day {
- line-height: $event-day-line-height;
- font-size: $event-day-font-size;
+ font-size: $font-size-xl;
}
.event-month {
margin-bottom: $spacer-xxs;
- line-height: $event-month-line-height;
- font-size: $event-month-font-size;
+ font-size: $font-size-base;
}
.event-year {
@@ -103,8 +94,7 @@ $event-date-section-height: ($label-font-size * $label-line-height) + (2 * $spac
border-top: 1px solid $date-section-year-color;
border-left: 0;
padding-left: 0;
- line-height: $event-year-line-height;
- font-size: $event-year-font-size;
+ font-size: $font-size-xs;
}
.event-date-separator {
diff --git a/components/01-atoms/text/block/duration/_duration.scss b/components/01-atoms/text/block/duration/_duration.scss
index 1ad945a06..ee306e7ce 100644
--- a/components/01-atoms/text/block/duration/_duration.scss
+++ b/components/01-atoms/text/block/duration/_duration.scss
@@ -1,5 +1,5 @@
.duration {
@extend %body-font-italic;
- line-height: $date-line-height;
- font-size: $duration-font-size;
+
+ font-size: $font-size-sm;
}
diff --git a/components/01-atoms/text/block/edition/_edition.scss b/components/01-atoms/text/block/edition/_edition.scss
index b7538dae5..e2c703e6a 100644
--- a/components/01-atoms/text/block/edition/_edition.scss
+++ b/components/01-atoms/text/block/edition/_edition.scss
@@ -1,73 +1,86 @@
-$event-date-section-height: ($label-font-size * $label-line-height) + (2 * $spacer-xxs);
-
-
+$edition-font-size: $font-size-base;
//Edition Label for Artist Collabo
.edition-section {
- @extend %heading-font-bold;
display: flex;
flex-direction: column;
+ align-items: center;
justify-content: space-around;
- margin-right: auto;
- margin-left: auto;
- max-width: 250px;
+ margin-bottom: $spacer-sm;
text-align: center;
-
}
.edition-separator {
transform: rotate(90deg);
- margin-top: $spacer-xl;
+ margin-bottom: $spacer-lg;
border: 0;
background-color: $brand-gray;
- width: 3 * $spacer-base;
+ width: $spacer-xl;
height: 1px;
}
.edition {
- margin-top: $spacer-xl;
+ @extend %heading-font-bold;
+
+ margin-bottom: $spacer-xs;
text-transform: uppercase;
- line-height: $edition-line-height;
- font-size: $edition-font-size;
+ color: $brand-gray;
+ font-size: $font-size-md;
}
.edition-date {
+ @extend %heading-font-heavy;
+
display: flex;
flex-direction: column;
align-items: center;
- margin-bottom: $spacer-md;
- padding: $spacer-sm $spacer-xl 0;
- font-size: 1.5 * $edition-font-size;
+ font-size: $font-size-xxl;
+
+ &--edition-1 {
+ color: $brand-blue;
+ }
+
+ &--edition-2 {
+ color: $brand-petrol;
+ }
}
.edition-date-separator {
transform: rotate(90deg);
margin: $spacer-sm 0;
border: 0;
- background-color: $artwork-title-color;
+ background-color: $brand-red;
min-width: $spacer-base;
height: 5px;
- &--variant {
- background-color: $artwork-title-color--variant;
+ &--edition-2 {
+ background-color: $brand-apricot;
}
}
-
-
-
// Breakpoints
@media screen and (min-width: $grid-breakpoint-md) {
+ .edition-section {
+ margin-bottom: $spacer-xxs;
+ }
+
+ .edition {
+ font-size: $font-size-lg;
+ }
+
+ .edition-separator {
+ margin-bottom: $spacer-xl;
+ width: ms(20);
+ }
.edition-date {
flex-direction: row;
- font-size: 2 * $edition-font-size;
-
+ font-size: $font-size-xxxxl;
}
.edition-date-separator {
transform: rotate(0deg);
- margin: 0 $spacer-xs;
-
+ margin: 0 $spacer-xxs;
+ height: 8px;
}
}
diff --git a/components/01-atoms/text/block/edition/edition.html b/components/01-atoms/text/block/edition/edition.html
index 860452523..796532d66 100644
--- a/components/01-atoms/text/block/edition/edition.html
+++ b/components/01-atoms/text/block/edition/edition.html
@@ -1,21 +1,19 @@
-
- Time period of artist edition
-
-
-
-
Edition
-
18
-
- 19
-
-
+Time period of artist edition
+
+
+
+
Edition
+
18
+
+ 19
+
+
-
-
-
Edition
-
20
-
- 21
-
-
+
+
+
Edition
+
20
+
+ heute
+
diff --git a/components/01-atoms/text/block/footnote/_footnote.scss b/components/01-atoms/text/block/footnote/_footnote.scss
index 8412cfff9..e51be93c1 100644
--- a/components/01-atoms/text/block/footnote/_footnote.scss
+++ b/components/01-atoms/text/block/footnote/_footnote.scss
@@ -17,8 +17,8 @@
@extend %heading-font-regular;
margin-bottom: $spacer-sm;
- line-height: $footnote-line-height-small;
- font-size: $footnote-font-size-small;
+ line-height: $paragraph-line-height;
+ font-size: $font-size-xxs;
}
li {
@@ -39,6 +39,7 @@
left: -.5rem;
width: $spacer-sm;
text-align: right;
+ color: $footnote-index-color;
content: counter(number);
counter-increment: number;
}
@@ -54,8 +55,7 @@
& p {
@extend %heading-font-regular;
margin: 0;
- line-height: $tooltip-line-height-small;
- font-size: $tooltip-font-size-small;
+ font-size: $font-size-xxs;
}
}
@@ -64,8 +64,7 @@
.footnotes__list {
li,
li > p {
- line-height: $footnote-line-height;
- font-size: $footnote-font-size;
+ font-size: $font-size-base;
}
}
@@ -73,8 +72,7 @@
max-width: 40%;
& p {
- line-height: $tooltip-line-height;
- font-size: $tooltip-font-size;
+ font-size: $font-size-base;
}
}
}
diff --git a/components/01-atoms/text/block/heading/_heading.scss b/components/01-atoms/text/block/heading/_heading.scss
index ab48bee60..6bdd2e2d7 100644
--- a/components/01-atoms/text/block/heading/_heading.scss
+++ b/components/01-atoms/text/block/heading/_heading.scss
@@ -7,11 +7,12 @@
h1 {
@extend %heading-font-heavy;
@extend %manual-hyphenation;
+
margin-top: 0;
margin-bottom: $spacer-lg;
- line-height: $h1-line-height;
+ line-height: $heading-line-height;
color: $h1-color;
- font-size: $h1-font-size-small;
+ font-size: $font-size-xl;
}
// H2
@@ -19,11 +20,12 @@ h1 {
h2 {
@extend %heading-font-heavy;
@extend %manual-hyphenation;
+
margin-top: 0;
margin-bottom: $spacer-base;
- line-height: $h2-line-height;
+ line-height: $heading-line-height;
color: $h2-color;
- font-size: $h2-font-size-small;
+ font-size: $font-size-lg;
}
// H3
@@ -31,11 +33,12 @@ h2 {
h3 {
@extend %heading-font-heavy;
@extend %manual-hyphenation;
+
margin-top: 0;
margin-bottom: $spacer-md;
- line-height: $h3-line-height;
+ line-height: $heading-line-height;
color: $h3-color;
- font-size: $h3-font-size-small;
+ font-size: $font-size-md;
}
// H4
@@ -43,11 +46,12 @@ h3 {
h4 {
@extend %heading-font-bold;
@extend %manual-hyphenation;
+
margin-top: 0;
margin-bottom: $spacer-sm;
- line-height: $h4-line-height;
+ line-height: $heading-line-height;
color: $h4-color;
- font-size: $h4-font-size-small;
+ font-size: $font-size-sm;
}
// H5
@@ -55,11 +59,12 @@ h4 {
h5 {
@extend %heading-font-bold;
@extend %manual-hyphenation;
+
margin-top: 0;
margin-bottom: $spacer-xs;
- line-height: $h5-line-height;
+ line-height: $heading-line-height;
color: $h5-color;
- font-size: $h5-font-size-small;
+ font-size: $font-size-base;
}
// H6
@@ -67,14 +72,14 @@ h5 {
h6 {
@extend %heading-font-heavy;
@extend %manual-hyphenation;
+
margin-top: 0;
margin-bottom: $spacer-xs;
- line-height: $h6-line-height;
+ line-height: $heading-line-height;
color: $h6-color;
- font-size: $h6-font-size-small;
+ font-size: $font-size-base;
}
-
// Remove links stylings inside headlines
h1,
h2,
@@ -89,25 +94,25 @@ h6 {
.teaser-section-heading {
@extend %h2;
+
margin: 0 auto $spacer-base;
text-align: center;
text-transform: uppercase;
- line-height: $teaser-section-heading-line-height-small;
- font-size: $teaser-section-heading-font-size-small;
+ font-size: $font-size-lg;
}
.upcase-heading {
@extend %h5;
+
margin: 0 auto $spacer-md;
text-transform: uppercase;
- line-height: $teaser-section-heading-line-height-small;
- font-size: $teaser-section-heading-font-size-small;
+ font-size: $font-size-xxl;
}
// Prevent older Browsers from screwing up with max-content widths
@supports (width: max-content) {
.teaser-section-heading {
- border-bottom: 4px solid $brand-text;
+ border-bottom: 4px solid $teaser-section-heading-border-color;
width: max-content;
}
@@ -130,7 +135,7 @@ h6 {
@extend %h3;
margin-bottom: $spacer-sm;
- border-top: 8px solid $brand-interaction;
+ border-top: 8px solid $section-heading-border-color;
padding-top: $spacer-sm;
}
@@ -143,48 +148,35 @@ h6 {
@media screen and (min-width: $grid-breakpoint-md) {
%h1,
h1 {
- line-height: $h1-line-height;
- font-size: $h1-font-size;
+ font-size: $font-size-xxxl;
}
// H2
%h2,
h2 {
- line-height: $h2-line-height;
- font-size: $h2-font-size;
+ font-size: $font-size-xl;
}
// H3
%h3,
h3 {
- line-height: $h3-line-height;
- font-size: $h3-font-size;
+ font-size: $font-size-lg;
}
// H4
%h4,
h4 {
- line-height: $h4-line-height;
- font-size: $h4-font-size;
+ font-size: $font-size-md;
}
// H5
%h5,
h5 {
- line-height: $h5-line-height;
- font-size: $h5-font-size;
- }
-
- // H6
- %h6,
- h6 {
- line-height: $h6-line-height;
- font-size: $h6-font-size;
+ font-size: $font-size-sm;
}
.teaser-section-heading {
margin-bottom: $spacer-lg;
- line-height: $teaser-section-heading-line-height;
- font-size: $teaser-section-heading-font-size;
+ font-size: $font-size-xxl;
}
}
diff --git a/components/01-atoms/text/block/label/_label.scss b/components/01-atoms/text/block/label/_label.scss
index 275b166c1..78d7192eb 100644
--- a/components/01-atoms/text/block/label/_label.scss
+++ b/components/01-atoms/text/block/label/_label.scss
@@ -1,8 +1,7 @@
.label {
display: inline-block;
padding: $spacer-xxs;
- line-height: $label-line-height-small;
- font-size: $label-font-size-small;
+ font-size: $font-size-xs;
&.talk {
@extend %heading-font-bold;
@@ -33,8 +32,7 @@
.label-big {
display: inline-block;
padding: $spacer-xs;
- line-height: $label-big-line-height;
- font-size: $label-big-font-size;
+ font-size: $font-size-base;
&.hint {
@extend %heading-font-bold;
@@ -55,15 +53,13 @@
&.badge--inverted {
background-color: $badge-background-color-inverted;
+ color: $badge-text-color-inverted;
}
}
-
//Breakpoints
@media screen and (min-width: $grid-breakpoint-md) {
.label {
margin-right: $spacer-xxs;
- line-height: $label-line-height;
- font-size: $label-font-size;
}
}
diff --git a/components/01-atoms/text/block/label/label.html b/components/01-atoms/text/block/label/label.html
index 5ca6b5965..e04b48af7 100644
--- a/components/01-atoms/text/block/label/label.html
+++ b/components/01-atoms/text/block/label/label.html
@@ -1,18 +1,28 @@
-
- Vortrag
-
-
- Training
-
-
- Folien verfügbar
-
-
- Ausverkauft!
-
-
- Neu!
-
-
- Neu.
+
+
+
+ Vortrag
+
+
+
+ Training
+
+
+
+ Folien verfügbar
+
+
+
+ Ausverkauft!
+
+
+
+ Neu!
+
+
+
+ Neu.
+
+
+
diff --git a/components/01-atoms/text/block/list/_checked-list.scss b/components/01-atoms/text/block/list/_checked-list.scss
index 417f2d584..0478b8577 100644
--- a/components/01-atoms/text/block/list/_checked-list.scss
+++ b/components/01-atoms/text/block/list/_checked-list.scss
@@ -9,8 +9,9 @@ $list-indent: $spacer-xs + $spacer-sm;
&::before {
@extend %icon;
+
position: absolute;
- top: .45em;
+ top: 0.45em;
left: 0;
color: $bullet-list-color;
content: $icon-check;
diff --git a/components/01-atoms/text/block/list/_ordered-list.scss b/components/01-atoms/text/block/list/_ordered-list.scss
index ab3ea33ad..9f356785b 100644
--- a/components/01-atoms/text/block/list/_ordered-list.scss
+++ b/components/01-atoms/text/block/list/_ordered-list.scss
@@ -14,14 +14,14 @@ ol:not([class]) {
@extend %body-font-regular;
@include list-unstyled;
- margin-bottom: $content-spacer-base;
+ margin-bottom: $spacer-md;
line-height: $paragraph-line-height;
- font-size: $paragraph-font-size-small;
+ font-size: $font-size-base;
counter-reset: number;
@media screen and (min-width: $grid-breakpoint-md) {
line-height: $paragraph-line-height;
- font-size: $paragraph-font-size;
+ font-size: $font-size-sm;
}
& > li {
@@ -33,19 +33,20 @@ ol:not([class]) {
@extend %heading-font-bold;
position: absolute;
- top: -.2rem;
- left: -.5rem;
+ top: -0.2rem;
+ left: -0.5rem;
width: $number-space;
text-align: right;
line-height: $paragraph-line-height;
- font-size: $paragraph-font-size-small;
+ color: $bullet-list-color-secondary;
+ font-size: $font-size-base;
content: counter(number);
counter-increment: number;
@media screen and (min-width: $grid-breakpoint-md) {
- top: -.23rem;
+ top: -0.23rem;
line-height: $paragraph-line-height;
- font-size: $paragraph-font-size;
+ font-size: $font-size-sm;
}
}
}
@@ -55,11 +56,11 @@ ol:not([class]) {
// to blend into the outer list.
margin-top: $spacer-xs;
line-height: $paragraph-line-height;
- font-size: $paragraph-font-size-small;
+ font-size: $font-size-base;
@media screen and (min-width: $grid-breakpoint-md) {
line-height: $paragraph-line-height;
- font-size: $paragraph-font-size;
+ font-size: $font-size-sm;
}
&,
diff --git a/components/01-atoms/text/block/list/_tuple-list.scss b/components/01-atoms/text/block/list/_tuple-list.scss
index dbbd2a0d0..09e2586b8 100644
--- a/components/01-atoms/text/block/list/_tuple-list.scss
+++ b/components/01-atoms/text/block/list/_tuple-list.scss
@@ -6,7 +6,9 @@ $tuple-list-label-width: 8rem;
.tuple-list__label {
@extend %teaser-caption;
+
display: block;
+ color: $tupel-list-label-color;
}
.tuple-list__entry {
@@ -14,8 +16,9 @@ $tuple-list-label-width: 8rem;
}
.tuple-list__value {
+ @extend %heading-font-regular;
+
display: block;
- font-family: $font-family-sans-serif;
}
@media screen and (min-width: $grid-breakpoint-md) {
@@ -24,7 +27,7 @@ $tuple-list-label-width: 8rem;
margin-bottom: $spacer-xxs;
grid-template-columns: $tuple-list-label-width auto;
grid-template-rows: auto;
- grid-template-areas: 'label value';
+ grid-template-areas: "label value";
}
.tuple-list__label {
diff --git a/components/01-atoms/text/block/list/_unordered-list.scss b/components/01-atoms/text/block/list/_unordered-list.scss
index f5274db8e..85949e181 100644
--- a/components/01-atoms/text/block/list/_unordered-list.scss
+++ b/components/01-atoms/text/block/list/_unordered-list.scss
@@ -22,16 +22,16 @@ ul:not([class]),
&::before {
position: absolute;
- top: .4rem; //magic number
+ top: 0.4rem; //magic number
left: 0;
border-radius: 50%;
- background: $bullet-list-color;
+ background: $bullet-list-color-primary;
width: $bullet-size;
height: $bullet-size;
- content: '';
+ content: "";
@media screen and (min-width: $grid-breakpoint-md) {
- top: .5rem; //magic number
+ top: 0.5rem; //magic number
}
}
}
@@ -48,13 +48,11 @@ ul:not([class]),
// Change bullet appeareance in nested contexts
li::before {
- border: 1px solid $bullet-list-color;
- background: $bullet-list-bg-color;
+ background: $bullet-list-color-secondary;
}
}
}
-
// ---- Bold Bullet Lists ----------------------------------------------------------
//
.bold-list {
@@ -62,10 +60,10 @@ ul:not([class]),
& > li {
&::before {
- top: .59rem; //magic number
+ top: 0.59rem; //magic number
@media screen and (min-width: $grid-breakpoint-md) {
- top: .73rem; //magic number
+ top: 0.73rem; //magic number
}
}
}
diff --git a/components/01-atoms/text/block/paragraph/_paragraph.scss b/components/01-atoms/text/block/paragraph/_paragraph.scss
index 93a9d0164..49b2175d5 100644
--- a/components/01-atoms/text/block/paragraph/_paragraph.scss
+++ b/components/01-atoms/text/block/paragraph/_paragraph.scss
@@ -1,9 +1,9 @@
p {
@extend %body-font-regular;
- margin-top: 0;
- margin-bottom: $content-spacer-base;
- line-height: $paragraph-line-height-small;
- font-size: $paragraph-font-size-small;
+
+ margin-bottom: $spacer-md;
+ line-height: $paragraph-line-height;
+ font-size: $font-size-base;
&:not([class]) {
@extend %improved-hyphenation-text;
@@ -11,16 +11,18 @@ p {
&.lead {
@extend %body-font-italic;
- line-height: $paragraph-lead-line-height-small;
- font-size: $paragraph-lead-font-size-small;
+
+ line-height: $paragraph-line-height;
+ font-size: $font-size-sm;
}
&.display,
&.standalone {
@extend %heading-font-regular;
+
margin-bottom: 0;
- line-height: $paragraph-line-height-small;
- font-size: $paragraph-font-size-small;
+ line-height: $paragraph-line-height;
+ font-size: $font-size-base;
}
&.display {
@@ -30,12 +32,10 @@ p {
@media screen and (min-width: $grid-breakpoint-md) {
p {
- line-height: $paragraph-line-height;
- font-size: $paragraph-font-size;
+ font-size: $font-size-sm;
&.lead {
- line-height: $paragraph-lead-line-height;
- font-size: $paragraph-lead-font-size;
+ font-size: $font-size-md;
}
}
}
diff --git a/components/01-atoms/text/block/quote/_block-quote.scss b/components/01-atoms/text/block/quote/_block-quote.scss
index 1072b0bc1..8836d2bbe 100644
--- a/components/01-atoms/text/block/quote/_block-quote.scss
+++ b/components/01-atoms/text/block/quote/_block-quote.scss
@@ -7,13 +7,13 @@
blockquote:not([class]),
.blockquote {
position: relative;
- margin: 0 0 $content-spacer-base;
+ margin: 0 0 $spacer-md;
&,
& > p {
@extend %body-font-italic;
- line-height: $base-line-height;
- font-size: $paragraph-font-size;
+ line-height: $paragraph-line-height;
+ font-size: $font-size-sm;
}
@media screen and (min-width: $grid-breakpoint-md) {
@@ -25,7 +25,7 @@ blockquote:not([class]),
left: -$spacer-lg;
background-color: $quote-color;
width: 10px;
- content: '';
+ content: "";
}
}
}
diff --git a/components/01-atoms/text/block/quote/_pull-quote.scss b/components/01-atoms/text/block/quote/_pull-quote.scss
index 4ce414e65..cbeaddfc0 100644
--- a/components/01-atoms/text/block/quote/_pull-quote.scss
+++ b/components/01-atoms/text/block/quote/_pull-quote.scss
@@ -2,8 +2,7 @@
//
pull-quote > blockquote,
.pullquote {
-
- margin: 0 0 $content-spacer-base;
+ margin: 0 0 $spacer-md;
border: 1px solid $pull-quote-border-color;
border-width: 1px 0;
padding: $spacer-sm;
@@ -13,9 +12,9 @@ pull-quote > blockquote,
@extend %heading-font-bold;
text-align: center;
- line-height: $pull-quote-line-height;
+ line-height: $paragraph-line-height;
color: $pull-quote-color;
- font-size: $pull-quote-font-size;
+ font-size: $font-size-sm;
}
& > p {
@@ -26,7 +25,7 @@ pull-quote > blockquote,
@media screen and (min-width: $grid-breakpoint-md) {
pull-quote > blockquote,
.pullquote {
- margin: 0 auto $content-spacer-base;
+ margin: 0 auto $spacer-md;
width: 80%;
}
}
diff --git a/components/01-atoms/text/block/table/_table.scss b/components/01-atoms/text/block/table/_table.scss
index 7e47bc96c..67958616e 100644
--- a/components/01-atoms/text/block/table/_table.scss
+++ b/components/01-atoms/text/block/table/_table.scss
@@ -9,9 +9,9 @@
caption {
@extend %heading-font-regular;
+ margin-top: $spacer-xxs;
caption-side: bottom;
- line-height: $figcaption-line-height;
- font-size: $figcaption-font-size;
+ font-size: $font-size-xs;
}
thead,
@@ -19,9 +19,8 @@
@extend %heading-font-bold;
background-color: $table-header-background-color;
- line-height: $content-table-head-line-height-small;
color: $table-header-text-color;
- font-size: $content-table-head-font-size-small;
+ font-size: $font-size-base;
th {
padding: $spacer-sm $spacer-xs;
@@ -44,31 +43,20 @@
padding: $spacer-xs;
vertical-align: top;
- line-height: $content-table-body-line-height-small;
- font-size: $content-table-body-font-size-small;
+
+ font-size: $font-size-xs;
}
}
-@media screen and (min-width: $grid-breakpoint-md) {
+@media screen and (min-width: $grid-breakpoint-md) {
.table {
margin-bottom: $spacer-sm;
-
- thead,
- tfoot {
- line-height: $content-table-head-line-height;
- font-size: $content-table-head-font-size;
- }
-
- td {
- line-height: $content-table-body-line-height;
- font-size: $content-table-body-font-size;
- }
}
}
// Responsive tables code taken from BS4
// sass-lint:disable no-vendor-prefixes
-@media screen and (max-width: $grid-breakpoint-sm) {
+@media screen and (max-width: $grid-breakpoint-sm) {
.table {
display: block;
width: 100%;
diff --git a/components/01-atoms/text/block/tag-list/_tag-list.scss b/components/01-atoms/text/block/tag-list/_tag-list.scss
index cfb6f8fd3..5f05531d4 100644
--- a/components/01-atoms/text/block/tag-list/_tag-list.scss
+++ b/components/01-atoms/text/block/tag-list/_tag-list.scss
@@ -15,15 +15,15 @@
@extend %heading-font-bold;
display: inline-block;
- transition: .2s background-color ease-in-out;
+ transition: 0.2s background-color ease-in-out;
background: $tag-background-color;
padding: $spacer-xs $spacer-sm;
text-transform: lowercase;
text-decoration: none;
- line-height: $tag-line-height-small;
+
color: $tag-text-color;
- font-size: $tag-font-size-small;
+ font-size: $font-size-base;
&:hover {
background-color: $tag-background-color-hover;
@@ -35,9 +35,4 @@
.tag-list__item {
margin: $spacer-xxs;
}
-
- .tag-list__link {
- line-height: $tag-line-height;
- font-size: $tag-font-size;
- }
}
diff --git a/components/01-atoms/text/inline/accentuation/_accentuation.scss b/components/01-atoms/text/inline/accentuation/_accentuation.scss
index a4d2ab538..9f97be8c3 100644
--- a/components/01-atoms/text/inline/accentuation/_accentuation.scss
+++ b/components/01-atoms/text/inline/accentuation/_accentuation.scss
@@ -4,8 +4,7 @@ code {
display: inline-block;
background-color: $code-background-color;
padding: 2px $spacer-xxs;
- line-height: $code-line-height;
- font-size: $code-font-size;
+ font-size: $font-size-xs;
}
mark {
diff --git a/components/01-atoms/text/inline/link/_link.scss b/components/01-atoms/text/inline/link/_link.scss
index 88a19dfd0..07b44f24e 100644
--- a/components/01-atoms/text/inline/link/_link.scss
+++ b/components/01-atoms/text/inline/link/_link.scss
@@ -2,11 +2,11 @@
// Default Link - used on all class-less link elements
//
-$hover-padding: .1em;
+$hover-padding: 0.1em;
.link-default,
a:not([class]) {
- transition: standard-transition(padding-bottom, padding-top, background-color);
+ transition: standard-transition(background-color);
border-bottom: 1px solid $link-color;
text-decoration: none;
color: $link-color;
@@ -15,11 +15,9 @@ a:not([class]) {
&:hover {
outline: none;
background-color: $link-hover-color-light;
- padding-top: $hover-padding;
- padding-bottom: $hover-padding;
}
- &[href='mailto'] {
+ &[href="mailto"] {
hyphens: none;
}
}
@@ -27,8 +25,9 @@ a:not([class]) {
.link--muted {
@extend %heading-font-bold;
@extend %link-unstyled;
+
color: $brand-muted;
- font-size: $link-teaser-font-size;
+ font-size: $font-size-xs;
}
.link-teaser {
@@ -37,9 +36,8 @@ a:not([class]) {
border-bottom: 3px solid $link-teaser-border-color;
padding-bottom: 2px;
- line-height: $link-teaser-line-height;
color: $link-teaser-text-color;
- font-size: $link-teaser-font-size;
+ font-size: $font-size-xs;
&.inverted-text-color {
border-bottom: 3px solid $link-teaser-inverted-text-border-color;
diff --git a/components/01-atoms/text/inline/link/link.html b/components/01-atoms/text/inline/link/link.html
index 6bc2718fe..afe156741 100644
--- a/components/01-atoms/text/inline/link/link.html
+++ b/components/01-atoms/text/inline/link/link.html
@@ -11,7 +11,7 @@
diff --git a/components/01-atoms/togglers/collapse-toggler/_collapse-toggler.scss b/components/01-atoms/togglers/collapse-toggler/_collapse-toggler.scss
index a7aa309e1..2c18aacaf 100644
--- a/components/01-atoms/togglers/collapse-toggler/_collapse-toggler.scss
+++ b/components/01-atoms/togglers/collapse-toggler/_collapse-toggler.scss
@@ -1,6 +1,7 @@
.collapse-toggler {
@extend %heading-font-heavy;
@extend %link-unstyled;
+
cursor: pointer;
.collapse-toggler__flop {
diff --git a/components/01-atoms/togglers/multi-toggler/multi-toggler.html b/components/01-atoms/togglers/multi-toggler/multi-toggler.html
index 678801f35..394bcb972 100644
--- a/components/01-atoms/togglers/multi-toggler/multi-toggler.html
+++ b/components/01-atoms/togglers/multi-toggler/multi-toggler.html
@@ -1,8 +1,7 @@
-
-
- Multi-Toggler
-
-
- Consectetur nisi officia sit eu nisi. Deserunt occaecat in sunt ullamco culpa est in consectetur laboris anim culpa duis. Occaecat ullamco pariatur mollit enim laboris duis. Qui laborum sunt adipisicing aliqua consequat voluptate fugiat commodo eiusmod voluptate.
-
-
+
+
+ Multi-Toggler
+
+
+ Consectetur nisi officia sit eu nisi. Deserunt occaecat in sunt ullamco culpa est in consectetur laboris anim culpa duis. Occaecat ullamco pariatur mollit enim laboris duis. Qui laborum sunt adipisicing aliqua consequat voluptate fugiat commodo eiusmod voluptate.
+
diff --git a/components/01-atoms/visual-elements/animation/waiting-dots/_waiting-dots.scss b/components/01-atoms/visual-elements/animation/waiting-dots/_waiting-dots.scss
index a0a3644f1..103bee814 100644
--- a/components/01-atoms/visual-elements/animation/waiting-dots/_waiting-dots.scss
+++ b/components/01-atoms/visual-elements/animation/waiting-dots/_waiting-dots.scss
@@ -9,12 +9,11 @@
background: none;
width: 50px;
height: 20px;
-
}
.duo,
.dot {
- animation-duration: .8s;
+ animation-duration: 0.8s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
@@ -27,10 +26,9 @@
animation-name: onOff;
animation-direction: reverse;
opacity: 0;
- }
+ }
}
-
.duo2 {
left: 30px;
animation-name: spin;
@@ -38,18 +36,15 @@
.dot-b {
animation-name: onOff;
- }
+ }
}
-
.dot {
position: absolute;
border-radius: 10px;
- background: $brand-red;
+ background: $dot-color;
width: 20px;
height: 20px;
-
-
}
.dot-a {
@@ -60,7 +55,6 @@
right: 0;
}
-
@keyframes spin {
0% {
transform: rotate(0deg);
@@ -86,9 +80,9 @@
50% {
opacity: 1;
- }
+ }
100% {
opacity: 1;
- }
+ }
}
diff --git a/components/01-atoms/visual-elements/horizontal-line/_horizontal-line.scss b/components/01-atoms/visual-elements/horizontal-line/_horizontal-line.scss
index 8400b10bf..576e18711 100644
--- a/components/01-atoms/visual-elements/horizontal-line/_horizontal-line.scss
+++ b/components/01-atoms/visual-elements/horizontal-line/_horizontal-line.scss
@@ -1,5 +1,5 @@
hr {
- margin-bottom: $content-spacer-base; //FIME We need a page layout that manages all horizontal spacingsrg
+ margin-bottom: $spacer-md; //FIME We need a page layout that manages all horizontal spacingsrg
border: 0;
background-color: $horizontal-line-color;
height: 3px;
diff --git a/components/02-molecules/article&blog-post-elements/author-bio/_author-bio.scss b/components/02-molecules/article&blog-post-elements/author-bio/_author-bio.scss
index 029127644..26e239233 100644
--- a/components/02-molecules/article&blog-post-elements/author-bio/_author-bio.scss
+++ b/components/02-molecules/article&blog-post-elements/author-bio/_author-bio.scss
@@ -1,5 +1,6 @@
- // tiny space between name and info
-$author-text-margin: .18rem;
+$author-bio-image-offset: ms(22) / 2;
+// tiny space between name and info
+$author-text-margin: 0.18rem;
.author-bio {
position: relative;
@@ -40,7 +41,10 @@ $author-text-margin: .18rem;
}
.author-bio__name {
- @extend %author-name;
+ @extend %heading-font-bold;
+
+ text-transform: uppercase;
+ font-size: $font-size-base;
}
.author-bio__link {
@@ -50,7 +54,9 @@ $author-text-margin: .18rem;
}
.author-bio__info {
- @extend %author-role;
+ @extend %body-font-italic;
+
+ font-size: $font-size-base;
.author-bio__name + & {
margin-top: $author-text-margin;
@@ -69,7 +75,7 @@ $author-text-margin: .18rem;
align-items: center;
justify-content: center;
margin: $spacer-sm auto;
- border-top: 1px solid $brand-gray-25;
+ border-top: 1px solid $author-bio-social-border-color;
padding-top: $spacer-sm;
}
@@ -91,9 +97,8 @@ $author-text-margin: .18rem;
@extend %heading-font-regular;
@extend %link-unstyled;
- margin-bottom: 0;
- line-height: $base-line-height;
- font-size: $base-font-size;
+ line-height: $paragraph-line-height;
+ font-size: $font-size-base;
hyphens: none;
}
diff --git a/components/02-molecules/article&blog-post-elements/author-bio/author-bio-long.html b/components/02-molecules/article&blog-post-elements/author-bio/author-bio-long.html
index 77a271ff4..49baa5b5c 100644
--- a/components/02-molecules/article&blog-post-elements/author-bio/author-bio-long.html
+++ b/components/02-molecules/article&blog-post-elements/author-bio/author-bio-long.html
@@ -1,6 +1,6 @@
-
![Portrait von Heribert Innoq]({context.app.uri("assets/heribert.jpg")})
+
![Portrait von Heribert Innoq]({context.app.uri("assets/example-content/heribert.jpg")})
diff --git a/components/02-molecules/article&blog-post-elements/author-bio/author-bio-short.html b/components/02-molecules/article&blog-post-elements/author-bio/author-bio-short.html
index 6c4478e90..d3f990766 100644
--- a/components/02-molecules/article&blog-post-elements/author-bio/author-bio-short.html
+++ b/components/02-molecules/article&blog-post-elements/author-bio/author-bio-short.html
@@ -2,7 +2,7 @@
@@ -15,7 +15,7 @@
diff --git a/components/02-molecules/article&blog-post-elements/conclusion/_conclusion.scss b/components/02-molecules/article&blog-post-elements/conclusion/_conclusion.scss
index c36981417..5586e7f75 100644
--- a/components/02-molecules/article&blog-post-elements/conclusion/_conclusion.scss
+++ b/components/02-molecules/article&blog-post-elements/conclusion/_conclusion.scss
@@ -1,3 +1,5 @@
+$conclusion-border-size: ms(5);
+
//
// Conclusion
//
@@ -6,19 +8,17 @@
border-top: $conclusion-border-size solid $conclusion-border-color;
border-bottom: $conclusion-border-size solid $conclusion-border-color;
background: $conclusion-background-color;
- padding: $spacer-lg $container-spacer-x;
+ padding: $spacer-lg $spacer-base;
}
.conclusion-headline {
- line-height: $conclusion-headline-line-height-small;
color: $conclusion-headline-color;
- font-size: $conclusion-headline-font-size-small;
+ font-size: $font-size-xxxl;
}
.conclusion-subheadline {
- line-height: $conclusion-subheadline-line-height-small;
color: $conclusion-subheadline-color;
- font-size: $conclusion-subheadline-font-size-small;
+ font-size: $font-size-lg;
}
.conclusion-text {
@@ -26,9 +26,8 @@
& > * {
@extend %heading-font-regular;
- line-height: $conclusion-text-line-height-small;
color: $conclusion-text-color;
- font-size: $conclusion-text-font-size-small;
+ font-size: $font-size-sm;
// Remove the margin of the last paragraph inside a conclusion
&:last-child {
@@ -37,7 +36,13 @@
}
a {
+ border-bottom: 1px solid $conclusion-link-color;
color: $conclusion-link-color;
+
+ &:hover {
+ border-bottom: 1px solid $conclusion-background-color;
+ color: $conclusion-link-hover-color;
+ }
}
}
@@ -47,18 +52,11 @@
}
.conclusion-headline {
- line-height: $conclusion-headline-line-height;
- font-size: $conclusion-headline-font-size;
+ font-size: $font-size-xxxxl;
}
.conclusion-subheadline {
- line-height: $conclusion-subheadline-line-height;
- font-size: $conclusion-subheadline-font-size;
- }
-
- .conclusion-text {
- line-height: $conclusion-text-line-height;
- font-size: $conclusion-text-font-size;
+ font-size: $font-size-xl;
}
}
diff --git a/components/02-molecules/article&blog-post-elements/content-separator/_content-separator.scss b/components/02-molecules/article&blog-post-elements/content-separator/_content-separator.scss
index d4b5ca7d4..939a39585 100644
--- a/components/02-molecules/article&blog-post-elements/content-separator/_content-separator.scss
+++ b/components/02-molecules/article&blog-post-elements/content-separator/_content-separator.scss
@@ -3,7 +3,7 @@
//
// Component specific variables
-$border-position: $base-font-size / 2;
+$border-position: $font-size-base / 2;
// Component definition
.content-separator {
@@ -19,8 +19,8 @@ $border-position: $base-font-size / 2;
// The second box-shadow is 1px taller than the first one,
// resulting in a single line.
box-shadow: $box-shadow-color-light 0 $border-position 0 0 inset,
- $box-shadow-color-dark 0 calc(#{$border-position} + 1px) 0 0 inset;
- min-height: $base-font-size;
+ $box-shadow-color-dark 0 calc(#{$border-position} + 1px) 0 0 inset;
+ min-height: $font-size-base;
}
// Both subcomponents overlap the border of its parent component by
@@ -31,6 +31,7 @@ $border-position: $base-font-size / 2;
padding-right: $spacer-xs;
padding-left: $spacer-xs;
line-height: 1;
+ color: $content-seperator-text-color;
}
.content-separator__date {
diff --git a/components/02-molecules/article&blog-post-elements/footnote-section/_footnote-section.scss b/components/02-molecules/article&blog-post-elements/footnote-section/_footnote-section.scss
index e6c8eda90..5a6bfe5b9 100644
--- a/components/02-molecules/article&blog-post-elements/footnote-section/_footnote-section.scss
+++ b/components/02-molecules/article&blog-post-elements/footnote-section/_footnote-section.scss
@@ -8,30 +8,23 @@
justify-content: left;
margin-bottom: $spacer-sm;
text-transform: uppercase;
- line-height: $footnote-section-headline-line-height-small;
color: $footnote-section-headline-color;
- font-size: $footnote-section-headline-font-size-small;
+ font-size: $font-size-sm;
&::after {
position: relative;
- top: .65em;
+ top: 0.65em;
flex-grow: 1;
margin-left: 10px;
background-color: $footnote-section-headline-color;
max-width: 80px;
height: 3px;
- content: '\a0';
+ content: "\a0";
}
}
@media screen and (min-width: $grid-breakpoint-md) {
-
.footnote-section__headline__container {
width: 30%;
}
-
- .footnote-sectiom__headline {
- line-height: $footnote-section-headline-line-height;
- font-size: $footnote-section-headline-font-size;
- }
}
diff --git a/components/02-molecules/article&blog-post-elements/info-box/info-box.scss b/components/02-molecules/article&blog-post-elements/info-box/info-box.scss
index 4326bde10..089095d4f 100644
--- a/components/02-molecules/article&blog-post-elements/info-box/info-box.scss
+++ b/components/02-molecules/article&blog-post-elements/info-box/info-box.scss
@@ -16,7 +16,7 @@ info-box {
}
}
- &[open='true'] {
+ &[open="true"] {
.infobox__teaser__chevron {
&::before {
content: $icon-chevron-up;
@@ -25,7 +25,7 @@ info-box {
}
}
- &[open='false'] {
+ &[open="false"] {
.infobox__teaser,
.infobox__teaser__heading {
background-color: $infobox-teaser-background-color-closed;
@@ -53,8 +53,8 @@ info-box {
display: inline-block;
margin: 0;
- line-height: $infobox-heading-line-height;
- font-size: $infobox-heading-font-size;
+
+ font-size: $font-size-xs;
}
.infobox__teaser__left,
@@ -87,7 +87,6 @@ info-box {
& p {
@extend %heading-font-regular;
- line-height: $infobox-text-line-height;
- font-size: $infobox-text-font-size;
+ font-size: $font-size-base;
}
}
diff --git a/components/02-molecules/article&blog-post-elements/quotes/long-quote/_long-quote.scss b/components/02-molecules/article&blog-post-elements/quotes/long-quote/_long-quote.scss
index 7978e7519..aca80ccb1 100644
--- a/components/02-molecules/article&blog-post-elements/quotes/long-quote/_long-quote.scss
+++ b/components/02-molecules/article&blog-post-elements/quotes/long-quote/_long-quote.scss
@@ -1,32 +1,31 @@
long-quote > blockquote,
%longquote,
.longquote {
- margin-bottom: $content-spacer-base;
+ margin-bottom: $spacer-md;
text-align: center;
> p {
@extend %heading-font-heavy;
- line-height: $longquote-line-height-small;
- color: $brand-interaction;
- font-size: $longquote-font-size-small;
+ color: $quote-color;
+ font-size: $font-size-sm;
&:lang(de) {
&::before {
- content: '„';
+ content: "„";
}
&::after {
- content: '“';
+ content: "“";
}
}
&:lang(en) {
&::before {
- content: '“';
+ content: "“";
}
&::after {
- content: '”';
+ content: "”";
}
}
}
@@ -43,13 +42,18 @@ long-quote > blockquote,
%longquote__author,
.longquote__author {
- @extend %author-name;
+ @extend %heading-font-bold;
+
display: block;
+ text-transform: uppercase;
+ font-size: $font-size-base;
}
%longquote__role,
.longquote__role {
- @extend %author-role;
+ @extend %body-font-italic;
+
+ font-size: $font-size-base;
}
%longquote__avatar,
@@ -61,8 +65,7 @@ long-quote > blockquote,
%longquote,
.longquote {
> p {
- line-height: $longquote-line-height;
- font-size: $longquote-font-size;
+ font-size: $font-size-lg;
}
}
}
diff --git a/components/02-molecules/article&blog-post-elements/quotes/long-quote/long-quote.html b/components/02-molecules/article&blog-post-elements/quotes/long-quote/long-quote.html
index 1d3c60418..6b9f9227f 100644
--- a/components/02-molecules/article&blog-post-elements/quotes/long-quote/long-quote.html
+++ b/components/02-molecules/article&blog-post-elements/quotes/long-quote/long-quote.html
@@ -23,7 +23,7 @@
Mit INNOQ Schweiz haben wir einen innovativen Partner gefunden, der uns mit seiner kompetenten Beratung und professionellen Umsetzung eine wichtige Stütze unseres Geschäfts ist. Die Mitarbeiter zeichnen sich durch hohe Flexibilität und Agilität aus. Gepaart mit fundiertem Fachwissen ist es ihnen möglich, auch in hektischen Situationen pragmatische und zielführende Lösungen zu finden.
-
+
diff --git a/components/02-molecules/article&blog-post-elements/quotes/super-quote/_super-quote.scss b/components/02-molecules/article&blog-post-elements/quotes/super-quote/_super-quote.scss
index 2d079c67c..0f3c588fb 100644
--- a/components/02-molecules/article&blog-post-elements/quotes/super-quote/_super-quote.scss
+++ b/components/02-molecules/article&blog-post-elements/quotes/super-quote/_super-quote.scss
@@ -3,8 +3,7 @@ super-quote > blockquote,
@extend %longquote;
> p {
- line-height: $superquote-line-height-small;
- font-size: $superquote-font-size-small;
+ font-size: $font-size-sm;
}
}
@@ -25,8 +24,7 @@ super-quote > blockquote,
@extend %longquote;
> p {
- line-height: $superquote-line-height;
- font-size: $superquote-font-size;
+ font-size: $font-size-xl;
}
}
}
diff --git a/components/02-molecules/article&blog-post-elements/quotes/super-quote/super-quote.html b/components/02-molecules/article&blog-post-elements/quotes/super-quote/super-quote.html
index 5d00dc0b4..8ebe02de4 100644
--- a/components/02-molecules/article&blog-post-elements/quotes/super-quote/super-quote.html
+++ b/components/02-molecules/article&blog-post-elements/quotes/super-quote/super-quote.html
@@ -19,7 +19,7 @@
Wertschöpfung findet statt, wenn unsere Änderung oder das neue Feature in unserem Produktionssystem genutzt wird.
-
+
diff --git a/components/02-molecules/article&blog-post-elements/reference/_reference.scss b/components/02-molecules/article&blog-post-elements/reference/_reference.scss
index 290e718b9..fbaf9d1f1 100644
--- a/components/02-molecules/article&blog-post-elements/reference/_reference.scss
+++ b/components/02-molecules/article&blog-post-elements/reference/_reference.scss
@@ -21,12 +21,10 @@
margin-right: auto;
margin-left: auto;
text-align: center;
- line-height: $reference-line-height-small;
- font-size: $reference-font-size-small;
+ font-size: $font-size-base;
}
@media screen and (min-width: $grid-breakpoint-md) {
-
.reference {
margin-bottom: $spacer-lg;
}
@@ -35,10 +33,4 @@
margin: 0 auto $spacer-base;
max-width: 40%;
}
-
- .reference__description {
- max-width: 90%;
- line-height: $reference-line-height;
- font-size: $reference-font-size;
- }
}
diff --git a/components/02-molecules/article&blog-post-elements/reference/reference.html b/components/02-molecules/article&blog-post-elements/reference/reference.html
index 20aec50e2..0a65059a2 100644
--- a/components/02-molecules/article&blog-post-elements/reference/reference.html
+++ b/components/02-molecules/article&blog-post-elements/reference/reference.html
@@ -1,6 +1,6 @@
- ![Business technology]({context.app.uri("assets/business_technology.svg")})
+ ![Business technology]({context.app.uri("assets/logos/business_technology.svg")})
Spicy jalapeno bacon ipsum dolor amet t-bone sirloin culpa, tenderloin tempor ullamco flank rump. Biltong corned beef pork loin et. Labore dolore laborum pork laboris. Do alcatra ball tip consequat venison spare ribs pig. Bresaola boudin chuck, spare ribs officia mollit ut esse est jowl minim.
diff --git a/components/02-molecules/article&blog-post-elements/share-section/_share-section.scss b/components/02-molecules/article&blog-post-elements/share-section/_share-section.scss
index fee7a0fa3..32ef21c3c 100644
--- a/components/02-molecules/article&blog-post-elements/share-section/_share-section.scss
+++ b/components/02-molecules/article&blog-post-elements/share-section/_share-section.scss
@@ -22,8 +22,8 @@ $share-section-arrow-size: ms(16);
}
.share-section__heading {
- line-height: $share-section-heading-line-height;
- font-size: $share-section-heading-font-size;
+ color: $sharing-headline-color;
+ font-size: $font-size-lg;
}
.share-section__list {
diff --git a/components/02-molecules/article&blog-post-elements/share-section/share-section.html b/components/02-molecules/article&blog-post-elements/share-section/share-section.html
index ad9b02ce2..2896cd48a 100644
--- a/components/02-molecules/article&blog-post-elements/share-section/share-section.html
+++ b/components/02-molecules/article&blog-post-elements/share-section/share-section.html
@@ -1,5 +1,5 @@
- })
+
Share on
-
diff --git a/components/02-molecules/article&blog-post-elements/table-of-contents/_table-of-contents.scss b/components/02-molecules/article&blog-post-elements/table-of-contents/_table-of-contents.scss
index 9cd734dc8..d1b4cce9f 100644
--- a/components/02-molecules/article&blog-post-elements/table-of-contents/_table-of-contents.scss
+++ b/components/02-molecules/article&blog-post-elements/table-of-contents/_table-of-contents.scss
@@ -7,10 +7,11 @@ $anchor-list-font-size: 1.26rem; // Determined by the hard science of pushing th
.toc__heading {
@extend %heading-font-heavy;
+
margin-bottom: $spacer-sm;
text-transform: uppercase;
- line-height: $toc-heading-line-height;
- font-size: $toc-heading-font-size;
+ color: $toc-heading-color;
+ font-size: $font-size-sm;
}
.toc__list {
@@ -21,8 +22,8 @@ $anchor-list-font-size: 1.26rem; // Determined by the hard science of pushing th
padding-top: $spacer-xxs;
padding-bottom: $spacer-xxs;
padding-left: $spacer-md;
- line-height: $toc-anchor-line-height;
- font-size: $toc-anchor-font-size;
+
+ font-size: $font-size-base;
}
> li + li {
@@ -32,7 +33,8 @@ $anchor-list-font-size: 1.26rem; // Determined by the hard science of pushing th
.toc__anchor {
@extend %link-unstyled;
- @include hover-fill($link-hover-color-light, $brand-text, $brand-text);
+ @include hover-fill($link-hover-color-light, $toc-anchor-hover-text-color, $toc-anchor-text-color);
+
display: inline-block;
position: relative;
z-index: 1;
@@ -40,12 +42,11 @@ $anchor-list-font-size: 1.26rem; // Determined by the hard science of pushing th
&::before {
@extend %icon; // inline-block
+
position: absolute;
- top: $spacer-xxs;
left: -$spacer-md;
width: $spacer-base;
color: $brand-interaction;
- // font-size: $anchor-list-font-size;
content: $icon-arrow-down;
}
}
diff --git a/components/02-molecules/article&blog-post-elements/tag-section/_tag-section.scss b/components/02-molecules/article&blog-post-elements/tag-section/_tag-section.scss
index 04a604210..f6bb41efd 100644
--- a/components/02-molecules/article&blog-post-elements/tag-section/_tag-section.scss
+++ b/components/02-molecules/article&blog-post-elements/tag-section/_tag-section.scss
@@ -14,9 +14,8 @@
@extend %heading-font-heavy;
text-align: center;
- line-height: $meta-tags-headline-line-height-small;
color: $meta-tags-headline-text-color;
- font-size: $meta-tags-headline-font-size-small;
+ font-size: $font-size-base;
}
@media screen and (min-width: $grid-breakpoint-md) {
@@ -27,8 +26,7 @@
}
.tag-section__headline {
- line-height: $meta-tags-headline-line-height;
- font-size: $meta-tags-headline-font-size;
+ font-size: $font-size-sm;
}
.tag-section__container {
diff --git a/components/02-molecules/navbar/_navbar.scss b/components/02-molecules/navbar/_navbar.scss
deleted file mode 100644
index e3c3ec1bc..000000000
--- a/components/02-molecules/navbar/_navbar.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import './navbar-common';
-@import './navbar-mobile';
-@import './navbar-desktop';
diff --git a/components/02-molecules/search/search-form/_search-form.scss b/components/02-molecules/search/search-form/_search-form.scss
index cd601234e..4d2c6febd 100644
--- a/components/02-molecules/search/search-form/_search-form.scss
+++ b/components/02-molecules/search/search-form/_search-form.scss
@@ -1,15 +1,14 @@
.search-form {
display: flex;
align-items: center;
- border-width: 0 0 2px;
- border-style: solid;
- border-color: $search-field-border-color;
+ border-bottom: 4px solid$search-field-border-color;
background-color: $search-field-background;
grid-area: center;
}
.search-form__input {
@extend %heading-font-bold;
+
display: block;
outline: none;
border: 0;
@@ -29,7 +28,7 @@
@media screen and (min-width: $grid-breakpoint-md) {
.search-form {
- font-size: $search-field-xl-font-size;
+ font-size: $font-size-xl;
}
.search-form__input {
diff --git a/components/02-molecules/search/search-result/_search-result.scss b/components/02-molecules/search/search-result/_search-result.scss
index f7d12f0fc..317c77246 100644
--- a/components/02-molecules/search/search-result/_search-result.scss
+++ b/components/02-molecules/search/search-result/_search-result.scss
@@ -15,15 +15,15 @@
@extend %heading-font-regular;
}
-.search-result__type +
-.search-result__date {
+.search-result__type + .search-result__date {
&::before {
- content: ' | ';
+ content: " | ";
}
}
.search-result__title {
@extend %h3;
+
transition: standard-transition(color);
margin-bottom: 0;
diff --git a/components/02-molecules/visual-elements/card/_card.scss b/components/02-molecules/visual-elements/card/_card.scss
index 1782bbe7d..4a30c4b82 100644
--- a/components/02-molecules/visual-elements/card/_card.scss
+++ b/components/02-molecules/visual-elements/card/_card.scss
@@ -1,5 +1,5 @@
.card {
- padding: $container-spacer-x-sm $container-spacer-y-sm;
+ padding: $spacer-sm;
}
.card__image-header {
@@ -16,9 +16,9 @@
.card__tag {
@extend %teaser-caption;
- background-color: $brand-red;
+ background-color: $card-tag-bg-color;
padding: $spacer-xxs;
- color: $brand-white;
+ color: $card-tag-text-color;
& + .card__tag {
margin-top: $spacer-xs;
@@ -36,36 +36,51 @@
.card__body,
.card__footer {
- background-color: $brand-white;
- padding: $container-spacer-x-sm $container-spacer-y-sm;
+ background-color: $card-bg-color;
+ padding: $spacer-sm;
+
+ .upcase-heading {
+ color: $card-headline-color;
+ }
+
+ .standalone {
+ color: $card-subheadline-color;
+ }
+
+ .checklist {
+ color: $card-headline-color;
+ }
}
.card__subheadline {
@extend %teaser-caption;
+
margin-bottom: $spacer-xxs;
+ color: $card-subheadline-color;
}
.card__headline {
@extend %h3;
- color: $brand-red;
+ color: $card-headline-color;
}
.card__text {
@extend %body-font-italic;
+
margin-bottom: $spacer-xxs;
- line-height: $paragraph-lead-line-height-small;
- font-size: $paragraph-lead-font-size-small;
+ color: $card-text-color;
+ font-size: $font-size-sm;
}
@media screen and (min-width: $grid-breakpoint-md) {
.card {
- padding: $container-spacer-x $container-spacer-y;
+ padding: $spacer-base;
}
.card__body,
.card__footer {
transform: translateY(-$spacer-xxl);
- margin: 0 $container-spacer-x;
+ margin: 0 $spacer-base;
}
.card__image {
diff --git a/components/02-molecules/visual-elements/card/card.html b/components/02-molecules/visual-elements/card/card.html
index 79a8e18ee..10b9209ac 100644
--- a/components/02-molecules/visual-elements/card/card.html
+++ b/components/02-molecules/visual-elements/card/card.html
@@ -1,7 +1,7 @@
@@ -68,7 +68,7 @@
technischen Stand. Und sie teilen gerne ihr Knowhow aus der Praxis.
- })
+
diff --git a/components/02-molecules/visual-elements/social-media-bar/_social-media-bar.scss b/components/02-molecules/visual-elements/social-media-bar/_social-media-bar.scss
index 4869a61ea..b5c0722d9 100644
--- a/components/02-molecules/visual-elements/social-media-bar/_social-media-bar.scss
+++ b/components/02-molecules/visual-elements/social-media-bar/_social-media-bar.scss
@@ -8,6 +8,11 @@
& + & {
margin-left: $spacer-md;
}
+
+ .icon-svg:hover,
+ .icon-svg:focus {
+ background: $brand-white;
+ }
}
.social-media-bar__link {
diff --git a/components/02-molecules/visual-elements/teaser/full-width-teaser/default-full-width-teaser/_default-full-width-teaser.scss b/components/02-molecules/visual-elements/teaser/full-width-teaser/default-full-width-teaser/_default-full-width-teaser.scss
index ee5eab5c4..deb66c23f 100644
--- a/components/02-molecules/visual-elements/teaser/full-width-teaser/default-full-width-teaser/_default-full-width-teaser.scss
+++ b/components/02-molecules/visual-elements/teaser/full-width-teaser/default-full-width-teaser/_default-full-width-teaser.scss
@@ -1,6 +1,6 @@
-$default-full-width-teaser-bg-width: 1444px; // Arbitrary value
-$default-full-width-teaser-bg-height: 1000px; // Arbitrary value
-$default-full-width-teaser-height: ms(38);
+$full-width-teaser-bg-width: 1444px; // Arbitrary value
+$full-width-teaser-bg-height: 1000px; // Arbitrary value
+$full-width-teaser-height: ms(38);
.default-full-width-teaser {
@extend %page-header;
@@ -8,7 +8,7 @@ $default-full-width-teaser-height: ms(38);
justify-content: center;
width: 100%;
max-width: 100%;
- min-height: $default-full-width-teaser-height;
+ min-height: $full-width-teaser-height;
&--right-aligned {
justify-content: flex-end;
@@ -22,7 +22,7 @@ $default-full-width-teaser-height: ms(38);
.default-full-width-teaser__wrapper {
display: flex;
justify-content: flex-start;
- padding: $container-spacer-x-sm;
+ padding: $spacer-sm;
}
.default-full-width-teaser__body {
@@ -30,25 +30,24 @@ $default-full-width-teaser-height: ms(38);
flex-basis: 100%;
flex-direction: column;
justify-content: space-between;
- background-color: $default-full-width-teaser-body-bg;
+ background-color: $full-width-teaser-body-bg;
padding: $spacer-base;
+ color: $full-width-teaser-body-color;
}
.default-full-width-teaser__text {
@extend %teaser-text;
+
margin-bottom: $spacer-base;
- line-height: $big-content-teaser-text-line-height-small;
- font-size: $big-content-teaser-text-font-size-small;
+ font-size: $font-size-xs;
hyphens: auto;
}
.default-full-width-teaser__header {
padding-bottom: 0;
- color: $default-full-width-teaser-body-color;
h2 {
- line-height: $h1-line-height;
- font-size: $h1-font-size;
+ font-size: $font-size-xxxl;
}
.punch-in {
@@ -91,8 +90,7 @@ $default-full-width-teaser-height: ms(38);
}
.default-full-width-teaser__text {
- line-height: $big-content-teaser-text-line-height;
- font-size: $big-content-teaser-text-font-size;
+ font-size: $font-size-base;
hyphens: none;
}
diff --git a/components/02-molecules/visual-elements/teaser/full-width-teaser/default-full-width-teaser/default-full-width-teaser.html b/components/02-molecules/visual-elements/teaser/full-width-teaser/default-full-width-teaser/default-full-width-teaser.html
index bb1e2dada..c294ef1af 100644
--- a/components/02-molecules/visual-elements/teaser/full-width-teaser/default-full-width-teaser/default-full-width-teaser.html
+++ b/components/02-molecules/visual-elements/teaser/full-width-teaser/default-full-width-teaser/default-full-width-teaser.html
@@ -1,11 +1,11 @@
-
}){kind=icon}
+
+
+
+
+
+
+
+
+
+
+
}){kind=icon}
}){kind=icon}
}){kind=icon}
}){kind=icon}
+
+
+
}){kind=icon}
- }){kind=icon}
-
-
+
+
+
+
+ }){kind=logo}
- }){kind=logo}
- }){kind=logo}
- }){kind=logo}
- }){kind=logo}
- }){kind=logo}
- }){kind=logo}
- }){kind=logo}
}){kind=logo}
+}){kind=logo}
+}){kind=logo}
+}){kind=logo}
+}){kind=logo}
+}){kind=logo}
+}){kind=logo}
+}){kind=logo}
+}){kind=logo}
+}){kind=logo}
+}){kind=logo}
+}){kind=logo}
+})
+ })
})
+ })
![]({context.app.uri("assets/icons/arrow-long-right-white.svg")}){kind=icon}
+
![]({context.app.uri("assets/icons/arrow-long-right-red.svg")}){kind=icon}
+
![Tower]({context.app.uri("assets/bg-images/edition-01/visual-header-heads.jpg")})
+ 
+
![innoQ Mitarbeiter]({context.app.uri("assets/visual-culture-02.jpg")})
+ ![innoQ Mitarbeiter]({context.app.uri("assets/bg-images/general/visual-culture-02.jpg")})
})
+ })
})
+ })