Devlog #4

Hello all! Yesterday and today:

Get Involved page

• Create mobile-friendly stacked version using @media filters
• Collapse initiatives row into a card slider in the mobile version. I was able to reuse some code from the home page (this involved a lot of troubleshooting to handle transitioning between desktop and mobile)

Advocating page

• Create mobile-friendly stacked version using @media filters
• Switch from using <details> and <summary> to custom JavaScript-based smooth accordion

About page

• Create mobile-friendly stacked version using @media filters (by far the easiest page to make responsive

Other minor changes as necessary

• Including creating a second @media filter for even smaller screens for the footer

Also…

New initiative - Budget page

• Mostly reusing template from the 102nd Street page, with some tweaks as needed

Devlog #3

Hello all! Today:

Resources page

• Create mobile-friendly version using @media filters, stacking everything vertically
• Use order: -1 to have images and text alternate positions in desktop version but have images appear above text in mobile version
• Create custom smooth dropdown (similar to HTML <detail>/<summary>, utilizing JS requestAnimationFrame()

102nd St (initiative) page

• Create mobile-friendly version using @media filters (vertical stacking)
• Clean up information bubbles using CSS Grid and overflow scrolling

Other minor tweaks as needed

Devlog #2

Hello all! Short devlog to round off the day. I made the main content of the homepage responsive by figuring out a good breakpoint (compressing until it looked bad), and then turning what were previously row flexboxes into columns. Some small tweaks to dimensions were added as necessary.

I also experimented with max: in CSS, setting some margins and paddings using it to make sure a minimum threshold existed.

I plan to repeat this process for other pages.

Hello all! I realize I should probably be more in-depth with these devlogs, so consider this devlog #1.

1 - Responsive footer

When the width of the page gets too narrow, I notice that the links in the footer overlap with the copyright notice. I determined that this was because the links were positioned and centered absolutely. To fix this, I squashed the page until just before this happened and made that my breakpoint for use in a @media filter.

In the filter for smaller screens, I simply changed the footer from being a horizontal flexbox to a vertical one, and removed the absolute positioning and centering. I copied these changes to all of my website’s pages. (see image below)

2 - Responsive top navigation

Similarly, I noticed that a narrow viewport caused the links at the top to become compressed and even extend past the yellow containing box. Tox fix this, I first squashed the page to find my @media breakpoint.

Next, I used fa-solid fa-bars and fa-solid fa-rectangle-xmark in order to create a hamburger menu that would appear on the right, replacing the four links on the top. I used JavaScript event listeners to make the menu appear and disappear at the press of these icons.

Creating this hamburger menu itself was fairly simple, as it only involved converting the <ul> that the links were in from a horizontal flexbox to a vertical one. Then, I added the gold background, changed the :hover underline to white, and used position: fixed to align it with the right-hand side.

Originally, this navigation panel would simply appear when the hamburger button was pressed. I felt that this lacked an element of interactivity and was visually jarring. After trying unsucessfully to use CSS animations to achieve a smooth sliding effect, I asked ChatGPT for help. With that, I refactored my code to, instead of using display: none to hide the menu, use transform: translateX(100%). This simplified my JavaScript and allowed me to use a trigger class and CSS transitions to smoothly animate the menu in and out.

I then copied this to the other pages, using a new universal JavaScript file - dynamic top.js - to streamline the process somewhat. Using this, I was also able to easily make a change that applies overflow: hidden to the document body when the menu is active.

dynamic_top.js

const burger = document.getElementById('burger');
const toprow = document.querySelector('#toprow ul');
const close = document.getElementById('close');

burger.addEventListener('click', () => {
    toprow.classList.add('open');
    body.style.overflow = 'hidden';
});
close.addEventListener('click', () => {
    toprow.classList.remove('open');
    body.style.overflow = 'auto';
});

The results are in the second and third images.

#3 - Small tweaks

• Add min-height: 225px to the card carousel on the hero section so it doesn’t get too squished
• Change the size and spacing of the indicator dots at the bottom of the card carousel to be in fixed units so it doesn’t get too small

Next step - making the main content of each of the six pages responsive, starting with the home page.

Thanks!

Fix spacing, link to custom bike map

finalize resources pg

initiative page and cards

created advocacy guide, expanded resources

created about and resources pages

added clickthrough action alert cards (placeholder) and set up newsletter thru buttondown

Setting up a form for an email newsletter!