hippie-style/elements/_textlevel.scss

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

}