%h2.m I’m working
  %p.m I'm currently working on a project and I'm in a hurry to find a solution to the problem I'm having. I want to skim the article and grab the solution and get on with what I'm doing.
    %li When I’m stuck, I want to find a quick solution, so I can get on with the work I’m doing.
    %li When I’m looking for a solution, I want to trust I can copy the code, so I can move on to the next task.
    %li When I’m using a new tool in Illustrator, I want to know how to do the particular thing I’m trying to do, so I can carry on.

  %h2.m I’m learning
  %p.m I've heard of this particular topic, I'd like to research and learn more about the topic. I'll search for tutorials on this topic.
    %li When I’m trying to improve my skills, I want to understand a topic fully, so I can recall it easier when I’m working.
    %li When I’m trying to improve my skills, I want to know why something is done this way, so I can form my own opinions.
View Compiled
$blue-light: #F7FBFB;
$blue: #0e465b;
$shadow: scale-color($blue, $lightness: 20%, $saturation: 100%);
$system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

body {
  margin: 0;
  padding: 32px;
  background-color: $blue-light;
  font-family: $system;
  color: $blue;
  line-height: 1.5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 32px; }

h2 {
  font-size: 21px;
  margin: 0 0 16px; }

p { 
  margin: 0 0 32px; }

p, li { 
  font-size: 14px; }

.persona {
  padding: 32px;
  background: white;
  border-radius: 6px;
    0 1px 2px rgba($shadow, .2),
    0 3px 6px rgba($shadow, .1); }

.jtbd {
  margin: 0 -32px;
  padding: 0;
  list-style: none;
  li {
    border-top: 1px solid rgba($blue, .1);
    padding: 12px 32px; } }
View Compiled
// embedded at stevemckinney.net

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.