67 lines
1.7 KiB
SCSS
67 lines
1.7 KiB
SCSS
// Used in layout
|
|
$padding-1: 1px !default;
|
|
$padding-4: 0.25rem !default;
|
|
$padding-8: 0.5rem !default;
|
|
$padding-16: 1rem !default;
|
|
|
|
$font-size-base: 18px !default;
|
|
$font-size-12: 0.75rem !default;
|
|
$font-size-14: 0.875rem !default;
|
|
$font-size-16: 1rem !default;
|
|
|
|
$border-radius: $padding-4 !default;
|
|
|
|
$body-font-weight: normal !default;
|
|
|
|
$body-min-width: 20rem !default;
|
|
$container-max-width: 80rem !default;
|
|
|
|
$header-height: 3.5rem !default;
|
|
$menu-width: 16rem !default;
|
|
$toc-width: 16rem !default;
|
|
|
|
$mobile-breakpoint: $menu-width + $body-min-width * 1.2 + $toc-width !default;
|
|
|
|
$hint-colors: (
|
|
info: #6bf,
|
|
warning: #fd6,
|
|
danger: #f66,
|
|
) !default;
|
|
|
|
// Themes
|
|
@mixin theme-light {
|
|
--gray-100: #EDE6DB; /* Bone White */
|
|
--gray-200: #C1A550; /* Pale Gold */
|
|
--gray-500: #494848; /* Dark Slate */
|
|
|
|
--color-link: #C1A550; /* Pale Gold */
|
|
--color-visited-link: #A2A2A2; /* Muted Silver */
|
|
|
|
--body-background: #F8F9FA; /* Slightly lighter white */
|
|
--body-font-color: #2A2A2A; /* Charcoal Black */
|
|
|
|
--icon-filter: none;
|
|
|
|
--hint-color-info: #A2A2A2; /* Muted Silver */
|
|
--hint-color-warning: #C1A550; /* Pale Gold */
|
|
--hint-color-danger: #2A2A2A; /* Charcoal Black */
|
|
}
|
|
|
|
@mixin theme-dark {
|
|
--gray-100: rgba(237, 230, 219, 0.1); /* Bone White */
|
|
--gray-200: rgba(193, 165, 80, 0.2); /* Pale Gold */
|
|
--gray-500: rgba(73, 72, 72, 0.5); /* Dark Slate */
|
|
|
|
--color-link: #C1A550; /* Pale Gold */
|
|
--color-visited-link: #A2A2A2; /* Muted Silver */
|
|
|
|
--body-background: #2A2A2A; /* Charcoal Black */
|
|
--body-font-color: #EDE6DB; /* Bone White */
|
|
|
|
--icon-filter: brightness(0) invert(1);
|
|
|
|
--hint-color-info: #A2A2A2; /* Muted Silver */
|
|
--hint-color-warning: #C1A550; /* Pale Gold */
|
|
--hint-color-danger: #494848; /* Dark Slate */
|
|
}
|
|
|