1#@!#!123s

: / home / diafrica / www / assets / source / scss / scss-core /
Filename : _typography.scss
back
/*
 * typography.scss
 * -----------------------------------------------
*/
::selection {
	background: $black-333;
	color: $white-base;
	text-shadow: none;
}

::-moz-selection {
	background: $black-333; /* Firefox */
	color: $white-base;
	text-shadow: none;
}

::-webkit-selection {
	background: $black-333; /* Safari */
	color: $white-base;
	text-shadow: none;
}

:active,
:focus { outline: none !important; }


body {
	line-height: $line-height-base;
	color: $text-color;
	font-size: $body-font-size;
	font-family: $body-font;
	font-weight: $body-font-weight;
	background-color: $body-bg;
	background-attachment: fixed;
	-ms-word-wrap: break-word;
	word-wrap: break-word;
}

a {
	color: $link-color;
	text-decoration: none;
	font-weight: 600;
	@include transition(all .3s ease);

	&:hover,
	&:focus {
		color: $link-hover-color;
		text-decoration: $link-hover-decoration;
	}

	img {
		border: none;
	}
}


img { max-width: 100%; }

iframe { border: none !important; }

/* -------- Headings ---------- */
h1, .h1 { font-size: $h1-font-size; }
h2, .h2 { font-size: $h2-font-size; }
h3, .h3 { font-size: $h3-font-size; }
h4, .h4 { font-size: $h4-font-size; }
h5, .h5 { font-size: $h5-font-size; }
h6, .h6 { font-size: $h6-font-size; }


h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-weight: $headings-font-weight-h1-h3;
	line-height: $headings-line-height;
	color: $headings-color;

	small,
	.small {
		font-weight: normal;
		line-height: 1;
		color: $headings-color;
	}

	a {
		color: inherit;
		font-weight: inherit;
	}
}

.h1, .h2, .h3, h1, h2, h3 {
	font-family: $heading-font;
	margin-bottom: 1rem;
	margin-top: 0.75rem;
}
h4, h5, h6,
.h4, .h5, .h6 {
	font-family: $heading-font;
	font-weight: $headings-font-weight-h4-h6;
	line-height: $headings-line-height-smaller;
	margin-bottom: 0.5rem;
	margin-top: 0.75rem;
}

/* -------- Body Text ---------- */
p,
pre,
ul,
ol,
dl,
dd,
blockquote,
address,
table,
fieldset { margin-bottom: 10px; }

table p {
	margin-bottom: 0;
}

p {
	margin-bottom: 30px;
	a {
		&:hover,
		&:focus {
			text-decoration: underline;
		}
	}
}
.font-current-theme1 {
	font-family: $font-current-theme1 !important;
}
.font-current-theme2 {
	font-family: $font-current-theme2 !important;
}
.wp-block-quote {
	margin: 20px 0;
}


.post-content,
.post-excerpt,
.wpb_text_column {
	a:not(.btn):not(.styled-icons-item):not(.wp-block-button__link):not(.wp-block-button__link), p a:not(.btn):not(.styled-icons-item):not(.wp-block-button__link):not(.wp-block-button__link) {
	}
	ul > li,
	ol > li {
		margin-bottom: 12px;
		> ul, > ol {
			margin-top: 12px;
		}
	}
}
.main-content-area {
	.entry-content {
	}
}

/*Drop Caps*/
.drop-caps {
	> p {
		text-align: justify;
	}
	> p:first-child:first-letter {
		color: $black-333;
		display: block;
		float: left;
		font-size: 48px;
		line-height: 48px;
		margin: 6px 3px;
		padding: 10px 18px;
	}
	&.text-colored > p:first-child:first-letter {
		display: block;
		float: left;
		font-size: 48px;
		line-height: 48px;
		margin: 6px 3px;
		padding: 10px 18px;
	}
	&.border > p:first-child:first-letter {
		border: 1px solid;
		margin: 8px 16px 0 0;
		padding: 15px 20px;
	}
	&.border-rounded > p:first-child:first-letter {
		border: 1px solid;
		border-radius: 50%;
		margin: 8px 16px 0 0;
		padding: 15px 20px;
	}
	&.colored-square > p:first-child:first-letter {
		color: $white-base;
		margin: 8px 16px 0 0;
		padding: 15px 20px;
	}
	&.colored-rounded > p:first-child:first-letter {
		color: $white-base;
		margin: 8px 16px 0 0;
		padding: 15px 20px;
		border-radius: 50%;
	}
	&.dark-square > p:first-child:first-letter {
		background: $black-222;
		color: $white-base;
		margin: 8px 16px 0 0;
		padding: 15px 20px;
	}
	&.dark-rounded > p:first-child:first-letter {
		background: $black-222;
		color: $white-base;
		margin: 8px 16px 0 0;
		padding: 15px 20px;
		border-radius: 50%;
	}
}

/*Text Highlight*/
.text-highlight {
	background: none repeat scroll 0 0 $black-111;
	border-radius: 4px;
	color: $white-base;
	padding: 0 5px 3px;
	&.light {
		background: $gray-base;
	}
}


address {
	color: #777;
	font-style: italic;
}

ol, ul {
	list-style-position: inside;
	margin: 0;
	padding: 0;
}
ol ol li, ol ul li,
ul ol li, ul ul li {
	padding-left: $ul-li-padding-left;
}
ol > li,
ul > li {
}