// Set customizable Minima theme values

$on-palm: 765px;
$on-laptop: 800px;

$background-color: #fdfdfd;
$banner-color: #5E2417;
$text-color: #070707;
$blue: #0A51C2;
$plum: #9530A3;
$danger-color: $banner-color;
$brand-color: $blue;
$grey-color: #828282;
$grey-color-light: lighten($grey-color, 40%);
$grey-color-dark:  darken($grey-color, 25%);

$ui-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$google-fonts: "Gentium Plus", "Noto Serif TC", "Noto Serif JP", "Noto Serif Thai";
$base-font-family: $google-fonts, $ui-font-family;
$readable-font-family: $google-fonts, serif, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$readable-font-size: 17px;
$font-size-small: 16px;

$spacing-unit: 16px;
$topradii: 10px 10px 0px 0px; // used by tag mini-illustrations

// Custom components
%olcoverimg {
    object-fit: cover;
    background-color: lightgrey;
    min-width: 150px;
    height: 250px;
}

//////
// Imported from Minima v2.5.1
//   (Used by custom Primer components)
/////

// Use media queries like this:
// @include media-query($on-palm) {
//   .wrapper {
//     padding-right: math.div($spacing-unit, 2);
//     padding-left: math.div($spacing-unit, 2);
//   }
// }
@mixin media-query($device) {
  @media screen and (max-width: $device) {
    @content;
  }
}

