vitepress-theme-tui/src/styles/components/hero.css

A terminal UI theme for VitePress

@layer components {
  a.VPButton,
  a.VPButton.small,
  a.VPButton.medium,
  a.VPButton.large {
    border-radius: var(--vp-tui-hero-button-border-radius) !important;
  }

  .VPFeatures .items {
    row-gap: 16px !important;
  }

  .VPFeature {
    border-radius: var(--vp-tui-hero-feature-border-radius) !important;
    background-color: var(--vp-tui-hero-feature-bg) !important;
    border: var(--vp-tui-hero-feature-border-width) solid var(--vp-tui-hero-feature-border-color) !important;
  }

  .VPFeature .title {
    margin-top: -36px !important;
    background-color: var(--vp-tui-hero-feature-title-bg) !important;
    align-self: flex-start !important;
    justify-self: flex-start !important;
  }

  .VPFeature .title:before,
  .VPFeature .title:after {
    content: '' !important;
    width: 8px !important;
    height: 8px !important;
    display: inline-block !important;
    overflow: hidden !important;
  }

  .VPFeature .details {
    color: var(--vp-tui-hero-feature-fg) !important;
  }

  .VPFeature .icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: -50px !important;
    background-color: var(--vp-tui-hero-feature-title-bg) !important;
    align-self: flex-start !important;
    justify-self: flex-start !important;
  }

  .VPFeature .icon + .title {
    margin-left: 48px !important;
    margin-top: -54px !important;
  }

  .VPFeature .icon img {
    max-width: 100% !important;
    height: auto !important;
  }
}