ul#post-list-container {
  padding-left: calc(0.1em + 0.5vw);
  display: grid;
  grid-template-columns: auto auto;
  contain: content;
}

.post-entry {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  margin-bottom: calc(0.2em + 0.5vw);
  gap: calc(0.1em + 0.2vw);
}

.post-list-title {
  grid-column: 1 / 3;
  grid-row: 1;
  font-weight: bold;
  font-size: calc(1.2em + 0.4vw);
  margin-top: calc(0.04em + 0.2vw);
  margin-bottom: calc(0.04em + 0.2vw);
  margin-left: calc(0.04em + 0.2vw);
}

.post-list-title a {
  text-decoration: none;
}

.post-list-date {
  grid-column: 1;
  grid-row: 2;
  margin-left: calc(0.1em + 0.5vw);
  margin-right: calc(0.4em + 0.5vw);
  margin-top: auto;
  margin-bottom: calc(0.1em + 0.5vw);
  font-family: monospace;
  font-size: calc(0.7em + 0.4vw);
  color: hsl(307, 21%, 63%);
}

.post-list-date-year {
  color: hsl(307, 21%, 38%);
}

.post-list-date-month {
  color: hsl(307, 21%, 24%);
}

.post-list-date-day {
  color: hsl(307, 21%, 12%);
}

.post-list-date time span:nth-child(n+1):nth-child(-n+2):after {
  content: '-';
}

.post-list-tags {
  grid-column: 2;
  grid-row: 2;
  margin-left: 1ch;
  color: hsl(307, 21%, 24%);
  margin-top: auto;
  margin-bottom: calc(0.1em + 0.5vw);
}

.post-list-tags span:nth-child(n+2):before {
  content: ', ';
}

.post-list-tags p {
  font-size: calc(0.7em + 0.4vw);
  color: hsl(307, 21%, 24%);
  margin: auto;
  font-family: monospace;
}

@media only screen and (max-width: 1080px) {

  /* For mobile phones */
  ul#post-list-container {
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-width: 640px) {
  .post-list-tags {
    display: none;
  }

  .post-entry {
    display: flex;
    flex-direction: row;
  }

  .post-list-date {
    margin-bottom: auto;
    flex-shrink: 0;
  }
}

@media only screen and (max-width: 420px) {
  .post-list-date-year {
    display: none;
  }
}

/* Post archives */
ol#archives {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10ch, 1fr));
  text-align: left;
  list-style-type: none;
  padding: 0;
  font-size: 1.1rem;
  gap: 0.2em 0.1em;
  contain: content;
}
@media (hover: hover) {
	ol#archives a:hover {
	  text-shadow: 0 0 0.6em hsla(8, 18%, 56%, 0.4);
	}
}
ol#archives a {
  text-decoration: none;
}
li.archiveyear {
  margin: 0.1em auto 0.3em 20%;
}

li.archiveyear span {
  color: hsla(28, 80%, 7%, 0.65);
  font-size: 0.95rem;
}