// Text-Level semantics // ----------------------------------------------------------------------------- // a // em // strong // small // s // cite // q // dfn // abbr // ruby // rb // rt // rtc // rp // data // time // code // var // samp // kbd // sub // sup // i // b // u // mark // bdi // bdo // span // br // wbr // Links // ----------------------------------------------------------------------------- a { color: $color_link_basic; // color: lighten($color_action_basic, 20%); text-decoration: none; &:active, &:focus, &:hover { color: $color_highlight_basic; } } .a_internal { color: $charlie_color; } .a_external { color: $delta_color; } .a_discreet { color: $color_text_basic; } .a_line { border-bottom-width: $space_tiny; border-bottom-style: dotted; border-color: $color_border_basic; color: $color_text_basic; background-color: transparent; transition: color $duration_basic $timing_basic; &:active, &:focus, &:hover { color: $color_highlight_basic; background-color: $color_action_basic; } } .a_button { display: inline-block; padding: $padding_basic; border-radius: $radius_basic; background-color: transparentize($color_link_basic, 0.8); &:active, &:focus, &:hover { border-color: transparent; background-color: transparentize($color_highlight_basic, 0.8); } } .a_button_text { @extend .a_button; padding: $padding_link; color: $color_text_basic; background-color: transparent; } .a_button_border { @extend .a_button_text; border: $border_basic; } // Italic, Emphasis // ----------------------------------------------------------------------------- i, em { font-style: italic; } .i_bright { color: $color_highlight_basic; font-style: normal; } // Bold, Strong // ----------------------------------------------------------------------------- b, strong { font-weight: 500; // TODO maybe bolder } // Small // ----------------------------------------------------------------------------- small { } // No longer accurate or no longer relevant // ----------------------------------------------------------------------------- s { } // Citation // ----------------------------------------------------------------------------- cite { font-style: italic; } // Phrasing content, quoted // ----------------------------------------------------------------------------- q { } // Definition // ----------------------------------------------------------------------------- dfn { } // Abbreviation // ----------------------------------------------------------------------------- abbr { } // Ruby annotations // ----------------------------------------------------------------------------- ruby { } rb { } rt { } rtc { } rp { } // Machine readable data // ----------------------------------------------------------------------------- data { } // Machine readable time // ----------------------------------------------------------------------------- time { } // Code // ----------------------------------------------------------------------------- code { @extend %basic_mono; color: lighten($color_text_basic, $color_diff_basic); background-color: lighten($color_back_basic, $color_diff_tiny); } .code_solo { @extend %basic_mono; padding: $space_tiny $space_half; color: $color_text_basic; } // Variable // ----------------------------------------------------------------------------- var { } // Sample // ----------------------------------------------------------------------------- samp { @extend %basic_mono; } // Keyboard input // ----------------------------------------------------------------------------- kbd { @extend %basic_mono; // font-size: .9em; // font-weight: bold; padding: 0 $space_half; border-width: $width_border_basic; border-style: solid; border-color: $color_darker; border-radius: $radius_basic; color: lighten($color_text_basic, $color_diff_basic); } // Sub- and superscript // ----------------------------------------------------------------------------- sub, sup { } // Unarticulated, non-textual annotation // ----------------------------------------------------------------------------- u { } // Marks // ----------------------------------------------------------------------------- mark { background-color: $alpha_color; } .mark_cursor { color: invert($color_text_basic); background-color: $color_text_basic; } ::-moz-selection { color: invert($color_text_basic); background-color: $color_text_basic; } ::selection { color: invert($color_text_basic); background-color: $color_text_basic; } // Text direction // ----------------------------------------------------------------------------- bdi, bdo { } // Span // ----------------------------------------------------------------------------- span { } .span_solo { @extend %solo; } // Linebreaks // ----------------------------------------------------------------------------- br { } wbr { } // Edits // ----------------------------------------------------------------------------- // ins // del ins { } del { }