// 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;