landmark-serve/public/styles/landmark/type.less

Web Application Framework and Admin GUI / Content Management System built on Express.js and Mongoose

//
// Typography
// --------------------------------------------------




// Headings
// -------------------------


// format

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	// color: @headings-color;
	font-family: @headings-font-family;
	font-weight: @headings-font-weight;
	line-height: @headings-line-height;
	margin-top: 0;
	margin-bottom: 0;

	small,
	.small {
		color: @headings-small-color;
		font-size: 75%;
		font-weight: normal;
		line-height: 1;
	}
}


// sizing
html {
	font-size: 100%;
}
body {
	font-size: 90%;
}

h1, .h1 { font-size: 2.4em; }
h2, .h2 { font-size: 2.4em; }
h3, .h3 { font-size: 1.8em; }
h4, .h4 { font-size: 1.4em; }
h5, .h5 { font-size: 1em; }
h6, .h6 { font-size: .85em; }

 
@media (max-width: @screen-md-max) {
	h1, .h1 { font-size: 2.4em; }
	h2, .h2 { font-size: 1.8em; }
	h3, .h3 { font-size: 1.6em; }
	h4, .h4 { font-size: 1.4em; }
	h5, .h5 { font-size: 1em; }
	h6, .h6 { font-size: .85em; }
}
	
 
@media (max-width: @screen-sm-max) {
	body { font-size: 85%; }
	h1, .h1 { font-size: 2em; }
	h2, .h2 { font-size: 1.6em; }
	h3, .h3 { font-size: 1.4em; }
	h4, .h4 { font-size: 1.2em; }
	h5, .h5 { font-size: 1em; }
	h6, .h6 { font-size: .85em; }
}
 
@media (max-width: @screen-xs-max) {
	body { font-size: 80%; }
	h1, .h1 { font-size: 1.6em; }
	h2, .h2 { font-size: 1.4em; }
	h3, .h3 { font-size: 1.2em; }
	h4, .h4 { font-size: 1.1em; }
	h5, .h5 { font-size: 1em; }
	h6, .h6 { font-size: .85em; }
}




// Body text
// -------------------------

p {
	margin: 0 0 .66em;
}

.lead {
	margin-bottom: 1em;
	font-size: 1.2em;
	font-weight: 300;
	line-height: 1.4;
}

hr {
	margin-bottom: 1.5em;
	margin-top: 1.5em;
}


// Emphasis & misc
// -------------------------

// Ex: 14px base font * 85% = about 12px
small,
.small  { font-size: 85%; }

// Undo browser default styling
cite    { font-style: normal; }

// Alignment
.text-left           { text-align: left; }
.text-right          { text-align: right; }
.text-center         { text-align: center; }
.text-justify        { text-align: justify; }

// Contextual colors
.text-muted {
	color: @text-muted;
}

.text-confirm {
	color: @gray-light;
	
	button&:hover,
	button&:focus,
	a&:hover,
	a&:focus {
		color: @brand-danger;
	}
}
.page-header {
	padding-bottom: ((@line-height-computed / 2) - 1);
	margin: (@line-height-computed * 2) 0 @line-height-computed;
	border-bottom: 1px solid @page-header-border-color;
}




// Lists
// --------------------------------------------------


// Unordered and Ordered lists
ul,
ol {
	margin-top: 0;
	margin-bottom: (@line-height-computed / 2);
	ul,
	ol {
		margin-bottom: 0;
	}
}


// Unstyled keeps list items block level, just removes default browser padding and list-style
.list-unstyled {
	margin-bottom: 0;
	padding-left: 0;
	list-style: none;
}


// Inline turns list items into inline-block
.list-inline {
	.list-unstyled();
	margin-left: -5px;
	margin-right: -5px;

	> li {
		display: inline-block;
		padding-left: 5px;
		padding-right: 5px;
	}
}




// MISC
// ------------------------------

// Abbreviations and acronyms
abbr[title],
// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
abbr[data-original-title] {
	border-bottom: 1px dotted @abbr-border-color;
	cursor: help;
}
.initialism {
	font-size: 90%;
	text-transform: uppercase;
}