Add image_processing gem

Gemfile

@@ -7,6 +7,7 @@ gem "rails", "~> 7.1"
 gem "sprockets-rails"
 gem "pg"
 gem "puma"
+gem "image_processing"
 gem "importmap-rails"
 gem "turbo-rails"
 gem "stimulus-rails"

Gemfile.lock

@@ -109,10 +109,14 @@ GEM
     drb (2.2.0)
       ruby2_keywords
     erubi (1.12.0)
+    ffi (1.16.3)
     globalid (1.2.1)
       activesupport (>= 6.1)
     i18n (1.14.1)
       concurrent-ruby (~> 1.0)
+    image_processing (1.12.2)
+      mini_magick (>= 4.9.5, < 5)
+      ruby-vips (>= 2.0.17, < 3)
     importmap-rails (2.0.1)
       actionpack (>= 6.0.0)
       activesupport (>= 6.0.0)
@@ -146,6 +150,7 @@ GEM
       net-smtp
     marcel (1.0.2)
     matrix (0.4.2)
+    mini_magick (4.12.0)
     mini_mime (1.1.5)
     minitest (5.21.2)
     msgpack (1.7.2)
@@ -215,6 +220,8 @@ GEM
     reline (0.4.2)
       io-console (~> 0.5)
     rexml (3.2.6)
+    ruby-vips (2.2.1)
+      ffi (~> 1.12)
     ruby2_keywords (0.0.5)
     rubyzip (2.3.2)
     selenium-webdriver (4.17.0)
@@ -268,6 +275,7 @@ DEPENDENCIES
   capybara
   debug
   flaggle_rock!
+  image_processing
   importmap-rails
   jbuilder
   kaminari

app/assets/stylesheets/main.css

@@ -72,29 +72,30 @@ header {
     -webkit-text-stroke: 1px var(--background-color);
     padding: .25em 0;
   }
-}
 
-nav {
-  background-color: var(--dark-background-color);
-  padding: 1em;
-  font-family: "Rogue", sans-serif;
-  position: sticky;
-  top: 0;
-  > ul {
-    text-align: center;
-    animation-name: move-menu;
-    animation-duration: 3s;
-    animation-timeline: scroll(root block);
-    > li {
-      display: inline;
-      padding: 0 2em;
-      > a:link, > a:visited {
-        text-decoration: none;
-        font-size: 1.3em;
-        font-weight: bold;
-      }
-      > a:hover {
-        text-decoration: underline;
+  nav {
+    z-index: 999;
+    background-color: var(--dark-background-color);
+    padding: 1em;
+    font-family: "Rogue", sans-serif;
+    position: sticky;
+    top: 0;
+    > ul {
+      text-align: center;
+      animation-name: move-menu;
+      animation-duration: 3s;
+      animation-timeline: scroll(root block);
+      > li {
+        display: inline;
+        padding: 0 2em;
+        > a:link, > a:visited {
+          text-decoration: none;
+          font-size: 1.3em;
+          font-weight: bold;
+        }
+        > a:hover {
+          text-decoration: underline;
+        }
       }
     }
   }