.blogpost
{
    display: flex;
    flex-direction: row;
    align-items: center;

    width: 100%;
    height: fit-content;
}

.blogpostTitle
{
    flex: 1 0 auto;
}

/* simple post */

.simplePost a
{
    display: grid;
    grid-template-columns: auto max-content;
    grid-template-areas: "title date";
    align-items: end;

    color: #000000;
    text-decoration: none;
    font-weight: normal;
}

.simplePost a:hover
{
    color: #ffffff;
    background-color: #9460a9;
}

.simplePost .blogpostTitle
{
    grid-area: title;

	position: relative;

	overflow: hidden;
}

.simplePost .blogpostDate
{
    grid-area: date;
}

.simplePost .blogpostTitle::after
{
	content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
	". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
	". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";

    position: absolute;
}

.simplePost .blogpostTitle::before
{
    content: "> ";
}