Rk responsive design code

[robingamedev]

@annaeckman I'm going to write this MR like I would at work.

Goal

Modernize this site to use responsive design.
We'll be focusing on mobile first design, where we build out the site on mobile, then scale to tablet, then scale to desktop.

Notes

1. I removed all of your max-sizing/padding/margins.

• My goal was to rely on flex/grid as much as I can.
• Flex/Grid is about laying out the content.
• Treat padding/margins are sprinkles.

Rule of thumb: If you're doing hardcoded numbers/math (like percentages or vh/vw) for page layout, you might be setting up a footgun that can break everything around it. Always try with flex first (or grid if you wanna go hard mode)

2. I set up a tiny variables.css file to get you in the habit of writing code with a single source of truth.

3. I focused on mobile first design.

• My default, code is mobile.
• Then as I scaled up @media (min-width X), I added custom code.
• Notice I moved the "desktop styling" code to media queries.
• Way easier to code from smallest to biggest (versus the other way around)

Testing

1. Download ResponsivelyApp (If you want)
2. Using Devtools, measure the screen sizes and make sure things are legit.

• Mobile (320x, or 375x)
• Tablet (768x)
• Desktop (1024x, 1440x)
  

[robingamedev]

@annaeckman Doh, I meant to use my https://github.com/RockyKev account, instead of my game dev account. Woops.

Some next steps:

1. Refactor your code to include that padding/margin.
2. Fix your images.
3. Check your email. There seems to be a typo
   Your images are MASSIVE. you can optimize them by resizing them, and importing them. Right now, you're sending 3-4mb images.

Some future things

1 - organize the code to use scss or vite.

It's super duper straightforward. You can literally slap it in real fast, or start a brand new vite project (google vite templates) and then just copy/paste your code.
https://medium.com/@heshramsis/unleash-the-power-of-vite-effortlessly-set-up-your-vanilla-javascript-html-project-and-connect-all-11d8e7da3126

Nesting CSS (or SCSS) is a game changer.

2 - Run through checks

• accessibility check
• SEO check
• lighthouse score

Some things that were pretty noticeable - lack of a favicon, giant file-size images, multiple CSS network calls. Vite will also combine all of your CSS files into a single file, which will make 1 call. WAAAY faster.

3. Learn how to use CSS frameworks.

Everyone likes tailwind because it's utility classes. I personally love it too.

For example: Instead of adding background-color: blue to a bunch of elements, you can just add a single helper class called bg-blue.

4. Figure out a way to make a 'single source of truth'. For example, maybe you want all fonts to be "Open Sans". Or maybe you want all BIG TEXT to be 200px instead of 120px. Less code is always always better.

I gave you a hint using CSS variables. 

---

You don't have to do everything in this single project!

• Perfection is the enemy of the good. I build sites like this for fun and then throw them away.
• Don't be afraid to ask chatgpt to make you a site, then just do touch-ups/modifications.
• Don't forget about animation. Either CSS or JS.
• Explore Rest APIs.
• Dig into Vue or React, and import them in. If you want to flex, use Svelte. If you want to dunk on everybody, use astro and apply all 3 JS frameworks.

Best of luck and happy coding!