diff --git a/sass/_article-list.scss b/sass/_article-list.scss index 85f5c4a..552eb75 100644 --- a/sass/_article-list.scss +++ b/sass/_article-list.scss @@ -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); + } } } diff --git a/sass/_comments.scss b/sass/_comments.scss index 96af815..5b95829 100644 --- a/sass/_comments.scss +++ b/sass/_comments.scss @@ -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); + } } } } diff --git a/sass/_containers.scss b/sass/_containers.scss index f3db574..4c30cc9 100644 --- a/sass/_containers.scss +++ b/sass/_containers.scss @@ -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; diff --git a/sass/_footer.scss b/sass/_footer.scss index baaff7d..d12c107 100644 --- a/sass/_footer.scss +++ b/sass/_footer.scss @@ -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; diff --git a/sass/_icon.scss b/sass/_icon.scss index ee9613f..5ca243b 100644 --- a/sass/_icon.scss +++ b/sass/_icon.scss @@ -1,4 +1,4 @@ -i.icon { +.icon { -webkit-mask-size: cover; display: inline-block; mask-size: cover; diff --git a/sass/_nav.scss b/sass/_nav.scss index 74e6a33..181dc28 100644 --- a/sass/_nav.scss +++ b/sass/_nav.scss @@ -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; diff --git a/sass/_statements.scss b/sass/_statements.scss index d3ebd05..de181e9 100644 --- a/sass/_statements.scss +++ b/sass/_statements.scss @@ -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); + } } } diff --git a/sass/_zola-anchor.scss b/sass/_zola-anchor.scss index 4d967a2..e00ad6a 100644 --- a/sass/_zola-anchor.scss +++ b/sass/_zola-anchor.scss @@ -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); } diff --git a/templates/article.html b/templates/article.html index 594df90..e8ea3d6 100644 --- a/templates/article.html +++ b/templates/article.html @@ -31,7 +31,7 @@ {% if page.extra.archive %}
- + Archived {{ page.extra.archive | markdown | safe }} @@ -41,7 +41,7 @@ {% if page.extra.trigger %}
- + Trigger Warning {{ page.extra.trigger | markdown | safe }} @@ -51,7 +51,7 @@ {% if page.extra.disclaimer %}
- + Disclaimer {{ page.extra.disclaimer | markdown | safe }} diff --git a/templates/article_list.html b/templates/article_list.html index 4a02d50..36a036b 100644 --- a/templates/article_list.html +++ b/templates/article_list.html @@ -17,13 +17,13 @@

{{ page.title }}

{%- if page.draft %} - + Drafted {%- endif %} {%- if page.extra.archive %} - + Archived {%- endif %} diff --git a/templates/page.html b/templates/page.html index fb325f2..fd06074 100644 --- a/templates/page.html +++ b/templates/page.html @@ -4,7 +4,7 @@ {% if page.extra.archive %}
- + Archived {{ page.extra.archive | markdown | safe }} diff --git a/templates/partials/comments.html b/templates/partials/comments.html index 1cfb155..62e9e6b 100644 --- a/templates/partials/comments.html +++ b/templates/partials/comments.html @@ -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);