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

header[aria-label="Site header"] {
  position: relative;

  a {
    color: var(--base06);

    &:hover {
      color: var(--accent-color);
      text-decoration: unset;
    }
  }
}

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

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

.site__list {
  display: inline-flex;
  align-items: baseline;
  flex-flow: row wrap;
  gap: 0.75em;
  justify-content: space-around;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site__title {
  font-size: 2rem;
}

.site__nav-header {
  display: flex;
  align-items: baseline;
  flex-flow: row wrap;
  gap: 0.5em;
}

.site__languages {
  margin: 0 0.5em;
}

.site__socials {
  display: flex;
  font-style: unset;
  gap: 1em;
}

.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;

  [dir="rtl"] & {
    right: unset;
    left: 0;
  }

  &:hover {
    color: unset !important;
    & .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;

  [dir="rtl"] & {
    right: unset;
    left: 0;
  }
}

.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(--selection-color);
    cursor: pointer;
  }

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

    &:hover { color: var(--base05); }
  };
}

.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;
  }
}

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

  &-icon-label {
    gap: 0.25em;
    display: inline-flex;
    align-items: normal;
  }

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

.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;

  > ul { margin-bottom: unset; }

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