CSS assistance with custom archive page

Themes
1

My archive page here: https://quillofphil.com/archive

Is rendering with a huge amount of space between the top and my actual archive content. I have pulled some code from a few different places to create my archive section. Therefore, I really don’t know what I am doing. I know I am referencing the default template in my archive page, so there are probably some margin settings or other things from CSS there outside of my page.

I am someone might be able to give me some hints as to what direction to go. Just trying to get a really simple listing of my archived posts within the typical pages type view of Ghost. The pagination is working. It just looks like crap.

{{!< default}}

<main class="gh-main gh-outer">
    <div class="gh-inner">
            <section class="gh-content gh-canvas">

{{! Archive Page }}
<div class='wrapper container'>
  <h1 class='archive__title'>{{t 'Archive'}}</h1>
  <div class='archive__excerpt'>
    {{#get 'posts' limit="all"}}
      {{t
        'Browse the complete archive of {total} posts.'
        total=pagination.total
      }}
    {{/get}}
  </div>

  <div class='content'>
    <div class='archive js-post-feed'>

{{#foreach posts visibility="all"}}
  <article class="post post-date-{{date format="M"}}">
    <div class="post-label">{{date format="MMMM YYYY"}}</div>
    <a class="post-link" href="{{url}}">
      <h2 class="post-title">{{title}}</h2>
    </a>
  </article>
{{/foreach}}

    </div>

    {{! Pagination }}
    {{pagination}}
  </div>

</div>

<style>

.post-date-1 + .post-date-1 .post-label,
.post-date-2 + .post-date-2 .post-label,
.post-date-3 + .post-date-3 .post-label,
.post-date-4 + .post-date-4 .post-label,
.post-date-5 + .post-date-5 .post-label,
.post-date-6 + .post-date-6 .post-label,
.post-date-7 + .post-date-7 .post-label,
.post-date-8 + .post-date-8 .post-label,
.post-date-9 + .post-date-9 .post-label,
.post-date-10 + .post-date-10 .post-label,
.post-date-11 + .post-date-11 .post-label,
.post-date-12 + .post-date-12 .post-label {
  display: none;
}

.post {
    margin: 0 0 24px;
    font-size: smaller;
}

.post:first-child .post-label {
    margin-top: 0;
}

.post-label {
    color: var(--color-midgrey);
    margin: 24px 0 16px;
}

.post-link {
    text-decoration: none !important;
    color: var(--color-darkgrey) !important;
}

.post-link:hover {
    color: var(--ghost-accent-color) !important;
}

.post-title {
    margin: 0;
    font-size: smaller;
    line-height: 1;
}

</style>

</section>
</div>
</main>
2

Try this:

.gh-content { margin-top: 0; }
1 Like
3

Thank you. That did move my content upward. There is still a significant gap. I assume there are some other margin issues with elements at the top of the page. This edit moved the content up about a half inch on my monitor.

4

I think the gap now is consisted across the pages. You may change the .gh-main { padding-top: XXX; } which I believe controls the current top space.

1 Like