Update deps

Gemfile.lock

@@ -12,20 +12,43 @@ GEM
   specs:
     addressable (2.8.7)
       public_suffix (>= 2.0.2, < 7.0)
+    bigdecimal (3.1.8)
     colorator (1.1.0)
     concurrent-ruby (1.3.4)
     em-websocket (0.5.3)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0)
     eventmachine (1.2.7)
     ffi (1.17.0)
+    ffi (1.17.0-aarch64-linux-gnu)
+    ffi (1.17.0-aarch64-linux-musl)
+    ffi (1.17.0-arm-linux-gnu)
+    ffi (1.17.0-arm-linux-musl)
     ffi (1.17.0-arm64-darwin)
+    ffi (1.17.0-x86-linux-gnu)
+    ffi (1.17.0-x86-linux-musl)
     ffi (1.17.0-x86_64-darwin)
+    ffi (1.17.0-x86_64-linux-gnu)
+    ffi (1.17.0-x86_64-linux-musl)
     forwardable-extended (2.6.0)
-    google-protobuf (3.25.5)
-    google-protobuf (3.25.5-arm64-darwin)
-    google-protobuf (3.25.5-x86_64-darwin)
-    google-protobuf (3.25.5-x86_64-linux)
+    google-protobuf (4.28.3)
+      bigdecimal
+      rake (>= 13)
+    google-protobuf (4.28.3-aarch64-linux)
+      bigdecimal
+      rake (>= 13)
+    google-protobuf (4.28.3-arm64-darwin)
+      bigdecimal
+      rake (>= 13)
+    google-protobuf (4.28.3-x86-linux)
+      bigdecimal
+      rake (>= 13)
+    google-protobuf (4.28.3-x86_64-darwin)
+      bigdecimal
+      rake (>= 13)
+    google-protobuf (4.28.3-x86_64-linux)
+      bigdecimal
+      rake (>= 13)
     http_parser.rb (0.8.0)
     i18n (1.14.6)
       concurrent-ruby (~> 1.0)
@@ -74,23 +97,83 @@ GEM
     rexml (3.3.9)
     rouge (4.4.0)
     safe_yaml (1.0.5)
-    sass-embedded (1.69.5)
-      google-protobuf (~> 3.23)
-      rake (>= 13.0.0)
-    sass-embedded (1.69.5-arm64-darwin)
-      google-protobuf (~> 3.23)
-    sass-embedded (1.69.5-x86_64-darwin)
-      google-protobuf (~> 3.23)
+    sass-embedded (1.80.6)
+      google-protobuf (~> 4.28)
+      rake (>= 13)
+    sass-embedded (1.80.6-aarch64-linux-android)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.6-aarch64-linux-gnu)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.6-aarch64-linux-musl)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.6-aarch64-mingw-ucrt)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.6-arm-linux-androideabi)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.6-arm-linux-gnueabihf)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.6-arm-linux-musleabihf)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.6-arm64-darwin)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.6-riscv64-linux-android)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.6-riscv64-linux-gnu)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.6-riscv64-linux-musl)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.6-x86-cygwin)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.6-x86-linux-android)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.6-x86-linux-gnu)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.6-x86-linux-musl)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.6-x86-mingw-ucrt)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.6-x86_64-cygwin)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.6-x86_64-darwin)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.6-x86_64-linux-android)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.6-x86_64-linux-gnu)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.6-x86_64-linux-musl)
+      google-protobuf (~> 4.28)
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)
     unicode-display_width (2.6.0)
     webrick (1.9.0)
 
 PLATFORMS
+  aarch64-linux
+  aarch64-linux-android
+  aarch64-linux-gnu
+  aarch64-linux-musl
+  aarch64-mingw-ucrt
+  arm-linux-androideabi
+  arm-linux-gnu
+  arm-linux-gnueabihf
+  arm-linux-musl
+  arm-linux-musleabihf
   arm64-darwin
+  riscv64-linux-android
+  riscv64-linux-gnu
+  riscv64-linux-musl
   ruby
+  x86-cygwin
+  x86-linux
+  x86-linux-android
+  x86-linux-gnu
+  x86-linux-musl
+  x86-mingw-ucrt
+  x86_64-cygwin
   x86_64-darwin
-  x86_64-linux
+  x86_64-linux-android
+  x86_64-linux-gnu
+  x86_64-linux-musl
 
 DEPENDENCIES
   bundler

_sass/tallneck.scss

@@ -1,10 +1,3 @@
-@import "tallneck/font";
-@import "tallneck/variables";
-
-@import "custom_variables";
-
-@import "tallneck/base";
-@import "tallneck/layout";
-@import "tallneck/components";
-
-@import "custom_layout";
+@forward "tallneck/base";
+@forward "tallneck/layout";
+@forward "tallneck/components";

_sass/tallneck/base.scss

@@ -1,8 +1,11 @@
+@use "variables";
+@use "font";
+
 /*
  * Base
 */
 html {
-  min-width: $min-width;
+  min-width: variables.$min-width;
 }
 
 *,
@@ -14,8 +17,8 @@ html {
 body {
   height: 100%;
 
-  font-size: $base-font-size;
-  font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
+  font-size: variables.$base-font-size;
+  font: variables.$base-font-weight #{variables.$base-font-size}/#{variables.$base-line-height} variables.$base-font-family;
   color: var(--text-primary);
 
   text-rendering: optimizeLegibility;
@@ -30,7 +33,7 @@ body {
 
 main {
   display: block;
-  max-width: $main-max-width;
+  max-width: variables.$main-max-width;
 }
 
 a {
@@ -79,7 +82,7 @@ abbr[title] {
 */
 pre,
 code {
-  font-family: $code-font-family;
+  font-family: variables.$code-font-family;
   font-size: 0.9em;
   border: 1px solid var(--border-secondary);
   border-radius: 3px;
@@ -115,7 +118,7 @@ pre {
 */
 table {
   max-width: 100%;
-  text-align: $table-text-align;
+  text-align: variables.$table-text-align;
   border-collapse: collapse;
   border: 1px solid var(--border-primary);
 

_sass/tallneck/components.scss

@@ -1 +1,4 @@
-@import "components/post", "components/post-card", "components/post-preview", "components/about.scss";
+@forward "components/post"; 
+@forward "components/post-card"; 
+@forward "components/post-preview"; 
+@forward "components/about.scss";

_sass/tallneck/components/about.scss

@@ -1,12 +1,10 @@
+@use "../variables";
+
 .about {
     display: grid;
-    grid-template-columns: minmax($about-img-min-width, $about-img-max-width) 1fr;
+    grid-template-columns: minmax(variables.$about-img-min-width, variables.$about-img-max-width) 1fr;
     grid-template-rows: auto;
 
-    @media (max-width: $about-wrap-max-width) {
-        grid-template-columns: 1fr;
-    }
-
     justify-content: space-between;
 
     margin-left: auto;
@@ -15,6 +13,10 @@
     align-items: center;
 
     gap: 20px;
+
+    @media (max-width: variables.$about-wrap-max-width) {
+        grid-template-columns: 1fr;
+    }
 
     .about--img {
         flex: 1 1 38%;
@@ -23,8 +25,8 @@
         width: 100%;
         height: auto;
 
-        max-width: $about-img-max-width;
-        min-width: $about-img-min-width;
+        max-width: variables.$about-img-max-width;
+        min-width: variables.$about-img-min-width;
 
         margin-left: auto;
         margin-right: auto;

_sass/tallneck/components/post-card.scss

@@ -1,8 +1,14 @@
+@use "../variables";
+
 .post-card-container {
   display: grid;
   gap: 1rem;
   grid-template-columns: 1fr 1fr 1fr 1fr;
-  grid-auto-rows: minmax($card-min-height, 1fr);
+  grid-auto-rows: minmax(variables.$card-min-height, 1fr);
+
+  justify-items: center;
+
+  height: fit-content;
 
   @media (max-width: 1100px) and (min-width: 800px) {
     grid-template-columns: 1fr 1fr;
@@ -20,13 +26,10 @@
     grid-template-columns: 1fr;
   }
 
-  justify-items: center;
-
-  height: fit-content;
 }
 
 .post-card {
-  max-width: $card-max-width;
+  max-width: variables.$card-max-width;
 
 
   vertical-align: middle;

_sass/tallneck/components/post-preview.scss

@@ -1,3 +1,5 @@
+@use "../variables";
+
 .post-preview-container {
     width: 100%;
     height: fit-content;

_sass/tallneck/components/post.scss

@@ -1,3 +1,5 @@
+@use "../variables";
+
 /*
  * Post
 */

_sass/tallneck/footer.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 .page-footer {
   position: relative;
   padding-left: 1rem;
@@ -41,7 +43,7 @@
 }
 
 .footer-hr {
-  max-width: $main-max-width + calc($content-width-overflow/2);
+  max-width: variables.$main-max-width + calc(variables.$content-width-overflow/2);
   border: 0;
   border-top: 1px solid var(--border-primary);
 

_sass/tallneck/header.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 .page-header {
   position: relative;
   z-index: 100;
@@ -22,7 +24,7 @@
     width: 100%;
     height: 100%;
 
-    max-width: $main-max-width - $content-width-overflow;
+    max-width: variables.$main-max-width - variables.$content-width-overflow;
 
     display: flex;
     justify-content: space-between;

_sass/tallneck/layout.scss

@@ -1,4 +1,7 @@
-@import "footer", "header";
+@use "variables";
+@use "footer";
+@use "header";
+
 
 .page-main {
   position: relative;
@@ -45,7 +48,7 @@
 }
 
 .content-width {
-  max-width: $content-width;
+  max-width: variables.$content-width;
   margin-left: auto;
   margin-right: auto;
 }

assets/css/code.scss

@@ -3,4 +3,5 @@
 
 @charset "utf-8";
 
-@import "light_code", "dark_code";
+@use "light_code";
+@use "dark_code";

assets/css/style.scss

@@ -3,4 +3,4 @@
 
 @charset "utf-8";
 
-@import "tallneck";
+@use "tallneck";