Pen MD & Webring Random

kristofzerbe · Aug 1, 2024 · 37d8e50 · 37d8e50
1 parent 7fe89b0
commit 37d8e50
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 42 deletions.
diff --git a/source/_posts/2023/Favourite-Pens-of-2022.md b/source/_posts/2023/Favourite-Pens-of-2022.md
@@ -31,62 +31,72 @@ From all these works you can take a lot of know-how for yourself, but many of th
 
 <!-- more -->
 
-<hr><br>
+---
 
-## 1. iOS Notifications by Yoav Kadosh
+## 1. iOS Notifications 
 
+{% small_link "by" "Yoav Kadosh" "https://codepen.io/ykadosh" %}
 {% codepen "ZERjpRJ" "iOS Notifications" "result" %}
 
-<br><hr><br>
+---
 
-## 2. Lotsa Notifications by Jon Kantner
+## 2. Lotsa Notifications
 
+{% small_link "by" "Jon Kantner" "https://codepen.io/jkantner" %}
 {% codepen "XWzePgp" "Lotsa Notifications" "result" %}
 
-<br><hr><br>
+---
 
-## 3. Animated Star Rating by Jon Kantner
+## 3. Animated Star Rating
 
+{% small_link "by" "Jon Kantner" "https://codepen.io/jkantner" %}
 {% codepen "BarvVNa" "Animated Star Rating" "result" %}
 
-<br><hr><br>
+---
 
-## 4. Changing Face Rating by Jon Kantner
+## 4. Changing Face Rating
 
+{% small_link "by" "Jon Kantner" "https://codepen.io/jkantner" %}
 {% codepen "YzLQoXM" "Changing Face Rating" "result" %}
 
-<br><hr><br>
+---
 
-## 5. CSS Minimal Dark Mode Toggle Button by Greg Vissing
+## 5. CSS Minimal Dark Mode Toggle Button
 
+{% small_link "by" "Greg Vissing" "https://codepen.io/gvissing" %}
 {% codepen "OJvxoJq" "CSS Minimal Dark Mode Toggle Button" "result" %}
 
-<br><hr><br>
+---
 
-## 6. Menu micro-interaction with CSS by Mert Cukuren
+## 6. Menu micro-interaction with CSS
 
+{% small_link "by" "Mert Cukuren" "https://codepen.io/knyttneve" %}
 {% codepen "rNJxwGR" "Menu micro-interaction with CSS" "result" %}
 
-<br><hr><br>
+---
 
-## 7. Animated BottomBar Experiment by Chris Bautista
+## 7. Animated BottomBar Experiment
 
+{% small_link "by" "Chris Bautista" "https://codepen.io/chrisbautista" %}
 {% codepen "NWXjqLN" "Animated BottomBar Experiment" "result" %}
 
-<br><hr><br>
+---
 
-## 8. Progress Button by Taylon, Chan
+## 8. Progress Button
 
+{% small_link "by" "Taylon Chan" "https://codepen.io/fuzionix" %}
 {% codepen "dyepVJp" "Progress Button" "result" %}
 
-<br><hr><br>
+---
 
-## 9. Gradient background with waves by Bárbara Rodríguez
+## 9. Gradient background with waves
 
+{% small_link "by" "Bárbara Rodríguez" "https://codepen.io/baarbaracrr" %}
 {% codepen "KKovmGb" "Gradient background with waves" "result" %}
 
-<br><hr><br>
+---
 
-## 10. Cascading CSS Text Effects by Jhey
+## 10. Cascading CSS Text Effects
 
+{% small_link "by" "Jhey" "https://codepen.io/jh3y" %}
 {% codepen "gOeGmRN" "Cascading CSS Text Effects" "result" %}
diff --git a/source/_posts/2024/Favourite-Pens-of-2023.md b/source/_posts/2024/Favourite-Pens-of-2023.md
@@ -33,65 +33,75 @@ What **[Rafa](https://codepen.io/RAFA3L)** has conjured up with his pen [**Clima
 
 <!-- more -->
 
-<hr><br>
+---
 
-## 1. The aurora (only CSS) by [Ostylowany](https://codepen.io/ostylowany)
+## 1. The aurora (only CSS)
 
+{% small_link "by" "Ostylowany" "https://codepen.io/ostylowany" %}
 {% codepen "vYzPVZL" "The aurora (only CSS)" "result" 480 %}
 
-<br><hr><br>
+---
 
-## 2. ...CSS-only fluid slider... by [Ana Tudor](https://codepen.io/thebabydino)
+## 2. ...CSS-only fluid slider...
 
+{% small_link "by" "Ana Tudor" "https://codepen.io/thebabydino" %}
 {% codepen "qByGqOm" "...CSS-only fluid slider..." "result" 600 %}
 
-<br><hr><br>
+---
 
-## 3. Futuristic Dial Button by [LukyVj](https://codepen.io/LukyVj)
+## 3. Futuristic Dial Button
 
+{% small_link "by" "LukyVj" "https://codepen.io/LukyVj" %}
 {% codepen "xxyEYMJ" "Futuristic Dial Button" "result" 420 %}
 
-<br><hr><br>
+---
 
-## 4. Gooey Toggle Switch by [Nicolas Jesenberger](https://codepen.io/nicolasjesenberger)
+## 4. Gooey Toggle Switch
 
+{% small_link "by" "Nicolas Jesenberger" "https://codepen.io/nicolasjesenberger" %}
 {% codepen "xxmbvxL" "Gooey Toggle Switch" "result" %}
 
 (Don't miss his [Squishy Switch](https://codepen.io/nicolasjesenberger/pen/bGQwBYo) either)
 
-<br><hr><br>
+---
 
-## 5. Gorgeous animated gradient borders... by [Jason Lengstorf](https://codepen.io/jlengstorf)
+## 5. Gorgeous animated gradient borders... 
 
+{% small_link "by" "Jason Lengstorf" "https://codepen.io/jlengstorf" %}
 {% codepen "WNPGMJo" "Gorgeous animated gradient borders..." "result" %}
 
-<br><hr><br>
+---
 
-## 6. Fancy hover effect on avatar by [Temani Afif](https://codepen.io/t_afif)
+## 6. Fancy hover effect on avatar
 
+{% small_link "by" "Temani Afif" "https://codepen.io/t_afif" %}
 {% codepen "MWBjraa" "Fancy hover effect on avatar" "result" 540 %}
 
-<br><hr><br>
+---
 
-## 7. 3D Cards by [Mubanga](https://codepen.io/mubangadv)
+## 7. 3D Cards
 
+{% small_link "by" "Mubanga" "https://codepen.io/mubangadv" %}
 {% codepen "YzJNbOa" "3D Cards" "result" 720 %}
 
-<br><hr><br>
+---
 
-## 8. Stripe Sessions style Flex Carousel by [Simon Goellner](https://codepen.io/simeydotme)
+## 8. Stripe Sessions style Flex Carousel
 
+{% small_link "by" "Simon Goellner" "https://codepen.io/simeydotme" %}
 {% codepen "gOBMZMe" "Stripe Sessions style Flex Carousel" "result" 800 %}
 
-<br><hr><br>
+---
 
-## 9. Carousel with drag and wheel by [Fabio Ottaviani](https://codepen.io/supah)
+## 9. Carousel with drag and wheel
 
+{% small_link "by" "Fabio Ottaviani" "https://codepen.io/supah" %}
 {% codepen "xxJMbbg" "Carousel with drag and wheel" "result" 720 %}
 
-<br><hr><br>
+---
 
-## 10. Background Slider | Swiper by [Ecem Gokdogan](https://codepen.io/ecemgo)
+## 10. Background Slider | Swiper
 
+{% small_link "by" "Ecem Gokdogan" "https://codepen.io/ecemgo" %}
 {% codepen "QWzeQOK" "Background Slider | Swiper" "result" 580 %}
 
diff --git a/themes/landscape/layout/_partial/footer.ejs b/themes/landscape/layout/_partial/footer.ejs
@@ -48,9 +48,10 @@
 
       <div class="webrings">
         <div id="indieweb_webring" class="webring">
-          <a class="webring-link webring-prev" href="https://xn--sr8hvo.ws/%F0%9F%A7%80%F0%9F%91%9F%F0%9F%8E%8A/previous" title="Turn left in the Webring"></a>
+          <a class="webring-link webring-prev" href="https://xn--sr8hvo.ws/previous" title="Turn left in the Webring"></a>
           <a class="webring-url" href="https://xn--sr8hvo.ws">IndieWeb Webring&nbsp;🕸💍</a>
-          <a class="webring-link webring-next" href="https://xn--sr8hvo.ws/%F0%9F%A7%80%F0%9F%91%9F%F0%9F%8E%8A/next" title="Turn right in the Webring"></a>
+          <a class="webring-link webring-random" href="https://xn--sr8hvo.ws/random" title="Turn randomly in the Webring"></a>
+          <a class="webring-link webring-next" href="https://xn--sr8hvo.ws/next" title="Turn right in the Webring"></a>
         </div>
         <div id="cssjoy_webring" class="webring">
           <a class="webring-link webring-prev" href="https://webri.ng/webring/cssjoy/previous?via=https://kiko.io" title="Turn left in the Webring"></a>