From ecc8f46e2b4286a53273517599785f2ab61312e1 Mon Sep 17 00:00:00 2001
From: nevfy <yaver4.0.0.0@gmail.com>
Date: Thu, 11 Apr 2024 07:01:47 +0300
Subject: [PATCH] fix: change broken img look

---
 assets/scss/_styles_project.scss        | 25 ++++++++++++++++++++++++-
 content/en/_index.html                  |  8 ++++++--
 layouts/shortcodes/landing-feature.html |  8 ++++++--
 layouts/shortcodes/landing-service.html |  4 +++-
 static/images/logos/nlnet.svg           |  2 +-
 5 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index 2c7602d..c25af63 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -74,10 +74,23 @@
 
 .sp-service-icon {
   margin-top: -4rem;
+  min-height: 6rem;
+  min-width: 4rem;
   max-width: 12rem;
   max-height: 8rem;
   margin-left: 2rem;
   width: max-content;
+  & > .error {
+    min-height: 6rem;
+    min-width: 4rem;
+  }
+}
+
+.sp-feature-img {
+  min-height: 20rem;
+  min-width: 20rem;
+  max-width: 40rem;
+  max-height: 40rem;
 }
 
 .sp-service-card {
@@ -92,8 +105,9 @@
 }
 
 .sp-supperted-by-img {
-  max-height: 5rem;
+  pointer-events: none;
   margin: 1rem;
+  width: 15rem;
 }
 
 .sp-supported-by-list {
@@ -129,3 +143,12 @@ a.nav-link.sp-coming-soon {
     border-radius: .1rem;
   }
 }
+
+.sp-feature-img.error {
+  min-width: 20rem;
+  min-height: 20rem;
+}
+
+.error {
+  background-color: lightgray;
+}
\ No newline at end of file
diff --git a/content/en/_index.html b/content/en/_index.html
index c88d2ed..256c2c1 100644
--- a/content/en/_index.html
+++ b/content/en/_index.html
@@ -193,10 +193,14 @@ linkTitle = "SelfPrivacy"
 <div class="card sp-supported-by-card h-100">
 	<div class="card-body sp-supported-by-list">
 		<a href="https://nlnet.nl/project/SelfPrivacy/" target="_blank" rel="noopener noreferrer">
-			<img class="sp-supperted-by-img" src="/images/logos/nlnet.svg" alt="NLnet foundation">
+			<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>
+            </object>
 		</a>
 		<a href="https://privacyaccelerator.org" target="_blank" rel="noopener noreferrer">
-			<img class="sp-supperted-by-img" src="/images/logos/PrivacyAcceleratorLogo.svg" alt="Privacy Accelerator">
+			<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>
+            </object>
 		</a>
     </div>
 </div>
diff --git a/layouts/shortcodes/landing-feature.html b/layouts/shortcodes/landing-feature.html
index e582cb8..614115a 100644
--- a/layouts/shortcodes/landing-feature.html
+++ b/layouts/shortcodes/landing-feature.html
@@ -11,13 +11,17 @@
         </div>
         {{ if $illustration }}
         <div class="col-md-4 col-xs-12 my-auto">
-            <img class="card-img-top rounded-img" src="{{ $illustration.RelPermalink }}" alt="">
+            <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>
+            </object>
         </div>
         {{ end }}
     {{ else }}
         {{ if $illustration }}
         <div class="col-md-4 col-xs-12 my-auto">
-            <img class="card-img-top rounded-img" src="{{ $illustration.RelPermalink }}" alt="">
+            <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>
+            </object>
         </div>
         {{ end }}
         <div class="col-md-8 col-xs-12 my-auto px-5">
diff --git a/layouts/shortcodes/landing-service.html b/layouts/shortcodes/landing-service.html
index cf7de98..482669b 100644
--- a/layouts/shortcodes/landing-service.html
+++ b/layouts/shortcodes/landing-service.html
@@ -1,7 +1,9 @@
 {{ $illustration := .Get 0 }}
 {{ $title := .Get 1 }}
 <div class="card sp-service-card h-100">
-    <img class="card-img-top rounded-img sp-service-icon" src="{{ $illustration }}" alt="">
+    <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>
+    </object>
     <div class="card-body">
         <h4 class="card-title">{{ $title }}</h4>
         {{ .Inner }}
diff --git a/static/images/logos/nlnet.svg b/static/images/logos/nlnet.svg
index 248e59c..4f0e4e9 100644
--- a/static/images/logos/nlnet.svg
+++ b/static/images/logos/nlnet.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 <!-- Created using Karbon14, part of koffice: http://www.koffice.org/karbon -->
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="449px" height="168px">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="449px" height="170px" viewBox="0 0 449 168">
   <defs>
   </defs>
   <g id="Layer">