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!