Fluid Sizing, Minimal Media Queries Using CSS Clamp(), calc(), vw unit

This is the first version of my solution and I'm actually working on another version of this solution in SASS. This is just an initial solution.

In this challenge, I was able to find a not-so-elegant way of calculating responsive margin which grows inversely proportional to the viewport width.

I achieved this by plotting the viewport(x-axis), and length(y-axis) into a cartesian coordinate plane a do a little bit of math using the two-point form equation of a line.

In summary, I was able to create a preferred value for clamp() function that goes like this: f(x) = m(x - x_2) + y_2 or current_length = (slope)(current_viewport - max_viewport) + length_at_max-viewport.

Example usage of this function is the margin-bottom of my navigation bar: at 375px viewport width, its margin-bottom should be 80px but on 1440px viewport width it should be 71px. That is margin bottom grows inversely proportional with viewport width.

My code in this solution was not so clean and I'm currently re-implementing it using sass so that they are friendlier to read.

Also, my footer section was not very the same as the design since most of my energy was focused on the responsive sizing thing but I just want to share my current progress for feedbacks.

I would be very happy to hear feedback from you guys to improve the next iteration of my solution.

Thanks.