For day 2 of #7Days7Websites, I may have bitten off more than I could handle, but I still had fun. I wanted to build and design a mobile-first website, without any frameworks and do some experimenting with gradients.

Most likely inspired by last night’s enchiladas, I choose the Wikipedia entry for the Scoville scale as the source for my content. Since the scale goes from 0 (no heat) to 3 million (lethal, levels of heat), it lends its self to organization with bands of color.

At first, I had solid bands of color for each category, mildly pungent, moderately pungent, etc, but it seemed choppy. With solid colors as a fallback, a linear gradient from light green, to dark red, broken up by section is what I was looking for.

Cursor

Another thing I had been wanting to try, was changing the default cursor. Was it possible? Yes, but not easily implemented. It works best when linked to an image. I wanted to use the hot pepper (?) emoji, so I had to format it as an image, instead of using it as a text string.

body {
cursor: url("../assets/favicon_io/hot-pepper.png"), auto;
}

Recap

Overall, my plans for today’s project were too big to realistically get done in time (while also keeping up with other commitments). It made me remember how involved “building a website” can be. In the future, I’ll cut down what I want to build or try to 1-2 small things as opposed to a whole, featured filled website.

While I am happy that I was able to remember how media queries and ems work on my own, there are improvements I’d like to make.

Being able to jump from section to section would be easier than all the scrolling (especially for mobile). Anchor links are straight forward to implement, but I wanted a smooth, scrolling effect. Using the function scrollIntoView() could work, but it’ll take additional testing that I, unfortunately, ran out of time for.

Overall, if you like gradients and want to see which peppers might kill you, take a look at Scoville.