Title

Author

Slug

Content

</div>

<div class="submit">
      <button class="create-button">Publish</button>
    </div>
  </form>
</section>

{#if blogPost}
  <section class="preview">
    <h2>Preview</h2>
    <article>
      {@html blogPost.html}
    </article>
  </section>
{/if}

.new-blog-post {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: min-content min-content min-content 1fr;
    gap: var(--gap);
    place-items: center;
  }

.field {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
  }

.field__label {
    font-family: var(--font-family-title);
    font-size: 1.15rem;
    color: var(--grey-600);
  }

.create-button {
    background-color: var(--brand-orange);
    color: var(--white);
    border: none;
    border-radius: 4px;
    padding: var(--padding) var(--padding-md);
    font-family: var(--font-family-title);
    font-size: 1.15rem;
    cursor: pointer;
  }

.preview {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: min-content 1fr;
    gap: var(--gap);
    place-items: center;
  }

.preview article {
    width: 100%;
    max-width: 65ch;
  }
</style>

New Blog Post