The image looks too small, and the icons and handles for the different social links break into the next line (see the github or twitch icons are in one line and the handles are on the next

https://rubyforgood.org/our-work/skills-based-volunteering at the bottom, the Let us organize ... button as some CSS that prevents it to wrap into multiple line so it overflows the web adding a lot of extra horizontal scroll.

Convert site's stylesheets from CSS to Sass

Make sure everything in the README is up to date

This happen in many places, two examples:

I have an idea of making it look something like this instead, what do you think:

https://rubyforgood.org/our-work/impact here the squares for the projects are too big to fit 2 per row.

Two solutions I can think of:

• make them shrink so 2 can fit in a row
• show 1 per row

We have a few pages that aren't fully responsive. We need to fix that for folks browsing on mobile devices.

Here are a few:

Translate documentation into Spanish

Dockerizing this app would speed up the onboarding process and head off the infamous "but it works on my machine" problem.

Summary

Please add arrows on the Our Supporters slider on the Home page. Users can currently click and drag to advance the slider, but this is not intuitive and it would be very helpful to have an easier way to navigate the slider.

This is the slider:

Please let me know if you have any questions!

Criteria for Completion

• Visitors to the website can click on the arrows to advance the slider.

We're looking to use Grav CMS with our site to make it easier for our content managers to make changes when needed.

https://rubyforgood.org/join-us/non-profit-partners here the video is too big

Issue Summary

Right now, our site uses OwlCarousel2 and Slick to implement slider/carousel features. Both projects haven't been touched in a while, and we want to focus more on making the site navigable for our mobile users. Let's remove these older packages and use Flickity instead.

Sliders

Sliders that need to be addressed include:

• The hero slider on the home page
• The supporters slider on the home page
• The testimonial slider (not currently rendered on the site, but you can find an example here)
• The project slider (not currently rendered on the site --> I'll get an example up soon)

They're located at assets/js/main.js. It would be great to have these cleaned up and organized within that file or possibly separated in their own file, depending on what seems better!

Someone reported that the nav bar (hamburger) is missing on mobile. We need to get it back.

Some words are too long with the configured font-size and don't fit in the container adding extra horizontal scroll

A solution can be to use a variable font-size based on the device's width.

The controls of the carousel at the bottom of the page are placed outside the container, adding extra width to the document and adding that extra scroll to the right side.

Some options to fix this:

1. hide the controls for the resolution when they start to not fit into the width
2. or, resize the container of the carousel so the controls are still inside the viewport

I think option 1 is simpler since on those devices the user can move the carousel swiping with the thouch

Would love an overall site audit of changes we could make for accessibility purposes and also to improve the site's appearance.

It doesn't show which NodeJS version we should use (I found it in the .tool-versions file, but it should be there in the readme, next to the Ruby and Bundler versions).

One comment though on the Node version. I'm using the exact version of Node specified in that file, but when I run npm install it changes the package.json and package-lock.json trying to generate the lock file using lockfileVersion: 2 instead of the current lockfileVersion: 1. I understand the lockfileVersion: 1 is generated with older Node versions, so it's not clear if we should ignore that file change or if the node version in the .tool-versions file is not the correct one to use.

It doesn't tell you to run bundle install, which you find out with an error when trying to run npm run test.

I can submit a PR with this changes, but I'm not sure what's the correct version of Node

This app needs continuous integration to make sure that everything works and to head off the infamous "but it works on my machine" problem.

Issue Summary

I tried to do something like what's explained in this article: Set up a git precommit hook with husky, lint-staged, prettier, and stylelint. It was working, but somewhere along the way the build broke down. It would be great to have that up and running again!

Resources

• Lint Staged
• Husky
• Prettier
• Stylelint
• ES Lint