Blog/layouts/projects/single.html

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

{{ define "main" }}
  <article>
    <header>
      <h1>
        {{ .Title }}
      </h1>
    </header>
    
    <style>
      .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>

    {{ .Content }}
  </article>
{{ end }}