CosmeticsStore / assets /scss /config /_variables.scss
thulieu's picture
Upload 40 files
c9ba648 verified
/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Montagu+Slab:wght@500&family=Montserrat:wght@400;500;600&display=swap");
/*=============== VARIABLES CSS ===============*/
:root {
--header-height: 3.5rem;
/*========== Colors ==========*/
/*Color mode HSL(hue, saturation, lightness)*/
--first-color: #5e0011;
--title-color: hsl(230, 70%, 16%);
--text-color: hsl(230, 16%, 45%);
--border-color: #a67c87;
--white-color: hsl(0, 0%, 100%);
--body-color: #f2dce0;
--container-color: #f2c4d0;
/*========== Font and typography ==========*/
/*.5rem = 8px | 1rem = 16px ...*/
--body-font: "Montserrat", sans-serif;
--second-font: "Montagu Slab", serif;
--biggest-font-size: 2rem;
--h1-font-size: 1.5rem;
--h2-font-size: 1.25rem;
--h3-font-size: 1rem;
--normal-font-size: 0.938rem;
--small-font-size: 0.813rem;
--smaller-font-size: 0.75rem;
// Responsive typography
@media screen and (min-width: 1150px) {
--biggest-font-size: 3.5rem;
--h1-font-size: 2.25rem;
--h2-font-size: 1.5rem;
--h3-font-size: 1.25rem;
--normal-font-size: 1rem;
--small-font-size: 0.875rem;
--smaller-font-size: 0.813rem;
}
/*========== Font weight ==========*/
--font-regular: 400;
--font-medium: 500;
--font-semi-bold: 600;
/*========== z index ==========*/
--z-tooltip: 10;
--z-fixed: 100;
}