src/main/org/freemarker/docgen/less/lib/layout/content.less

.main-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  flex: 1 1 auto;
  display: flex;
  padding-top: 18px;
  padding-bottom: 18px;

  @media (min-width: @screen-sm-min) {
    padding-top: 30px;
    padding-bottom: 48px;
  }

  // when js is disabled
  &.no-toc {
    display: block;
  }

  .col-left {
    flex: 0 0 160px;
    max-width: 160px; // set max-width to prevent flicker

    margin-right: @gutter-width / 4 * 3; // 18px

    // hide for really small screens
    display: none;

    @media (min-width: @screen-xs-min) {
      display: block;
    }

    @media (min-width: @screen-sm-min) {
      flex-basis: 210px;
      max-width: 210px;
      margin-right: @gutter-width * 2;

      &.expanded {
        max-width: 100%;
      }
    }
  }

  .col-right {
    flex: 1;
    position: relative; // so we can position bottom pager

  }
}

.page-content {

  @media (min-width: @screen-sm-min) {
    padding-bottom: 42px; // to accomodate bottom pager when it becomes positioned absolutely
  }

  a {
    word-break: break-word; // keep long urls from causing page scrolling
  }

  .page-title {

    border-bottom: 1px solid @border-gray;

    @border-spacing: 12px;
    padding-bottom: @border-spacing;
    margin-bottom: @border-spacing;
    
    /* The Google results already adds some borders and is mostly empty at the top */
    .page-type-docgen-search-results & {
      border: none;
      padding-bottom: 0;
      margin-bottom: 0;
    }

    @media (min-width: @screen-sm-min) {
      display: flex;
    }

    @media (min-width: @screen-sm-min) {
      padding-bottom: @border-spacing * 2;
      margin-bottom: @border-spacing * 2;

      display: flex;
      justify-content: space-between;
      align-items: baseline;
      flex-wrap: wrap;
    }

    .title-wrapper {
      flex: 1;
    }

    h1 {
      margin: 0;
      font-size: 24px;

      @media (min-width: @screen-sm-min) {
        font-size: 30px;
      }
    }

    .subtitle {
      display: block;
      font-size: 14px;

      @media (min-width: @screen-sm-min) {
        font-size: 18px;
      }

      @media (min-width: @screen-md-min) {
        font-size: 24px;
      }

    }
  }

  .content-header {
    &::before {
      .icon();
      .icon-paragraph();
      margin-left: -18px;
      margin-top: 2px;
      width: 18px;

      font-weight: normal;
      font-size: 18px;
      color: #C82222;

      float: left;
      visibility: hidden;

      //transform: rotate(45deg);

      @media (min-width: @screen-sm-min) {
        margin-left: -24px;
      }
    }
  }

  .active {
    &::before {
      animation: header-pulse .3s 3 steps(2, end);
    }
  }
}


@keyframes header-pulse {
  0%   { visibility: hidden; }
  100% { visibility: visible; }
}