codeforpdx / website

Official Code for PDX website

New website at https://github.com/codeforpdx/codepdx_website

Code for PDX

Hosted at https://codeforpdx.org

This site is built with Jekyll, a simple, easy to use static site generator.

Description

This is the repo for our official website. As a Code for America Brigade, we're part of a national network of civic-minded volunteers who contribute their skills toward using the web as a platform for local government and community service.

Getting Started

• Please read and abide by our Code of Conduct

• To learn about our workflow and how to get started. View the CONTRIBUTING.MD doc.

Project Layout

• File Organization is similar to any other project built with Jekyll with the following organization for HTML and asset files.

The main page has different sections. Each section has its own file for HTML, and assets (CSS, images, JS).

For example lets look at the Products section. The relevant HTML and asset files for the products section can be found here:

• HTML file: sections/products.html
• CSS file: assets/stylesheets/products.scss
• Images dir: assets/images/products/*
• Javascript dir: assets/javascript/products/*

Products is a collection and each individual product can be found in its collection directory. Jekyll will look for the products collection in the directory _products by default. Inside that directory you'll find each product and the data that is used to build the section.

Design Files

• Redesign mockup: Home Page
• Redesign documentation (next project manager will need to ask Hugh for access): Google Drive

website's Issues

Adjust the rose logo so that it sits center in the nav bar

Blocked by #28

Create PR that merges to nav_bar-redesign branch

The navbar html can be found here: _includes/header.html

Adjust Projects section

Create a PR that merges to our_projects-redesign branch.

1)adjust mobile layout for smaller screens (under 600px). Arrows do not stay centered and card does not shrink appropriately.

2)Align the image, description, and status in the projects cards to be uniform.

Currenty:

Intended:

Create Slack signup functionality

We want new volunteers to be able to easily join our Slack so they can join a product team!

Place in footer below Twitter and Github links, and follow format of those: Slack icon on left, "codeforPDX" text on right.

Here's the link to join Code for PDX Slack: https://join.slack.com/t/codeforpdx/shared_invite/zt-4msr5np3-n5qBye3GG~4hA_7XZkczgA

Contact Us form

need to think about how to handle contact us form:

• needs to be free
• Nick has backend started that we could hook into
• or we can use a library

anyone is welcome to research! comment if you find anything interesting.

Update site global CSS standards

Updating standards in main.scss to match the design of the figma mockup. Allows for alternating section colors, decreased margins on whole site, and other minor changes.

Margin width should be updated in each section individually to 80%.

No updates yet to global font style and size, open to suggestions if it needs to change.

Please leave comments about other global CSS standards we can update here so we don't have to individually make different changes.

Redirect Partner with us Button

The partner with us "let's talk" button was redirected to open the native mail client.

With the contact form added in, the button will need to link to the contact us form section on the website.

Blocked by issue #42

Update/create markdown files for "Our Projects"

Create PR that merges to our_projects-redesign branch

The projects (product) section can be found in: sections/products.html
The collection of md files can be in _products directory.

Adjust "Our Partners" list to display as shown

Create PR that merges to partner_list-redesign branch

NOTE: all partner logos are already on the current site - keep them as is!

The partners html file can be found in: sections/partners.html
The _partners directory has all the md files <- probably don't need to modify that unless we're adding/removing partners.

Donate button visible only on mobile

Create a PR that merges into donate_button.

Update the styling of the donate button and make it visible only on mobile (screen size smaller than 549px).
Donate button shouldn't be visible on desktop.

Html can be found in includes/donate_button.html.

Make entire product card clickable

During testing on the redesign_branch found that only the title on the product cards is clickable, see below in blue:

I'd suggest we make the entire card clickable.

Adjust "Our Sponsors" list to display as shown

Create PR that merges to sponsor_list-redesign branch

NOTE: all sponsor logos are already on the current site - keep them as is!

The sponsors html can be found in: sections/sponsors.html
The mardown files that contain all the sponsor info can be found in the md files located in _sponsors <- Probably don't need to modify those files, but good to know where it is.

Bridge Illustration Refinement

The current graphic is cut off and isn't showing up the same as in the figma design. Here is what is displaying on the redesign_branch:

Here is what is on the figma design:

Also in my opinion we should shift the image down to get rid of the whitespace. @katrinasperry what do you think about that? It would look something like this:

Optimize loading of site images

The site takes a bit long to load some of the images. Perhaps we can decrease the file sizes while still maintaining image quality and/or move the images to a cdn or perhaps there are other options to improve the load time on the first visit.

Note: I'd prefer to reducing file sizes before moving to a cdn.

Mobile loads without issue. Slow load times only occur with larger screen sizes which indicates the splash image is causing the issue. There are multiple files with varying sizes for the splash image, and the most optimum file is chosen for the screen size of the client. This may need to be tweaked to speed up the site.

Adjust the thickness of the nav bar

Create PR that merges to nav_bar-redesign branch

The navbar html can be found here: _includes/header.html - although this is purely a css change. which can be found in assets/main.scss

Fix header display

Description

The header H1 Code For PDX text and icons on the right are sitting high. It appears there is extra margin space that should not be there.

Acceptance criteria

• The header H1 label and icons should be centered vertically.
• The logo may need to be adjusted. It should look similar to the below image across all screen sizes:

Our Products/Our Projects

What are we calling this section? Figma say projects, redesign_test says products:

Create PR template

Create a PR template that facilitates the linking of issues and PR's so that the issue will be closed automatically when a PR is merged.

Update docker config

The live reloading is not working when running the project in docker. This makes it difficult to develop the site when using docker as the developer needs to re-build each time in order to see changes.

• Update docker config to enable live reloading
• Update README

Implement html/css for "Our Projects"

Create PR that merges to our_projects-redesign branch

The projects (product) section can be found in: sections/products.html
The collection of md files can be in _products directory.

Chang background color of footer

Since the contact form is being ommitted temporarily, the alternating background colors results in the last two sections being the same color. Update the footer to be alternating.

Create a pr that merges into redesign_test

Adjust the footer to display as shown

Create PR that merges to footer-redesign branch

The footers html can be found in: _includes/footer.html

Update section heights to all be uniform

The padding on the padding of most sections is 3rem, update all the sections that they have the same padding.

Createa pr that merges into redesign_test.

Adjust Footer color

The footer background color was adjusted to fit the alternating section colors.

With the contact form added back in, it will need to be changed back to fit the original mockup style

Blocked by #42

Adjust the “Code For PDX” header to display as shown

Create PR that merges to nav_bar-redesign branch

The navbar html can be found here: _includes/header.html

Remove "Our Team" section

Create PR that merges to nav_bar-redesign branch

The code for this is in the following files:

/_team directory can be removed.

_layouts/home.html needs to be updated

config file _config.yml needs to be updated.

Font update

After testing the redesign_branch I found the font to be wrong. Need to update it to Monserrat.

Donate Button and Let's Talk Button

There was an issue that came up in slack with the redesign. The donate button that is not on the footer on mobile the text is blue. This was found on a iPhone SE. Also the let's talk button is not fully display the text is cut off. Please see images below for visual representation.

Implement "Support Us" section

Create PR that merges to support_us-section branch

Button links to https://www.codeforamerica.org/donate/brigade/?utm_campaign=code%20for%20pdx&utm_source=codeforpdxsite

The html file can be found in sections/support_us.html

Add subtle drop shadow to sticky navbar

Update status for OpenTransit

The OpenTransit product status can be updated to -> 'On Hold'

Remove contact us section

Remove contact form and button temporarily.

Pr should merge into redesign_test.

add getting started section to README

Implement "Volunteer with Us" section

Create PR that merges to volunteer_with_us-design branch

Button links to https://www.meetup.com/Code-for-PDX/events/

The volunteer with us html file can be found in sections/volunteer_with_us.html

blue logo only seen on mobile device

The logo is blue when viewing only on a mobile device. It turns green and is underlined after clicking on it.

Remove the main image and associated css

Remove the splash-header in _layouts/default.html and associated css/images - This is the large image at the top of the page.

Please submit a PR that will merge into the nav_bar-redesign branch.

Update the social media icons and their spacing

Blocked by #28

Create PR that merges to nav_bar-redesign branch

The navbar html can be found here: _includes/header.html

Implement intro/bridge section

Create PR that merges to intro_section-design branch

The html file can be found here: sections/about.html
The content is coming from this file: index.markdown <- This file is the starting point for generating the entire page. It's kind of necessary to have this file.

Add background color to product status

We want a visual cue so people can easily tell the status of each product. Each product currently has a status (currently all are "Active"), and depending on product status, background color should dynamically adjust accordingly.

We currently have 3 statuses that we'd like to have different colors for:
Active
Completed
On Hold

Use your best judgement - create a design and show it to us, or implement and we can discuss.

Add border boxes to product section

In section, add a border to each product. Follow shading and other styling in section.

Update fonts on buttons

Need to update font family and weights on buttons:

• Donate Header
  
• Join
  
• Partner
  
• Support Us
  
• Donate Footer
  

Update contributing.md

As it seems a lot of people are having trouble getting the repo up and running on their local machines I was wondering if we should add some additional tips to get it going. I know for my windows 10 machine I had to do the following:

• Removed ruby "2.7.2" from line 2 in the Gemfile
• Delete the Gemfile.lock
• run bundle install in the command line to regenerate a new Gemfile.lock
• run bundle add webrick in the command line
  • I guess this is necessary if you are running Ruby 3.0.0+ according to this site: https://jekyllrb.com/docs/

Update nav bar to Desktop design

Update the nav bar for desktop design. Currently the nav bar is missing donate button and LinkedIn icon. Update the entire nav bar to match the desktop design below.

Header HTML file can be found in includes/header.html.

Limit Product Carousel Scrolling

After testing the redesign_branch found that the products section scrolls too far and reveals two blank spaces:

I would suggest having it stop scrolling once it hits "website"

Update status for RecordSponge

The RecordSponge product status can be updated to -> 'Completed'

Implement "Partner with Us" section

Create PR that merges to partner_with_us-design branch

Button links to Contact Us section at bottom of page

The html can be found in sections/partner_with_us.html