Compile Sass with JavaScript package

Gemfile

@@ -1,6 +1,7 @@
 source 'https://rubygems.org'
 
-gem 'jekyll', '~> 3.9.0'
+gem 'jekyll', '~> 4.3.0'
+gem 'jekyll-sass-converter', '~> 3.0.0'
 gem 'kramdown-parser-gfm', '~> 1.0'
 gem 'jekyll-redirect-from'
 

Gemfile.lock

@@ -1,61 +1,66 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    addressable (2.8.0)
-      public_suffix (>= 2.0.2, < 5.0)
+    addressable (2.8.1)
+      public_suffix (>= 2.0.2, < 6.0)
     colorator (1.1.0)
-    concurrent-ruby (1.1.9)
+    concurrent-ruby (1.2.2)
     diff-lcs (1.4.4)
-    em-websocket (0.5.2)
+    em-websocket (0.5.3)
       eventmachine (>= 0.12.9)
-      http_parser.rb (~> 0.6.0)
+      http_parser.rb (~> 0)
     eventmachine (1.2.7)
-    ffi (1.15.4)
+    ffi (1.15.5)
     forwardable-extended (2.6.0)
-    http_parser.rb (0.6.0)
-    i18n (0.9.5)
+    google-protobuf (3.22.2)
+    http_parser.rb (0.8.0)
+    i18n (1.12.0)
       concurrent-ruby (~> 1.0)
-    jekyll (3.9.1)
+    jekyll (4.3.2)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
-      i18n (~> 0.7)
-      jekyll-sass-converter (~> 1.0)
+      i18n (~> 1.0)
+      jekyll-sass-converter (>= 2.0, < 4.0)
       jekyll-watch (~> 2.0)
-      kramdown (>= 1.17, < 3)
+      kramdown (~> 2.3, >= 2.3.1)
+      kramdown-parser-gfm (~> 1.0)
       liquid (~> 4.0)
-      mercenary (~> 0.3.3)
+      mercenary (>= 0.3.6, < 0.5)
       pathutil (~> 0.9)
-      rouge (>= 1.7, < 4)
+      rouge (>= 3.0, < 5.0)
       safe_yaml (~> 1.0)
+      terminal-table (>= 1.8, < 4.0)
+      webrick (~> 1.7)
     jekyll-redirect-from (0.16.0)
       jekyll (>= 3.3, < 5.0)
-    jekyll-sass-converter (1.5.2)
-      sass (~> 3.4)
+    jekyll-sass-converter (3.0.0)
+      sass-embedded (~> 1.54)
     jekyll-watch (2.2.1)
       listen (~> 3.0)
-    kramdown (2.3.1)
+    kramdown (2.4.0)
       rexml
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
-    liquid (4.0.3)
-    listen (3.7.0)
+    liquid (4.0.4)
+    listen (3.8.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    mercenary (0.3.6)
+    mercenary (0.4.0)
     mini_portile2 (2.8.0)
     nokogiri (1.13.10)
       mini_portile2 (~> 2.8.0)
       racc (~> 1.4)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
-    public_suffix (4.0.6)
+    public_suffix (5.0.1)
     racc (1.6.1)
-    rb-fsevent (0.11.0)
+    rake (13.0.6)
+    rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
     rexml (3.2.5)
-    rouge (3.26.1)
+    rouge (4.1.0)
     rspec (3.10.0)
       rspec-core (~> 3.10.0)
       rspec-expectations (~> 3.10.0)
@@ -70,21 +75,24 @@ GEM
       rspec-support (~> 3.10.0)
     rspec-support (3.10.2)
     safe_yaml (1.0.5)
-    sass (3.7.4)
-      sass-listen (~> 4.0.0)
-    sass-listen (4.0.0)
-      rb-fsevent (~> 0.9, >= 0.9.4)
-      rb-inotify (~> 0.9, >= 0.9.7)
+    sass-embedded (1.60.0)
+      google-protobuf (~> 3.21)
+      rake (>= 10.0.0)
+    terminal-table (3.0.2)
+      unicode-display_width (>= 1.1.1, < 3)
+    unicode-display_width (2.4.2)
+    webrick (1.8.1)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
-  jekyll (~> 3.9.0)
+  jekyll (~> 4.3.0)
   jekyll-redirect-from
+  jekyll-sass-converter (~> 3.0.0)
   kramdown-parser-gfm (~> 1.0)
   nokogiri (>= 1.10.5)
   rspec
 
 BUNDLED WITH
-   2.2.28
+   2.4.10

Makefile

@@ -1,19 +1,32 @@
-run: install-dependencies
+run:
+	make -j2 serve watch-css
+
+serve:
 	bundle exec jekyll serve --host 0.0.0.0 --incremental
 
+watch-css:
+	npm run watch:css
+
 clean:
 	rm -rf _site
 
 test: build
 	bundle exec rspec spec
 
-build: install-dependencies
+build-site:
 	bundle exec jekyll build
 
+build-css:
+	npm run build:css
+
+build: build-site build-css
+
 install-dependencies: bundle npm
 
 npm:
 	npm ci
 
 bundle:
 	bundle check || bundle install
+
+setup: install-dependencies

README.md

@@ -26,15 +26,21 @@ Run tests
 docker-compose run web make test
 ```
 
-You can drop into a bash shell in the container with 
+You can drop into a bash shell in the container with
 
 ```sh
 docker-compose run web bash
 ```
 
 ### Locally
 
-Run the server locally: 
+Run initial setup:
+
+```sh
+make setup
+```
+
+Run the server locally:
 
 ```sh
 make run

_config.yml

@@ -36,6 +36,7 @@ exclude:
   # default excludes from https://github.com/jekyll/jekyll/blob/493b800edbf6f6e97c34d1812698260907255665/lib/site_template/_config.yml#L45
   - .sass-cache/
   - .jekyll-cache/
+  - assets/scss
   - gemfiles/
   - Gemfile
   - Gemfile.lock
@@ -45,6 +46,9 @@ exclude:
   - vendor/gems/
   - vendor/ruby/
 
+keep_files:
+  - assets/css
+
 # Defaults
 defaults:
   - scope:

assets/scss/main.css.scss

@@ -0,0 +1,30 @@
+.usa-prose {
+  figure {
+    max-width: 64ex;
+    margin-left: 0;
+    margin-right: 0;
+    text-align: center;
+
+    img {
+      width: 100%;
+      margin-bottom: 0.5em;
+    }
+
+    figcaption {
+      font-size: 0.8em;
+    }
+  }
+}
+
+#nav-links {
+  width: fit-content !important;
+}
+
+//override for touchpoints survey included via script
+#fba-modal-dialog .usa-banner__header-text {
+  color: white;
+
+  a {
+    color: white;
+  }
+}