From 0c24b2e6029e9f4eafcaabcbabf6a1af772abcd3 Mon Sep 17 00:00:00 2001
From: tykayn <contact@cipherbliss.com>
Date: Mon, 21 Mar 2022 15:32:15 +0100
Subject: [PATCH] title typo levels responsive too

---
 src/styles/partials/_typo.scss | 164 ++++++++++++++++++++++++++++-----
 1 file changed, 139 insertions(+), 25 deletions(-)

diff --git a/src/styles/partials/_typo.scss b/src/styles/partials/_typo.scss
index a3a4e2d5..53ea2113 100644
--- a/src/styles/partials/_typo.scss
+++ b/src/styles/partials/_typo.scss
@@ -1,42 +1,121 @@
+.base-title {
+	font-family: $title_font;
+	color: $d-primary-intense;
+	font-weight: 700;
+	font-style: normal;
+}
+
 body {
 	font-family: $default_font;
+
 	h1,
 	h2,
 	h3,
 	h4,
 	h5,
 	h6 {
-		font-family: $title_font;
-		color: $d-primary-intense;
+		@extend .base-title;
 		margin-top: 0;
 		margin-bottom: 0;
 	}
 
 	.title {
 		&.is-1 {
-			color: $d-primary-intense;
-			font-weight: 700;
+			@extend .base-title;
 			font-size: 32px;
 			line-height: 37px;
 			margin-top: 0;
 			margin-bottom: 1rem;
 		}
+
 		&.is-2 {
-			color: $d-primary-intense;
-			font-size: 20px;
-			line-height: 23px;
+			@extend .base-title;
+			font-size: 28px;
+			line-height: 32px;
 			margin-bottom: 1rem;
 		}
+
 		&.is-3 {
-			color: $d-primary-intense;
-			font-family: $title_font;
-			font-weight: 700;
-			font-style: normal;
+			@extend .base-title;
 			font-size: 24px;
 			line-height: 28px;
 			margin-bottom: 1rem;
 		}
+
+		&.is-4 {
+			@extend .base-title;
+			font-size: 22px;
+			line-height: 25px;
+			margin-bottom: 1rem;
+		}
+
+		&.is-5 {
+			@extend .base-title;
+			font-size: 20px;
+			line-height: 23px;
+		}
+		&.is-6 {
+			@extend .base-title;
+			font-size: 18px;
+			line-height: 20px;
+		}
 	}
+
+	.chapo {
+		font-weight: 400;
+		font-size: 20px;
+		line-height: 23px;
+	}
+
+	.chapo-bold {
+		@extend .chapo;
+		font-weight: 700;
+	}
+
+	.chapo-paragraph {
+		font-weight: 400;
+		font-size: 18px;
+		line-height: 21px;
+	}
+
+	.chapo-paragraph-bold {
+		@extend .chapo-paragraph;
+		font-weight: 700;
+	}
+
+	.paragraph {
+		font-weight: 400;
+		font-size: 16px;
+		line-height: 20px;
+	}
+
+	.paragraph-bold {
+		@extend .paragraph;
+		font-weight: 700;
+	}
+
+	.paragraph-detail {
+		font-weight: 700;
+		font-size: 14px;
+		line-height: 16px;
+	}
+
+	.paragraph-detail-bold {
+		@extend .paragraph-detail;
+		font-weight: 700;
+	}
+
+	.paragraph-mention {
+		font-weight: 700;
+		font-size: 12px;
+		line-height: 14px;
+	}
+
+	.paragraph-mention-bold {
+		@extend .paragraph-detail;
+		font-weight: 700;
+	}
+
 	.is-1 {
 		color: $d-primary-intense;
 		font-weight: 700;
@@ -45,48 +124,44 @@ body {
 		margin-bottom: 1rem;
 		margin-top: 0;
 	}
+
 	.is-2 {
 		color: $d-primary-intense;
 		font-size: 28px;
 		line-height: 32px;
 		margin-bottom: 1rem;
 	}
+
 	.is-3 {
-		color: $d-primary-intense;
-		font-family: $title_font;
-		font-weight: 700;
-		font-style: normal;
+		@extend .base-title;
 		font-size: 24px;
 		line-height: 28px;
 		margin-bottom: 1rem;
 	}
+
 	.is-4 {
-		color: $d-primary-intense;
-		font-family: $title_font;
-		font-weight: 700;
-		font-style: normal;
+		@extend .base-title;
 		font-size: 24px;
 		line-height: 28px;
 		margin-bottom: 1rem;
 	}
+
 	.is-5 {
+		@extend .base-title;
 		color: #383838;
-		font-family: $title_font;
-		font-weight: 700;
-		font-style: normal;
 		font-size: 20px;
 		line-height: 23px;
 		margin-bottom: 1rem;
 	}
+
 	.is-6 {
+		@extend .base-title;
 		color: #383838;
-		font-family: $title_font;
-		font-weight: 700;
-		font-style: normal;
 		font-size: 16px;
 		line-height: 20px;
 		margin-bottom: 1rem;
 	}
+
 	.nobold {
 		font-weight: normal;
 	}
@@ -102,7 +177,46 @@ body {
 	.icon-success {
 		fill: $success_color;
 	}
+
 	.has-text-danger {
 		color: red !important;
 	}
 }
+
+@media (max-width: 400px) {
+	.title {
+		font-family: $title_font;
+		color: $d-primary-intense;
+		font-weight: 700;
+		font-style: normal;
+
+		&.is-1 {
+			font-size: 28px;
+			line-height: 32px;
+		}
+
+		&.is-2 {
+			font-size: 24px;
+			line-height: 28px;
+		}
+
+		&.is-3 {
+			font-size: 22px;
+			line-height: 25px;
+		}
+
+		&.is-4 {
+			font-size: 20px;
+			line-height: 23px;
+		}
+
+		&.is-5 {
+			font-size: 18px;
+			line-height: 21px;
+		}
+		&.is-6 {
+			font-size: 16px;
+			line-height: 18px;
+		}
+	}
+}