docbrown/app/assets/stylesheets/views/article.scss

@import '../config/import';

:root {
  --article-rythm: var(--su-2);
  --article-padding-x: var(--su-3);
  --article-padding-y: var(--su-3);
  --article-font-size: var(--fs-l);

  @media (min-width: $breakpoint-s) {
    --article-padding-x: var(--su-5);
    --article-padding-y: var(--su-5);
  }

  @media (min-width: $breakpoint-m) {
    --article-rythm: var(--su-4);
    --article-padding-x: var(--su-8);
    --article-padding-y: var(--su-7);
    --article-font-size: var(--fs-xl);
  }

  @media (min-width: $breakpoint-xl) {
    --article-padding-x: var(--su-9);
  }
}

.article-wrapper {
  // Hack preventing content exceeding its container - it works for scenarios where we have
  // `pre` tag having wide (overflowing) text. And the container itself is part of a layout
  // built using CSS `grid`. Without this, the grid layout wouldn't stick to its defined
  // widths...
  min-width: 0;
}

.crayons-article {
  &__cover {
    position: relative;
    width: 100%;
    padding-top: 42%;

    &__image {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: var(--radius) var(--radius) 0 0;
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }

  &__video {
    background: black;

    &__player {
      &:empty {
        width: 100%;
        padding-top: 56.25%;
      }
    }
  }

  &__header {
    margin-bottom: var(--article-padding-y);

    &__meta {
      padding: var(--article-padding-y) var(--article-padding-x) 0
        var(--article-padding-x);
    }
  }

  &__subheader {
    font-size: var(--fs-base);
    color: var(--base-60);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  &__body {
    padding: 0 var(--article-padding-x) var(--article-padding-y)
      var(--article-padding-x);
    overflow-wrap: break-word;
  }
}
.text-styles {
  font-size: var(--article-font-size);

  a {
    code {
      color: var(--link-color);
    }

    &.anchor {
      padding-top: 0;
      margin-top: 0;
      top: -50px;
      display: block;
      visibility: hidden;
      position: relative;
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--ff-default);
    margin: var(--article-rythm) 0;
    margin-top: calc(var(--article-rythm) * 2);
    padding: 0;
  }

  h1 {
    font-size: 1.85em;
    line-height: 1.25em;
    font-weight: 400;
  }

  h2 {
    font-size: 1.7em;
    font-weight: 400;
    line-height: 1.25em;
    margin-bottom: 0.5em;
  }

  h3 {
    font-size: 1.32em;
    font-weight: 400;
  }

  hr {
    width: 25%;
    opacity: 0.1;
    border: 1px solid var(--body-color);
    margin: 1.3em auto 1.5em;
  }

  p {
    margin: var(--article-rythm) 0;
  }

  ul,
  ol {
    padding-left: var(--su-6);
    margin: var(--article-rythm) 0;
    br {
      line-height: 0;
      margin: 0;
      padding: 0;
    }
  }

  ul {
    list-style-type: disc;

    p {
      margin: 0;
      padding: 0;
    }

    ul {
      margin: 0 0.7em 0 1.9em;
      list-style-type: square;

      ul {
        list-style-type: circle;
      }
    }
  }

  li {
    margin: var(--su-2) 0;
  }

  figure {
    margin: 0;
  }

  figcaption {
    font-style: italic;
    text-align: center;
    font-size: 0.8em;
    line-height: 1.4em;
    color: var(--body-color);
    opacity: 0.75;
    display: block;
  }

  p + figcaption {
    margin-top: -0.8em;
  }

  blockquote {
    border-left: 4px solid var(--base-50);
    padding: 0 var(--su-4);
    margin: var(--article-rythm) 0;

    p:first-child {
      margin: var(--su-2) 0;
    }

    &.twitter-tweet {
      font-family: var(--ff-default);
      background: var(--body-color-inverted);
      max-width: 456px;
      border: 1px solid #e9eef2;
      font-size: 0.75em;
      line-height: 1.35em;
      border-radius: 5px;
      margin: 1.6em auto;
      padding: 60px 10px 18px;
      color: white;
      min-height: 60px;
      padding: 33px 15px 8px;

      a {
        color: white;
      }

      @media screen and (min-width: $breakpoint-s) {
        padding: 60px 22px 18px;
        min-height: 105px;
      }
    }
  }

  kbd {
    display: inline-block;
    padding: 3px 5px;
    font-size: 11px;
    line-height: 10px;
    color: #444d56;
    vertical-align: middle;
    background-color: #fafbfc;
    border: solid 1px #c6cbd1;
    border-bottom-color: #959da5;
    border-radius: 3px;
    box-shadow: inset 0 -1px 0 #959da5;
  }

  pre:not(.highlight),
  div.highlight {
    margin: var(--article-rythm) 0;
  }

  img {
    height: auto;
    position: relative;
    display: block;
    margin: auto;
    max-width: 100%;
    max-height: calc(50vh + 180px);
    border-radius: var(--radius);
  }

  a.article-body-image-wrapper {
    cursor: zoom-in;
  }

  iframe {
    width: 100%;
    border: 0;
    margin: var(--article-rythm) 0;
  }

  .fluidvids {
    margin: var(--article-rythm) 0;

    iframe {
      margin: 0;
    }
  }

  .table-wrapper-paragraph {
    width: 100%;
    margin-left: 0%;
    overflow-x: auto;
  }

  table {
    border-collapse: collapse;
    font-size: 0.78em;
    margin: 0.8em auto 1.2em;
    table-layout: fixed;

    th {
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 5px 1vw;
      background: var(--body-bg);
      text-align: left;
    }

    td {
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 5px 1vw;
    }
  }

  .twitter-tweet {
    margin: auto;
  }
}

.text-padding {
  padding: var(--article-padding-y) var(--article-padding-x);
}

.crayons-article-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--su-2);
  background: var(--body-bg);
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.1);
  z-index: 100;

  @media (min-width: $breakpoint-m) {
    padding: 0;
    padding-bottom: 0;
    display: grid;
    gap: var(--su-6);
    position: sticky;
    box-shadow: none;
    justify-content: stretch;
    top: calc(var(--header-height) + var(--layout-padding) + 6vh);
  }

  &__inner {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom);

    @media (min-width: $breakpoint-m) {
      display: grid;
      gap: var(--su-6);
      justify-content: stretch;
    }
  }
}

.crayons-reaction {
  --reaction-color: var(--button-ghost-color);
  --reaction-border: inset 0 0 0 0 transparent;
  --reaction-bg: transparent;

  border: none;
  padding: 0;
  background: transparent;
  display: inline-flex;
  flex-direction: row;
  align-items: center;

  @media (min-width: $breakpoint-m) {
    flex-direction: column;
  }

  &__icon {
    padding: var(--su-2);
    box-shadow: var(--reaction-border);
    background: var(--reaction-bg);
    color: var(--reaction-color);
    border-radius: 50%;
    transition: all var(--transition-props);

    &--active {
      display: none;
    }
  }

  &__count {
    color: var(--base-70);
    font-size: var(--fs-s);
    display: block;
    min-width: var(--su-7);

    @media (min-width: $breakpoint-m) {
      min-width: auto;
    }
  }

  &.user-activated {
    --reaction-border: inset 0 0 0 2px var(--reaction-color);
    .crayons-reaction__icon--inactive {
      display: none;
    }
    .crayons-reaction__icon--active {
      display: block;
    }

    .crayons-reaction__count {
      color: var(--reaction-color);
    }
  }

  &--like {
    &:hover,
    &.user-activated {
      --reaction-color: var(--reaction-like-color);
      --reaction-bg: var(--reaction-like-bg);
    }
  }

  &--unicorn {
    &:hover,
    &.user-activated {
      --reaction-color: var(--reaction-custom-color);
      --reaction-bg: var(--reaction-custom-bg);
    }
  }

  &--readinglist {
    &:hover,
    &.user-activated {
      --reaction-color: var(--reaction-save-color);
      --reaction-bg: var(--reaction-save-bg);
    }
  }
}

.user-animated {
  .crayons-reaction__icon {
    position: relative;
    &:before {
      content: '';
      position: absolute;
      pointer-events: none;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      border-radius: 50%;
      box-shadow: 0 0 0 4px currentColor;
      opacity: 0;
      transform: scale(2);
      animation-name: ringPop;
      animation-duration: 0.25s;
    }

    &:after {
      content: '';
      position: absolute;
      pointer-events: none;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      border-radius: 50%;
      box-shadow: 0 0 0 0 transparent;
      opacity: 0;
      transform: scale(1);
      animation-name: ringPop2;
      animation-duration: 0.75s;
    }

    animation-name: iconPop;
    animation-duration: 0.25s;
  }

  @keyframes iconPop {
    0% {
      transform: scale(0.65);
    }

    50% {
      transform: scale(1.1);
    }

    100% {
      transform: scale(1);
    }
  }

  @keyframes ringPop {
    0% {
      transform: scale(2);
      box-shadow: 0 0 0 4px currentColor;
      opacity: 0;
    }

    100% {
      box-shadow: 0 0 0 1px currentColor;
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes ringPop2 {
    0% {
      box-shadow: 0 0 0 currentColor;
      transform: scale(1);
      opacity: 0.6;
    }

    100% {
      box-shadow: 0 0 1px 1px transparent;
      transform: scale(4);
      opacity: 0;
    }
  }
}

.crayons-article-sticky {
  position: sticky;
  top: calc(var(--header-height) + var(--layout-padding));
  .static-navbar-config & {
    top: var(--layout-padding);
  }
}

.user-metadata-details {
  li + li {
    margin-top: var(--su-3);
  }
  .key {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    color: var(--card-color-tertiary);
  }
}

.crayons-article {
  .article-collection-wrapper {
    font-family: var(--ff-default);
    font-size: 16px;
    border-radius: var(--radius);
    border: 1px solid var(--base-30);
    width: 92%;
    max-width: 500px;
    margin: calc(1.1vw + 5px) auto 1vw;
    p {
      margin: 0px auto;
      padding: calc(0.1vw + 9px);
      font-weight: bold;
      font-size: 0.96em;
    }

    .article-collection {
      user-select: none;
      font-size: 16px;
      overflow: hidden;
      position: relative;
      z-index: 8;
      a {
        color: var(--body-color);
        padding: calc(0.1vw + 9px);
        display: block;
        position: relative;
        z-index: 4;
        border-top: 1px solid var(--base-30);
        font-size: 0.88em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        &:last-child {
          border-bottom-left-radius: 5px;
          border-bottom-right-radius: 5px;
        }

        &.current-article {
          background: var(--accent-brand-lighter);
          color: var(--body-color-inverted);
        }

        &.coming-soon {
          pointer-events: none;
          color: var(--base-80);
        }
        &.collection-link-hidden {
          display: none;
        }
      }
    }

    &.article-collection-wrapper-bottom {
      margin-bottom: 3vw;

      p {
        margin-top: 5px;
      }
    }
  }
}