fix: svg placeholder style

assets/scss/_styles_project.scss

@@ -82,7 +82,7 @@
   width: max-content;
   & > .error {
     min-height: 6rem;
-    min-width: 4rem;
+    min-width: 6rem;
   }
 }
 
@@ -150,5 +150,17 @@ a.nav-link.sp-coming-soon {
 }
 
 .error {
-  background-color: lightgray;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 2rem;
+  padding: 1rem;
+  background-color: transparent;
+  border: lightgray solid .25rem;
+  border-radius: .5rem;
+  & > i {
+    color: lightgray;
+  }
 }

content/en/_index.html

@@ -194,12 +194,18 @@ linkTitle = "SelfPrivacy"
 	<div class="card-body sp-supported-by-list">
 		<a href="https://nlnet.nl/project/SelfPrivacy/" target="_blank" rel="noopener noreferrer">
 			<object role="img" aria-label="NLnet foundation" class="d-flex justify-content-center align-items-center sp-supperted-by-img" type="image/svg+xml" data="/images/logos/nlnet.svg">
-                <div class="error">NLnet foundation</div>
+                <div class="error">
+					<i class="fa-solid fa-triangle-exclamation"></i>
+					NLnet foundation
+				</div>
             </object>
 		</a>
 		<a href="https://privacyaccelerator.org" target="_blank" rel="noopener noreferrer">
 			<object role="img" aria-label="Privacy Accelerator" class="d-flex justify-content-center align-items-center sp-supperted-by-img" type="image/svg+xml" data="/images/logos/PrivacyAcceleratorLogo.svg">
-                <div class="error">Privacy Accelerator</div>
+                <div class="error">
+					<i class="fa-solid fa-triangle-exclamation"></i>
+					Privacy Accelerator
+				</div>
             </object>
 		</a>
     </div>

layouts/shortcodes/landing-feature.html

@@ -12,7 +12,9 @@
         {{ if $illustration }}
         <div class="col-md-4 col-xs-12 my-auto">
             <object role="img" class="d-flex justify-content-center align-items-center card-img-top" type="image/svg+xml" data="{{ $illustration.RelPermalink }}">
-                <div class="error sp-feature-img"></div>
+                <div class="error sp-feature-img">
+                    <i class="fa-solid fa-triangle-exclamation"></i>
+                </div>
             </object>
         </div>
         {{ end }}
@@ -20,7 +22,9 @@
         {{ if $illustration }}
         <div class="col-md-4 col-xs-12 my-auto">
             <object role="img" class="d-flex justify-content-center align-items-center card-img-top" type="image/svg+xml" data="{{ $illustration.RelPermalink }}">
-                <div class="error sp-feature-img"></div>
+                <div class="error sp-feature-img">
+                    <i class="fa-solid fa-triangle-exclamation"></i>
+                </div>
             </object>
         </div>
         {{ end }}

layouts/shortcodes/landing-service.html

@@ -2,7 +2,9 @@
 {{ $title := .Get 1 }}
 <div class="card sp-service-card h-100">
     <object class="d-flex justify-content-center align-items-center card-img-top sp-service-icon" type="image/svg+xml" data="{{ $illustration }}">
-        <div class="error"></div>
+        <div class="error">
+            <i class="fa-solid fa-triangle-exclamation"></i>
+        </div>
     </object>
     <div class="card-body">
         <h4 class="card-title">{{ $title }}</h4>