All comments

• 

  Mathieu•160

  @mathieu-superposeSubmitted over 2 years ago

  

  React Sass

  1

  40
  

  Mathieu•160

  @mathieu-superposePosted over 2 years ago

  I used the JSON file to process data and animate the bars:

  • define the height of the max bar, find max value over data, and attribute it the max height
  • scale other bars as a ratio to the max val
  • contain the bars into a container of the same size, and translateY each bar on load
  • map data and use index to animate bars sequentially

  Accessibility needs some polish (select the bars with tabulation). I wrote the app in React but hosted it on Github Pages, which might be the cause of a few flags (html issues).

  The app is responsive and checks all user stories.

  0
• 

  Vicktor•900

  @Victor-NyagudiSubmitted about 3 years ago

  I separated the illustration hero image from the rest of the card because I found this worked better for me. However, I noticed a small gap between the two which wasn't caused by any margin, and I inspected each element to make sure.

  Is there an explanation for this? Does the <header> tag I wrapped the image in leave a space below it and the next block-level element?

  I found a workaround, but I'm curious what others have to say about this.

  

  Mobile-first solution using BEM and SCSS

  2

  20
  

  Mathieu•160

  @mathieu-superposePosted about 3 years ago

  I have no proper explanation, since the height of the header should be defined by the image it contains, but using display:flex makes rid of it.

  0