RPSchtuff Page Theme - Timeline

/* TIMELINE CODE - by RPSchtuff */

/* INDIVIDUAL ENTRY */
.tl {
    width:100%;
    height:auto;
    display:flex;
}

/* DATE */
.tl .date {
    width:25%;
    height:100%;
    text-align:right;
    margin-right:10px;
    /* styling for the date label below - add/remove/alter to suit your needs */
	color: #000;
    font-size:1.2em;
    text-transform:uppercase;
    font-weight:bold;
}

/* CONTENT */
.tl .content {
    width:calc(75% - 20px);
    padding-left:10px;
    border-left:1px solid #eeeeee; /* color of line */
    padding-bottom:20px; /* size of gap between entries */
}

/* DOT ON LINE */
.tl .content:before {
    content:"";
    position:absolute;
    margin-left:-14px;
    border-radius:100%;
    width:5px;
    height:5px;
    margin-top:4px; /* adjust as needed to align vertically on line */
    background-color: #ffffff; /* color of dot */
    border:1px solid #eeeeee; /* color of dot outline */
}

/* this removes the gap from under your final entry */
.tl:last-of-type .content {
    padding-bottom:0;
}