Blog/layouts/projects/single.html

{{ define "title"}}
{{ .Title }} | {{ .Site.Params.author.name }}
{{ end }}

{{ define "main" }}
<article class="content-padding">
    {{ .Content }}
</article>

<style>
.content-padding {
    padding-top: 2rem;
}

.project-container {
    margin-bottom: 4rem;
}
.project-layout {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}
.project-image {
    flex: 0 0 150px;
}
.project-image img {
    width: 100%;
    height: auto;
}
.project-content {
    flex: 1;
    text-align: left;
}
.project-content h1,
.project-content h2,
.project-content h3 {
    margin-top: 0;
}
@media (max-width: 768px) {
    .project-layout {
        flex-direction: column;
    }
    .project-content {
        width: 100%;
    }
}
</style>
{{ end }}