MusareReact/frontend/app/styles/main.scss

// @import "musare-theme";
@import "colors";
@import "breakpoints";
@import url("https://fonts.googleapis.com/css?family=Roboto:100,400,500,700");

html, body {
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	min-width: 320px;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

* {
	padding: 0;
	margin: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}

h1 {
	text-shadow: 0 3px 6px $musare_shadow_color;
	color: $musare_color_primary_gray;
	text-align: center;
}

main {
	margin-left: auto;
	margin-right: auto;

	.custom-messages {
		border-style: solid;

		&.custom-messages-error {
			border-color: $musare_color_primary_red;
			color: $musare_color_primary_red;
		}

		&.custom-messages-info {
			border-color: $musare_color_dark_blue;
			color: $musare_color_dark_blue;
		}

		&.custom-messages-success {
			border-color: $musare_color_green;
			color: $musare_color_green;
		}

		p {
			font-weight: 600;
		}

		ul {
			list-style-position: inside;
		}
	}
}

@include responsive(smallest) {
	h1 {
		font-size: 32px;
		line-height: 43px;
		margin-bottom: 16px;
	}

	main {
		margin-top: 16px;
		width: calc(100% - 20px);

		.custom-messages {
			border-width: 1px;
			padding: 8px;
			margin-bottom: 12px;

			p {
				font-size: 16px;
				line-height: 21px;
				margin-bottom: 8px;
			}

			ul {
				li {
					font-size: 14px;
					line-height: 19px;
				}
			}
		}
	}
}

@include responsive(small) {
	h1 {
		font-size: 60px;
		line-height: 80px;
		margin-bottom: 52px; // TODO Check if this shouldn't be 32px
	}

	main {
		margin-top: 32px;
		width: calc(100% - 40px);

		.custom-messages {
			border-width: 2px;
			padding: 16px;
			margin-bottom: 26px;

			p {
				font-size: 29px;
				line-height: 38px;
				margin-bottom: 16px;
			}

			ul {
				li {
					font-size: 23px;
					line-height: 31px;
				}
			}
		}
	}
}

@include responsive(medium) {
	h1 {
		font-size: 90px;
		line-height: 120px;
		margin-bottom: 51px; // TODO Check if this shouldn't be 48px
	}

	main {
		margin-top: 48px;
		width: calc(100% - 60px);

		.custom-messages {
			border-width: 2px;
			padding: 24px;
			margin-bottom: 39px;

			p {
				font-size: 43px;
				line-height: 57px;
				margin-bottom: 24px;
			}

			ul {
				li {
					font-size: 34px;
					line-height: 46px;
				}
			}
		}
	}
}

@include responsive(large) {
	h1 {
		font-size: 48px;
		line-height: 64px;
		margin-bottom: 32px;
	}

	main {
		margin-top: 32px;
		width: 500px;

		.custom-messages {
			border-width: 2px;
			padding: 16px;
			margin-bottom: 32px;

			p {
				font-size: 28px;
				line-height: 37px;
				margin-bottom: 16px;
			}

			ul {
				li {
					font-size: 24px;
					line-height: 32px;
				}
			}
		}
	}
}

@include responsive(largest) {
	main {
		width: 800px;
	}
}