diff --git a/app/assets/stylesheets/sdg/goals/show.scss b/app/assets/stylesheets/sdg/goals/show.scss
index 13b384215..3dbac8ff5 100644
--- a/app/assets/stylesheets/sdg/goals/show.scss
+++ b/app/assets/stylesheets/sdg/goals/show.scss
@@ -8,16 +8,30 @@
.sdg-goal {
> header {
+ @include grid-column-gutter;
+ align-items: center;
color: #fff;
- margin-top: $line-height / 2;
- padding-left: rem-calc(24);
+ display: flex;
+ margin: $line-height / 2 0;
text-shadow: 0 0 1px $black;
+ min-width: fit-content;
+
+ &::after {
+ align-self: stretch;
+ background: transparent no-repeat center right;
+ background-size: contain;
+ content: "";
+ flex: 1;
+ min-width: 100px;
+ }
}
@each $code, $color in $sdg-colors {
- &.sdg-goal-#{$code} {
- > header {
- background-color: $color;
+ &.sdg-goal-#{$code} > header {
+ background-color: $color;
+
+ &::after {
+ background-image: image-url("sdg/goal_#{$code}_icon_only");
}
}
}
diff --git a/vendor/assets/images/sdg/goal_10_icon_only.svg b/vendor/assets/images/sdg/goal_10_icon_only.svg
new file mode 100644
index 000000000..7737aa65b
--- /dev/null
+++ b/vendor/assets/images/sdg/goal_10_icon_only.svg
@@ -0,0 +1,27 @@
+
diff --git a/vendor/assets/images/sdg/goal_11_icon_only.svg b/vendor/assets/images/sdg/goal_11_icon_only.svg
new file mode 100644
index 000000000..1975f8e98
--- /dev/null
+++ b/vendor/assets/images/sdg/goal_11_icon_only.svg
@@ -0,0 +1,24 @@
+
diff --git a/vendor/assets/images/sdg/goal_12_icon_only.svg b/vendor/assets/images/sdg/goal_12_icon_only.svg
new file mode 100644
index 000000000..10d7dc7a6
--- /dev/null
+++ b/vendor/assets/images/sdg/goal_12_icon_only.svg
@@ -0,0 +1,15 @@
+
diff --git a/vendor/assets/images/sdg/goal_13_icon_only.svg b/vendor/assets/images/sdg/goal_13_icon_only.svg
new file mode 100644
index 000000000..4ee5157d6
--- /dev/null
+++ b/vendor/assets/images/sdg/goal_13_icon_only.svg
@@ -0,0 +1,20 @@
+
diff --git a/vendor/assets/images/sdg/goal_14_icon_only.svg b/vendor/assets/images/sdg/goal_14_icon_only.svg
new file mode 100644
index 000000000..15a9951bd
--- /dev/null
+++ b/vendor/assets/images/sdg/goal_14_icon_only.svg
@@ -0,0 +1,20 @@
+
diff --git a/vendor/assets/images/sdg/goal_15_icon_only.svg b/vendor/assets/images/sdg/goal_15_icon_only.svg
new file mode 100644
index 000000000..05731fa8c
--- /dev/null
+++ b/vendor/assets/images/sdg/goal_15_icon_only.svg
@@ -0,0 +1,30 @@
+
diff --git a/vendor/assets/images/sdg/goal_16_icon_only.svg b/vendor/assets/images/sdg/goal_16_icon_only.svg
new file mode 100644
index 000000000..637f6a576
--- /dev/null
+++ b/vendor/assets/images/sdg/goal_16_icon_only.svg
@@ -0,0 +1,39 @@
+
diff --git a/vendor/assets/images/sdg/goal_17_icon_only.svg b/vendor/assets/images/sdg/goal_17_icon_only.svg
new file mode 100644
index 000000000..18a4f585d
--- /dev/null
+++ b/vendor/assets/images/sdg/goal_17_icon_only.svg
@@ -0,0 +1,24 @@
+
diff --git a/vendor/assets/images/sdg/goal_1_icon_only.svg b/vendor/assets/images/sdg/goal_1_icon_only.svg
new file mode 100644
index 000000000..18d806dca
--- /dev/null
+++ b/vendor/assets/images/sdg/goal_1_icon_only.svg
@@ -0,0 +1,61 @@
+
diff --git a/vendor/assets/images/sdg/goal_2_icon_only.svg b/vendor/assets/images/sdg/goal_2_icon_only.svg
new file mode 100644
index 000000000..5a5330f86
--- /dev/null
+++ b/vendor/assets/images/sdg/goal_2_icon_only.svg
@@ -0,0 +1,17 @@
+
diff --git a/vendor/assets/images/sdg/goal_3_icon_only.svg b/vendor/assets/images/sdg/goal_3_icon_only.svg
new file mode 100644
index 000000000..669fb19af
--- /dev/null
+++ b/vendor/assets/images/sdg/goal_3_icon_only.svg
@@ -0,0 +1,17 @@
+
diff --git a/vendor/assets/images/sdg/goal_4_icon_only.svg b/vendor/assets/images/sdg/goal_4_icon_only.svg
new file mode 100644
index 000000000..0256524fb
--- /dev/null
+++ b/vendor/assets/images/sdg/goal_4_icon_only.svg
@@ -0,0 +1,24 @@
+
diff --git a/vendor/assets/images/sdg/goal_5_icon_only.svg b/vendor/assets/images/sdg/goal_5_icon_only.svg
new file mode 100644
index 000000000..30f0ff3f2
--- /dev/null
+++ b/vendor/assets/images/sdg/goal_5_icon_only.svg
@@ -0,0 +1,18 @@
+
diff --git a/vendor/assets/images/sdg/goal_6_icon_only.svg b/vendor/assets/images/sdg/goal_6_icon_only.svg
new file mode 100644
index 000000000..8d9bb9d73
--- /dev/null
+++ b/vendor/assets/images/sdg/goal_6_icon_only.svg
@@ -0,0 +1,18 @@
+
diff --git a/vendor/assets/images/sdg/goal_7_icon_only.svg b/vendor/assets/images/sdg/goal_7_icon_only.svg
new file mode 100644
index 000000000..69d1ade10
--- /dev/null
+++ b/vendor/assets/images/sdg/goal_7_icon_only.svg
@@ -0,0 +1,49 @@
+
diff --git a/vendor/assets/images/sdg/goal_8_icon_only.svg b/vendor/assets/images/sdg/goal_8_icon_only.svg
new file mode 100644
index 000000000..a542fa3df
--- /dev/null
+++ b/vendor/assets/images/sdg/goal_8_icon_only.svg
@@ -0,0 +1,28 @@
+
diff --git a/vendor/assets/images/sdg/goal_9_icon_only.svg b/vendor/assets/images/sdg/goal_9_icon_only.svg
new file mode 100644
index 000000000..fcf7175a3
--- /dev/null
+++ b/vendor/assets/images/sdg/goal_9_icon_only.svg
@@ -0,0 +1,26 @@
+