hugo-theme-more-contentful/assets/scss/layout.scss

[aria-label="Site header"] {
  @include header-link-hover-style;
  position: relative;

  a {
    color: var(--base06);
  }
}

[aria-label="Site footer"] {
  > * {
    margin-top: 1em;
    margin-bottom: 0;
  }
}

.icon {
  height: 1rem;
  width: 1rem;
  fill: currentColor;
}

.list {
  display: inline-flex;
  flex-flow: row wrap;
  list-style: none;
  margin: 0;
  padding: 0;

  & > *:not(:last-child) {
    border-right: 1px solid var(--base02);
    margin-right: 0.5em;
    padding-right: 0.5em;
  }
}

.site__title {
  --size: 2rem;
  display: inline-block;
  font-size: var(--size);
  margin-bottom: unset;
  margin-right: 0.5rem;
}

.site__links {
  @include header-link-hover-style;
}

.site__languages {
  margin: 0 0.5em;
}

.site__socials {
  @include header-link-hover-style;
  font-style: unset;
}

.site__social-icon {
  svg {
    --size: 1.25em;
    height: var(--size);
    width: var(--size);
  }
}

.site__theme-btn {
  padding: 0.5em;
  position: absolute;
  top: 0;
  right: 0;

  &:hover {
    color: unset;
    & .site__theme-dropdown {
      display: unset;
    }
  }
}

.site__theme-dropdown {
  background: var(--background);
  border: var(--border-style);
  display: none;
  padding: 0.5em;
  position: absolute;
  right: 0;
  top: 1.5em;
  width: max-content;
}

.site__theme-dropdown-list {
  display: flex;
  flex-flow: column;
}

.site__theme-item {
  padding: 0 0.5em;

  &[data-theme-light] { order: -1; }
  &[data-theme-dark] { order: -1; }
  &[data-theme-system] { order: -2; }

  .site__theme-dropdown &:hover {
    background: var(--accent-color);
    color: var(--background);
    cursor: pointer;
  }

  &--selected {
    background: var(--base05);
    color: var(--background);
  };
}

.pagination {
  display: flex;
  font-size: 1rem;
  list-style: none;
  justify-content: center;
  margin: 1.2rem 0;
  padding: 0.8rem;

  & > * {
    margin: 0 0.25em;
    text-decoration: none;
  }
}

.page-link {
  background: var(--base01);
  color: var(--accent-color);
  text-decoration: none;
  padding: 0.5em;

  &:hover {
    background: var(--base0B);
    color: var(--background);
    text-decoration: none;
  }
}

.page-link--active {
  @extend .page-link;
  background: var(--foreground);
  color: var(--background);
  font-weight: bolder;
  padding: 0.5em;
}

.post {
  background: var(--base01);
  margin-top: 1rem;
  padding: 0.5em;

  h1 {
    margin: 0 auto;
  }

  &--single .post__meta {
    margin: 0;
  }
}

.post__meta {
  color: var(--foreground);
  font-size: 0.9em;
  margin-top: 0.5em;

  & > * {
    display: inline-flex;
    align-items: center;
  }

  .post--single & {
    background: var(--base01);
    color: var(--foreground);
    font-size: 0.9em;
    padding: 0 0.5em;
  }
}

.post__meta--single {
  background: var(--base01);
  color: var(--foreground);
  font-size: 0.9em;
  margin: 0.5em auto;
  padding: 0.5em 1em;

  & > * {
    margin: 0.5em auto;
  }
}

.posts--list {
  list-style: none;
  padding-left: 1em;
  margin: 1em auto;
}

.post--list {
  display: flex;

  & > * {
    margin-right: 0.5em;
  }
}

.post--list__date {
  white-space: nowrap;
}

.taxonomy__header {
  display: flex;
  align-items: center;
  justify-content: start;

  & > * {
    margin: 0;
    margin-right: 0.25em;
  }
}

#TableOfContents {
  background: var(--base01);
  font-size: 0.9em;
  padding: 1em;

  // The styling is solely for consistency sake throughout the site.
  > ul { padding-left: 1rem; }

  ul {
    list-style: disc;
    padding-left: 1em;
  }
}