kestrelsnest-blog/assets/css/_extra.scss

.app-header-social {
  flex-wrap: wrap;
  a:not(:last-child) {
    margin-right: 0.2em;
  }
}

// Fix sidebar scrolling for smaller viewports
@media (min-width: 940px) {
  .app-header {
    height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: unset !important;
  }
}

// Import callout styles
@import 'callouts';

// Series indicator on list pages
.series-indicator {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  margin-left: 0.5rem;
  background: var(--series-bg, #e3f2fd);
  color: var(--series-text, #1976d2);
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 500;
  vertical-align: middle;

  svg {
    width: 14px;
    height: 14px;
    margin-right: 0.25rem;
    vertical-align: -2px;
  }
}

@media (prefers-color-scheme: dark) {
  .series-indicator {
    background: rgba(33, 150, 243, 0.15);
    color: rgba(144, 202, 249, 1);
  }
}

// Series navigation styling
.series-box {
  background: var(--card-bg, #f5f5f5);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 8px;
  padding: 1.5rem;
  margin: 2rem 0;

  .series-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 1.1rem;

    .series-part {
      color: var(--secondary-text, #666);
      font-size: 0.9rem;
    }
  }

  .series-nav {
    margin: 1rem 0;

    .series-list {
      list-style: none;
      padding-left: 0;
      margin: 0;

      li {
        padding: 0.5rem 0;
        border-left: 3px solid transparent;
        padding-left: 1rem;

        &.current {
          border-left-color: var(--primary-color, #007bff);
          background: var(--highlight-bg, rgba(0, 123, 255, 0.05));
          margin-left: -1rem;
          padding-left: calc(1rem + 1rem);
          margin-right: -1rem;
          padding-right: 1rem;
        }

        a {
          color: var(--link-color, #007bff);
          text-decoration: none;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }

  .series-navigation {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color, #e0e0e0);

    .series-nav-links {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;

      .series-prev,
      .series-next {
        flex: 1;
        padding: 0.5rem 1rem;
        border-radius: 4px;
        text-decoration: none;
        transition: background-color 0.2s;
      }

      .series-prev {
        text-align: left;
        background: var(--button-bg, #f0f0f0);
        color: var(--link-color, #007bff);

        &:hover:not(.disabled) {
          background: var(--button-hover-bg, #e0e0e0);
        }

        &.disabled {
          color: var(--disabled-text, #999);
          cursor: not-allowed;
        }
      }

      .series-next {
        text-align: right;
        background: var(--button-bg, #f0f0f0);
        color: var(--link-color, #007bff);

        &:hover:not(.disabled) {
          background: var(--button-hover-bg, #e0e0e0);
        }

        &.disabled {
          color: var(--disabled-text, #999);
          cursor: not-allowed;
        }
      }
    }
  }
}

// Image and figure styling
figure {
  margin: 2rem 0;

  img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  figcaption {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--secondary-text, #666);
    text-align: center;
    font-style: italic;
  }
}

// Also style standalone images in posts
.post-content img:not(figure img) {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin: 2rem auto;
}

@media (prefers-color-scheme: dark) {
  figure {
    img {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }

    figcaption {
      color: rgba(255, 255, 255, 0.7);
    }
  }

  .post-content img:not(figure img) {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
}

// Dark mode support
@media (prefers-color-scheme: dark) {
  .series-box {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);

    .series-header .series-part {
      color: rgba(255, 255, 255, 0.7);
    }

    .series-nav .series-list li.current {
      background: rgba(255, 255, 255, 0.05);
    }

    .series-navigation {
      border-top-color: rgba(255, 255, 255, 0.1);

      .series-nav-links {
        .series-prev,
        .series-next {
          background: rgba(255, 255, 255, 0.05);

          &:hover:not(.disabled) {
            background: rgba(255, 255, 255, 0.1);
          }

          &.disabled {
            color: rgba(255, 255, 255, 0.3);
          }
        }
      }
    }
  }
}