diff --git a/less/landing.less b/less/landing.less
index 130daeb..540c81f 100644
--- a/less/landing.less
+++ b/less/landing.less
@@ -54,6 +54,9 @@
@landing-action-bar-border-radius: @global-small-border-radius;
@landing-metrics-grip-gap: 80px;
+@landing-metrics-color: @global-inverse-color;
+@landing-metrics-background-color: @secondary-color;
+@landing-metrics-background-svg: '';
.landing {
#landing-center-content {
@@ -205,10 +208,16 @@
grid-gap: @landing-metrics-grip-gap;
}
- .landing-metrics-card {
- background-image: url("../metrics-bg.svg");
- background-repeat: no-repeat;
- background-size: cover;
+ .landing-metrics-card:extend(.uk-card) {
+ background-repeat: no-repeat, no-repeat;
+ @svg: escape(replace(@landing-metrics-background-svg, "@landing-metrics-background-color", @landing-metrics-background-color));
+ background-image: url("../metrics-badge.svg"), url("data: image/svg+xml, @{svg}");
+ background-position: bottom right, center;
+ background-blend-mode: color-dodge;
+ background-size: auto, cover;
+ background-color: unset;
+
+ color: @landing-metrics-color;
}
// rules for overriding styles of altmetrics embedded library
diff --git a/metrics-badge.svg b/metrics-badge.svg
index 067b2a0..906e447 100644
--- a/metrics-badge.svg
+++ b/metrics-badge.svg
@@ -1,8 +1,8 @@