diff --git a/src/plainui/jinja2/plainui/components/three_cards.html b/src/plainui/jinja2/plainui/components/three_cards.html
index 163a2f11c84cd263d083ef9c0a9b71f7f4195105..b3930c33c57afc260d33587874b0c178577365d1 100644
--- a/src/plainui/jinja2/plainui/components/three_cards.html
+++ b/src/plainui/jinja2/plainui/components/three_cards.html
@@ -1,25 +1,23 @@
{% macro three_cards(cards) -%}
{% if cards %}
- <div class="border p-6 text-light text-center mx-0">
- <div class="card-deck">
- {% for card in cards %}
- <article class="card">
- <header class="card-header">
- <h3 class="card-title text-white mb-0">{{card.title}}</h3>
- </header>
- <section class="card-body mt-2 px-3 shadow-darkmorphism">
- <p class="card-text">{{ card.text}}</p>
- </section>
- {% if card.link %}
- <footer class="card-footer p-0 shadow-darkmorphism mt-2">
- <a href="{{ card.link.url }}" class="btn btn-block btn-xxl{% if card.link.type %} btn-{{card.link.type}}{% endif %}">
- {{ card.link.text }}
- </a>
- </footer>
- {% endif %}
- </article>
- {% endfor %}
- </div>
+ <div class="card-deck">
+ {% for card in cards %}
+ <article class="card">
+ <header class="card-header text-center">
+ <h3 class="card-title text-dark mb-0">{{card.title}}</h3>
+ </header>
+ <section class="card-body mt-2 px-3">
+ <p class="card-text">{{ card.text}}</p>
+ </section>
+ {% if card.link %}
+ <footer class="card-footer p-0 mt-2">
+ <a href="{{ card.link.url }}" class="btn btn-block btn-l{% if card.link.type %} btn-{{card.link.type}}{% endif %}">
+ {{ card.link.text }}
+ </a>
+ </footer>
+ {% endif %}
+ </article>
+ {% endfor %}
</div>
{% endif %}
{%- endmacro %}
diff --git a/src/plainui/styles/_util-classes.scss b/src/plainui/styles/_util-classes.scss
index ebc46d8968e639d26d7bcf22e8c56c1549e3ea8d..1b9415e84e474708daa29a3a04f7082a1a9d9cc9 100644
--- a/src/plainui/styles/_util-classes.scss
+++ b/src/plainui/styles/_util-classes.scss
@@ -52,6 +52,7 @@ h5,
h6,
.h6 {
text-transform: lowercase;
+ letter-spacing: 0.075em;
}
.shadow-darkmorphism {
@@ -174,6 +175,14 @@ h6,
}
}
+.card-header {
+ padding: 0.5rem;
+}
+
+.card-footer {
+ border-top: none;
+}
+
.form-check {
padding-left: 1.75rem;
&-input {
diff --git a/src/plainui/styles/utils/_bootstrap-theme-plattform.scss b/src/plainui/styles/utils/_bootstrap-theme-plattform.scss
index e6f291fab42b926ac6a4e17f9b24899a06399b33..3fec9332872c38a1aa88e951402206ea1170a130 100644
--- a/src/plainui/styles/utils/_bootstrap-theme-plattform.scss
+++ b/src/plainui/styles/utils/_bootstrap-theme-plattform.scss
@@ -5,7 +5,7 @@
@import "./forms";
$gray-100: map-get($plattform, "four");
-$gray-900: map-get($plattform, "bg");
+$gray-900: map-get($plattform, "bg-three");
// bootstrap colors map has only white, gray-dark, use theme-colors instead
$primary: map-get($plattform, "one");
diff --git a/src/plainui/styles/utils/_colors.scss b/src/plainui/styles/utils/_colors.scss
index 4fd83d294e2f7fb513568b8c9b5818c65f8f233b..00316c78d6db95284c6371435cc2448b54e1e350 100644
--- a/src/plainui/styles/utils/_colors.scss
+++ b/src/plainui/styles/utils/_colors.scss
@@ -1,11 +1,12 @@
$plattform: (
- "one": #AE30FF, // original: #B239FF
- "two": #6800E7,
- "three": #05B9EC,
- "four": #FFFFFF,
- "bg": #100E23,
- "bg-two": #29255B,
- "font-pink": #B33CFF // necessary for high contrast theme
+ "one": #FFF, // original: #B239FF
+ "two": #000,
+ "three": #fff,
+ "four": #ffff,
+ "bg": rgba(0,0,0,1),
+ "bg-two": #fff,
+ "bg-three": #4C4C4C,
+ "font-pink": #cdb3dd // necessary for high contrast theme
);
$assembly: (
@@ -16,6 +17,7 @@ $assembly: (
"four": #FFFFFF,
"bg": #0E1C23,
"bg-two": #212B30,
+ "bg-three": #4C4C4C
);
$world: (
@@ -24,7 +26,8 @@ $world: (
"three": #751DE7,
"four": #FFFFFF,
"bg": #160624,
- "bg-two": #330E54
+ "bg-two": #330E54,
+ "bg-three": #4C4C4C
);
$high-contrast: (
@@ -32,5 +35,6 @@ $high-contrast: (
"two": #46EED5,
"three": #751DE7,
"four": #FFFFFF,
- "bg": #160624
+ "bg": #160624,
+ "bg-three": #4C4C4C
);
diff --git a/src/plainui/styles/utils/_fonts.scss b/src/plainui/styles/utils/_fonts.scss
index e35c6fe654fc166082f780a2e687f1308485a4f7..fdaafef82cfee5eb868ba13016e414a426357ea2 100644
--- a/src/plainui/styles/utils/_fonts.scss
+++ b/src/plainui/styles/utils/_fonts.scss
@@ -1,13 +1,13 @@
$font-family-sans-serif: "SpaceMono", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$headings-font-family: "Changa", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-$font-size-base: 1rem; //16px
-$line-height-base: 1.222;
+$font-size-base: 0.8125rem; //13px
+$line-height-base: 1.5;
-$h1-font-size: 4rem; //64px
-$h2-font-size: 2.25rem; //36px
-$h3-font-size: 1.75rem; //28px
-$h4-font-size: 1.5rem; //24px
+$h1-font-size: 4.25rem; //68px
+$h2-font-size: 1.25rem; //20px
+$h3-font-size: 1.125rem; //18px
+$h4-font-size: 1.125rem; //28px
$h5-font-size: $font-size-base;
$h6-font-size: $font-size-base;
diff --git a/src/plainui/styles/utils/_globals.scss b/src/plainui/styles/utils/_globals.scss
index 70dff44e0e4e15695349b420b2925a8875a1f314..2d2f4bf082c38d6491b8c6b85d1fea0acc37a56b 100644
--- a/src/plainui/styles/utils/_globals.scss
+++ b/src/plainui/styles/utils/_globals.scss
@@ -27,6 +27,8 @@ $spacers: (
17: ($spacer * 8) //128
);
+$bg-opacity-color: rgba(0,0,0,0.5);
+
$sizes: (
170: 10.625rem,
25: 25%,
@@ -49,9 +51,9 @@ $table-border-color: transparent;
$card-spacer-y: $spacer;
$card-spacer-x: ($spacer * 0.5);
-$card-border-width: 0;
-$card-border-color: null;
-$card-bg: transparent;
+$card-border-width: 1px;
+$card-border-color: #fff;
+$card-bg: $bg-opacity-color;
$card-columns-gap: $card-spacer-x;
$card-columns-margin: $card-spacer-y;