themes/default/layouts/_default/section.following: Use SVG fallback

2 files changed, 29 insertions, 10 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index d3d2b6f..460f137 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -113,7 +113,8 @@
   kbd,
   img,
   video,
-  figure span {
+  figure span,
+  figure a svg {
     filter: brightness(75%);
   }
   code-block pre,
@@ -181,7 +182,7 @@ li:target [role="doc-backlink"][href^="#fnref\:"],
 
 :hover:not(a):not(s):not(span):not(img):not(summary):not(nav):not(abbr):not(
     form
-  ):not(code):not(mark):not(td):not(nav):not(p):not(object):not(tab-bar) {
+  ):not(code):not(svg):not(mark):not(td):not(nav):not(p):not(object):not(tab-bar) {
   border-radius: 0.5rem;
 }
 
@@ -233,6 +234,10 @@ micro-card[id] article h3 {
   font-style: italic;
 }
 
+figure a svg text {
+  font-size: 120%;
+}
+
 html,
 samp,
 blockquote span {
@@ -769,6 +774,7 @@ self-embed iframe {
 }
 
 img,
+figure a svg,
 figure object {
   height: auto;
   max-width: 100%;
@@ -789,6 +795,7 @@ figure object {
 
 img:hover,
 video:hover,
+figure a svg:hover,
 figure span:hover {
   box-shadow: 0 0 14px #00000060;
   box-shadow: 0 0 14px var(--shadow);
@@ -1129,6 +1136,7 @@ micro-card header figure > a:hover {
 tag-card figure img,
 micro-card header figure img,
 micro-card header figure span,
+micro-card header figure a svg,
 micro-card header figure object {
   border-radius: 100%;
   min-width: 3.5rem;
diff --git a/themes/default/layouts/_default/section.following.html b/themes/default/layouts/_default/section.following.html
index 2bfcc2e..fb29a01 100644
--- a/themes/default/layouts/_default/section.following.html
+++ b/themes/default/layouts/_default/section.following.html
@@ -31,14 +31,25 @@
               <a
                 title="{{ $distinct.FeedName }}"
                 href="{{ $href }}">
-                <picture>
-                  <img
-                    width="64"
-                    height="64"
-                    alt="{{ $distinct.FeedName }}"
-                    src="{{ $.Site.BaseURL }}{{ $favicon }}"
-                  />
-                </picture>
+                {{- if fileExists (print "public/" $favicon) -}}
+                  <picture>
+                    <img
+                      width="64"
+                      height="64"
+                      alt="{{ $distinct.FeedName }}"
+                      src="{{ $.Site.BaseURL }}{{ $favicon }}"
+                    />
+                  </picture>
+                {{- else -}}
+                  <svg xmlns="http://www.w3.org/2000/svg">
+                    <text
+                      x="50%"
+                      y="50%"
+                      text-anchor="middle"
+                      dominant-baseline="middle"
+                      >{{ delimit (first 1 (split $distinct.FeedName "")) "" | strings.Title }}</text>
+                  </svg>
+                {{- end -}}
               </a>
             </figure>
           </header>