ourbigbook.common.scss

// Shared across local ourbigbook and web.
//
// Also distributed with the NPM package so that users can harmonize
// their design with Ourbigbook defaults.
//
// This file is intended to be used with @import. This means that
// it contains only variables and mixins, and no actual style definitions.

// Light
//$a-color: #0000EE;
//$a-color-visited: rgb(85, 26, 139);
//$background-color: white;
//$code-background-color: #eeeeee;
//$color: black;
//$target-background-color: #FFFFCC;

// Dark.
$a-color: #88CCFF;
$a-color-visited: #FFAAFF;
$background-color: black;
$code-background-color: #333333;
$color: #00FF00;
$color-discreet: #00BB00;
$target-background-color: #442222;
$toplevel-horizontal-padding-left: 20px;
$toplevel-horizontal-padding-right: 15px;

$font-family: Arial, Helvetica, sans-serif;
$header-font-size: 24px;
$h1-font-size: $header-font-size * 1.5;
$font-size: 16px;
$max-mobile-width: 635px;

@mixin body {
  background-color: $background-color;
  color: $color;
  font-family: $font-family;
  font-size: $font-size;
  a {
    color: $a-color;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
}

@mixin h-common {
  display: inline-block;
  font-size: $header-font-size;
  font-weight: bold;
  width: 100%;
  box-sizing: border-box;
  h1, h2, h3, h4, h5, h6 {
    > a:first-child {
      color: $color;
      &:visited {
        color: $color;
      }
    }
    display: inline;
    margin: 0;
    // To make `word-wrap: break-word;` work, otherwise it does not take effect.
    overflow-wrap: break-word;
  }
}

@mixin h1-only {
  font-size: $h1-font-size;
}

@mixin pre {
  background-color: $code-background-color;
  margin: 8px 0;
  padding: 8px 8px;
  overflow-x: auto;
}