💄 feat: Work on update box

.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>

.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,

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">

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>

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;
+}

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);

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;
+}

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;
+}

src/style/components/_index.scss

@@ -2,3 +2,5 @@
 @forward 'Nav';
 @forward 'Social';
 @forward 'Status';
+@forward 'UpdateBox';
+@forward 'Title';