You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by ka...@apache.org on 2019/10/18 13:59:50 UTC
[airflow-site] branch aip-11 updated: Improve typography - maps,
for loops(#77)
This is an automated email from the ASF dual-hosted git repository.
kamilbregula pushed a commit to branch aip-11
in repository https://gitbox.apache.org/repos/asf/airflow-site.git
The following commit(s) were added to refs/heads/aip-11 by this push:
new 054a4e0 Improve typography - maps, for loops(#77)
054a4e0 is described below
commit 054a4e0f9871e3840d7a620551889eb14eae5cc4
Author: Kamil Gabryjelski <ka...@gmail.com>
AuthorDate: Fri Oct 18 15:59:44 2019 +0200
Improve typography - maps, for loops(#77)
---
landing-pages/site/assets/scss/_accordion.scss | 16 +-
landing-pages/site/assets/scss/_buttons.scss | 27 ++--
landing-pages/site/assets/scss/_colors.scss | 29 ++--
landing-pages/site/assets/scss/_list-boxes.scss | 11 +-
landing-pages/site/assets/scss/_ol-ul.scss | 10 +-
landing-pages/site/assets/scss/_typography.scss | 169 +++++++++------------
landing-pages/site/assets/scss/main-custom.scss | 6 +-
landing-pages/site/content/en/examples/_index.html | 38 +++--
.../site/layouts/partials/boxes/case-study.html | 2 +-
.../site/layouts/partials/boxes/commiter.html | 1 -
.../site/layouts/partials/boxes/event.html | 10 +-
.../site/layouts/partials/boxes/integration.html | 2 +-
.../layouts/partials/buttons/button-filled.html | 2 +-
.../layouts/partials/buttons/button-hollow.html | 2 +-
.../layouts/partials/buttons/button-with-icon.html | 2 +-
.../site/layouts/shortcodes/accordion.html | 4 +-
16 files changed, 163 insertions(+), 168 deletions(-)
diff --git a/landing-pages/site/assets/scss/_accordion.scss b/landing-pages/site/assets/scss/_accordion.scss
index 2c9af12..7d9e96d 100644
--- a/landing-pages/site/assets/scss/_accordion.scss
+++ b/landing-pages/site/assets/scss/_accordion.scss
@@ -17,17 +17,15 @@
* under the License.
*/
-details.accordion {
- $very-light-pink: #cbcbcb;
- $cerulean-blue: #017cee;
- $brownish-grey: #707070;
+@import "colors";
+details.accordion {
padding: 40px 30px;
- border-bottom: solid 1px $very-light-pink;
+ border-bottom: solid 1px map_get($colors, very-light-pink);
transition: ease 1s;
&:first-of-type {
- border-top: solid 1px $very-light-pink;
+ border-top: solid 1px map_get($colors, very-light-pink);
}
summary {
@@ -39,12 +37,12 @@ details.accordion {
}
.accordion__header {
- color: $cerulean-blue;
+ color: map_get($colors, cerulean-blue);
margin-bottom: 20px;
}
.accordion__description {
- color: $brownish-grey;
+ color: map_get($colors, brownish-grey);
}
.accordion__icon {
@@ -56,7 +54,7 @@ details.accordion {
right: 0;
justify-content: center;
align-items: center;
- border: solid 1px $cerulean-blue;
+ border: solid 1px map_get($colors, cerulean-blue);
border-radius: 50%;
svg {
diff --git a/landing-pages/site/assets/scss/_buttons.scss b/landing-pages/site/assets/scss/_buttons.scss
index 7276474..a186550 100644
--- a/landing-pages/site/assets/scss/_buttons.scss
+++ b/landing-pages/site/assets/scss/_buttons.scss
@@ -16,6 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
+
@import "colors";
button {
@@ -26,12 +27,12 @@ button {
transition: all ease-out 0.2s;
&.btn-filled {
- border-color: $cerulean-blue;
- background-color: $cerulean-blue;
+ border-color: map_get($colors, cerulean-blue);
+ background-color: map_get($colors, cerulean-blue);
&:hover {
- border-color: $bright-sky-blue;
- background-color: $bright-sky-blue;
+ border-color: map_get($colors, bright-sky-blue);
+ background-color: map_get($colors, bright-sky-blue);
}
}
@@ -55,29 +56,29 @@ button {
&.btn-hollow {
&.btn-blue {
- color: $cerulean-blue;
- border-color: $cerulean-blue;
+ color: map_get($colors, cerulean-blue);
+ border-color: map_get($colors, cerulean-blue);
background-color: transparent;
&:hover {
- color: $white;
- background-color: $cerulean-blue;
+ color: map_get($colors, white);
+ background-color: map_get($colors, cerulean-blue);
}
}
&.btn-brown {
- border-color: $very-light-pink;
+ border-color: map_get($colors, very-light-pink);
&:hover {
- background-color: $greyish-brown;
- border-color: $greyish-brown;
+ background-color: map_get($colors, greyish-brown);
+ border-color: map_get($colors, greyish-brown);
span {
- color: $white;
+ color: map_get($colors, white);
}
svg {
path {
- fill: $white;
+ fill: map_get($colors, white);
}
}
}
diff --git a/landing-pages/site/assets/scss/_colors.scss b/landing-pages/site/assets/scss/_colors.scss
index f79ea5a..f0ae3f4 100644
--- a/landing-pages/site/assets/scss/_colors.scss
+++ b/landing-pages/site/assets/scss/_colors.scss
@@ -17,17 +17,18 @@
* under the License.
*/
-$cerulean-blue: #017cee;
-$shamrock: #00ad46;
-$bright-sky-blue: #0cb6ff;
-$melon: #ff7557;
-$vermillion: #e43921;
-$aqua: #11e1ee;
-$shamrock-green: #04d659;
-$aqua-blue: #00c7d4;
-$white: #ffffff;
-$brownish-grey: #707070;
-$very-light-pink: #cbcbcb;
-$white: #f9f9f9;
-$slate-grey: #636365;
-$greyish-brown: #51504f;
+$colors: (
+ cerulean-blue: #017cee,
+ shamrock: #00ad46,
+ bright-sky-blue: #0cb6ff,
+ melon: #ff7557,
+ vermillion: #e43921,
+ aqua: #11e1ee,
+ shamrock-green: #04d659,
+ aqua-blue: #00c7d4,
+ white: #ffffff,
+ brownish-grey: #707070,
+ very-light-pink: #cbcbcb,
+ slate-grey: #636365,
+ greyish-brown: #51504f
+);
diff --git a/landing-pages/site/assets/scss/_list-boxes.scss b/landing-pages/site/assets/scss/_list-boxes.scss
index f2b54d9..3d5e85e 100644
--- a/landing-pages/site/assets/scss/_list-boxes.scss
+++ b/landing-pages/site/assets/scss/_list-boxes.scss
@@ -16,6 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
+
@import "colors";
$box-margin: 20px;
@@ -27,7 +28,7 @@ $box-margin: 20px;
}
.list-item {
- border: solid 1px $very-light-pink;
+ border: solid 1px map_get($colors, very-light-pink);
border-radius: 5px;
margin: $box-margin;
padding: 30px 10px;
@@ -63,6 +64,7 @@ $box-margin: 20px;
}
&--quote {
+ @extend .bodytext__medium--brownish-grey;
font-style: italic;
margin: 30px 0 20px;
text-align: center;
@@ -71,6 +73,8 @@ $box-margin: 20px;
&__commiter {
&--nick {
+ @extend .bodytext__medium--greyish-brown;
+ font-weight: 500;
margin-top: 12px;
}
@@ -87,11 +91,13 @@ $box-margin: 20px;
&__meetup {
&--location {
+ @extend .subtitle__large--cerulean-blue;
margin-bottom: 10px;
text-align: center;
}
&--members {
+ @extend .bodytext__medium--brownish-grey;
margin-bottom: 30px;
span {
vertical-align: middle;
@@ -99,6 +105,7 @@ $box-margin: 20px;
}
&--next-meetup {
+ @extend .bodytext__medium--cerulean-blue;
margin-bottom: 20px;
text-align: center;
}
@@ -112,6 +119,8 @@ $box-margin: 20px;
}
&--name {
+ @extend .subtitle__medium--brownish-grey;
+ font-weight: bold;
margin-top: 50px;
}
}
diff --git a/landing-pages/site/assets/scss/_ol-ul.scss b/landing-pages/site/assets/scss/_ol-ul.scss
index f1cf865..f52414e 100644
--- a/landing-pages/site/assets/scss/_ol-ul.scss
+++ b/landing-pages/site/assets/scss/_ol-ul.scss
@@ -18,19 +18,18 @@
*/
@import "typography";
-@import "colors";
ol.counter-blue, ul.ticks-blue {
list-style: none;
li {
- @include bodytext("xsmall", $brownish-grey);
+ @extend .bodytext__medium--brownish-grey;
position: relative;
padding-left: 10px;
&::before {
position: absolute;
- border: solid 1px $cerulean-blue;
+ border: solid 1px map_get($colors, cerulean-blue);
border-radius: 50%;
}
}
@@ -44,9 +43,10 @@ ol.counter-blue {
margin-bottom: 25px;
&::before {
- @include bodytext("small", $cerulean-blue, 500);
- $size: 28px;
+ @extend .subtitle__medium--cerulean-blue;
content: counter(custom-counter);
+ $size: 26px;
+ box-sizing: content-box;
top: -2px;
left: calc(-1 * #{$size});
diff --git a/landing-pages/site/assets/scss/_typography.scss b/landing-pages/site/assets/scss/_typography.scss
index 28aac4a..321def2 100644
--- a/landing-pages/site/assets/scss/_typography.scss
+++ b/landing-pages/site/assets/scss/_typography.scss
@@ -17,122 +17,91 @@
* under the License.
*/
-@import url('https://fonts.googleapis.com/css?family=Rubik:500&display=swap');
-@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');
-@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');
@import "colors";
$header-font: 'Rubik', sans-serif;
$primary-font: 'Roboto', sans-serif;
$monospace-font: 'Roboto Mono', monospace;
-@mixin header($size) {
- font-family: $header-font;
- color: $greyish-brown;
- font-weight: 500;
-
- @if $size == "large" {
- font-size: 72px;
- line-height: 1.17;
- }
- @if $size == "medium" {
- font-size: 60px;
- line-height: 1.23;
- }
- @if $size == "small" {
- font-size: 48px;
- line-height: 1.25;
- }
-}
-
-@mixin bodytext($size, $color, $weight: normal) {
- font-family: $primary-font;
- color: $color;
- font-weight: $weight;
-
- @if $size == "large" {
- font-size: 36px;
- line-height: 1.22;
- }
- @if $size == "medium" {
- font-size: 24px;
- line-height: 1.5;
- }
- @if $size == "small" {
- font-size: 18px;
- line-height: 1.33;
+$font-weights: (
+ normal: 400,
+ "500": 500,
+ bold: bold,
+);
+
+
+$header-styles: (
+ "font-family": $header-font,
+ "font-weight": 500,
+ "sizes": (
+ "large": ("size": 72px, "line-height": 1.17),
+ "medium": ("size": 60px, "line-height": 1.23),
+ "small": ("size": 48px, "line-height": 1.25),
+ "xsmall": ("size": 36px, "line-height": 1.22)
+ )
+);
+
+$subtitle-styles: (
+ "font-family": $primary-font,
+ "font-weight": 500,
+ "sizes": (
+ "large": ("size": 24px, "line-height": 1.5),
+ "medium": ("size": 18px, "line-height": 1.33)
+ )
+);
+
+$bodytext-styles: (
+ "font-family": $primary-font,
+ "font-weight": 400,
+ "sizes": (
+ "medium": ("size": 16px, "line-height": 1.63),
+ "small": ("size": 12px, "line-height": 1.33),
+ "xsmall": ("size": 10px, "line-height": 2.6)
+ )
+);
+
+@mixin generate-styles($styles-map) {
+ @each $size-name, $size-props in map-get($styles-map, "sizes") {
+ @each $color-name, $color in $colors {
+ &__#{$size-name}--#{$color-name} {
+ font-family: map-get($styles-map, "font-family");
+ font-weight: map-get($styles-map, "font-weight");
+ font-size: map-get($size-props, "size");
+ line-height: map-get($size-props, "line-height");
+ color: $color;
+ }
+ }
}
- @if $size == "xsmall" {
- font-size: 16px;
- line-height: 1.63;
- }
-}
-
-@mixin monotext($color) {
- font-family: $monospace-font;
- color: $color;
- font-size: 14px;
- line-height: 1.71;
-}
-
-.header__large {
- @include header("large");
-}
-
-.header__medium {
- @include header("medium");
-}
-
-.header__small {
- @include header("small");
}
-.bodytext__large {
- @include bodytext("large", $brownish-grey, bold);
+.header {
+ @include generate-styles($header-styles);
}
-.bodytext__medium--blue {
- @include bodytext("medium", $cerulean-blue, 500);
+.subtitle {
+ @include generate-styles($subtitle-styles);
}
-.bodytext__medium--brownish {
- @include bodytext("medium", $brownish-grey);
+.bodytext {
+ @include generate-styles($bodytext-styles);
}
-.bodytext__small {
- @include bodytext("small", $greyish-brown, bold);
-}
-
-.bodytext__xsmall--greyish {
- @include bodytext("xsmall", $greyish-brown, 500);
-}
-
-.bodytext__xsmall--blue {
- @include bodytext("xsmall", $cerulean-blue);
-}
-
-.bodytext__xsmall--brownish {
- @include bodytext("xsmall", $brownish-grey);
-}
-
-.bodytext__xsmall--white {
- @include bodytext("xsmall", $white);
-}
-
-
-.monotext--vermillion {
- @include monotext($vermillion);
-}
-
-.monotext--brownish {
- @include monotext($brownish-grey);
-}
-
-.monotext--blue {
- @include monotext($cerulean-blue);
+.monotext {
+ @each $color-name, $color in $colors {
+ &--#{$color-name} {
+ font-family: $monospace-font;
+ color: $color;
+ font-size: 14px;
+ line-height: 1.71;
+ }
+ }
}
-.monotext--shamrock {
- @include monotext($shamrock);
+.font-weight {
+ @each $weight-name, $weight in $font-weights {
+ &-#{$weight-name} {
+ font-weight: $weight !important;
+ }
+ }
}
diff --git a/landing-pages/site/assets/scss/main-custom.scss b/landing-pages/site/assets/scss/main-custom.scss
index 22a164f..0d0dc95 100644
--- a/landing-pages/site/assets/scss/main-custom.scss
+++ b/landing-pages/site/assets/scss/main-custom.scss
@@ -17,8 +17,12 @@
* under the License.
*/
-@import "accordion";
+@import url('https://fonts.googleapis.com/css?family=Rubik:500&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');
+
@import "typography";
+@import "accordion";
@import "buttons";
@import "ol-ul";
@import "list-boxes";
diff --git a/landing-pages/site/content/en/examples/_index.html b/landing-pages/site/content/en/examples/_index.html
index a7aa8d9..a9b2fc3 100644
--- a/landing-pages/site/content/en/examples/_index.html
+++ b/landing-pages/site/content/en/examples/_index.html
@@ -9,20 +9,32 @@ menu:
{{< blocks/section >}}
<div class="col-12">
- <h1 class="text-center header__large">This is a large header</h1>
- <h2 class="text-center header__medium">This is a medium header</h2>
- <h3 class="text-center header__small">This is a small header</h3>
- <p class="text-center bodytext__large">This is a large bodytext</p>
- <p class="text-center bodytext__medium--blue">This is a medium blue bodytext</p>
- <p class="text-center bodytext__medium--brownish">This is a medium brownish bodytext</p>
- <p class="text-center bodytext__small">This is a small bodytext</p>
- <p class="text-center bodytext__xsmall--blue">This is a xsmall blue bodytext</p>
- <p class="text-center bodytext__xsmall--brownish">This is a xsmall brownish bodytext</p>
- <p class="text-center bodytext__xsmall--greyish">This is a xsmall greyish bodytext</p>
+ <h1 class="text-center header__large--greyish-brown">This is a large greyish-brown header</h1>
+ <h2 class="text-center header__medium--greyish-brown">This is a medium greyish-brown header</h2>
+ <h3 class="text-center header__small--greyish-brown">This is a small greyish-brown header</h3>
+ <h3 class="text-center header__xsmall--greyish-brown">This is a xsmall greyish-brown header</h3>
+
+ <h3 class="text-center subtitle__large--brownish-grey">This is a large brownish-grey subtitle</h3>
+ <h3 class="text-center subtitle__large--brownish-grey font-weight-normal">This is a large normal-weight brownish-grey subtitle</h3>
+ <h3 class="text-center subtitle__large--greyish-brown">This is a large greyish-brown subtitle</h3>
+ <h3 class="text-center subtitle__large--cerulean-blue">This is a large cerulean-blue subtitle</h3>
+ <h3 class="text-center subtitle__medium--brownish-grey font-weight-bold">This is a medium bold brownish-grey subtitle</h3>
+ <h3 class="text-center subtitle__medium--greyish-brown font-weight-bold">This is a medium bold greyish-brown subtitle</h3>
+
+ <p class="text-center bodytext__medium--greyish-brown">This is a medium greyish-brown bodytext</p>
+ <p class="text-center bodytext__medium--greyish-brown font-weight-500">This is a medium medium-weight greyish-brown bodytext</p>
+ <p class="text-center bodytext__medium--brownish-grey">This is a medium brownish-grey bodytext</p>
+ <p class="text-center bodytext__medium--brownish-grey font-weight-500">This is a medium medium-weight brownish-grey bodytext</p>
+ <p class="text-center bodytext__medium--brownish-grey font-italic">This is a medium italic brownish-grey bodytext</p>
+ <p class="text-center bodytext__medium--cerulean-blue">This is a medium normal-weight cerulean-blue bodytext</p>
+ <p class="text-center bodytext__medium--cerulean-blue font-weight-500">This is a medium medium-weight cerulean-blue bodytext</p>
+ <p class="text-center bodytext__medium--white">This is a medium white bodytext</p>
+ <p class="text-center bodytext__small--brownish-grey">This is a small brownish-grey bodytext</p>
<p class="text-center bodytext__xsmall--white">This is a xsmall white bodytext</p>
- <p class="text-center bodytext__xsmall">This is a xsmall white bodytext</p>
- <p class="text-center monotext--blue">This is a blue monotext</p>
- <p class="text-center monotext--brownish">This is a brownish monotext</p>
+
+ <p class="text-center monotext--cerulean-blue">This is a cerulean-blue monotext</p>
+ <p class="text-center monotext--brownish-grey">This is a brownish-grey monotext</p>
+ <p class="text-center monotext--brownish-grey font-weight-bold">This is a bold brownish-grey monotext</p>
<p class="text-center monotext--shamrock">This is a shamrock monotext</p>
<p class="text-center monotext--vermillion">This is a vermillion monotext</p>
</div>
diff --git a/landing-pages/site/layouts/partials/boxes/case-study.html b/landing-pages/site/layouts/partials/boxes/case-study.html
index 3c5db3e..b4937a8 100644
--- a/landing-pages/site/layouts/partials/boxes/case-study.html
+++ b/landing-pages/site/layouts/partials/boxes/case-study.html
@@ -24,7 +24,7 @@
{{ .Content | safeHTML }}
{{ end }}
</div>
- <p class="bodytext__xsmall--brownish box-event__case-study--quote"
+ <p class="box-event__case-study--quote"
>{{ .quote }}</p>
{{ partial "buttons/button-hollow" (dict "text" "Learn more")}}
</div>
diff --git a/landing-pages/site/layouts/partials/boxes/commiter.html b/landing-pages/site/layouts/partials/boxes/commiter.html
index 73274fa..047129b 100644
--- a/landing-pages/site/layouts/partials/boxes/commiter.html
+++ b/landing-pages/site/layouts/partials/boxes/commiter.html
@@ -17,7 +17,6 @@
under the License.
*/}}
-{{ $iconScratch := newScratch }}
<div class="box-event">
<img src="{{ .image }}" alt="Commiter {{ .name }}" class="avatar"/>
<p class="box-event__commiter--nick">@{{ .nick }}</p>
diff --git a/landing-pages/site/layouts/partials/boxes/event.html b/landing-pages/site/layouts/partials/boxes/event.html
index 0223f88..550ab2a 100644
--- a/landing-pages/site/layouts/partials/boxes/event.html
+++ b/landing-pages/site/layouts/partials/boxes/event.html
@@ -19,16 +19,18 @@
<div class="box-event">
- <p class="bodytext__medium--blue box-event__meetup--location">
+ <p class="box-event__meetup--location">
{{ .city }}<br/>{{ .country }}
</p>
- <p class="bodytext__xsmall--brownish box-event__meetup--members">
+ <p class="box-event__meetup--members">
{{ with resources.Get "icons/members-icon.svg" }}
{{ .Content | safeHTML }}
{{ end }}
<span>{{ .members }} members</span>
</p>
- <p class="bodytext__xsmall--blue box-event__meetup--next-meetup">Next meetup:<br><span
- class="bodytext__xsmall--greyish">{{ .date }}</span></p>
+ <p class="box-event__meetup--next-meetup">
+ Next meetup:<br>
+ <span class="bodytext__medium--greyish-brown font-weight-500">{{ .date }}</span>
+ </p>
{{ partial "buttons/button-hollow" (dict "text" "Learn more") }}
</div>
diff --git a/landing-pages/site/layouts/partials/boxes/integration.html b/landing-pages/site/layouts/partials/boxes/integration.html
index 4b00ac8..1a3924a 100644
--- a/landing-pages/site/layouts/partials/boxes/integration.html
+++ b/landing-pages/site/layouts/partials/boxes/integration.html
@@ -24,5 +24,5 @@
{{ .Content | safeHTML }}
{{ end }}
</div>
- <span class="bodytext__small box-event__integration--name">{{ .name }}</span>
+ <span class="box-event__integration--name">{{ .name }}</span>
</div>
diff --git a/landing-pages/site/layouts/partials/buttons/button-filled.html b/landing-pages/site/layouts/partials/buttons/button-filled.html
index 37af82d..1db32ca 100644
--- a/landing-pages/site/layouts/partials/buttons/button-filled.html
+++ b/landing-pages/site/layouts/partials/buttons/button-filled.html
@@ -17,4 +17,4 @@
under the License.
*/}}
-<button id="{{ .id }}" class="btn-filled bodytext__xsmall--white">{{ .text }}</button>
+<button id="{{ .id }}" class="btn-filled bodytext__medium--white">{{ .text }}</button>
diff --git a/landing-pages/site/layouts/partials/buttons/button-hollow.html b/landing-pages/site/layouts/partials/buttons/button-hollow.html
index 0560923..ca28cee 100644
--- a/landing-pages/site/layouts/partials/buttons/button-hollow.html
+++ b/landing-pages/site/layouts/partials/buttons/button-hollow.html
@@ -17,4 +17,4 @@
under the License.
*/}}
-<button class="btn-hollow btn-blue bodytext__xsmall--blue">{{ .text }}</button>
+<button class="btn-hollow btn-blue bodytext__medium--cerulean-blue">{{ .text }}</button>
diff --git a/landing-pages/site/layouts/partials/buttons/button-with-icon.html b/landing-pages/site/layouts/partials/buttons/button-with-icon.html
index 81de580..970f7b0 100644
--- a/landing-pages/site/layouts/partials/buttons/button-with-icon.html
+++ b/landing-pages/site/layouts/partials/buttons/button-with-icon.html
@@ -20,5 +20,5 @@
{{ $svg_path := .svg_path | default "icons/github.svg" }}
<button class="btn-hollow btn-brown btn-with-icon">
{{ with resources.Get "icons/github.svg" }}{{ .Content | safeHTML }}{{ end }}
- <span class="bodytext__xsmall--brownish">{{ .text }}</span>
+ <span class="bodytext__medium--brownish-grey">{{ .text }}</span>
</button>
diff --git a/landing-pages/site/layouts/shortcodes/accordion.html b/landing-pages/site/layouts/shortcodes/accordion.html
index ab33a0d..7cb8891 100644
--- a/landing-pages/site/layouts/shortcodes/accordion.html
+++ b/landing-pages/site/layouts/shortcodes/accordion.html
@@ -22,8 +22,8 @@
<div class="accordion__icon">
{{ with resources.Get "icons/accordion-arrow.svg" }}{{ ( . | minify).Content | safeHTML }}{{ end }}
</div>
- <h4 class="accordion__header bodytext__medium--blue">{{ .Get "title" }}</h4>
- <span class="accordion__description bodytext__xsmall--brownish">{{ .Get "description" }}</span>
+ <h4 class="accordion__header subtitle__large--cerulean-blue">{{ .Get "title" }}</h4>
+ <span class="accordion__description bodytext__medium--brownish-grey">{{ .Get "description" }}</span>
</summary>
<div class="accordion__content">{{ .Inner }}</div>
</details>