funky-framadate-front/src/styles/partials/_typo.scss

.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 {
		@extend .base-title;
		margin-top: 0;
		margin-bottom: 0;
	}

	.title {
		&.is-1 {
			@extend .base-title;
			font-size: 32px;
			line-height: 37px;
			margin-top: 0;
			margin-bottom: 1rem;
		}

		&.is-2 {
			@extend .base-title;
			font-size: 28px;
			line-height: 32px;
			margin-bottom: 1rem;
		}

		&.is-3 {
			@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;
		font-size: 32px;
		line-height: 37px;
		margin-bottom: 1rem;
		margin-top: 0;
	}

	.is-2 {
		color: $d-primary-intense;
		font-size: 28px;
		line-height: 32px;
		margin-bottom: 1rem;
	}

	.is-3 {
		@extend .base-title;
		font-size: 24px;
		line-height: 28px;
		margin-bottom: 1rem;
	}

	.is-4 {
		@extend .base-title;
		font-size: 24px;
		line-height: 28px;
		margin-bottom: 1rem;
	}

	.is-5 {
		@extend .base-title;
		color: #383838;
		font-size: 20px;
		line-height: 23px;
		margin-bottom: 1rem;
	}

	.is-6 {
		@extend .base-title;
		color: #383838;
		font-size: 16px;
		line-height: 20px;
		margin-bottom: 1rem;
	}

	.nobold {
		font-weight: normal;
	}

	.text-right {
		text-align: right;
	}

	.text-center {
		text-align: center;
	}

	.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;
		}
	}
}