sync

[bootswatch] / MDB Free / sass / mdb / free / _typography.scss

    // TYPOGRAPHY\r
    body {\r
        font-family: "Roboto", sans-serif;\r
    }\r
    \r
    h1,\r
    h2,\r
    h3,\r
    h4,\r
    h5,\r
    h6 {\r
        font-weight: 300;\r
    }\r
    \r
    html {\r
        @media only screen and (min-width: 0) {\r
            font-size: 15px;\r
        }\r
        @media only screen and (min-width: $medium-screen) {\r
            font-size: 15.5px;\r
        }\r
        @media only screen and (min-width: $large-screen) {\r
            font-size: 16px;\r
        }\r
    }\r
    \r
    .text-fluid {\r
        font-weight: 300;\r
        $i: 0;\r
        @while $i <=$intervals {\r
            @media only screen and (min-width: 360+ ($i * $interval-size)) {\r
                font-size: 1.2rem * (1+ (.02 * $i));\r
            }\r
            $i: $i+1;\r
        }\r
        // Handle below 360px screen\r
        @media only screen and (max-width: 360px) {\r
            font-size: 1.2rem;\r
        }\r
    }\r
    \r
    p {\r
        &.lead {\r
            font-weight: 400;\r
        }\r
    }\r
    \r
    blockquote p {\r
        font-size: 0.9rem;\r
        padding-left: 2rem;\r
        padding-top: 1rem;\r
        padding-bottom: 1rem;\r
    }\r
    /* Responsive Headings */\r
    /* Extra Small Devices, Phones */\r
    \r
    @media only screen and (max-width: 768px) {\r
        .h1-responsive {\r
            font-size: 150%;\r
            font-weight: 500;\r
        }\r
        .h2-responsive {\r
            font-size: 145%;\r
        }\r
        .h3-responsive {\r
            font-size: 135%;\r
        }\r
        .h4-responsive {\r
            font-size: 135%;\r
        }\r
        .h5-responsive {\r
            font-size: 135%;\r
        }\r
    }\r
    /* Small Devices, Tablets */\r
    \r
    @media only screen and (min-width: 768px) {\r
        .h1-responsive {\r
            font-size: 170%;\r
        }\r
        .h2-responsive {\r
            font-size: 140%;\r
        }\r
        .h3-responsive {\r
            font-size: 125%;\r
        }\r
        .h4-responsive {\r
            font-size: 125%;\r
        }\r
        .h5-responsive {\r
            font-size: 125%;\r
        }\r
    }\r
    /* Medium Devices, Desktops */\r
    \r
    @media only screen and (min-width: 992px) {\r
        .h1-responsive {\r
            font-size: 200%;\r
        }\r
        .h2-responsive {\r
            font-size: 170%;\r
        }\r
        .h3-responsive {\r
            font-size: 140%;\r
        }\r
        .h4-responsive {\r
            font-size: 125%;\r
        }\r
        .h5-responsive {\r
            font-size: 125%;\r
        }\r
    }\r
    /* Large Devices, Wide Screens */\r
    \r
    @media only screen and (min-width: 1200px) {\r
        .h1-responsive {\r
            font-size: 250%;\r
        }\r
        .h2-responsive {\r
            font-size: 200%;\r
        }\r
        .h3-responsive {\r
            font-size: 170%;\r
        }\r
        .h4-responsive {\r
            font-size: 140%;\r
        }\r
        .h5-responsive {\r
            font-size: 125%;\r
        }\r
    }\r
    \r
    .section {\r
        margin-bottom: 2rem;\r
        .section-heading {\r
            @extend .h1-responsive;\r
            margin-top: 2rem;\r
            margin-bottom: 4rem;\r
        }\r
        .section-description {\r
            color: #757575;\r
            margin-bottom: 4rem;\r
            margin-left: 15%;\r
            margin-right: 15%;\r
            text-align: center;\r
            @media (max-width: 992px) {\r
                margin-left: 5%;\r
                margin-right: 5%;\r
            }\r
        }\r
        img,\r
        .view {\r
            @extend .img-fluid;\r
            @extend .z-depth-1-half;\r
        }\r
        .jumbotron {\r
            @extend .z-depth-2;\r
        }\r
        h4 {\r
            font-weight: 400;\r
        }\r
        h5 .fa {\r
            margin-right: 8px;\r
        } \r
        hr { \r
            margin-top: 1rem;\r
            margin-bottom: 3rem;\r
        }\r
        .map-container {\r
            img {\r
                @extend .z-depth-0;\r
            }\r
        }\r
        .contact-icons {\r
            text-align: center;\r
            li {\r
                margin-bottom: 2.2rem;\r
            }\r
            .fa {\r
                font-size: 2.2rem;\r
                margin-bottom: 0.6rem;\r
                color: #424242;\r
            }\r
        }\r
    }\r
    \r
    .between-sections {\r
        margin-bottom: 4rem;\r
    }\r
    \r
    // Lists default style\r
    ul {\r
        padding: 0;\r
        list-style-type: none;\r
        li {\r
            list-style-type: none;\r
        }\r
    }\r
    \r
    // List style types\r
    .list-disc {\r
        li {\r
            list-style-type: disc;\r
        }\r
    }\r
    \r
    .list-circle {\r
        li {\r
            list-style-type: circle;\r
        }\r
    }\r
    \r
    .list-square {\r
        li {\r
            list-style-type: square;\r
        }\r
    }\r
    \r
    .list-roman {\r
        li {\r
            list-style-type: upper-roman;\r
        }\r
    }\r
    .list-alpha {\r
        li {\r
            list-style-type: upper-alpha;\r
        }\r
    }