Move the rest of the icons to CSS mask
This way user can change the icon without overriding the template itself, plus it's cleaner this way
This commit is contained in:
daudix
@ -33,19 +33,35 @@
|
||||
padding: 0.25rem 0.75rem;
|
||||
font-weight: bold;
|
||||
|
||||
svg {
|
||||
.icon {
|
||||
vertical-align: -0.125em;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.draft-badge {
|
||||
background-color: var(--fg-muted-1);
|
||||
color: var(--fg-muted-4);
|
||||
|
||||
.icon {
|
||||
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M12.277.832c-.578.008-1.168.23-1.691.754l-9 9A2 2 0 0 0 1 12v3h3c.531 0 1.04-.21 1.414-.586l9-9c1.79-1.789.082-4.39-1.89-4.57-.083-.012-.165-.012-.247-.012M10.5 4.437 11.563 5.5 4.5 12.563 3.438 11.5zm0 0'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: $icon;
|
||||
mask-image: $icon;
|
||||
background-color: var(--fg-muted-4);
|
||||
}
|
||||
}
|
||||
|
||||
.archive-badge {
|
||||
background-color: var(--purple-bg);
|
||||
color: var(--purple-fg);
|
||||
|
||||
.icon {
|
||||
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 1a1 1 0 0 0-.926.625l-2 5A1 1 0 0 0 1 7v7s0 2 2 2h10s2 0 2-2l.004-6.937c0-.149-.004-.297-.074-.438l-2-5A1 1 0 0 0 12 1zm.676 2h6.644l1.203 3h-9.05zM7 8h2v3h2a1 1 0 0 1-.293.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.285-.7L5 11h2zm0 0'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: $icon;
|
||||
mask-image: $icon;
|
||||
background-color: var(--purple-fg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -143,10 +143,12 @@ section#comments {
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-decoration: none;
|
||||
|
||||
svg {
|
||||
.icon {
|
||||
vertical-align: -0.125em;
|
||||
transition: transform var(--transition-longer);
|
||||
margin-inline-end: 0.25rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@ -165,10 +167,17 @@ section#comments {
|
||||
&:hover {
|
||||
background-color: var(--boosts-bg);
|
||||
|
||||
svg {
|
||||
.icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 1v2H4C1.8 3 0 4.8 0 7v2a4 4 0 0 0 1.02 2.672 1 1 0 1 0 1.488-1.336A1.97 1.97 0 0 1 2 9V7c0-1.125.875-2 2-2h4v2h1v-.008a1 1 0 0 0 .707-.285l2-2a1 1 0 0 0 0-1.414l-2-2A1 1 0 0 0 9 1.008V1zm6.29 3a1 1 0 0 0-.72.258.993.993 0 0 0-.078 1.41c.317.355.508.816.508 1.34v2c0 1.125-.875 2-2 2H8V9H7v.008a1 1 0 0 0-.707.285l-2 2a1 1 0 0 0 0 1.414l2 2c.187.184.441.29.707.285V15h1v-1.992h4c2.2 0 4-1.805 4-4v-2a4 4 0 0 0-1.02-2.676A1 1 0 0 0 14.29 4m0 0'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: $icon;
|
||||
mask-image: $icon;
|
||||
background-color: var(--boosts-fg);
|
||||
}
|
||||
}
|
||||
|
||||
.faves {
|
||||
@ -177,10 +186,17 @@ section#comments {
|
||||
&:hover {
|
||||
background-color: var(--faves-bg);
|
||||
|
||||
svg {
|
||||
.icon {
|
||||
transform: rotate(72deg);
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0a1 1 0 0 0-.95.684l-1.448 4.34-4.59-.016C.032 5.004-.371 6.266.43 6.828l3.625 2.555-1.5 4.285c-.317.902.687 1.691 1.492 1.172l4.004-2.594 3.894 2.586c.801.531 1.817-.258 1.5-1.16l-1.504-4.29 3.645-2.577c.789-.563.394-1.809-.574-1.813l-4.66-.015L8.949.69A1 1 0 0 0 8 0m0 0'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: $icon;
|
||||
mask-image: $icon;
|
||||
background-color: var(--faves-fg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
&.active {
|
||||
background-color: var(--primary-color-alpha);
|
||||
|
||||
i {
|
||||
.icon {
|
||||
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.883 0q-.486.008-.965.074a7.98 7.98 0 0 0-4.602 2.293 8.01 8.01 0 0 0-1.23 9.664 8.015 8.015 0 0 0 9.02 3.684 8 8 0 0 0 5.89-7.75 1 1 0 1 0-2 .008 5.986 5.986 0 0 1-4.418 5.816 5.996 5.996 0 0 1-6.762-2.766 5.99 5.99 0 0 1 .922-7.25 5.99 5.99 0 0 1 7.239-.984 1 1 0 0 0 1.363-.371c.273-.48.11-1.09-.371-1.367A8 8 0 0 0 9.492.14 8 8 0 0 0 7.882 0m7.15 1.998-.1.002a1 1 0 0 0-.687.34L7.95 9.535 5.707 7.29A1 1 0 0 0 4 8a1 1 0 0 0 .293.707l3 3c.195.195.465.3.742.293.277-.012.535-.133.719-.344l7-8A1 1 0 0 0 16 2.934a1 1 0 0 0-.34-.688 1 1 0 0 0-.627-.248'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: $icon;
|
||||
mask-image: $icon;
|
||||
@ -45,7 +45,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
.icon {
|
||||
$icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3 0 .55-.45 1-1 1s-1-.45-1-1c0-.57-.43-1-1-1H3c-.57 0-1 .43-1 1v5c0 .57.43 1 1 1 .55 0 1 .45 1 1s-.45 1-1 1c-1.645 0-3-1.355-3-3zm5 5c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3v5c0 1.645-1.355 3-3 3H8c-1.645 0-3-1.355-3-3zm2 0v5c0 .57.43 1 1 1h5c.57 0 1-.43 1-1V8c0-.57-.43-1-1-1H8c-.57 0-1 .43-1 1m0 0'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: $icon;
|
||||
mask-image: $icon;
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
box-shadow: var(--edge-highlight);
|
||||
background-color: var(--fg-muted-1);
|
||||
|
||||
i {
|
||||
.icon {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
@ -63,7 +63,7 @@
|
||||
transform: scale(var(--active));
|
||||
}
|
||||
|
||||
i {
|
||||
.icon {
|
||||
transition: background-color var(--transition);
|
||||
background-color: var(--fg-muted-4);
|
||||
width: 1.5rem;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
i.icon {
|
||||
.icon {
|
||||
-webkit-mask-size: cover;
|
||||
display: inline-block;
|
||||
mask-size: cover;
|
||||
|
||||
@ -120,11 +120,11 @@
|
||||
#feed a {
|
||||
padding: 0.325rem 0.625rem;
|
||||
|
||||
&:hover i {
|
||||
&:hover .icon {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
i {
|
||||
.icon {
|
||||
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M1.988 1.988V3c.008.547.453.984 1 .988.004-.004.008-.004.012-.004v.028A8.977 8.977 0 0 1 11.988 13a.991.991 0 0 0 1 .984h1V13h-.004c0-.004 0-.004.004-.008C13.984 7.02 9.184 2.148 3.242 2.02A1.004 1.004 0 0 0 3 1.988v-.004zm0 4V7c.008.547.453.984 1 .988.004-.004.008-.004.012-.004V8a4.985 4.985 0 0 1 4.996 4.844 1.002 1.002 0 0 0 .988 1.145c.008-.005.012-.005.016-.005v.004h.984V13H10c0-3.793-3.047-6.898-6.82-6.992 0-.004-.004-.004-.004-.004A.892.892 0 0 0 3 5.988v-.004zm2 4a1.999 1.999 0 1 0-.002 3.998 1.999 1.999 0 0 0 .002-3.998m0 0'%3E%3C/path%3E%3C/svg%3E");
|
||||
-webkit-mask-image: $icon;
|
||||
vertical-align: -0.125em;
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
.big {
|
||||
font-size: 1.5rem;
|
||||
|
||||
svg {
|
||||
.icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
@ -26,15 +26,36 @@
|
||||
&.archive {
|
||||
background-color: var(--purple-bg);
|
||||
color: var(--purple-fg);
|
||||
|
||||
.icon {
|
||||
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 1a1 1 0 0 0-.926.625l-2 5A1 1 0 0 0 1 7v7s0 2 2 2h10s2 0 2-2l.004-6.937c0-.149-.004-.297-.074-.438l-2-5A1 1 0 0 0 12 1zm.676 2h6.644l1.203 3h-9.05zM7 8h2v3h2a1 1 0 0 1-.293.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.285-.7L5 11h2zm0 0'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: $icon;
|
||||
mask-image: $icon;
|
||||
background-color: var(--purple-fg);
|
||||
}
|
||||
}
|
||||
|
||||
&.disclaimer {
|
||||
background-color: var(--red-bg);
|
||||
color: var(--red-fg);
|
||||
|
||||
.icon {
|
||||
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.906.094C7.38.066 6.867.375 6.47 1.063L.219 12.656C-.316 13.621.266 15 1.313 15h13.156c.98 0 1.902-1.16 1.219-2.344L9.375 1.125C8.977.48 8.434.121 7.906.094M9 4v5c.008.527-.473 1-1 1s-1.008-.473-1-1V4zm-1 7c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1m0 0'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: $icon;
|
||||
mask-image: $icon;
|
||||
background-color: var(--red-fg);
|
||||
}
|
||||
}
|
||||
|
||||
&.trigger {
|
||||
background-color: var(--yellow-bg);
|
||||
color: var(--yellow-fg);
|
||||
|
||||
.icon {
|
||||
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.906.094C7.38.066 6.867.375 6.47 1.063L.219 12.656C-.316 13.621.266 15 1.313 15h13.156c.98 0 1.902-1.16 1.219-2.344L9.375 1.125C8.977.48 8.434.121 7.906.094M9 4v5c.008.527-.473 1-1 1s-1.008-.473-1-1V4zm-1 7c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1m0 0'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: $icon;
|
||||
mask-image: $icon;
|
||||
background-color: var(--yellow-fg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,11 +14,11 @@ h6 {
|
||||
transition: opacity var(--transition);
|
||||
margin: 0 0.25em;
|
||||
|
||||
&:hover i {
|
||||
&:hover .icon {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
i {
|
||||
.icon {
|
||||
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 4C1.8 4 0 5.8 0 8s1.8 4 4 4v-2c-1.125 0-2-.875-2-2s.875-2 2-2h3c1.125 0 2 .875 2 2 0 .84-.496 1.535-1.207 1.84l.785 1.84A4 4 0 0 0 11 8c0-2.2-1.8-4-4-4zm8 2v2c1.125 0 2 .875 2 2s-.875 2-2 2H9c-1.125 0-2-.875-2-2 0-.828.484-1.516 1.184-1.828l-.817-1.828A4.01 4.01 0 0 0 5 10c0 2.2 1.8 4 4 4h3c2.2 0 4-1.8 4-4s-1.8-4-4-4'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: $icon;
|
||||
-webkit-mask-size: cover;
|
||||
@ -31,6 +31,6 @@ h6 {
|
||||
}
|
||||
}
|
||||
|
||||
:target .zola-anchor i {
|
||||
:target .zola-anchor .icon {
|
||||
background-color: var(--primary-color-alpha);
|
||||
}
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
{% if page.extra.archive %}
|
||||
<div class="statement-container archive">
|
||||
<strong class="big">
|
||||
<svg viewBox="0 0 16 16" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M4 1a1 1 0 0 0-.926.625l-2 5A1 1 0 0 0 1 7v7s0 2 2 2h10s2 0 2-2l.004-6.937c0-.149-.004-.297-.074-.438l-2-5A1 1 0 0 0 12 1zm.676 2h6.644l1.203 3h-9.05zM7 8h2v3h2a1 1 0 0 1-.293.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.285-.7L5 11h2zm0 0"/></svg>
|
||||
<i class="icon"></i>
|
||||
Archived
|
||||
</strong>
|
||||
{{ page.extra.archive | markdown | safe }}
|
||||
@ -41,7 +41,7 @@
|
||||
{% if page.extra.trigger %}
|
||||
<div class="statement-container trigger">
|
||||
<strong class="big">
|
||||
<svg viewBox="0 0 16 16" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7.906.094C7.38.066 6.867.375 6.47 1.063L.219 12.656C-.316 13.621.266 15 1.313 15h13.156c.98 0 1.902-1.16 1.219-2.344L9.375 1.125C8.977.48 8.434.121 7.906.094M9 4v5c.008.527-.473 1-1 1s-1.008-.473-1-1V4zm-1 7c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1m0 0"/></svg>
|
||||
<i class="icon"></i>
|
||||
Trigger Warning
|
||||
</strong>
|
||||
{{ page.extra.trigger | markdown | safe }}
|
||||
@ -51,7 +51,7 @@
|
||||
{% if page.extra.disclaimer %}
|
||||
<div class="statement-container disclaimer">
|
||||
<strong class="big">
|
||||
<svg viewBox="0 0 16 16" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7.906.094C7.38.066 6.867.375 6.47 1.063L.219 12.656C-.316 13.621.266 15 1.313 15h13.156c.98 0 1.902-1.16 1.219-2.344L9.375 1.125C8.977.48 8.434.121 7.906.094M9 4v5c.008.527-.473 1-1 1s-1.008-.473-1-1V4zm-1 7c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1m0 0"/></svg>
|
||||
<i class="icon"></i>
|
||||
Disclaimer
|
||||
</strong>
|
||||
{{ page.extra.disclaimer | markdown | safe }}
|
||||
|
||||
@ -17,13 +17,13 @@
|
||||
<h3><a class="link-page" href="{{ page.permalink | safe }}">{{ page.title }}</a></h3>
|
||||
{%- if page.draft %}
|
||||
<span class="draft-badge">
|
||||
<svg viewBox="0 0 16 16" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M12.277.832c-.578.008-1.168.23-1.691.754l-9 9A2 2 0 0 0 1 12v3h3c.531 0 1.04-.21 1.414-.586l9-9c1.79-1.789.082-4.39-1.89-4.57-.083-.012-.165-.012-.247-.012M10.5 4.437 11.563 5.5 4.5 12.563 3.438 11.5zm0 0"/></svg>
|
||||
<i class="icon"></i>
|
||||
Drafted
|
||||
</span>
|
||||
{%- endif %}
|
||||
{%- if page.extra.archive %}
|
||||
<span class="archive-badge">
|
||||
<svg viewBox="0 0 16 16" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M4 1a1 1 0 0 0-.926.625l-2 5A1 1 0 0 0 1 7v7s0 2 2 2h10s2 0 2-2l.004-6.937c0-.149-.004-.297-.074-.438l-2-5A1 1 0 0 0 12 1zm.676 2h6.644l1.203 3h-9.05zM7 8h2v3h2a1 1 0 0 1-.293.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.285-.7L5 11h2zm0 0"/></svg>
|
||||
<i class="icon"></i>
|
||||
Archived
|
||||
</span>
|
||||
{%- endif %}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
{% if page.extra.archive %}
|
||||
<div class="statement-container archive">
|
||||
<strong class="big">
|
||||
<svg viewBox="0 0 16 16" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M4 1a1 1 0 0 0-.926.625l-2 5A1 1 0 0 0 1 7v7s0 2 2 2h10s2 0 2-2l.004-6.937c0-.149-.004-.297-.074-.438l-2-5A1 1 0 0 0 12 1zm.676 2h6.644l1.203 3h-9.05zM7 8h2v3h2a1 1 0 0 1-.293.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.285-.7L5 11h2zm0 0"/></svg>
|
||||
<i class="icon"></i>
|
||||
Archived
|
||||
</strong>
|
||||
{{ page.extra.archive | markdown | safe }}
|
||||
|
||||
@ -64,8 +64,6 @@
|
||||
img.setAttribute("src", escapeHtml(emoji.static_url));
|
||||
img.setAttribute("alt", `:${emoji.shortcode}:`);
|
||||
img.setAttribute("title", `:${emoji.shortcode}:`);
|
||||
img.setAttribute("width", "20");
|
||||
img.setAttribute("height", "20");
|
||||
|
||||
picture.appendChild(source);
|
||||
picture.appendChild(img);
|
||||
@ -203,18 +201,10 @@
|
||||
let boosts = document.createElement("a");
|
||||
boosts.className = "boosts";
|
||||
boosts.setAttribute("href", `${status.url}/reblogs`);
|
||||
boosts.setAttribute("title", `Favorites from ${instance}`);
|
||||
boosts.setAttribute("title", `Boosts from ${instance}`);
|
||||
|
||||
let boostsIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
boostsIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
|
||||
boostsIcon.setAttribute("width", "16");
|
||||
boostsIcon.setAttribute("height", "16");
|
||||
boostsIcon.setAttribute("viewBox", "0 0 16 16");
|
||||
|
||||
let boostsPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||||
boostsPath.setAttribute("fill", "currentColor");
|
||||
boostsPath.setAttribute("d", "M8 1v2H4C1.8 3 0 4.8 0 7v2a4 4 0 0 0 1.02 2.672 1 1 0 1 0 1.488-1.336A1.97 1.97 0 0 1 2 9V7c0-1.125.875-2 2-2h4v2h1v-.008a1 1 0 0 0 .707-.285l2-2a1 1 0 0 0 0-1.414l-2-2A1 1 0 0 0 9 1.008V1zm6.29 3a1 1 0 0 0-.72.258.993.993 0 0 0-.078 1.41c.317.355.508.816.508 1.34v2c0 1.125-.875 2-2 2H8V9H7v.008a1 1 0 0 0-.707.285l-2 2a1 1 0 0 0 0 1.414l2 2c.187.184.441.29.707.285V15h1v-1.992h4c2.2 0 4-1.805 4-4v-2a4 4 0 0 0-1.02-2.676A1 1 0 0 0 14.29 4m0 0");
|
||||
boostsIcon.appendChild(boostsPath);
|
||||
let boostsIcon = document.createElement("i");
|
||||
boostsIcon.className = "icon";
|
||||
boosts.appendChild(boostsIcon);
|
||||
boosts.insertAdjacentHTML('beforeend', ` ${status.reblogs_count}`);
|
||||
interactions.appendChild(boosts);
|
||||
@ -224,16 +214,8 @@
|
||||
faves.setAttribute("href", `${status.url}/favourites`);
|
||||
faves.setAttribute("title", `Favorites from ${instance}`);
|
||||
|
||||
let favesIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
favesIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
|
||||
favesIcon.setAttribute("width", "16");
|
||||
favesIcon.setAttribute("height", "16");
|
||||
favesIcon.setAttribute("viewBox", "0 0 16 16");
|
||||
|
||||
let favesPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||||
favesPath.setAttribute("fill", "currentColor");
|
||||
favesPath.setAttribute("d", "M8 0a1 1 0 0 0-.95.684l-1.448 4.34-4.59-.016C.032 5.004-.371 6.266.43 6.828l3.625 2.555-1.5 4.285c-.317.902.687 1.691 1.492 1.172l4.004-2.594 3.894 2.586c.801.531 1.817-.258 1.5-1.16l-1.504-4.29 3.645-2.577c.789-.563.394-1.809-.574-1.813l-4.66-.015L8.949.69A1 1 0 0 0 8 0m0 0");
|
||||
favesIcon.appendChild(favesPath);
|
||||
let favesIcon = document.createElement("i");
|
||||
favesIcon.className = "icon";
|
||||
faves.appendChild(favesIcon);
|
||||
faves.insertAdjacentHTML('beforeend', ` ${status.favourites_count}`);
|
||||
interactions.appendChild(faves);
|
||||
|
||||
Reference in New Issue
Block a user