commit f2bb633565ebf137fefdd6abd3dab459749d496d
parent 10937684a6ff7df8a048f4b3ffcebf7e7c7d26b6
Author: Jack Mordaunt <jackmordaunt.dev@gmail.com>
Date: Tue, 15 Jul 2025 18:35:43 -0300
site: inline sourcehut svg so it can be styled
This fixes an annoying quirk with html, where svgs included via <img>
cannot be styled with css, but svgs literally placed in the document
can.
To achieve this we have to put the svg under "assets" folder so that
hugo can see it. Then we insert a template block calling readFile which
embeds the svg file literally.
Then we can simply use normal css rules to change the color based on the
theme and apply a transition to match the other icons.
Signed-off-by: Jack Mordaunt <jackmordaunt.dev@gmail.com>
Diffstat:
15 files changed, 32 insertions(+), 37 deletions(-)
diff --git a/assets/css/custom.css b/assets/css/custom.css
@@ -1,29 +1,18 @@
.custom-icon {
height: 2em; /* Match Font Awesome's fa-2x */
- width: auto; /* Maintain aspect ratio */
+ width: 2em; /* Match Font Awesome's fa-2x */
vertical-align: text-bottom; /* Align nicely with inline icons */
display: inline-block;
- fill: currentColor; /* If the SVG supports currentColor */
}
-.custom-icon-dark, .custom-icon-light {
- display: none;
+.colorscheme-light .custom-icon {
+ fill: black;
+ transition: fill 0.5s ease;
}
-.colorscheme-dark .custom-icon-dark{
- display: inline-block;
-}
-
-.colorscheme-light .custom-icon-dark {
- display: none;
-}
-
-.colorscheme-light .custom-icon-light {
- display: inline-block;
-}
-
-.colorscheme-dark .custom-icon-light {
- display: none;
+.colorscheme-dark .custom-icon {
+ fill: white;
+ transition: fill 0.5s ease;
}
.contact-page {
diff --git a/assets/images/sourcehut.svg b/assets/images/sourcehut.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+ <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z">
+ </path>
+</svg>
diff --git a/hugo.toml b/hugo.toml
@@ -52,9 +52,7 @@ style = "github-dark"
[[params.social]]
name = "Sourcehut"
icon = "fa-1x"
- # Hack because sourcehut icon not in fa. Light & Dark are swapped based on theme.
- srclight = "https://sourcehut.org/sourcehut.svg"
- srcdark = "https://sourcehut.org/sourcehut-white.svg"
+ svg = "assets/images/sourcehut.svg"
weight = 2
url = "https://git.sr.ht/~jackmordaunt"
[[params.social]]
diff --git a/public/404.html b/public/404.html
@@ -58,7 +58,7 @@
- <link rel="stylesheet" href="/css/custom.min.60bb24096606c707ec89390857bae4cfcba1c792420053d989ab058e17fe42f3.css" integrity="sha256-YLskCWYGxwfsiTkIV7rkz8uhx5JCAFPZiasFjhf+QvM=" crossorigin="anonymous" media="screen" />
+ <link rel="stylesheet" href="/css/custom.min.261b56720b4eadc5571dbea97c64c4132dd5f104af3dc8589fe5749ae86cc162.css" integrity="sha256-JhtWcgtOrcVXHb6pfGTEEy3V8QSvPchYn+V0muhswWI=" crossorigin="anonymous" media="screen" />
diff --git a/public/about/index.html b/public/about/index.html
@@ -62,7 +62,7 @@
- <link rel="stylesheet" href="/css/custom.min.60bb24096606c707ec89390857bae4cfcba1c792420053d989ab058e17fe42f3.css" integrity="sha256-YLskCWYGxwfsiTkIV7rkz8uhx5JCAFPZiasFjhf+QvM=" crossorigin="anonymous" media="screen" />
+ <link rel="stylesheet" href="/css/custom.min.261b56720b4eadc5571dbea97c64c4132dd5f104af3dc8589fe5749ae86cc162.css" integrity="sha256-JhtWcgtOrcVXHb6pfGTEEy3V8QSvPchYn+V0muhswWI=" crossorigin="anonymous" media="screen" />
diff --git a/public/authors/index.html b/public/authors/index.html
@@ -58,7 +58,7 @@
- <link rel="stylesheet" href="/css/custom.min.60bb24096606c707ec89390857bae4cfcba1c792420053d989ab058e17fe42f3.css" integrity="sha256-YLskCWYGxwfsiTkIV7rkz8uhx5JCAFPZiasFjhf+QvM=" crossorigin="anonymous" media="screen" />
+ <link rel="stylesheet" href="/css/custom.min.261b56720b4eadc5571dbea97c64c4132dd5f104af3dc8589fe5749ae86cc162.css" integrity="sha256-JhtWcgtOrcVXHb6pfGTEEy3V8QSvPchYn+V0muhswWI=" crossorigin="anonymous" media="screen" />
diff --git a/public/categories/index.html b/public/categories/index.html
@@ -58,7 +58,7 @@
- <link rel="stylesheet" href="/css/custom.min.60bb24096606c707ec89390857bae4cfcba1c792420053d989ab058e17fe42f3.css" integrity="sha256-YLskCWYGxwfsiTkIV7rkz8uhx5JCAFPZiasFjhf+QvM=" crossorigin="anonymous" media="screen" />
+ <link rel="stylesheet" href="/css/custom.min.261b56720b4eadc5571dbea97c64c4132dd5f104af3dc8589fe5749ae86cc162.css" integrity="sha256-JhtWcgtOrcVXHb6pfGTEEy3V8QSvPchYn+V0muhswWI=" crossorigin="anonymous" media="screen" />
diff --git a/public/contact/index.html b/public/contact/index.html
@@ -81,7 +81,7 @@
- <link rel="stylesheet" href="/css/custom.min.60bb24096606c707ec89390857bae4cfcba1c792420053d989ab058e17fe42f3.css" integrity="sha256-YLskCWYGxwfsiTkIV7rkz8uhx5JCAFPZiasFjhf+QvM=" crossorigin="anonymous" media="screen" />
+ <link rel="stylesheet" href="/css/custom.min.261b56720b4eadc5571dbea97c64c4132dd5f104af3dc8589fe5749ae86cc162.css" integrity="sha256-JhtWcgtOrcVXHb6pfGTEEy3V8QSvPchYn+V0muhswWI=" crossorigin="anonymous" media="screen" />
diff --git a/public/css/custom.min.261b56720b4eadc5571dbea97c64c4132dd5f104af3dc8589fe5749ae86cc162.css b/public/css/custom.min.261b56720b4eadc5571dbea97c64c4132dd5f104af3dc8589fe5749ae86cc162.css
@@ -0,0 +1 @@
+.custom-icon{height:2em;width:2em;vertical-align:text-bottom;display:inline-block}.colorscheme-light .custom-icon{fill:#000;transition:fill .5s ease}.colorscheme-dark .custom-icon{fill:#fff;transition:fill .5s ease}.contact-page{margin:0 auto;max-width:400px}.contact-form{display:flex;flex-direction:column;font-size:2rem;gap:1.5rem;width:100%;max-width:400px;margin:0 auto}.contact-form label{font-weight:700}.contact-form input,.contact-form textarea,.contact-form button{padding:.5rem;border:1px solid #ccc;border-radius:4px}.contact-form textarea{min-height:7.5em;resize:vertical}.contact-form button{background-color:#007bff;color:#fff;border:none;cursor:pointer}.contact-form button:hover{background-color:#0056b3}.btc-card{max-width:400px;margin:2rem auto;padding:1.5rem;border-radius:16px;background:#f9fafb;border:1px solid #e0e0e0;box-shadow:0 2px 6px rgba(0,0,0,6%);transition:box-shadow .3s ease,transform .3s ease;font-family:system-ui,sans-serif;text-align:center;color:#111}.btc-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.12);transform:translateY(-4px)}.btc-header{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:1rem}.btc-icon{color:#f7931a}.btc-card h2{margin:0;font-size:1.25rem;color:#333}.btc-qr{width:200px;height:200px;margin:1rem auto;border-radius:8px;padding:4px;border:1px solid #ccc;background:#fff}.btc-address{margin:0;font-family:monospace;padding:.75rem;border-radius:4px;word-break:break-all;font-size:.95rem;background:#eef2f7;color:#1a1a1a;border:1px solid #d0d7de}.btc-card p.btc-note{color:#666;text-align:inherit}.btc-address-row{margin:0;display:flex;align-items:stretch;justify-content:center;gap:.5rem;flex-wrap:wrap;flex-direction:horizontal}.btc-copy-icon{all:unset;border-radius:4px;width:4rem;cursor:pointer;transition:background-color .2s ease,color .2s ease,transform .05s ease,box-shadow .3s ease;color:#555;border:1px solid #d0d7de}.btc-copy-icon:hover{background-color:#f0f0f0;color:#000}.btc-copy-icon:active{transform:scale(.95)}.btc-copy-icon.glow{box-shadow:0 0 0 3px rgba(247,147,26,.4),0 0 10px rgba(247,147,26,.7);background-color:#fff5e6;color:#f7931a}.colorscheme-dark .btc-card{background:#1e1e1e;border:1px solid #333;color:#eee;box-shadow:0 2px 6px rgba(0,0,0,.6)}.colorscheme-dark .btc-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.7)}.colorscheme-dark .btc-card h2{color:#f5f5f5}.colorscheme-dark .btc-qr{border:1px solid #444;background:#2a2a2a}.colorscheme-dark .btc-address{background:#2a2a2a;color:#f5f5f5;border:1px solid #444}.colorscheme-dark .btc-card p.btc-note{color:#aaa}.colorscheme-dark .btc-copy-icon{background:#2a2a2a;color:#f5f5f5;border:1px solid #444}.colorscheme-dark .btc-copy-icon:hover{background-color:#333;color:#fff}}
+\ No newline at end of file
diff --git a/public/css/custom.min.60bb24096606c707ec89390857bae4cfcba1c792420053d989ab058e17fe42f3.css b/public/css/custom.min.60bb24096606c707ec89390857bae4cfcba1c792420053d989ab058e17fe42f3.css
@@ -1 +0,0 @@
-.custom-icon{height:2em;width:auto;vertical-align:text-bottom;display:inline-block;fill:currentColor}.custom-icon-dark,.custom-icon-light{display:none}.colorscheme-dark .custom-icon-dark{display:inline-block}.colorscheme-light .custom-icon-dark{display:none}.colorscheme-light .custom-icon-light{display:inline-block}.colorscheme-dark .custom-icon-light{display:none}.contact-page{margin:0 auto;max-width:400px}.contact-form{display:flex;flex-direction:column;font-size:2rem;gap:1.5rem;width:100%;max-width:400px;margin:0 auto}.contact-form label{font-weight:700}.contact-form input,.contact-form textarea,.contact-form button{padding:.5rem;border:1px solid #ccc;border-radius:4px}.contact-form textarea{min-height:7.5em;resize:vertical}.contact-form button{background-color:#007bff;color:#fff;border:none;cursor:pointer}.contact-form button:hover{background-color:#0056b3}.btc-card{max-width:400px;margin:2rem auto;padding:1.5rem;border-radius:16px;background:#f9fafb;border:1px solid #e0e0e0;box-shadow:0 2px 6px rgba(0,0,0,6%);transition:box-shadow .3s ease,transform .3s ease;font-family:system-ui,sans-serif;text-align:center;color:#111}.btc-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.12);transform:translateY(-4px)}.btc-header{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:1rem}.btc-icon{color:#f7931a}.btc-card h2{margin:0;font-size:1.25rem;color:#333}.btc-qr{width:200px;height:200px;margin:1rem auto;border-radius:8px;padding:4px;border:1px solid #ccc;background:#fff}.btc-address{margin:0;font-family:monospace;padding:.75rem;border-radius:4px;word-break:break-all;font-size:.95rem;background:#eef2f7;color:#1a1a1a;border:1px solid #d0d7de}.btc-card p.btc-note{color:#666;text-align:inherit}.btc-address-row{margin:0;display:flex;align-items:stretch;justify-content:center;gap:.5rem;flex-wrap:wrap;flex-direction:horizontal}.btc-copy-icon{all:unset;border-radius:4px;width:4rem;cursor:pointer;transition:background-color .2s ease,color .2s ease,transform .05s ease,box-shadow .3s ease;color:#555;border:1px solid #d0d7de}.btc-copy-icon:hover{background-color:#f0f0f0;color:#000}.btc-copy-icon:active{transform:scale(.95)}.btc-copy-icon.glow{box-shadow:0 0 0 3px rgba(247,147,26,.4),0 0 10px rgba(247,147,26,.7);background-color:#fff5e6;color:#f7931a}.colorscheme-dark .btc-card{background:#1e1e1e;border:1px solid #333;color:#eee;box-shadow:0 2px 6px rgba(0,0,0,.6)}.colorscheme-dark .btc-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.7)}.colorscheme-dark .btc-card h2{color:#f5f5f5}.colorscheme-dark .btc-qr{border:1px solid #444;background:#2a2a2a}.colorscheme-dark .btc-address{background:#2a2a2a;color:#f5f5f5;border:1px solid #444}.colorscheme-dark .btc-card p.btc-note{color:#aaa}.colorscheme-dark .btc-copy-icon{background:#2a2a2a;color:#f5f5f5;border:1px solid #444}.colorscheme-dark .btc-copy-icon:hover{background-color:#333;color:#fff}}
-\ No newline at end of file
diff --git a/public/index.html b/public/index.html
@@ -58,7 +58,7 @@
- <link rel="stylesheet" href="/css/custom.min.60bb24096606c707ec89390857bae4cfcba1c792420053d989ab058e17fe42f3.css" integrity="sha256-YLskCWYGxwfsiTkIV7rkz8uhx5JCAFPZiasFjhf+QvM=" crossorigin="anonymous" media="screen" />
+ <link rel="stylesheet" href="/css/custom.min.261b56720b4eadc5571dbea97c64c4132dd5f104af3dc8589fe5749ae86cc162.css" integrity="sha256-JhtWcgtOrcVXHb6pfGTEEy3V8QSvPchYn+V0muhswWI=" crossorigin="anonymous" media="screen" />
@@ -168,8 +168,11 @@
<li>
<a href="https://git.sr.ht/~jackmordaunt" aria-label="Sourcehut" >
- <img src="https://sourcehut.org/sourcehut.svg" class="custom-icon custom-icon-light"/>
- <img src="https://sourcehut.org/sourcehut-white.svg" class="custom-icon custom-icon-dark"/>
+ <div class="custom-icon"><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+ <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z">
+ </path>
+</svg>
+</div>
</i>
</a>
</li>
diff --git a/public/pay-with-bitcoin/index.html b/public/pay-with-bitcoin/index.html
@@ -78,7 +78,7 @@ Scan or copy the address to send Bitcoin">
- <link rel="stylesheet" href="/css/custom.min.60bb24096606c707ec89390857bae4cfcba1c792420053d989ab058e17fe42f3.css" integrity="sha256-YLskCWYGxwfsiTkIV7rkz8uhx5JCAFPZiasFjhf+QvM=" crossorigin="anonymous" media="screen" />
+ <link rel="stylesheet" href="/css/custom.min.261b56720b4eadc5571dbea97c64c4132dd5f104af3dc8589fe5749ae86cc162.css" integrity="sha256-JhtWcgtOrcVXHb6pfGTEEy3V8QSvPchYn+V0muhswWI=" crossorigin="anonymous" media="screen" />
diff --git a/public/series/index.html b/public/series/index.html
@@ -58,7 +58,7 @@
- <link rel="stylesheet" href="/css/custom.min.60bb24096606c707ec89390857bae4cfcba1c792420053d989ab058e17fe42f3.css" integrity="sha256-YLskCWYGxwfsiTkIV7rkz8uhx5JCAFPZiasFjhf+QvM=" crossorigin="anonymous" media="screen" />
+ <link rel="stylesheet" href="/css/custom.min.261b56720b4eadc5571dbea97c64c4132dd5f104af3dc8589fe5749ae86cc162.css" integrity="sha256-JhtWcgtOrcVXHb6pfGTEEy3V8QSvPchYn+V0muhswWI=" crossorigin="anonymous" media="screen" />
diff --git a/public/tags/index.html b/public/tags/index.html
@@ -58,7 +58,7 @@
- <link rel="stylesheet" href="/css/custom.min.60bb24096606c707ec89390857bae4cfcba1c792420053d989ab058e17fe42f3.css" integrity="sha256-YLskCWYGxwfsiTkIV7rkz8uhx5JCAFPZiasFjhf+QvM=" crossorigin="anonymous" media="screen" />
+ <link rel="stylesheet" href="/css/custom.min.261b56720b4eadc5571dbea97c64c4132dd5f104af3dc8589fe5749ae86cc162.css" integrity="sha256-JhtWcgtOrcVXHb6pfGTEEy3V8QSvPchYn+V0muhswWI=" crossorigin="anonymous" media="screen" />
diff --git a/themes/hugo-coder/layouts/partials/home/social.html b/themes/hugo-coder/layouts/partials/home/social.html
@@ -4,9 +4,10 @@
{{ if .icon }}
<li>
<a href="{{ .url | safeURL }}" aria-label="{{ .name }}" {{ if .rel }}rel="{{ .rel }}"{{ end }} {{ if .target }}target="{{ .target }}"{{ end }} {{ if .type }}type="{{ .type }}"{{ end }}>
- {{ if and .srclight .srcdark -}}
- <img src="{{ .srclight }}" class="custom-icon custom-icon-light"/>
- <img src="{{ .srcdark }}" class="custom-icon custom-icon-dark"/>
+ {{ if .src -}}
+ <img src="{{ .src }}" class="custom-icon "/>
+ {{ else if .svg -}}
+ <div class="custom-icon">{{ readFile .svg | safeHTML }}</div>
{{- else -}}
<i class="{{ .icon }}" aria-hidden="true">
{{- end }}
