wip

author: Luke T. Shumaker <lukeshu@lukeshu.com> 2024-04-14 10:38:36 -0600
committer: Luke T. Shumaker <lukeshu@lukeshu.com> 2024-04-14 10:53:42 -0600
commit: 3c46bd7b2f61fec1f5719d73d88c3553a6862d52 (patch)
tree: 3d8a683a72d4d12a70030c690c86e6fc18f1f589 /public
parent: 1dcf19f75016cd4dcf07897a618b17050dca52fa (diff)
7 files changed, 168 insertions, 32 deletions
diff --git a/public/imworkingon/imworkingon.scss b/public/imworkingon/imworkingon.scss
new file mode 100644
index 0000000..99885f2
--- /dev/null
+++ b/public/imworkingon/imworkingon.scss
@@ -0,0 +1,77 @@
+article {
+    border: solid 1px #333333;
+    border-radius: 1em;
+    margin: 0.5em;
+}
+
+div {
+    & > p:first-child {
+	margin-top: 0;
+    }
+    & > p:last-child {
+	margin-bottom: 0;
+    }
+}
+
+article.tag {
+    padding: 0.5em 2em;
+    & > h2 {
+	margin: 0 0 0.25em -1em;
+    }
+}
+
+article.contrib {
+    display: grid;
+    grid-template-columns: 25% 25% 25% 25%;
+    grid-template-areas:
+	"uname submitted updated status"
+	"uname url url url"
+	"uname tag tag tag"
+	"udesc desc desc desc";
+    overflow: hidden;
+
+    & > div {
+	padding: 0.5em;
+    }
+    
+    @mixin color-panel {
+	background-color: #DDDDFF;
+	border: solid 1px #8D8DA6;
+    }
+
+    div.contrib-upstream-name {
+	grid-area: uname;
+	@include color-panel;
+	text-align: center;
+	font-weight: bold;
+	padding-top: 1em;
+    }
+    div.contrib-upstream-desc {
+	grid-area: udesc;
+	@include color-panel;
+    }
+    div.contrib-urls {
+	grid-area: url;
+
+	padding-bottom: 0;
+    }
+    div.contrib-tags {
+	grid-area: tag;
+	padding-top: 0;
+    }
+    div.contrib-submitted {
+	grid-area: submitted;
+	@include color-panel;
+    }
+    div.contrib-updated {
+	grid-area: updated;
+	@include color-panel;
+    }
+    div.contrib-status {
+	grid-area: status;
+	@include color-panel;
+    }
+    div.contrib-desc {
+	@include color-panel;
+    }
+}
diff --git a/public/index.html b/public/index.html
index 3c46e61..ab0ee42 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,30 +4,47 @@
   <meta charset="utf-8">
   <title>Luke T. Shumaker's home page</title>
   <link rel="stylesheet" type="text/css" href="blog/assets/style.css">
-  <link rel="stylesheet" type="text/css" href="donate.css">
+  <link rel="stylesheet" type="text/css" href="sponsor/sponsor.css">
+  <style>
+   aside {
+       margin-bottom: 1em;
+       margin-left: 0.5em;
+       float: right;
+       clear: both;
+   }
+   fieldset, fieldset * {
+       box-sizing: border-box;
+   }
+   fieldset > a.donate-btn {
+       width: 100%;
+   }
+  </style>
 </head>
 <body>
 <article>
 
 <h1>Luke T. Shumaker</h1>
 
-<aside style="float:right">
-    <fieldset><legend><a href="./donate.html">sponsor me</a></legend>
-
-        <a class="donate-btn liberapay" href="https://liberapay.com/lukeshu/donate"><img src="https://liberapay.com/assets/liberapay/icon-v2_black.svg"
-                 alt="Liberapay icon" /><span>Liberapay</span></a>
+<aside>
+    <fieldset><legend><a href="sponsor">sponsor me</a></legend>
 
+        <a class="donate-btn liberapay" href="https://liberapay.com/lukeshu/donate">
+            <img src="sponsor/liberapay-icon.svg"
+                 alt="Liberapay icon" />
+            Liberapay</a>
         <br/>
 
         <a class="donate-btn kofi" href='https://ko-fi.com/lukeshu'>
-            <img src="https://storage.ko-fi.com/cdn/cup-border.png"
+            <img src="sponsor/kofi-icon.png"
                  alt="Ko-fi icon" />
-            <span>Ko-fi</span>
+            Ko-fi
         </a>
 
         <br/>
 
         <a class="donate-btn patreon" href='https://patreon.com/lukeshu'>
+            <img src="sponsor/patreon-icon.svg"
+                 alt="Patreon icon" />
             <span>Patreon</span>
         </a>
 
@@ -43,10 +60,10 @@
     operating system since 2011, and am also doing <a href="./imworkingon.html">lots
     of other things</a> to
     improve the GNU/Linux ecosystem.  If you like my work, please
-    consider <a href="./donate.html">sponsoring</a> my
+    consider <a href="sponsor">sponsoring</a> my
     work so that I can keep doing it.</p>
 
-<aside style="clear:right; float:right">
+<aside>
 
   <!-- Don't be wider than the FSF badge.  The mis-aligned images look bad.  -->
   <a href="https://sfconservancy.org/sustainer/">
@@ -69,8 +86,8 @@
 <h2>Things to see here:</h2>
 
 <ul>
-<li><a href="./imworkingon.html"><code>imworkingon</code></a> — A log of the things I'm working on.<ul>
-  <li><a href="./donate.html"><code>donate</code></a> — I greatly appreciate any help supporting that work!</li></ul></li>
+<li><a href="./imworkingon/"><code>imworkingon</code></a> — A listing of the things I'm working on.<ul>
+  <li><a href="./sponsor/"><code>sponsor</code></a> — I greatly appreciate any help supporting that work!</li></ul></li>
 <li><a href="./blog/"><code>blog</code></a> — My web-log ("blog").</li>
 <li><a href="./git/"><code>git</code></a> — My git repositories; software I develop.  It includes some mirrors of software I work on hosted elsewhere, but not all of my software is here.</li>
 <!--<li><a href="./resume/resume-current.pdf"><code>resume</code></a> — My résumé.  I am looking for interesting opportunities.-->
@@ -99,7 +116,7 @@
 
 <li>Not-so-social web:<ul>
 
-<li>I am <a href="https://keybase.io/lukeshu">lukeshu</a> on keybase.</li>
+<li>I am <a href="https://keybase.io/lukeshu">lukeshu</a> on Keybase.</li>
 
 <li>I am <a href="https://github.com/LukeShu/">LukeShu</a> on GitHub.</li>
 
@@ -107,6 +124,16 @@
 
 </ul></li>
 
+<li>Sponsor web:<ul>
+
+<li>I am <a href="https://liberapay.com/lukeshu">lukeshu</a> on Liberapay.</li>
+
+<li>I am <a href="https://ko-fi.com/lukeshu/">lukeshu</a> on Ko-fi.</li>
+
+<li>I am <a href="https://www.patreon.com/lukeshu">lukeshu</a> on Patreon.</li>
+
+</ul></li>
+
 <li>My phone number is <img src="/phone-number.png" style="height: 1em" />.
   Please only use it to contact me regarding server issues, including the <tt>mav.lukeshu.com</tt> mail server.</li>
 
diff --git a/public/donate.html b/public/sponsor/index.html
index 8dc33f3..d8f1ef0 100644
--- a/public/donate.html
+++ b/public/sponsor/index.html
@@ -2,25 +2,39 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Donate — Luke Shumaker</title>
-  <link rel="stylesheet" type="text/css" href="blog/assets/style.css">
+  <title>Sponsor — Luke T. Shumaker</title>
+  <link rel="stylesheet" type="text/css" href="../blog/assets/style.css">
+  <link rel="stylesheet" type="text/css" href="sponsor.css">
+  <style>
+   ul:has(.donate-btn) {
+       display: grid;
+       grid-template-columns: 1fr;
+       width: max-content;
+   }
+   ul:has(.donate-btn) * {
+       box-sizing: border-box;
+   }
+   .donate-btn {
+       width: 100%;
+   }
+  </style>
 </head>
 <body>
 <article>
 
-<h1>Donate to Luke T. Shumaker</h1>
+<h1>Sponsor Luke T. Shumaker</h1>
 
 <p>Hi, I'm Luke.  I'm working on improving various aspects of the
   GNU/Linux-libre ecosystem.</p>
 
 <ul>
-    <li>I'm working on the <a href="https://parabola.nu/">Parabola GNU/Linux-libre</a> distro</li>
-    <li>I'm working on <a href="https://www.lukeshu.com/blog/btrfs-rec.html">improving btrfs</a></li>
+    <li>I'm working on the <a href="https://parabola.nu/">Parabola GNU/Linux-libre</a> distro.</li>
+    <li>I'm working on <a href="https://www.lukeshu.com/blog/btrfs-rec.html">improving btrfs.</a></li>
     <li>I'm working on better tooling around cross-language-runtime
 	objects (GObject Introspection, which is a terrible name for what
-	it is, BTW)</li>
-    <li>I'm working improving Hi-DPI/variable-DPI support</li>
-    <li>... and more!</li>
+	it is, BTW).</li>
+    <!--<li>I'm working improving Hi-DPI/variable-DPI support.</li>-->
+    <li><a href="../imworkingon/">... and more!</a></li>
 </ul>
 
 <p>Please consider sponsoring my work, so I can continue putting so
@@ -30,10 +44,22 @@ to cut back my activities by at least 50% in the next year.</p>
 <p>There are several ways you can sponsor me:</p>
 
 <ul>
-    <li><a href="https://liberapay.com/lukeshu/donate">Liberapay</a><!-- (0% fee) --></li>
+    <li><a class="donate-btn liberapay" href="https://liberapay.com/lukeshu/donate">
+	<img src="liberapay-icon.svg"
+             alt="Liberapay icon" />
+	Liberapay<!-- (0% fee) -->
+    </a></li>
     <!--<li><a href="https://github.com/sponsors/LukeShu">GitHub Sponsors</a></li>-->
-    <li><a href="https://patreon.com/lukeshu">Patreon</a><!-- (8% fee) --></a></li>
-    <li><a href="https://ko-fi.com/lukeshu">Ko-fi</a><!-- (0% fee) --></li>
+    <li><a class="donate-btn kofi" href="https://ko-fi.com/lukeshu">
+	<img src="kofi-icon.png"
+             alt="Ko-fi icon" />
+	Ko-fi<!-- (0% fee, requires non-free JS) -->
+    </a></li>
+    <li><a class="donate-btn patreon" href="https://patreon.com/lukeshu">
+	<img src="patreon-icon.svg"
+             alt="Patreon icon" />
+	<span>Patreon</span><!-- (8%+ fee, requires non-free JS) -->
+    </a></li>
 </ul>
 
 <p>It is my understanding that donating with Patreon or Ko-fi requires
diff --git a/public/sponsor/kofi-icon.png b/public/sponsor/kofi-icon.png
new file mode 100644
index 0000000..2b6d55e
--- /dev/null
+++ b/public/sponsor/kofi-icon.png
diff --git a/public/sponsor/liberapay-icon.svg b/public/sponsor/liberapay-icon.svg
new file mode 100644
index 0000000..2a9ea21
--- /dev/null
+++ b/public/sponsor/liberapay-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><g transform="translate(-78.37-208.06)" fill="#1a171b"><path d="m104.28 271.1c-3.571 0-6.373-.466-8.41-1.396-2.037-.93-3.495-2.199-4.375-3.809-.88-1.609-1.308-3.457-1.282-5.544.025-2.086.313-4.311.868-6.675l9.579-40.05 11.69-1.81-10.484 43.44c-.202.905-.314 1.735-.339 2.489-.026.754.113 1.421.415 1.999.302.579.817 1.044 1.546 1.395.729.353 1.747.579 3.055.679l-2.263 9.278"/><path d="m146.52 246.14c0 3.671-.604 7.03-1.811 10.07-1.207 3.043-2.879 5.669-5.01 7.881-2.138 2.213-4.702 3.935-7.693 5.167-2.992 1.231-6.248 1.848-9.767 1.848-1.71 0-3.42-.151-5.129-.453l-3.394 13.651h-11.162l12.52-52.19c2.01-.603 4.311-1.143 6.901-1.622 2.589-.477 5.393-.716 8.41-.716 2.815 0 5.242.428 7.278 1.282 2.037.855 3.708 2.024 5.02 3.507 1.307 1.484 2.274 3.219 2.904 5.205.627 1.987.942 4.11.942 6.373m-27.378 15.461c.854.202 1.91.302 3.167.302 1.961 0 3.746-.364 5.355-1.094 1.609-.728 2.979-1.747 4.111-3.055 1.131-1.307 2.01-2.877 2.64-4.714.628-1.835.943-3.858.943-6.071 0-2.161-.479-3.998-1.433-5.506-.956-1.508-2.615-2.263-4.978-2.263-1.61 0-3.118.151-4.525.453l-5.28 21.948"/></g></svg>
diff --git a/public/sponsor/patreon-icon.svg b/public/sponsor/patreon-icon.svg
new file mode 100644
index 0000000..dd8717c
--- /dev/null
+++ b/public/sponsor/patreon-icon.svg
@@ -0,0 +1,3 @@
+<svg width="158" height="172" viewBox="0 0 158 172" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M157.4 48.8625C157.4 50.2025 157.49 51.5525 157.38 52.8825C157.25 54.4325 157.02 55.9825 156.73 57.5125C156.31 59.6925 155.85 61.8625 155.28 64.0025C154.86 65.5825 154.34 67.1425 153.71 68.6525C152.34 71.9425 150.82 75.1625 148.82 78.1325C147.59 79.9625 146.33 81.7725 145.04 83.5625C144.56 84.2225 143.99 84.8225 143.42 85.4125C142.44 86.4325 141.49 87.4825 140.42 88.3925C138.84 89.7525 137.22 91.0925 135.51 92.2725C133.95 93.3425 132.2 94.1225 130.61 95.1625C128.84 96.3125 126.82 96.8125 124.94 97.6825C123.26 98.4525 121.46 98.7125 119.75 99.3125C117.57 100.082 115.28 100.262 113.05 100.732C110.67 101.232 108.25 101.602 105.86 102.082C103.9 102.472 101.95 102.932 100 103.362C98.89 103.602 97.77 103.782 96.69 104.102C95.36 104.502 94.07 105.022 92.77 105.492C91.89 105.802 90.97 106.032 90.13 106.432C88.9 107.032 87.75 107.782 86.53 108.422C84.53 109.462 82.86 110.932 81.35 112.542C80.07 113.912 78.96 115.462 77.85 116.982C76.02 119.502 74.76 122.322 73.63 125.202C72.52 128.022 71.5 130.872 70.46 133.722C69.49 136.402 68.58 139.092 67.59 141.762C66.73 144.092 65.81 146.392 64.89 148.692C63.55 152.012 61.92 155.182 59.99 158.192C58.54 160.472 56.99 162.692 54.99 164.532C53.39 166.002 51.84 167.552 49.87 168.582C47.92 169.612 45.91 170.502 43.75 170.972C41.15 171.542 38.49 171.662 35.84 171.522C34.84 171.472 33.85 171.202 32.85 171.022C32.25 170.912 31.64 170.822 31.06 170.642C30.57 170.492 30.12 170.222 29.65 169.992C28.33 169.362 26.92 168.862 25.71 168.072C24.22 167.092 22.85 165.922 21.51 164.742C19.09 162.632 17.27 160.012 15.64 157.282C14.55 155.452 13.53 153.562 12.66 151.622C11.82 149.752 11.19 147.792 10.51 145.852C9.98 144.342 9.48 142.822 9.02 141.292C8.62 139.932 8.3 138.542 7.96 137.162C7.64 135.882 7.3 134.612 7.03 133.322C6.54 131.022 6.09 128.722 5.63 126.422C5.43 125.452 5.23 124.472 5.05 123.502C4.79 122.042 4.55 120.582 4.3 119.122C4.11 118.032 3.9 116.952 3.73 115.862C3.54 114.662 3.38 113.462 3.19 112.262C3.03 111.222 2.85 110.192 2.7 109.152C2.56 108.182 2.44 107.212 2.31 106.242C2.17 105.202 2.03 104.162 1.9 103.112C1.77 102.102 1.66 101.092 1.54 100.082C1.4 98.9125 1.26 97.7425 1.12 96.5725C1.07 96.1525 1.02 95.7425 0.99 95.3225C0.84 93.6025 0.69 91.8725 0.55 90.1425C0.46 89.0725 0.38 87.9925 0.33 86.9225C0.24 85.2525 0.15 83.5925 0.11 81.9225C0.05 79.1825 0.01 76.4325 0 73.6925C0 72.0725 0.01 70.4525 0.12 68.8425C0.23 67.1625 0.47 65.4825 0.65 63.8025C0.8 62.4625 0.93 61.1325 1.11 59.7925C1.21 59.0425 1.39 58.3025 1.55 57.5625C1.95 55.7125 2.32 53.8625 2.78 52.0225C3.11 50.6925 3.57 49.4025 3.94 48.0925C4.63 45.6425 5.66 43.3325 6.67 41.0025C7.13 39.9325 7.7 38.9025 8.28 37.8925C9.09 36.4825 9.88 35.0625 10.8 33.7325C11.93 32.1125 13.13 30.5425 14.4 29.0225C15.6 27.5825 16.88 26.1925 18.22 24.8825C19.27 23.8525 20.46 22.9625 21.59 22.0325C22.7 21.1225 23.78 20.1725 24.96 19.3525C26.76 18.0825 28.61 16.8825 30.48 15.7125C31.57 15.0325 32.73 14.4525 33.87 13.8525C35.64 12.9125 37.41 11.9625 39.21 11.0725C40.34 10.5125 41.51 10.0225 42.68 9.55247C45.67 8.36247 48.65 7.16247 51.67 6.05247C53.68 5.32247 55.75 4.75247 57.79 4.11247C58.84 3.78247 59.87 3.42247 60.93 3.13247C61.8 2.89247 62.69 2.76247 63.57 2.56247C64.53 2.34247 65.47 2.05247 66.44 1.87247C67.75 1.62247 69.08 1.44247 70.41 1.24247C71.9 1.02247 73.38 0.792472 74.87 0.592472C75.48 0.512472 76.11 0.502472 76.73 0.462472C78.79 0.352472 80.86 0.232472 82.92 0.132472C83.74 0.0924722 84.59 -0.0875278 85.39 0.0524722C87.33 0.392472 89.28 0.122472 91.22 0.262472C93.09 0.392472 94.95 0.592472 96.81 0.812472C98.15 0.972472 99.47 1.25247 100.81 1.45247C101.98 1.62247 103.15 1.73247 104.32 1.91247C105.26 2.06247 106.2 2.26247 107.14 2.46247C109.15 2.90247 111.16 3.30247 113.15 3.82247C114.92 4.29247 116.64 5.00247 118.42 5.41247C120.47 5.89247 122.35 6.83247 124.33 7.46247C126.35 8.10247 128.09 9.28247 130.02 10.0725C132.27 11.0025 134.22 12.4125 136.22 13.7525C137.74 14.7725 139.22 15.8625 140.6 17.0525C142.64 18.8125 144.62 20.6425 146.53 22.5425C147.66 23.6625 148.62 24.9625 149.65 26.1925C151.31 28.1825 152.53 30.4525 153.71 32.7225C154.65 34.5425 155.43 36.4725 156.06 38.4225C156.58 40.0225 156.74 41.7425 157.13 43.3825C157.56 45.1825 157.55 47.0025 157.45 48.8325L157.4 48.8625Z" fill="black"/>
+</svg>
diff --git a/public/donate.css b/public/sponsor/sponsor.css
index 49be209..6975341 100644
--- a/public/donate.css
+++ b/public/sponsor/sponsor.css
@@ -1,9 +1,5 @@
 /* generic */
 
-fieldset > a.donate-btn {
-    width: calc(100% - 1em);
-}
-
 a.donate-btn {
     margin: 0.25em 0;
 
@@ -22,9 +18,6 @@ a.donate-btn > img {
     margin-right: 3px;
     vertical-align: top;
 }
-a.donate-btn > span {
-    vertical-align: top;
-}
 
 /* Liberapay */
 
@@ -53,10 +46,19 @@ a.donate-btn.kofi:hover {
 a.donate-btn.patreon {
     background-color: #000000;
     color: #ffffff;
-    text-transform: uppercase;
     outline: solid 1px #000000;
+    font-weight: 400;
+}
+a.donate-btn.patreon > span {
+    text-transform: uppercase;
+}
+a.donate-btn.patreon > img {
+    filter: invert(100%);
 }
 a.donate-btn.patreon:hover {
     background-color: #ffffff;
     color:  #000000;
 }
+a.donate-btn.patreon:hover > img {
+    filter: none;
+}
author	Luke T. Shumaker <lukeshu@lukeshu.com>	2024-04-14 10:38:36 -0600
committer	Luke T. Shumaker <lukeshu@lukeshu.com>	2024-04-14 10:53:42 -0600
commit	3c46bd7b2f61fec1f5719d73d88c3553a6862d52 (patch)
tree	3d8a683a72d4d12a70030c690c86e6fc18f1f589 /public
parent	1dcf19f75016cd4dcf07897a618b17050dca52fa (diff)