hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move the rest of the icons to CSS mask

Browse Source 
This way user can change the icon without overriding the template
itself, plus it's cleaner this way
This commit is contained in:
daudix
2024-06-13 17:15:35 +03:00
parent c0c06fe929
commit 9eee1bc77d
12 changed files with 79 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
templates/article.html
View File

@ -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 }}

4
templates/article_list.html
View File

@ -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 %}

2
templates/page.html
View File

@ -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 }}

28
templates/partials/comments.html
View File

@ -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);