my-portfolio/src/blog/css/blogPosts.css

/**** Individual Blog Posts *****/

.profile {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    max-width: 70%;
}

svg {
    width: 2em;
    fill: var(--primaryDefault);
    font-size: 2em;
}

footer {
    margin-top: 0;
}

section#individualPost {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
}

div.byLine {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 1em;
}

div.byLine h3:last-child {
    border-left: 2px solid var(--mutedBlack);
    padding-left: 1em;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

div.byLine h3:last-child a {
    padding: 0 1em;
}

div.cover {
    width: 100%;
    height: 20rem;
    background-position: center;
    background-size: cover;
    border-radius: 10px;
    box-shadow: 0 4px 2px 0 var(--mutedBlack);
}

div.mainContent {
    border-right: 5px solid var(--mutedGrey);
    min-height: 100%;
    width: 85%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
}

article {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0 2em;
}

article a {
    padding: 0 1em;
}

article a::before,
article a::after {
    visibility: hidden;
    position: absolute;
    margin-top: 1px;
}

article a::before {
    content: ' <';
    margin-left: -0.5em;
}

article a::after {
    content: '>';
}

article a:hover::before,
article a:hover::after {
    visibility: visible;
}

article h1 {
    margin-bottom: 0.5em;
}

article h3 {
    margin-top: 0;
}

aside.sideContent {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    width: 15%;
    align-self: flex-start;
}

div.authorInfo {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(4, auto);
    padding-left: 1em;
    padding-top: 0.5em;
    border-bottom: 5px solid var(--mutedGrey);
    width: 100%;
}

div.authorInfo .picture {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    grid-row: span 3;
}

div.authorInfo h3 {
    grid-column: span 2;
}

div.otherPosts, div.newsletter, div.feeds {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0 1em 1em;
    border-bottom: 5px solid var(--mutedGrey);
    width: 100%;
}

div.otherPosts a, div.feeds a {
    padding: 0.5em 1em;
}

div.newsletter form input[type="submit"] {
    margin-top: 1em;
    padding: 0.5em 1em;
}

div.feeds .icons {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    gap: 0.5em;
    flex-wrap: wrap-reverse;
}

div.feeds h2 {
    margin-bottom: 0;
}

div.feeds i.fa-solid.fa-rss {
    font-size: 2em;
}

div.feeds img.atom, div.feeds img.json {
    width: 2em;
}

div.categories {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0 1em 1em;
    width: 100%;
}

.image img, .image_resized img {
    max-width: 100%;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 2px 0 var(--mutedBlack);
}

.image {
    justify-self: center;
    align-self: center;
}

.image-style-side {
    justify-self: flex-end;
    align-self: flex-end;
}

section.comments {
    padding: 0 2em 2em;
}