✅ Deploy Preview for codingtrain ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	2405fac
🔍 Latest deploy log	https://app.netlify.com/sites/codingtrain/deploys/65b6cfabf22d930008e628e9
😎 Deploy Preview	https://deploy-preview-1339--codingtrain.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Thank you @aryanpingle! Tagging in @runemadsen to review, as this maybe affects the original design of the site?

I would keep only of the borders (top or bottom) to maintain the original border style.

This needs more QA, couple things I noticed:

All separators are doubled besides the last one.

The changes have not been correctly applied to tracks. They don't scroll the same way as challenges anymore, and the doubled lines are increasingly misaligned vertically.

Ooh I didn't know about the tracks content till today, that's pretty neat. The double border issue should be a fairly easy CSS patch. I suppose the track stops "double-line" is just the background-lines clashing with the border-lines, I'll try to fix that.

@fturmel could you send me a link to the challenge which has both Tracks and Timestamps?

Here's a link with both tracks and timestamps: tracks/webgl/webgl/3-light-and-material

The double border is because of border-top and border-bottom, the background lines are hidden because of the bg color applied.

Alrighty, the border issues seemed to be fixed now. Changed the border-colors to match if it's a track / challenge because I was feeling extra merry today XD

I intentionally didn't add borders for "Track Stops" and "Parts", because their clickable area would be narrower than the rectangle formed (and it's more aesthetically pleasing without them). Should be easy to add them if needed.

@fturmel @dipamsen I'd love another set of eyes on it again :)

Whoa, can't believe I made this PR all the way back in 2023. Time flies by so quickly, here's a before-after of the changes:

Before	After

@shiffman Could you give it a once-over whenever you're free?

Thank you @aryanpingle! The missing borders from the "track stops" looks odd to me and I think should be retained to stay true to the original design? Can you elaborate more on why you removed them?

The track-stops components follow a different convention than the timestamps, so I wasn't sure how I'd add the borders to them. I'll give it a try now!

@aryanpingle Hi! It's subtle but I see that the original background color is not white, but a light tint of red. We can see the difference here:

For reference, the original striped background is defined in src/components/Layout.module.css :

.content {
  background-color: var(--red-lightest);
  min-height: 100vh;
  border-right: var(--border);
  background-image: linear-gradient(rgba(255, 0, 0, 0.1) 1px, transparent 1px);
  background-size: 100% var(--baseline);

  /* There is no border top so make sure baseline moves up 1px */
  background-position: 0px -1px;
}

Ah, nice catch. Fixing it.

I took a look through and I'd like to merge this! Does anyone have any last comments before I do? Apologies for how long you had to wait @aryanpingle!

No worries, Dan! For anyone who wants to review, here's how it looked before. And here's how it looks after (the timestamp section).

Fantastic! As there have been no other comments and it looks good to me, I'm going to go ahead and merge!

@all-contributors add @aryanpingle for code

@shiffman

I've put up a pull request to add @aryanpingle! 🎉