From 96b913bb5571e51c8597e5fe20fd22ff6a878e0f Mon Sep 17 00:00:00 2001
From: marleyrae <marleyrae@protonmail.com>
Date: Tue, 6 Jun 2023 16:46:31 -0700
Subject: [PATCH] :lipstick: feat: Work on update box

---
 .idea/cssdialects.xml                |  6 +++++
 .stylelintrc.json                    |  4 ++-
 dist/index.html                      |  4 +++
 dist/style/style.css                 |  2 +-
 src/index.liquid                     |  4 +++
 src/style/_mixins.scss               |  9 +++++++
 src/style/_theme.scss                |  4 ++-
 src/style/components/_Title.scss     | 38 ++++++++++++++++++++++++++++
 src/style/components/_UpdateBox.scss | 12 +++++++++
 src/style/components/_index.scss     |  2 ++
 10 files changed, 82 insertions(+), 3 deletions(-)
 create mode 100644 .idea/cssdialects.xml
 create mode 100644 src/style/components/_Title.scss
 create mode 100644 src/style/components/_UpdateBox.scss

diff --git a/.idea/cssdialects.xml b/.idea/cssdialects.xml
new file mode 100644
index 0000000..67d0d0e
--- /dev/null
+++ b/.idea/cssdialects.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="CssDialectMappings">
+    <file url="PROJECT" dialect="PostCSS" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.stylelintrc.json b/.stylelintrc.json
index 4f7bcb1..20100a6 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -16,6 +16,7 @@
     "custom-property-pattern": null,
     "scss/dollar-variable-pattern": null,
     "scss/percent-placeholder-pattern": null,
+    "scss/at-mixin-pattern": null,
     "rem-over-px/rem-over-px": [
       true,
       {
@@ -56,7 +57,8 @@
           "0",
           "100vi",
           "100vb",
-          "100%"
+          "100%",
+          "auto"
         ],
         "expandShorthand": true,
         "recurseLonghand": true,
diff --git a/dist/index.html b/dist/index.html
index 6c1b278..da621fd 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -52,6 +52,10 @@
     other sites!
 </p>
 
+<div class="UpdateBox">
+    <h2 class="Title--sizeH4">6 June 2023</h2>
+</div>
+
 </main>
 
 <aside class="Site-info">
diff --git a/dist/style/style.css b/dist/style/style.css
index 4dfb931..02e1588 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}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}.Status--new:before,.Status--up:before{display:inline-block;height:18px;margin-right:clamp(.38rem,.35rem + .11vw,.44rem);vertical-align:middle}.Status--new:before{content:url(/style/assets/neonlove-lani-icon-pinknew.gif)}.Status--up:before{content:url(/style/assets/neonlove-lani-icon-pinkup.gif)}
\ 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}.Status--new:before,.Status--up:before{display:inline-block;height:18px;margin-right:clamp(.38rem,.35rem + .11vw,.44rem);vertical-align:middle}.Status--new:before{content:url(/style/assets/neonlove-lani-icon-pinknew.gif)}.Status--up:before{content:url(/style/assets/neonlove-lani-icon-pinkup.gif)}.UpdateBox{border:clamp(.38rem,.35rem + .11vw,.44rem) solid;border-image-slice:1;border-image-source:linear-gradient(90deg,#f87171,#fb923c 17%,#facc15 33%,#a3e635 50%,#39d0dd 67%,#c084fc 83%,#f472b6);border-width:clamp(.38rem,.35rem + .11vw,.44rem)/2;margin-left:auto;margin-right:auto;padding:clamp(.75rem,.71rem + .22vw,.88rem);text-align:center;width:clamp(18rem,16.96rem + 5.22vw,21rem)}.Title--sizeH2{font-size:clamp(1.56rem,1.35rem + 1.01vw,2.14rem);font-weight:400;text-transform:uppercase}.Title--sizeH2:after,.Title--sizeH2:before{content:"🌈"}.Title--sizeH2:before{margin-right:clamp(.38rem,.35rem + .11vw,.44rem)}.Title--sizeH2:after{display:inline-block;margin-left:clamp(.38rem,.35rem + .11vw,.44rem);transform:rotate(90deg)}.Title--sizeH3{font-size:clamp(1.3rem,1.15rem + .72vw,1.71rem);font-weight:400;text-transform:uppercase}.Title--sizeH3:after,.Title--sizeH3:before{content:"🌈"}.Title--sizeH3:before{margin-right:clamp(.38rem,.35rem + .11vw,.44rem)}.Title--sizeH3:after{display:inline-block;margin-left:clamp(.38rem,.35rem + .11vw,.44rem);transform:rotate(90deg)}.Title--sizeH4{font-size:clamp(1.08rem,.98rem + .5vw,1.37rem);font-weight:400;text-transform:uppercase}.Title--sizeH4:after,.Title--sizeH4:before{content:"🌈"}.Title--sizeH4:before{margin-right:clamp(.38rem,.35rem + .11vw,.44rem)}.Title--sizeH4:after{display:inline-block;margin-left:clamp(.38rem,.35rem + .11vw,.44rem);transform:rotate(90deg)}
\ No newline at end of file
diff --git a/src/index.liquid b/src/index.liquid
index d97312b..63b7984 100644
--- a/src/index.liquid
+++ b/src/index.liquid
@@ -6,3 +6,7 @@ layout: layout.liquid
     Hello! Welcome to <i>punkfairie.net.</i> This is my little home on the web, and also serves as a directory for my
     other sites!
 </p>
+
+<div class="UpdateBox">
+    <h2 class="Title--sizeH4">6 June 2023</h2>
+</div>
diff --git a/src/style/_mixins.scss b/src/style/_mixins.scss
index 20d4e26..9ab24e7 100644
--- a/src/style/_mixins.scss
+++ b/src/style/_mixins.scss
@@ -1,4 +1,5 @@
 @use 'sass:list';
+@use 'sass:math';
 @use 'theme';
 
 @mixin flow($space: 1em) {
@@ -27,3 +28,11 @@
     text-decoration: wavy underline;
   }
 }
+
+// noinspection CssReplaceWithShorthandSafely
+@mixin gradient-border($width) {
+  border: $width solid;
+  border-width: math.div($width, 2);
+  border-image-source: theme.$gradient;
+  border-image-slice: 1;
+}
diff --git a/src/style/_theme.scss b/src/style/_theme.scss
index 7ddc657..443466e 100644
--- a/src/style/_theme.scss
+++ b/src/style/_theme.scss
@@ -88,7 +88,7 @@ $fontSize-6: clamp(2.24rem, calc(1.86rem + 1.91vw), 3.34rem);
 
 /**
  * Fluid spacing scale
- * @link https://utopia.fyi/space/calculator?c=320,12,1.2,1240,14,1.25,6,0,&s=0.75|0.5|0.25|0.15,1.5|2|3|4|6|12,s-l&g=s,l,xl,12
+ * @link https://utopia.fyi/space/calculator?c=320,12,1.2,1240,14,1.25,6,0,&s=0.75|0.5|0.25|0.15,1.5|2|3|4|6|12|24,s-l&g=s,l,xl,12
  */
 
 $spacer-4xs: clamp(0.13rem, calc(0.13rem + 0.00vw), 0.13rem);
@@ -102,6 +102,7 @@ $spacer-xl: clamp(2.25rem, calc(2.12rem + 0.65vw), 2.63rem);
 $spacer-2xl: clamp(3.00rem, calc(2.83rem + 0.87vw), 3.50rem);
 $spacer-3xl: clamp(4.50rem, calc(4.24rem + 1.30vw), 5.25rem);
 $spacer-4xl: clamp(9.00rem, calc(8.48rem + 2.61vw), 10.50rem);
+$spacer-5xl: clamp(18.00rem, calc(16.96rem + 5.22vw), 21.00rem);
 
 /* One-up pairs */
 $spacer-4xs-3xs: clamp(0.13rem, calc(0.08rem + 0.22vw), 0.25rem);
@@ -114,6 +115,7 @@ $spacer-l-xl: clamp(1.50rem, calc(1.11rem + 1.96vw), 2.63rem);
 $spacer-xl-2xl: clamp(2.25rem, calc(1.82rem + 2.17vw), 3.50rem);
 $spacer-2xl-3xl: clamp(3.00rem, calc(2.22rem + 3.91vw), 5.25rem);
 $spacer-3xl-4xl: clamp(4.50rem, calc(2.41rem + 10.43vw), 10.50rem);
+$spacer-4xl-5xl: clamp(9.00rem, calc(4.83rem + 20.87vw), 21.00rem);
 
 /* Custom pairs */
 $spacer-s-l: clamp(0.75rem, calc(0.40rem + 1.74vw), 1.75rem);
diff --git a/src/style/components/_Title.scss b/src/style/components/_Title.scss
new file mode 100644
index 0000000..a4bf83f
--- /dev/null
+++ b/src/style/components/_Title.scss
@@ -0,0 +1,38 @@
+@use '../theme';
+
+@mixin Title() {
+  font-weight: normal;
+  text-transform: uppercase;
+
+  &::before, &::after {
+    content: '🌈';
+  }
+
+  &::before {
+    margin-inline-end: theme.$spacer-2xs;
+  }
+
+  &::after {
+    display: inline-block;
+    margin-inline-start: theme.$spacer-2xs;
+    transform: rotate(90deg);
+  }
+}
+
+.Title--sizeH2 {
+  @include Title;
+
+  font-size: theme.$fontSize-4;
+}
+
+.Title--sizeH3 {
+  @include Title;
+
+  font-size: theme.$fontSize-3;
+}
+
+.Title--sizeH4 {
+  @include Title;
+
+  font-size: theme.$fontSize-2;
+}
diff --git a/src/style/components/_UpdateBox.scss b/src/style/components/_UpdateBox.scss
new file mode 100644
index 0000000..368718b
--- /dev/null
+++ b/src/style/components/_UpdateBox.scss
@@ -0,0 +1,12 @@
+@use '../mixins';
+@use '../theme';
+
+.UpdateBox {
+  @include mixins.gradient-border(theme.$spacer-2xs);
+
+  padding: theme.$spacer-s;
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+  text-align: center;
+  inline-size: theme.$spacer-5xl;
+}
diff --git a/src/style/components/_index.scss b/src/style/components/_index.scss
index 3beeeaf..67d4210 100644
--- a/src/style/components/_index.scss
+++ b/src/style/components/_index.scss
@@ -2,3 +2,5 @@
 @forward 'Nav';
 @forward 'Social';
 @forward 'Status';
+@forward 'UpdateBox';
+@forward 'Title';