I'm proud of getting the font percentage decrease to work, while maintaining accessibility using rem's for font-size. Also, proud of using javascript to access the color variable from css and script hover color change effect.
// accessing the color variables from my css file
const style = getComputedStyle(document.body);
const yellow = style.getPropertyValue("--primary-color-yellow");
// creating mouseover effect
title.addEventListener("mouseover", function (e) {
this.style.color = yellow;
});
// now i need a mouseout event listener so its only active during my hover
title.addEventListener("mouseout", function (e) {
this.style.color = "";
});
What challenges did you encounter, and how did you overcome them?
Getting the font to work was the hardest part. I learned how to use clamp to achieve the desired effect.
What specific areas of your project would you like help with?h1 { font-size: clamp(1rem, 5.333333vw, 1.5rem); }
Any best practice advice is welcome!