Icon Fix

kristofzerbe · Jul 23, 2024 · 566e48d · 566e48d
1 parent a62d55d
commit 566e48d
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 23 deletions.
diff --git a/themes/landscape/layout/_partial/photo-item.ejs b/themes/landscape/layout/_partial/photo-item.ejs
@@ -26,7 +26,7 @@
   <% if (item) { %>
     <%  let syndication = item.meta?.custom?.links?.filter(l => l.url?.length > 0).map(s => ({ host: s.site, url: s.url })); %>
     <div class="card-links">
-      <%- partial('_partial/post/syndication-links', { syndication: syndication, type: "photo", view: "icon" }) %>
+      <%- partial('_partial/post/syndication-links', { syndication: syndication, type: "photo", text: false }) %>
     </div>
     <h3><a href="/<%= config.photo_dir %>/<%= item.key %>" class="h-link"><%- item.name %></a></h3>
   <% } else { %>

diff --git a/themes/landscape/layout/_partial/post/interaction.ejs b/themes/landscape/layout/_partial/post/interaction.ejs
@@ -26,7 +26,7 @@
 <div class="article-syndication" data-pagefind-ignore>
   <h2>Syndication</h2>
   <div class="syndication-wrapper">
-    <%- partial('syndication-links', { syndication: syndication, type: type, view: "text" }) %>
+    <%- partial('syndication-links', { syndication: syndication, type: type, text: true }) %>
   </div>
 </div>
 <% } %>

diff --git a/themes/landscape/layout/_partial/post/syndication-links.ejs b/themes/landscape/layout/_partial/post/syndication-links.ejs
@@ -3,10 +3,8 @@
   <a class="syndication-link host-<%- syn.host?.toLowerCase() %> u-syndication" 
      href="<%- syn.url %>" rel="syndication" target="_blank"
      title="Syndication of this <%- type %> on <%- hostname %>">
-    <% if (view === "text") { %>
+    <% if (text === true) { %>
       <span><%- hostname %></span>
-    <% } else { %>
-      <img src="/images/icons/<%- syn.host?.toLowerCase() %>.svg" />
      <% } %>
   </a>
 <% }); %>
diff --git a/themes/landscape/source/css/_partial/article.styl b/themes/landscape/source/css/_partial/article.styl
@@ -685,24 +685,24 @@
       &.host-500px
         background-image: url(/images/icons/500px.svg)
         background-size: 16px
-        background-position: 14px 6px
+        background-position: 15px 6px
         /[data-theme="dark"] &
           filter: invert(0.75)
       &.host-flickr
         background-image: url(/images/icons/flickr.svg)
         background-size: 20px
-        background-position: 11px 5px
+        background-position: 10px 6px
       &.host-pixelfed
         background-image: url(/images/icons/pixelfed.svg)
         background-size: 16px
-        background-position: 16px 6px
+        background-position: 15px 7px
         /[data-theme="dark"] &
           background-image: url(/images/icons/pixelfed_invert.svg)
           color: #aaa
       &.host-unsplash
         background-image: url(/images/icons/unsplash.svg)
-        background-size: 21px
-        background-position: 14px 3px
+        background-size: 16px
+        background-position: 14px 6px
         /[data-theme="dark"] &
           filter: invert(0.75)
       &.host-twitter

diff --git a/themes/landscape/source/css/_partial/page.styl b/themes/landscape/source/css/_partial/page.styl
@@ -464,24 +464,48 @@
           height: 160px
       div.card-links
         padding-top: (small-margin / 2)
-        a
+        a.syndication-link /* on extension see config.syndication_hosts */
           position: relative
-          padding-inline-end: 5px
+          width: 16px
+          height: 16px
+          padding-inline-end: 4px
+          background-size: 14px
+          background-repeat: no-repeat 
+          background-position: 0
           filter: grayscale(1)
-          &.syndication-link /* on extension see config.syndication_hosts */
-            &.host-500px
-              opacity: 0.33
-            &.host-flickr
-              opacity: 0.33
-            &.host-unsplash
-              opacity: 0.25
-            &.host-pixelfed
-              opacity: 0.4
-          img
-            width: 14px
+          /[data-theme="dark"] &
+            filter: grayscale(1) invert(1)
           &:hover
             filter: grayscale(0)
             opacity: 1 !important
+          &.host-500px
+            background-image: url(/images/icons/500px.svg)
+            opacity: 0.33
+            /[data-theme="dark"] &
+              &:hover
+                filter: invert(1)
+          &.host-flickr
+            background-image: url(/images/icons/flickr.svg)
+            opacity: 0.33
+            background-size: 16px
+            margin-inline-start: -1px
+            padding-inline-end: 7px
+          &.host-unsplash
+            background-image: url(/images/icons/unsplash.svg)
+            opacity: 0.25
+            background-size: 12px
+            /[data-theme="dark"] &
+              &:hover
+                filter: invert(1)
+          &.host-pixelfed
+            background-image: url(/images/icons/pixelfed.svg)
+            opacity: 0.4
+            /[data-theme="dark"] &
+              background-image: url(/images/icons/pixelfed_invert.svg)
+              filter: grayscale(1) invert(0)
+              &:hover
+                filter: grayscale(0)
+
       span.pre-title
         display: block
         margin-top: small-margin

diff --git a/themes/landscape/source/css/_partial/sidebar.styl b/themes/landscape/source/css/_partial/sidebar.styl
@@ -112,6 +112,12 @@ else
         top: 120px
         right: 16px
         opacity: 0.5
+        /[data-theme="dark"] &
+          filter: grayscale(1) invert(0)
+          background-image: url(/images/icons/pixelfed_invert.svg)
+          &:hover
+            filter: grayscale(0)
+
       &.me-mastodon
         background-image: url(/images/icons/mastodon.svg)
         top: 127px