blog/assets/scss/_predefined.scss

// Colors
$theme: hsl(172, 99%, 26%);
$text: hsl(204, 28%, 93%);
$light-grey: #292e32; // #494f5c;
$dark-grey: #3B3E48;
$highlight-grey: #7d828a;
$midnightblue: #2c3e50;
$typewriter: hsl(172, 100%, 36%);

// Fonts
$fonts: "IBM Plex Sans Light", "Segoe UI", Candara, sans-serif;
$code-fonts: "IBM Plex Mono",  Consolas, "Andale Mono WT", "Andale Mono", Menlo, Monaco, monospace;

@font-face {
  font-family: 'IBM Plex Sans Light';
  font-style: normal;
  font-weight: 400;
  src: local('IBM Plex Sans Light'),
    local('IBMPlexSans-Light'),
    url('/fonts/IBMPlexSans-Light.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans Light';
  font-style: italic;
  font-weight: 400;
  src: local('IBM Plex Sans Light Italic'),
    local('IBMPlexSans-LightItalic'),
    url('/fonts/IBMPlexSans-LightItalic.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans Light';
  font-style: normal;
  font-weight: 700;
  src: local('IBM Plex Sans Medm'),
    local('IBMPlexSans-Medm'),
    url('/fonts/IBMPlexSans-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans Light';
  font-style: italic;
  font-weight: 700;
  src: local('IBM Plex Sans Medm Italic'),
    local('IBMPlexSans-MedmItalic'),
    url('/fonts/IBMPlexSans-MediumItalic.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono Light';
  font-style: normal;
  font-weight: 400;
  src: local('IBM Plex Mono Light'),
    local('IBMPlexMono-Light'),
    url('/fonts/IBMPlexMono-Light.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono Light';
  font-style: italic;
  font-weight: 400;
  src: local('IBM Plex Mono Light Italic'),
    local('IBMPlexMono-LightItalic'),
    url('/fonts/IBMPlexMono-LightItalic.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono Light';
  font-style: normal;
  font-weight: 700;
  src: local('IBM Plex Mono Medm'),
    local('IBMPlexMono-Medm'),
    url('/fonts/IBMPlexMono-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono Light';
  font-style: italic;
  font-weight: 700;
  src: local('IBM Plex Mono Medm Italic'),
    local('IBMPlexMono-MedmItalic'),
    url('/fonts/IBMPlexMono-MediumItalic.woff2') format('woff2');
}

//Admonition
$admonition-background: (
  'note': rgba(68, 138, 255, 0.1),
  'info': rgba(0, 184, 212, 0.1),
  'tip': rgba(0, 191, 165, 0.1),
  'success': rgba(0, 200, 83, 0.1),
  'warning': rgba(255, 145, 0, 0.1),
  'failure': rgba(255, 82, 82, 0.1),
  'danger': rgba(255, 23, 68, 0.1),
  'bug': rgba(245, 0, 87, 0.1),
  ) !default;

$admonition-color: (
  'note': #448aff,
  'info': #00b8d4,
  'tip': #00bfa5,
  'success': #00c853,
  'warning': #ff9100,
  'failure': #ff5252,
  'danger': #ff1744,
  'bug': #f50057,
  ) !default;

// Mixins
@mixin dimmed {
  opacity: .6;
}

@mixin aTag {
  a {
    word-wrap: break-word;
    border: none;
    box-shadow: inset 0 -4px 0 $theme;
    transition-property: box-shadow;
    transition-duration: .1s;

    &:hover {
      box-shadow: inset 0 -1em 0 $theme;
    }
  }
}