mirror of
https://github.com/taigrr/wtf
synced 2025-01-18 04:03:14 -08:00
138 lines
4.3 KiB
SCSS
138 lines
4.3 KiB
SCSS
// main: main.scss
|
|
|
|
// == Side ==
|
|
// Remember:
|
|
// active is the current page
|
|
// focus is a group
|
|
|
|
$side_link_color: $side_text_color;
|
|
$side_link_hover_color: lshift_side($side_text_color, -12%, -12%);
|
|
|
|
$side_link_extra_color: lshift_side($side_text_color, -50%, -50%);
|
|
|
|
$side_shadow_color: lshift_side($side_back_color, -3.5%, 3.5%);
|
|
$side_highlight_color: lshift_side($side_back_color, 9%, -9%);
|
|
|
|
$side_focus_back_color: $side_shadow_color;
|
|
$side_active_back_color: lshift_side($side_focus_back_color, -100%, -1.5%);
|
|
|
|
$side_focus_text_color: $side_text_color;
|
|
$side_focus_text_hover_color: lshift_side($side_link_hover_color, 1.5%, 1.5%);
|
|
|
|
$side_active_text_color: lshift_side($side_focus_text_color, -50%, 10%);
|
|
$side_active_text_hover_color: lshift_side($side_active_text_color, 7%, -7%);
|
|
|
|
// == Main ==
|
|
|
|
|
|
$main_link_color: $side_back_color;
|
|
$main_link_hover_color: adjust-hue(lshift_main($main_link_color, 7%, -1.5%), -20);
|
|
|
|
$main_shadow_color: lshift_main($main_back_color, -2%, 3%);
|
|
$main_highlight_color: lshift_main($main_back_color, 5%, -2%);
|
|
|
|
$main_title_text_color: lshift_main($main_text_color, 10%, 10%);
|
|
$main_other_text_color: lshift_main($main_text_color, -17%, -10%);
|
|
|
|
$main_block_quote_border_color: lshift_main($main_back_color, 5%, 5%);
|
|
|
|
// == Code ==
|
|
|
|
|
|
$main_code_inline_text_color: lshift_main(hsl(0, 0, lightness($main_code_inline_back_color)), -46%, 46%);
|
|
$main_code_inline_border_color: lshift_main($main_code_inline_back_color, -6%, 6%);
|
|
$main_code_inline_back_hover_color: desaturate(lshift_main($main_code_inline_back_color, -3%, 3%), 25%);
|
|
|
|
$main_code_block_border_color: lshift_main($main_code_block_back_color, 3%, -3%);
|
|
|
|
// == Table ==
|
|
|
|
|
|
$table_title_back_color: lshift_main($main_back_color, 3.5%, 3.5%);
|
|
$table_title_text_color: $main_text_color;
|
|
$table_border_color: lshift_main($main_back_color, 10%, 10%);
|
|
$table_body_text_color: $main_text_color;
|
|
|
|
// == Common Theming ==
|
|
// TODO: Make text color back dependant (color and lshift)
|
|
|
|
$theme_map: (
|
|
"success": hsl(111 , 45%, lightness(lshift_main($main_back_color, 15%, 15%))),
|
|
"default": hsl(0 , 0%, lightness(lshift_main($main_back_color, 7.5%, 7.5%))),
|
|
"info": hsl(200 , 75%, lightness(lshift_main($main_back_color, 12.5%, 12.5%))),
|
|
"info_alt": hsl(28 , 85%, lightness(lshift_main($main_back_color, 9%, 9%))),
|
|
"note": hsl(204 , 70%, lightness(lshift_main($main_back_color, 13.5%, 13.5%))),
|
|
"primary": hsl(208 , 56%, lightness(lshift_main($main_text_color, -30%, -30%))),
|
|
"warning": hsl(50 , 75%, lightness(lshift_main($main_back_color, 10%, 10%))),
|
|
"error": hsl(0 , 55%, lightness(lshift_main($main_back_color, 16%, 12%))),
|
|
);
|
|
|
|
// == Notices ==
|
|
$notice_body_back_lshift: ( -5.5%, -5.5% );
|
|
$notice_body_back_saturate: 5%;
|
|
$notice_header_back_lshift: ( 10%, 15% );
|
|
$notice_header_back_saturate: -5%;
|
|
|
|
$notice_text_body_color: transparentize(lshift_main($main_text_color, -10%, -10%), 0.5);
|
|
$notice_text_title_color: $main_back_color;
|
|
|
|
$notice_map: (
|
|
"note": note,
|
|
"info": info_alt,
|
|
"tip": success,
|
|
"warning": error
|
|
);
|
|
|
|
// == Panels ==
|
|
$panel_border_lshift: 3.75%;
|
|
$panel_back_lshift: -2.55%;
|
|
|
|
$panel_body_back_color: lshift_main($main_back_color, 0%, 0%);
|
|
$panel_body_text_color: $main_text_color;
|
|
$panel_title_text_color: transparentize(lshift_main($main_text_color, -15%, -15%), 0.25);
|
|
|
|
$panel_map: (
|
|
"primary": primary,
|
|
"info": info,
|
|
"success": success,
|
|
"warning": warning,
|
|
"danger": error,
|
|
"default": default
|
|
);
|
|
|
|
// == Alerts ==
|
|
// TODO: Turn into maps like with notices
|
|
$alert_border_lshift: 6.5%;
|
|
$alert_back_lshift: -2.5%;
|
|
|
|
$alert_body_text_color: transparentize(lshift_main($main_text_color, -12%, -12%), 0.25);
|
|
|
|
$alert_map: (
|
|
"info": info,
|
|
"success": success,
|
|
"warning": warning,
|
|
"danger": error
|
|
);
|
|
|
|
// == Top bar ==
|
|
|
|
$topbar_back_color: lshift_main($main_back_color, 7.5%, 3.2%);
|
|
$topbar_shadow_opacity: 0.1;
|
|
|
|
$topbar_toc_back_color: transparentize($topbar_back_color, 0.03);
|
|
$topbar_toc_border_color: lshift_main($topbar_back_color, -4%, 4%);
|
|
|
|
$time_short_fade: 0.15s;
|
|
$time_long_fade: 0.35s;
|
|
|
|
// == Buttons ==
|
|
|
|
|
|
$button_text_color: desaturate(lshift_main($main_back_color, -15%, -15%), 100%);
|
|
$button_text_hover_color: lshift_main($main_back_color, 100%, 100%);
|
|
|
|
//== Options ==
|
|
// Where link underline should expand from: 'left', 'center', or 'right'
|
|
|
|
$option_link_expand: left;
|