Updated the codebase for UI updates

.ruby-version

@@ -0,0 +1 @@
+3.1.1

Gemfile.lock

@@ -14,10 +14,14 @@ GEM
       http_parser.rb (~> 0)
     eventmachine (1.2.7)
     ffi (1.17.2-arm64-darwin)
+    ffi (1.17.2-x86_64-darwin)
     forwardable-extended (2.6.0)
     google-protobuf (4.30.2-arm64-darwin)
       bigdecimal
       rake (>= 13)
+    google-protobuf (4.30.2-x86_64-darwin)
+      bigdecimal
+      rake (>= 13)
     http_parser.rb (0.8.0)
     i18n (1.14.7)
       concurrent-ruby (~> 1.0)
@@ -90,6 +94,8 @@ GEM
     safe_yaml (1.0.5)
     sass-embedded (1.86.3-arm64-darwin)
       google-protobuf (~> 4.30)
+    sass-embedded (1.86.3-x86_64-darwin)
+      google-protobuf (~> 4.30)
     sinatra (4.1.1)
       logger (>= 1.6.0)
       mustermann (~> 3.0)
@@ -109,14 +115,15 @@ GEM
     tilt (2.6.0)
     tzinfo (1.2.11)
       thread_safe (~> 0.1)
-    tzinfo-data (1.2024.1)
+    tzinfo-data (1.2025.2)
       tzinfo (>= 1.0.0)
     unicode-display_width (2.6.0)
-    wdm (0.1.1)
+    wdm (0.2.0)
     webrick (1.9.1)
 
 PLATFORMS
   arm64-darwin-23
+  x86_64-darwin-24
 
 DEPENDENCIES
   cowsay (~> 0.3.0)

_config.yml

@@ -34,7 +34,7 @@ spotify_username: /
 
 # SASS
 sass:
-  sass_dir: _sass
+  sass_dir: ./_sass
   style: compressed
 
 # Build settings

assets/css/module/_base.sass

@@ -0,0 +1,65 @@
+@use 'variable' as *
+html,
+body
+  font-family: 'Poppins', sans-serif
+  scroll-behavior: smooth !important
+  transition: all 0.25s ease
+  -webkit-font-smoothing: antialiased
+
+main
+  min-height: calc(100vh - 330px) 
+a
+  text-decoration: none
+.project main
+  min-height: calc(100vh - 220px) 
+
+/* width */
+::-webkit-scrollbar
+  width: 0.5vmax !important
+
+/* Track */
+::-webkit-scrollbar-track
+  background: white !important
+
+/* Handle */
+::-webkit-scrollbar-thumb
+  background: #363636 !important
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover
+  background: black !important
+
+::placeholder
+  font-family: 'Poppins', sans-serif
+
+#navbar
+  .navbar-burger
+    span:nth-child(2)
+      left: calc(50%)
+      width: 8px
+
+.is-active
+  font-weight: bold
+
+.columns
+  .button
+    margin: 0.5rem !important
+
+hr
+  margin: 1rem auto
+  height: 1px
+
+.column
+  margin: auto 0.5rem
+  padding: 0.5rem
+
+.searchResult
+  a
+    .title
+      text-decoration: underline
+
+.footer
+  background-color: $brand-color-3
+  color: $brand-color-5
+  padding: 1rem 0
+  margin-top: 2rem

_sass/_button.sass → assets/css/module/_button.sass

@@ -1,3 +1,4 @@
+@use 'variable' as *
 .btn
   &-primary
     background-color: $brand-color-3
@@ -22,7 +23,7 @@
     &:active
       background-color: $brand-color-3
       color: $brand-color-5
-      border-color: $brand-color-3
+      border-color: $brand-color-5
   &-sm
     border-radius: 50px
     background-color: $brand-color-2

assets/css/module/_misc.sass

@@ -0,0 +1,54 @@
+@use 'variable' as *
+body
+  background-color: #FEF5F6
+
+#navbar 
+    opacity: 0.95
+
+.is-active 
+    font-weight: 600
+.header
+  background-color: #36000E
+  padding: 20px 0 150px 0
+  img 
+    height: 86px
+
+  &__text 
+    color: #FFF3F4
+    font-weight: 24px
+    margin-top: 16px
+
+:root 
+  counter-reset: masonry
+.masonry 
+  display: grid
+  grid-gap: 30px
+  grid-template-columns: repeat(auto-fill, minmax(400px,1fr))
+  grid-auto-rows: min-content
+  margin-top: -120px
+
+.masonry-item 
+  border-radius: 8px
+  background-color: #eee
+  border-radius: 5px
+  overflow: hidden
+  box-shadow: 0px -3px 28px rgba(121, 28, 18, 0.1)
+
+.masonry-item,
+.masonry-item img 
+  position: relative
+  width: 100%
+  max-width: 100%
+
+.masonry-item:hover:after 
+  font-size: 30px
+  background-color: rgba(0, 0, 0, .75)
+
+.masonry-item-name
+  border-top: 1px solid $brand-color-4
+  color: $brand-color-3
+  position: absolute
+  bottom: 0
+  width: 100%
+  border-bottom-left-radius: 5px
+  border-bottom-right-radius: 5px