better sponsor image grid

json-everything · May 16, 2024 · fb4db36 · fb4db36
1 parent 669fc03
commit fb4db36
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 3 deletions.
diff --git a/.jekyll-metadata b/.jekyll-metadata
diff --git a/_tabs/support.md b/_tabs/support.md
@@ -10,6 +10,10 @@ Greg accepts financial support via GitHub Sponsors which encourages him to work
 
 The following kind individuals and organizations currently support Greg:
 
-[![@xqrzd](https://github.com/xqrzd.png){: w="50" h="50" }](https://github.com/xqrzd)
-[![@michaelstaib](https://github.com/michaelstaib.png){: w="50" h="50" }](https://github.com/michaelstaib)
-[![@ChilliCream](https://github.com/ChilliCream.png){: w="50" h="50" }](https://github.com/ChilliCream)
+<div class="sponsors" markdown=1>
+
+[![@xqrzd](https://github.com/xqrzd.png)](https://github.com/xqrzd)
+[![@michaelstaib](https://github.com/michaelstaib.png)](https://github.com/michaelstaib)
+[![@ChilliCream](https://github.com/ChilliCream.png)](https://github.com/ChilliCream)
+
+</div>
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -63,3 +63,26 @@ code.highlighter-rouge {
 table {
   width: -webkit-fill-available;
 }
+
+.sponsors>p>a {
+  /*Tooltip will be positioned relative to this*/
+  position: relative;
+}
+
+/*Tooltip magic*/
+.sponsors img:hover:after {
+  display: block;
+  content: attr(alt);
+  position: absolute;
+  bottom: 5px;
+  background-color: rgba(200, 200, 200, 0.8);
+  border-radius:2px;
+  padding:2px;
+}
+
+.sponsors img {
+  width: 50px;
+  height: 50px;
+  border-radius: 25px;
+  margin: 2px;
+}