added gallery shortcodes. added formatting shortcodes. Minor works on styling.

[theme-danix.xyz.git] / assets / sass / base / _typography.scss

///\r
/// Forty by HTML5 UP\r
/// html5up.net | @ajlkn\r
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
///\r
\r
/* Type */\r
\r
	body, input, select, textarea {\r
		color: _palette_light(fg);\r
		@media screen and (prefers-color-scheme: dark) {\r
			color: _palette_dark(fg);\r
		}\r
		font-family: _font(family);\r
		font-size: 17pt;\r
		font-weight: _font(weight);\r
		letter-spacing: _font(letter-spacing);\r
		line-height: 1.65;\r
\r
		@include breakpoint('<=xlarge') {\r
			font-size: 14pt;\r
		}\r
\r
		@include breakpoint('<=large') {\r
			font-size: 12pt;\r
		}\r
\r
		@include breakpoint('<=xxsmall') {\r
			font-size: 11pt;\r
		}\r
	}\r
\r
	a {\r
		@include vendor('transition', (\r
			'color #{_duration(transition)} ease-in-out',\r
			'border-bottom-color #{_duration(transition)} ease-in-out'\r
		));\r
		border-bottom: dotted 1px;\r
		color: inherit;\r
		text-decoration: none;\r
\r
		&:hover {\r
			border-bottom-color: transparent;\r
			color: _palette_light(highlight) !important;\r
			@media screen and (prefers-color-scheme: dark) {\r
				color: _palette_dark(highlight);\r
			}\r
		}\r
\r
		&:active {\r
			color: desaturate(darken(_palette_light(highlight), 15), 5) !important;\r
			@media screen and (prefers-color-scheme: dark) {\r
				color: desaturate(darken(_palette_dark(highlight), 15), 5) !important;\r
			}\r
		}\r
	}\r
\r
	strong, b {\r
		color: _palette_light(fg-bold);\r
		@media screen and (prefers-color-scheme: dark) {\r
			color: _palette_dark(fg-bold);\r
		}\r
		font-weight: _font(weight-bold);\r
	}\r
\r
	em, i, strike {\r
		font-style: italic;\r
	}\r
\r
	mark {\r
		background-color: lighten(_palette_light(highlight), 10%);\r
		color: _palette_light(fg-bold);\r
		padding-left: 0.2em;\r
		padding-right: 0.2em;\r
	}\r
\r
	p {\r
		margin: 0 0 _size(element-margin) 0;\r
		&.smaller {\r
			font-style: italic;\r
			font-size: 12pt;\r
		}\r
	}\r
\r
	h1, h2, h3, h4, h5, h6 {\r
		color: _palette_light(fg-bold);\r
		@media screen and (prefers-color-scheme: dark) {\r
			color: _palette_dark(fg-bold);\r
		}\r
		font-weight: _font(weight-bold);\r
		line-height: 1.65;\r
		margin: 0 0 (_size(element-margin) * 0.5) 0;\r
\r
		a {\r
			color: inherit;\r
			border-bottom: 0;\r
		}\r
	}\r
\r
	h1 {\r
		font-size: 2.5em;\r
	}\r
\r
	h2 {\r
		font-size: 1.75em;\r
	}\r
\r
	h3 {\r
		font-size: 1.35em;\r
	}\r
\r
	h4 {\r
		font-size: 1.1em;\r
	}\r
\r
	h5 {\r
		font-size: 0.9em;\r
	}\r
\r
	h6 {\r
		font-size: 0.7em;\r
	}\r
\r
	@include breakpoint('<=small') {\r
		h1 {\r
			font-size: 2em;\r
		}\r
\r
		h2 {\r
			font-size: 1.5em;\r
		}\r
\r
		h3 {\r
			font-size: 1.25em;\r
		}\r
	}\r
\r
	sub {\r
		font-size: 0.8em;\r
		position: relative;\r
		top: 0.5em;\r
	}\r
\r
	sup {\r
		font-size: 0.8em;\r
		position: relative;\r
		top: -0.5em;\r
	}\r
\r
	blockquote {\r
		border-left: solid 4px _palette_light(border);\r
		@media screen and (prefers-color-scheme: dark) {\r
			border-left: solid 4px _palette_dark(border);\r
		}\r
		font-style: italic;\r
		margin: 0 0 _size(element-margin) 0;\r
		padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);\r
	}\r
\r
	code {\r
		background: _palette_light(border-bg);\r
		@media screen and (prefers-color-scheme: dark) {\r
			background: _palette_dark(border-bg);\r
		}\r
		font-family: _font(family-fixed);\r
		font-size: 0.9em;\r
		margin: 0 0.25em;\r
		padding: 0.25em 0.65em;\r
	}\r
\r
	pre {\r
		-webkit-overflow-scrolling: touch;\r
		font-family: _font(family-fixed);\r
		font-size: 0.9em;\r
		margin: 0 0 _size(element-margin) 0;\r
\r
		code {\r
			display: block;\r
			line-height: 1.75;\r
			padding: 1em 1.5em;\r
			overflow-x: auto;\r
		}\r
	}\r
\r
	hr {\r
		border: 0;\r
		border-bottom: solid 1px _palette_light(border);\r
		@media screen and (prefers-color-scheme: dark) {\r
			border-bottom: solid 1px _palette_dark(border);\r
		}\r
		margin: _size(element-margin) 0;\r
\r
		&.major {\r
			margin: (_size(element-margin) * 1.5) 0;\r
		}\r
	}\r
\r
	.align-left {\r
		text-align: left;\r
	}\r
\r
	.align-center {\r
		text-align: center;\r
	}\r
\r
	.align-right {\r
		text-align: right;\r
	}\r
\r
	.screen-reader-text,\r
	.hidden,\r
	.js-hidden {\r
		@include hide-visually;\r
	}\r
\r
	// large code blocks are wrapped in the highlight shortcode\r
	.highlight {\r
		max-width: 100%;\r
		overflow-x: auto;\r
	}\r
\r
	.has-dropcap:first-letter {\r
		font-family: _font(family-fixed);\r
		font-weight: 900;\r
		float: left;\r
		font-size: 6rem;\r
		line-height: 0.65;\r
		margin: 0.1em 0.1em 0.2em 0;\r
	}\r
\r