julienmonnerie/assets/css/partials/_variables.scss

// ----------------------------------------------------------------------------
// VARIABLES
// ----------------------------------------------------------------------------

:root {

	// Fonts

	--text-font-family: 'Open Sans', Verdana, sans-serif;
	--title-font-family: 'Open Sans', Verdana, sans-serif;
	--regular-font-weight: 400;
	--medium-font-weight: 500;
	--semi-bold-font-weight: 600;
	--bold-font-weight: 700;
	--text-font-size: 0.8rem;
	--footnote-font-size: 0.6rem;
	--h1-font-size: 1.6rem;
	--h2-font-size: 1.2rem;
	--h3-font-size: 1rem;

	// Dimensions

	--icon-size: 2rem;
	--header-bar-vertical-padding: 2rem;
	--header-bar-horizontal-padding: 1rem;

	// Colors

	--black: #000;
	--transparent-black: rgba(0, 0, 0, 0.6);
	--white: #fff;
	--transparent-white: rgba(255, 255, 255, 0.9);
	--feldgrau: #4B6259;
}

// Media queries

$tablet-media-query: 48rem;
$desktop-media-query: 62rem;

@media screen and (min-width: $tablet-media-query) {

	:root {

		// Fonts

		--text-font-size: 1rem;
		--footnote-font-size: 0.8rem;
		--h1-font-size: 1.8rem;
		--h2-font-size: 1.4rem;
		--h3-font-size: 1.2rem;

		// Dimensions

		--icon-size: 2.5rem;
		--header-bar-vertical-padding: 4rem;
		--header-bar-horizontal-padding: 2rem;
	}
}