njump/static/styles.scss

$color-base1: #ffffff;
$color-base2: #fafafa;
$color-base3: #f3f3f3;
$color-base4: #c9c9c9;
$color-base5: #9a9a9a;
$color-base6: #3d3d3d;
$color-base7: #373737;
$color-accent1: #e32a6d;
$color-accent2: #bc1150;

$themes: (
  default: (
    base1: $color-base1,
    base2: $color-base2,
    base3: $color-base3,
    base4: $color-base4,
    base5: $color-base5,
    base6: $color-base6,
    base7: $color-base7,
    accent1: $color-accent1,
    accent2: $color-accent2,
    bg-up: $color-base1,
    bg-down: $color-base2,
    boxed-title: $color-base7,
    boxed-bg-title: $color-base4,
    boxed-bg: $color-base3,
    over-bg: $color-base3,
    theme-toggle: $color-base3,
    hrefbg: lighten($color-accent1, 44%)
  ),
  dark: (
    base1: $color-base7,
    base2: $color-base6,
    base3: $color-base5,
    base4: darken($color-base4, 20%),
    base5: $color-base3,
    base6: $color-base2,
    base7: $color-base2,
    accent1: $color-accent1,
    accent2: $color-accent2,
    bg-up: darken($color-base6, 12%),
    bg-down: darken($color-base7, 12%),
    boxed-title: $color-base5,
    boxed-bg-title: darken($color-base6, 14%),
    boxed-bg: darken($color-base7, 14%),
    over-bg: darken($color-base7, 4%),
    theme-toggle: $color-base6,
    hrefbg: darken($color-accent1, 38%)
  )
);

$base1: 'base1';
$base2: 'base2';
$base3: 'base3';
$base4: 'base4';
$base5: 'base5';
$base6: 'base6';
$base7: 'base7';
$accent1: 'accent1';
$accent2: 'accent2';
$bg-up: 'bg-up';
$bg-down: 'bg-down';
$boxed-title: 'boxed-title';
$boxed-bg-title: 'boxed-bg-title';
$boxed-bg: 'boxed-bg';
$over-bg: 'over-bg';
$theme-toggle: 'theme-toggle';
$hrefbg: 'hrefbg';

$theme-map: null;
@mixin themed() {
  @each $theme, $map in $themes {
    .theme--#{$theme} & {
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), '#{$key}');
        $theme-map: map-merge(
          $theme-map,
          (
            $key: $value
          )
        ) !global;
      }
      @content;
      $theme-map: null !global;
    }
  }
}

@function t($key) {
  @return map-get($theme-map, $key);
}

.column_content {
  flex-grow: 0;
  flex-shrink: 0;
  word-wrap: break-word;

  a.button {
    display: inline-block;
    max-width: 100%;
    padding: 2px 8px;
    margin-top: 0.6em;
    margin-right: 0.2em;
    border-bottom: 0;
    border: 1px solid $color-base4;
    border-radius: 8px;
    &:hover {
      color: $color-base1;
      background-color: $color-accent1;
      border: 1px solid $color-accent1;
    }
  }
  blockquote {
    @include themed() {
      border-left: 0.5rem solid t($over-bg);
    }
    padding: 0.5rem 0 0.5rem 1rem;
    margin: 2rem 0;
    font-style: italic;
    &.mention {
      border-left: 0.5rem solid $color-accent1;
      padding: 0rem 0 0.5rem 1rem;
      div {
        @include themed() {
          padding: 0.5rem 0.5rem 0.5rem 1rem;
          margin: 0 0 1rem -1rem;
          background-color: t($over-bg);
        }
      }
    }
    p {
      margin: 0 0 0.5rem 0;
    }
  }
  cite {
    font-size: 0.8em;
  }
  strong {
    font-weight: 400;
  }
  ol,
  ul {
    margin: 0;
    padding: 0 0 0 1rem;
    li {
      margin-bottom: 0.5rem;
    }
  }
  sup {
    font-size: 0.6rem;
    vertical-align: baseline;
    position: relative;
    top: -0.8em;
    margin: 0 0.3rem 0 0.1rem;
  }
  hr {
    display: none;
  }
  .footnotes {
    padding-top: 1rem;
    margin-top: 2rem;
    @include themed() {
      border-top: 6px solid t($over-bg);
    }
    font-size: 0.9rem;
    line-height: 1.2rem;
  }
}

body.profile {
  .column_content {
    flex-basis: 50%;
    max-width: 50%;
    @media (max-width: 580px) {
      flex-basis: 100%;
      max-width: 100%;
      margin-right: 0;
    }
  }
}

body.note,
body.other {
  .column_content {
    flex-basis: 75%;
    max-width: 75%;
    @media (max-width: 580px) {
      flex-basis: 100%;
      max-width: 100%;
      margin-right: 0;
    }
    @media print {
      flex-basis: 100%;
      max-width: 100%;
    }
  }
}