OwlCyberSecurity - MANAGER

Edit File: _typography.scss

html {
    font-family: $base-font-family;
    font-size: percentage($base-font-size/16px);
    color: $gray;
}

.header, .navigation--mobile {
    @include font-size(13px, true);
    font-family: $alt-font-family;
    letter-spacing: normal;
    font-weight:300;
}

.header, .footer {

.hN {
        font-family: $alt-font-family;
        font-weight: 300;
        color: #91908e;
    }
}

/*----------------------------------*\
               HEADINGS
\*----------------------------------*/

.hN {
    font-family: $heading-font-family;
    @include rem(margin-bottom, $half-spacing-unit);
    @include rem(margin-top, $base-spacing-unit);
    color:$dark;

/*
    * Bigger spacing for headings inside content
    */

.entry__content & {
        @include rem(margin-top, 1.5*$base-spacing-unit);
    }
}

.delta,
.epsilon,
.zeta {
    text-transform: uppercase;
    font-weight:700;
    @include rem(letter-spacing, 2px);
}

/*------------------------------------*\
               BLOCKQUOTE
\*------------------------------------*/

blockquote {
    text-indent: 0;
    @include rem(margin, 2*$base-spacing-unit 0 2*$base-spacing-unit 3*$base-spacing-unit);

&:before{
        @include font-size(132px);
        content: "\201C";
        font-family: $base-font-family;
        display: block;
        float: left;
        @include rem(margin-top, -18px);
        @include rem(margin-left, -3 * $base-spacing-unit);
        color: $accent-color;
    }

}

.header-quote-content blockquote{
    margin-left: 0;

&:before{
        margin-left: 0;
    }
}

@include media(from 1750px) {
    .single-post{

.entry__content blockquote{
            @include rem(margin-left, -3 * $base-spacing-unit);
            @include rem(padding-left, 3 * $base-spacing-unit);
        }
    }
}

.entry__permalink{
    text-decoration: none;
}

/*-------------------------------*\
               LISTS
\*-------------------------------*/

ol {
    @include rem(margin-top, $base-spacing-unit);
    @include rem(margin-bottom, $base-spacing-unit);

li {
        @include rem(font-size, 20px);
        font-family: $base-font-family;
        font-style: italic;
        color: $light;
        @include rem(margin-bottom, $half-spacing-unit/2);
    }
}

.text-link {
    font-family: $alt-font-family;
    @include font-size(14px);
    text-transform: uppercase;
    color: black;
    text-decoration: none;

&:after{
        content: "\00bb";
        @include rem(margin-left, 3px);
        @include font-size(16px);
    }
    
}

.entry__title{
    @include rem(padding, 1.5 * $base-spacing-unit 0);
    margin-bottom: 0;
}

a {
    color: $dark;

[class*="icon-"] {
        text-decoration: none;
        padding-right: .5em;
    }
}

/*-------------------------------*\
               CAPTIONS
\*-------------------------------*/

.wp-caption{
    max-width: 100%;
}

.wp-caption-text{
    @include rem(font-size, 16px);
    font-style: italic;

&:before{
        content: "\2014";
        @include rem(margin-right, 3px);
    }
}

/*-------------------------------*\
               EMPHASIS 
\*-------------------------------*/

/*
* Convey meaning through color with a handful of emphasis utility classes.
*/

// Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. 
// Etiam porta sem malesuada magna mollis euismod. 
// Donec ullamcorper nulla non metus auctor fringilla. 
// Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. 
// Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

$muted: #999999;
$warning: #ff9000;
$error: #ff3000;
$info: #00a2cb;
$success: #00cb56;

.emphasized {

&:before {
        @include font-size(72px);
        content: "\2014";
        position: absolute;
        display: block;
        @include rem(left, -$base-spacing-unit * 3);
        @include rem(margin-top, -$base-spacing-unit * 1.5);
        color: $accent-color;
    }
}

.muted {
  color: $muted;
}

a.muted:hover,
a.muted:focus {
  color: #808080;
}

.text--warning {
  color: $warning;
}

a.text--warning:hover,
a.text--warning:focus {
  color: #a47e3c;
}

.text--error {
  color: $error;
}

a.text--error:hover,
a.text--error:focus {
  color: #953b39;
}

.text--info {
  color: $info;
}

a.text--info:hover,
a.text--info:focus {
  color: #2d6987;
}

.text--success {
  color: $success;
}

a.text--success:hover,
a.text--success:focus {
  color: #356635;
}