add styling

src/assets/css/typography.scss

@@ -0,0 +1,82 @@
+body {
+    // Typography - H tags
+    h1 {
+        @apply text-3xl font-gril font-medium leading-6 opacity-90;
+    }
+    h2 {
+        @apply text-xl font-gril font-medium leading-6 opacity-90;
+    }
+    h3 {
+        @apply text-lg font-gril font-medium leading-6 opacity-90;
+    }
+    h4 {
+        @apply text-base font-gril font-medium leading-6 opacity-90;
+    }
+    h5 {
+        @apply text-sm font-gril;
+    }
+    h6 {
+        @apply text-xs font-gril;
+    }
+
+    // Typograpy - display section
+    .display1 {
+        @apply text-6xl font-gril;
+    }
+    .display2 {
+        @apply text-5xl font-gril;
+    }
+    .display3 {
+        @apply text-4xl font-gril;
+    }
+    .display4 {
+        @apply text-3xl font-gril;
+    }
+
+    // Typography - Specialized titles
+    .heading {
+        @apply text-base uppercase font-gril tracking-wide;
+    }
+    .heading_title {
+        @apply text-2xl text-sky-400 uppercase font-gril tracking-wide;
+    }
+    .heading_sub_title {
+        @apply text-3xl font-gril opacity-90;
+    }
+    .heading_section {
+        @apply text-xl font-gril font-light opacity-60;
+    }
+
+    // Paragraphs
+    p {
+        @apply font-gril text-base font-light leading-7
+    }
+    .lead {
+        @apply font-gril text-xl font-light leading-7
+    }
+    .blockquote {
+        @apply font-gril mb-4 text-xl leading-6 block
+    }
+    .blockquote-footer {
+        @apply font-gril mb-4 text-lg leading-6 block opacity-60
+    }
+    .text-muted {
+        @apply font-gril text-slate-400
+    }
+    .text-primary {
+        @apply font-gril text-blue-500
+    }
+    .text-info {
+        @apply font-gril text-sky-400
+    }
+    .text-success {
+        @apply font-gril text-green-500
+    }
+    .text-warning {
+        @apply font-gril text-orange-500
+    }
+    .text-danger {
+        @apply font-gril text-red-400
+    }
+
+}