Added scss

src/css/partials/_typography.scss

@@ -0,0 +1,123 @@
+h1, h2, h3, h4, h5, h6, p, span, ul, li, a, ol {
+	padding:0;
+	margin:0;
+}
+
+h1,h2,h3,h4,h5,h6 {
+	color: $dark-gray;
+	font-weight: $font-semibold;
+	font-family: $font-primary;
+	margin-bottom: 0.75rem;
+}
+h1 {
+	font-size: $font-xxl;
+	line-height: $line-xxl;
+}
+h2 {
+	font-size: $font-xl;
+	line-height: $line-xl;
+}
+
+h3 {
+	font-size: $font-lg;
+	line-height: $line-lg;
+}
+
+h4 {
+	font-size: $font-md;
+	line-height: $line-md;
+}
+
+h5 {
+	font-size: $font-base;
+	line-height: $line-base;
+}
+h6 {
+	font-size: $font-s;
+	line-height: $line-s;
+}
+
+p {
+	color: $muted;
+	font-weight: $font-regular;
+	font-size: $font-base;
+	line-height: $line-md;
+}
+a {
+	color:inherit;
+	text-decoration: none;
+	outline: 0;
+	transition:all 0.3s ease-in-out;
+	-webkit-transition:all 0.3s ease-in-out;
+	-o-transition:all 0.3s ease-in-out;
+	-ms-transition:all 0.3s ease-in-out;
+	-moz-transition:all 0.3s ease-in-out;
+}
+a:hover, a:focus {
+	color: $primary;
+	text-decoration:none;
+
+}
+ul, ol {
+	padding-left: 15px;
+}
+ul li, ol li {
+	color: $muted;
+}
+.blockquote.blockquote-reverse {
+	text-align:right;
+}
+dl dt {
+	font-weight: $font-medium;
+}
+dl dd {
+	color: $muted;
+}
+.list-none {
+	list-style: none;
+	padding:0;
+}
+svg {
+	width: 100% !important;
+}
+canvas {
+	max-width:100%;
+}
+code {
+	width: 100%;
+    display: block;
+    padding: 0.5rem;
+}
+
+.display-1 {
+	@include mobile-portrait-sm {
+		font-size:4rem;
+	}
+	@include mobile-portrait-xs {
+		font-size:4rem;
+	}
+}
+.display-2 {
+	@include mobile-portrait-sm {
+		font-size:3.5rem;
+	}
+	@include mobile-portrait-xs {
+		font-size:3.5rem;
+	}
+}
+.display-3 {
+	@include mobile-portrait-sm {
+		font-size:3rem;
+	}
+	@include mobile-portrait-xs {
+		font-size:3rem;
+	}
+}
+.display-4 {
+	@include mobile-portrait-sm {
+		font-size:2.5rem;
+	}
+	@include mobile-portrait-xs {
+		font-size:2.5rem;
+	}
+}