sync

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

diff --git a/MDB Free/sass/mdb/free/_typography.scss b/MDB Free/sass/mdb/free/_typography.scss
new file mode 100644 (file)
index 0000000..988b8f2
--- /dev/null
+++ b/MDB Free/sass/mdb/free/_typography.scss
@@ -0,0 +1,228 @@
+    // 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
+    }
\ No newline at end of file