A simple log to track notes, decisions and questions for Front-End Challenges Club challenges.
Challenge Info 🔗
Sketch Files 🔗
Challenge Submission 🔗
Challenge Repository 🔗
Challenge Solution 🔗
I was only able to find one example to use as a reference. It uses a <div> container with 0 height and a <h2> set to inline with negative top, padding for the space between text and line, a lot of line-height plus the same background color as the page. The end result is the <h2> essentially sitting a top the collapsed <div> with its padding and background color creating what looks like its own container with lines on either side.
I considered using that approach but thought a no-wrap flex layout seemed more contemporary. I went the opposite of contemporary for the keylines, using the modest and old school <hr>. In order to ensure it worked with older browsers I set the hex color directly on the <hr> instead of using the variable. I tested in IE11 and it worked.
hr {
border: 0;
height: 2px;
background-color: #e9b44c;
}