diff --git a/docs/_includes/platform.html b/docs/_includes/platform.html index f3867ee4f5b7..0323828f2d8c 100644 --- a/docs/_includes/platform.html +++ b/docs/_includes/platform.html @@ -5,7 +5,7 @@

{{ platform.hub-title }}

{{ site.data.routes.home.description }}

-
+
{% for hub in platform.hubs %} {% include hub-card.html hub=hub platform=selectedPlatform %} {% endfor %} diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index 40e54ac1f2ba..728785f69d05 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -445,18 +445,26 @@ button { } } -.cards-group { +.cards-group, .platform-cards-group { display: grid; grid-template-columns: auto; row-gap: 20px; column-gap: 20px; padding-bottom: 20px; +} +.cards-group { @include breakpoint($breakpoint-desktop) { grid-template-columns: 50% 50%; } } +.platform-cards-group { + @include breakpoint($breakpoint-desktop) { + grid-template-columns: 33.33% 33.33% 33.33%; + } +} + .card { display: flex; flex-wrap: nowrap; @@ -546,7 +554,7 @@ button { display: flex; flex-wrap: nowrap; border-radius: 16px; - padding: 28px; + padding: 24px; font-weight: 700; cursor: pointer; color: $color-text; @@ -558,6 +566,7 @@ button { .row { display: flex; + flex-direction: column; flex-basis:100%; } @@ -567,7 +576,7 @@ button { padding-right: 28px; img { - width: 64px; + width: 68px; } } @@ -597,6 +606,7 @@ button { } h3.title { + font-size: 1.2em; font-family: "ExpensifyNewKansas", "Helvetica Neue", "Helvetica", Arial, sans-serif; } @@ -606,7 +616,7 @@ button { margin: 0; &.with-margin { - margin: 0 0 4px 0; + margin: 20px 0 8px 0; } }