From 0b6809709ccb40981656b82bcfa99ddb0fabbaea Mon Sep 17 00:00:00 2001
From: marleyrae <marleyrae@protonmail.com>
Date: Mon, 5 Jun 2023 22:26:34 -0700
Subject: [PATCH] :sparkles: feat: Info & Social boxes

---
 .idea/inspectionProfiles/Project_Default.xml | 31 +++++++++++++++++
 dist/index.html                              | 35 +++++++++++++++++---
 dist/style/components/Separator.css          |  0
 dist/style/components/Social.css             |  1 +
 dist/style/style.css                         |  2 +-
 src/_includes/layout.liquid                  |  2 +-
 src/_includes/main-nav.liquid                |  2 +-
 src/_includes/site-info.liquid               |  2 ++
 src/_includes/site-social.liquid             | 25 ++++++++++++++
 src/style/_base.scss                         | 20 +++++++++--
 src/style/_mixins.scss                       |  9 +++++
 src/style/components/Social.scss             | 34 +++++++++++++++++++
 src/style/components/_Nav.scss               | 14 ++------
 src/style/components/_index.scss             |  1 +
 14 files changed, 156 insertions(+), 22 deletions(-)
 create mode 100644 dist/style/components/Separator.css
 create mode 100644 dist/style/components/Social.css
 create mode 100644 src/style/components/Social.scss

diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index f15a3c4..75691ac 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -1,6 +1,37 @@
 <component name="InspectionProjectProfileManager">
   <profile version="1.0">
     <option name="myName" value="Project Default" />
+    <inspection_tool class="HttpUrlsUsage" enabled="true" level="WEAK WARNING" enabled_by_default="true">
+      <option name="ignoredUrls">
+        <list>
+          <option value="http://localhost" />
+          <option value="http://127.0.0.1" />
+          <option value="http://0.0.0.0" />
+          <option value="http://www.w3.org/" />
+          <option value="http://json-schema.org/draft" />
+          <option value="http://java.sun.com/" />
+          <option value="http://xmlns.jcp.org/" />
+          <option value="http://javafx.com/javafx/" />
+          <option value="http://javafx.com/fxml" />
+          <option value="http://maven.apache.org/xsd/" />
+          <option value="http://maven.apache.org/POM/" />
+          <option value="http://www.springframework.org/schema/" />
+          <option value="http://www.springframework.org/tags" />
+          <option value="http://www.springframework.org/security/tags" />
+          <option value="http://www.thymeleaf.org" />
+          <option value="http://www.jboss.org/j2ee/schema/" />
+          <option value="http://www.jboss.com/xml/ns/" />
+          <option value="http://www.ibm.com/webservices/xsd" />
+          <option value="http://activemq.apache.org/schema/" />
+          <option value="http://schema.cloudfoundry.org/spring/" />
+          <option value="http://schemas.xmlsoap.org/" />
+          <option value="http://cxf.apache.org/schemas/" />
+          <option value="http://primefaces.org/ui" />
+          <option value="http://tiles.apache.org/" />
+          <option value="http://nerdlistings.info" />
+        </list>
+      </option>
+    </inspection_tool>
     <inspection_tool class="ReturnFromFinallyBlockJS" enabled="false" level="WARNING" enabled_by_default="false" />
     <inspection_tool class="SpellCheckingInspection" enabled="true" level="TYPO" enabled_by_default="true">
       <option name="processCode" value="false" />
diff --git a/dist/index.html b/dist/index.html
index f924db7..63e27d1 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -29,7 +29,7 @@
 <a href="/diary/" class="Nav-link">diary</a>
 <a href="/links/" class="Nav-link">links</a>
 
-<hr class="Nav-separator">
+<hr>
 
 <a href="https://epiphany.punkfairie.net" target="_blank" class="Nav-link">epiphany</a>
 <a href="https://saudade.punkfairie.net" target="_blank" class="Nav-link">petz archive</a>
@@ -55,11 +55,38 @@
 </main>
 
 <aside class="Site-info">
-    
+    <b>visitors:</b><br>
+<b>updated:</b>
+
 </aside>
 
-<aside class="Site-social">
-    
+<aside class="Site-social Social">
+    <div class="Social-webring">
+    <a href="https://hotlinewebring.club/punkfairie/previous" class="Social-webringArrow"><<</a>
+    <a href="https://hotlinewebring.club/" target="_blank" class="Social-webringLink">hotline</a>
+    <a href="https://hotlinewebring.club/punkfairie/next" class="Social-webringArrow">>></a>
+</div>
+
+<div class="Social-webring">
+    <a href="https://webring.dinhe.net/prev/https://punkfairie.net" class="Social-webringArrow"><<</a>
+    <a href="https://webring.dinhe.net/" target="_blank" class="Social-webringLink">retronaut</a>
+    <a href="https://webring.dinhe.net/next/https://punkfairie.net" class="Social-webringArrow">>></a>
+</div>
+
+<hr>
+
+<a href="https://keysklubhouse.neocities.org" target="_blank" class="Social-badge">
+    <img src="/img/badges/handcoded.png" alt="Badge with the text hand coded">
+</a>
+
+<a href="https://linklane.net" target="_blank" class="Social-badge">
+    <img src="img/badges/linklane.png" title="Link Lane" alt="LinkLane.net">
+</a>
+
+<a href="http://nerdlistings.info/" target="_blank" class="Social-badge">
+    <img src="img/badges/nerdlistings.gif" title="Nerd Listings" alt="NerdListings.info">
+</a>
+
 </aside>
 
 <!--suppress HtmlUnknownTarget -->
diff --git a/dist/style/components/Separator.css b/dist/style/components/Separator.css
new file mode 100644
index 0000000..e69de29
diff --git a/dist/style/components/Social.css b/dist/style/components/Social.css
new file mode 100644
index 0000000..397e578
--- /dev/null
+++ b/dist/style/components/Social.css
@@ -0,0 +1 @@
+.Social{text-align:center}.Social-webringArrow,.Social-webringLink{color:inherit}.Social-webringArrow{-webkit-text-decoration:none;text-decoration:none}@media(prefers-reduced-motion:no-preference){.Social-webringArrow{transition:letter-spacing .2s}.Social-webringArrow:focus,.Social-webringArrow:hover{letter-spacing:2.4px;-webkit-text-decoration:none;text-decoration:none}}.Social hr{margin-bottom:clamp(.75rem,.71rem + .22vw,.88rem);margin-top:clamp(.75rem,.71rem + .22vw,.88rem)}.Social-badge{display:inline-block}:nth-child(7n+1 of .Social-webring){color:#dc2626}:nth-child(7n+2 of .Social-webring){color:#ea580c}:nth-child(7n+3 of .Social-webring){color:#ca8a04}:nth-child(7n+4 of .Social-webring){color:#65a30d}:nth-child(7n+5 of .Social-webring){color:#0892a2}:nth-child(7n+6 of .Social-webring){color:#9333ea}:nth-child(7n+7 of .Social-webring){color:#db2777}
\ No newline at end of file
diff --git a/dist/style/style.css b/dist/style/style.css
index 2e61f7d..b099597 100644
--- a/dist/style/style.css
+++ b/dist/style/style.css
@@ -1 +1 @@
-*,:after,:before{box-sizing:border-box}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin:0}ol[role=list],ul[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{line-height:1.5;min-height:100vh;min-height:100vb;text-rendering:optimizeSpeed}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img,picture{display:block;max-width:100%}button,input,select,textarea{font:inherit}html{background-image:linear-gradient(90deg,#f87171,#fb923c 17%,#facc15 33%,#a3e635 50%,#39d0dd 67%,#c084fc 83%,#f472b6);min-height:100vh;min-height:100vb;min-width:100vw;min-width:100vi;overflow:hidden}body{color:#18181b;font-family:Imprima,handwriting;font-size:clamp(.75rem,.71rem + .22vw,.88rem);letter-spacing:.6px}:nth-child(7n+1 of i){color:#dc2626}:nth-child(7n+2 of i){color:#ea580c}:nth-child(7n+3 of i){color:#ca8a04}:nth-child(7n+4 of i){color:#65a30d}:nth-child(7n+5 of i){color:#0892a2}:nth-child(7n+6 of i){color:#9333ea}:nth-child(7n+7 of i){color:#db2777}:nth-child(7n+1 of b){color:#dc2626}:nth-child(7n+2 of b){color:#ea580c}:nth-child(7n+3 of b){color:#ca8a04}:nth-child(7n+4 of b){color:#65a30d}:nth-child(7n+5 of b){color:#0892a2}:nth-child(7n+6 of b){color:#9333ea}:nth-child(7n+7 of b){color:#db2777}.Site-content,.Site-info,.Site-nav,.Site-social,.Site-subNav{background-color:hsla(0,0%,98%,.5);margin:clamp(.19rem,.17rem + .11vw,.25rem);padding:clamp(.75rem,.71rem + .22vw,.88rem)}.Site{display:grid;grid-template:"Site-info   Site-content Site-nav" 2fr "Site-social Site-content Site-nav" 2fr "Site-social Site-content Site-subNav" 3fr "Site-title  Site-title   Site-title" 2fr/1fr 3fr 1fr;height:100%;padding:clamp(9rem,8.48rem + 2.61vw,10.5rem);width:100%}.Site-title{font-family:Bungee Shade,display;font-size:clamp(2.24rem,1.86rem + 1.91vw,3.34rem);font-weight:400;grid-area:Site-title;justify-self:end;padding-right:clamp(.75rem,.71rem + .22vw,.88rem)}.Site-nav{--Site-nav-gridArea:Site-nav/Site-nav/Site-subNav/Site-nav;grid-area:Site-nav/Site-nav/Site-subNav/Site-nav;grid-area:var(--Site-nav-gridArea)}.Site-subNav{grid-area:Site-subNav}.Site-content{grid-area:Site-content;padding:clamp(1.13rem,1.06rem + .33vw,1.31rem)}.Site-content>*+*{margin-top:1em}.Site-info{grid-area:Site-info}.Site-social{grid-area:Site-social}.Nav{text-align:right}.Nav-caption{margin-bottom:clamp(.56rem,.52rem + .22vw,.69rem)}.Nav-link{background-color:transparent;border:none;color:inherit;cursor:pointer;display:block;letter-spacing:inherit;margin:0;padding:0;text-align:inherit;-webkit-text-decoration:underline;text-decoration:underline;width:100%}.Nav-link:focus,.Nav-link:hover{text-decoration:underline;-webkit-text-decoration:wavy underline;text-decoration:wavy underline}.Nav-separator{background-image:linear-gradient(90deg,#f87171,#fb923c 17%,#facc15 33%,#a3e635 50%,#39d0dd 67%,#c084fc 83%,#f472b6);border:none;height:clamp(.13rem,.13rem + 0vw,.13rem)}:nth-child(7n+1 of .Nav-link){color:#dc2626}:nth-child(7n+2 of .Nav-link){color:#ea580c}:nth-child(7n+3 of .Nav-link){color:#ca8a04}:nth-child(7n+4 of .Nav-link){color:#65a30d}:nth-child(7n+5 of .Nav-link){color:#0892a2}:nth-child(7n+6 of .Nav-link){color:#9333ea}:nth-child(7n+7 of .Nav-link){color:#db2777}
\ No newline at end of file
+*,:after,:before{box-sizing:border-box}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin:0}ol[role=list],ul[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{line-height:1.5;min-height:100vh;min-height:100vb;text-rendering:optimizeSpeed}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img,picture{display:block;max-width:100%}button,input,select,textarea{font:inherit}html{background-image:linear-gradient(90deg,#f87171,#fb923c 17%,#facc15 33%,#a3e635 50%,#39d0dd 67%,#c084fc 83%,#f472b6);min-height:100vh;min-height:100vb;min-width:100vw;min-width:100vi;overflow:hidden}body{color:#18181b;font-family:Imprima,handwriting;font-size:clamp(.75rem,.71rem + .22vw,.88rem);letter-spacing:.6px}b{font-weight:400}:nth-child(7n+1 of i){color:#dc2626}:nth-child(7n+2 of i){color:#ea580c}:nth-child(7n+3 of i){color:#ca8a04}:nth-child(7n+4 of i){color:#65a30d}:nth-child(7n+5 of i){color:#0892a2}:nth-child(7n+6 of i){color:#9333ea}:nth-child(7n+7 of i){color:#db2777}:nth-child(7n+1 of b){color:#dc2626}:nth-child(7n+2 of b){color:#ea580c}:nth-child(7n+3 of b){color:#ca8a04}:nth-child(7n+4 of b){color:#65a30d}:nth-child(7n+5 of b){color:#0892a2}:nth-child(7n+6 of b){color:#9333ea}:nth-child(7n+7 of b){color:#db2777}hr{background-image:linear-gradient(90deg,#f87171,#fb923c 17%,#facc15 33%,#a3e635 50%,#39d0dd 67%,#c084fc 83%,#f472b6);border:none;height:clamp(.13rem,.13rem + 0vw,.13rem)}a{cursor:pointer;-webkit-text-decoration:underline}a,a:focus,a:hover{text-decoration:underline}a:focus,a:hover{-webkit-text-decoration:wavy underline;text-decoration:wavy underline}.Site-content,.Site-info,.Site-nav,.Site-social,.Site-subNav{background-color:hsla(0,0%,98%,.5);margin:clamp(.19rem,.17rem + .11vw,.25rem);padding:clamp(.75rem,.71rem + .22vw,.88rem)}.Site{display:grid;grid-template:"Site-info   Site-content Site-nav" 2fr "Site-social Site-content Site-nav" 2fr "Site-social Site-content Site-subNav" 3fr "Site-title  Site-title   Site-title" 2fr/1fr 3fr 1fr;height:100%;padding:clamp(9rem,8.48rem + 2.61vw,10.5rem);width:100%}.Site-title{font-family:Bungee Shade,display;font-size:clamp(2.24rem,1.86rem + 1.91vw,3.34rem);font-weight:400;grid-area:Site-title;justify-self:end;padding-right:clamp(.75rem,.71rem + .22vw,.88rem)}.Site-nav{--Site-nav-gridArea:Site-nav/Site-nav/Site-subNav/Site-nav;grid-area:Site-nav/Site-nav/Site-subNav/Site-nav;grid-area:var(--Site-nav-gridArea)}.Site-subNav{grid-area:Site-subNav}.Site-content{grid-area:Site-content;padding:clamp(1.13rem,1.06rem + .33vw,1.31rem)}.Site-content>*+*{margin-top:1em}.Site-info{grid-area:Site-info}.Site-social{grid-area:Site-social}.Nav{text-align:right}.Nav-caption{margin-bottom:clamp(.56rem,.52rem + .22vw,.69rem)}.Nav-link{background-color:transparent;border:none;color:inherit;cursor:pointer;display:block;letter-spacing:inherit;margin:0;padding:0;text-align:inherit;-webkit-text-decoration:underline;text-decoration:underline;width:100%}.Nav-link:focus,.Nav-link:hover{text-decoration:underline;-webkit-text-decoration:wavy underline;text-decoration:wavy underline}:nth-child(7n+1 of .Nav-link){color:#dc2626}:nth-child(7n+2 of .Nav-link){color:#ea580c}:nth-child(7n+3 of .Nav-link){color:#ca8a04}:nth-child(7n+4 of .Nav-link){color:#65a30d}:nth-child(7n+5 of .Nav-link){color:#0892a2}:nth-child(7n+6 of .Nav-link){color:#9333ea}:nth-child(7n+7 of .Nav-link){color:#db2777}.Social{text-align:center}.Social-webringArrow,.Social-webringLink{color:inherit}.Social-webringArrow{-webkit-text-decoration:none;text-decoration:none}@media(prefers-reduced-motion:no-preference){.Social-webringArrow{transition:letter-spacing .2s}.Social-webringArrow:focus,.Social-webringArrow:hover{letter-spacing:2.4px;-webkit-text-decoration:none;text-decoration:none}}.Social hr{margin-bottom:clamp(.75rem,.71rem + .22vw,.88rem);margin-top:clamp(.75rem,.71rem + .22vw,.88rem)}.Social-badge{display:inline-block}:nth-child(7n+1 of .Social-webring){color:#dc2626}:nth-child(7n+2 of .Social-webring){color:#ea580c}:nth-child(7n+3 of .Social-webring){color:#ca8a04}:nth-child(7n+4 of .Social-webring){color:#65a30d}:nth-child(7n+5 of .Social-webring){color:#0892a2}:nth-child(7n+6 of .Social-webring){color:#9333ea}:nth-child(7n+7 of .Social-webring){color:#db2777}
\ No newline at end of file
diff --git a/src/_includes/layout.liquid b/src/_includes/layout.liquid
index a431d9b..3b7f9ab 100644
--- a/src/_includes/layout.liquid
+++ b/src/_includes/layout.liquid
@@ -34,7 +34,7 @@
     {% include 'site-info' %}
 </aside>
 
-<aside class="Site-social">
+<aside class="Site-social Social">
     {% include 'site-social' %}
 </aside>
 
diff --git a/src/_includes/main-nav.liquid b/src/_includes/main-nav.liquid
index 36d7683..6705343 100644
--- a/src/_includes/main-nav.liquid
+++ b/src/_includes/main-nav.liquid
@@ -8,7 +8,7 @@
 <a href="/diary/" class="Nav-link">diary</a>
 <a href="/links/" class="Nav-link">links</a>
 
-<hr class="Nav-separator">
+<hr>
 
 <a href="https://epiphany.punkfairie.net" target="_blank" class="Nav-link">epiphany</a>
 <a href="https://saudade.punkfairie.net" target="_blank" class="Nav-link">petz archive</a>
diff --git a/src/_includes/site-info.liquid b/src/_includes/site-info.liquid
index e69de29..63b26b1 100644
--- a/src/_includes/site-info.liquid
+++ b/src/_includes/site-info.liquid
@@ -0,0 +1,2 @@
+<b>visitors:</b><br>
+<b>updated:</b>
diff --git a/src/_includes/site-social.liquid b/src/_includes/site-social.liquid
index e69de29..aa41a95 100644
--- a/src/_includes/site-social.liquid
+++ b/src/_includes/site-social.liquid
@@ -0,0 +1,25 @@
+<div class="Social-webring">
+    <a href="https://hotlinewebring.club/punkfairie/previous" class="Social-webringArrow"><<</a>
+    <a href="https://hotlinewebring.club/" target="_blank" class="Social-webringLink">hotline</a>
+    <a href="https://hotlinewebring.club/punkfairie/next" class="Social-webringArrow">>></a>
+</div>
+
+<div class="Social-webring">
+    <a href="https://webring.dinhe.net/prev/https://punkfairie.net" class="Social-webringArrow"><<</a>
+    <a href="https://webring.dinhe.net/" target="_blank" class="Social-webringLink">retronaut</a>
+    <a href="https://webring.dinhe.net/next/https://punkfairie.net" class="Social-webringArrow">>></a>
+</div>
+
+<hr>
+
+<a href="https://keysklubhouse.neocities.org" target="_blank" class="Social-badge">
+    <img src="/img/badges/handcoded.png" alt="Badge with the text hand coded">
+</a>
+
+<a href="https://linklane.net" target="_blank" class="Social-badge">
+    <img src="img/badges/linklane.png" title="Link Lane" alt="LinkLane.net">
+</a>
+
+<a href="http://nerdlistings.info/" target="_blank" class="Social-badge">
+    <img src="img/badges/nerdlistings.gif" title="Nerd Listings" alt="NerdListings.info">
+</a>
diff --git a/src/style/_base.scss b/src/style/_base.scss
index a4735ce..c004278 100644
--- a/src/style/_base.scss
+++ b/src/style/_base.scss
@@ -1,5 +1,5 @@
 /**
- * Global styles. This is the ONLY sheet that is allowed plain HTML tags.
+ * Global styles. This is the ONLY sheet that is allowed plain HTML tags for anything other than margin.
  */
 
 @use 'theme';
@@ -19,5 +19,19 @@ body {
   letter-spacing: theme.$letterSpacing;
 }
 
-@include mixins.rainbowify-text('i', 'color');
-@include mixins.rainbowify-text('b', 'color');
+b {
+  font-weight: normal;
+}
+
+@include mixins.rainbowify-text(i, color);
+@include mixins.rainbowify-text(b, color);
+
+hr {
+  background-image: theme.$gradient;
+  border: none;
+  block-size: theme.$spacer-4xs;
+}
+
+a {
+  @include mixins.link-style;
+}
diff --git a/src/style/_mixins.scss b/src/style/_mixins.scss
index 27c8c4c..20d4e26 100644
--- a/src/style/_mixins.scss
+++ b/src/style/_mixins.scss
@@ -18,3 +18,12 @@
     }
   }
 }
+
+@mixin link-style() {
+  text-decoration: underline;
+  cursor: pointer;
+
+  &:hover, &:focus {
+    text-decoration: wavy underline;
+  }
+}
diff --git a/src/style/components/Social.scss b/src/style/components/Social.scss
new file mode 100644
index 0000000..026ca14
--- /dev/null
+++ b/src/style/components/Social.scss
@@ -0,0 +1,34 @@
+@use '../theme';
+@use '../mixins';
+
+.Social {
+  text-align: center;
+
+  &-webringArrow, &-webringLink {
+    color: inherit;
+  }
+
+  &-webringArrow {
+    text-decoration: none;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: letter-spacing 200ms;
+
+      &:hover, &:focus {
+        text-decoration: none;
+        letter-spacing: theme.$letterSpacing * 4;
+      }
+    }
+  }
+
+  hr {
+    margin-block-start: theme.$spacer-s;
+    margin-block-end: theme.$spacer-s;
+  }
+
+  &-badge {
+    display: inline-block;
+  }
+}
+
+@include mixins.rainbowify-text('.Social-webring', color);
diff --git a/src/style/components/_Nav.scss b/src/style/components/_Nav.scss
index 442a23e..a0c757c 100644
--- a/src/style/components/_Nav.scss
+++ b/src/style/components/_Nav.scss
@@ -9,27 +9,17 @@
   }
 
   &-link {
+    @include mixins.link-style;
+
     display: block;
     padding: 0;
     margin: 0;
     color: inherit;
     text-align: inherit;
-    text-decoration: underline;
     letter-spacing: inherit;
-    cursor: pointer;
     background-color: transparent;
     border: none;
     inline-size: 100%;
-
-    &:hover, &:focus {
-      text-decoration: wavy underline;
-    }
-  }
-
-  &-separator {
-    background-image: theme.$gradient;
-    border: none;
-    block-size: theme.$spacer-4xs;
   }
 }
 
diff --git a/src/style/components/_index.scss b/src/style/components/_index.scss
index eb0aa18..d6b3726 100644
--- a/src/style/components/_index.scss
+++ b/src/style/components/_index.scss
@@ -1,2 +1,3 @@
 @forward 'Site';
 @forward 'Nav';
+@forward 'Social';